{% extends "base.html" %}

{% block title %}Campos Personalizados (Pro){% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-4">
        <div class="card p-4 border-primary">
            <h4 class="fw-bold mb-4">Agregar Campo</h4>
            <form method="post">
                {% csrf_token %}
                <div class="mb-3">
                    <label class="form-label">Tipo de Cita</label>
                    {{ form.appointment_type }}
                </div>
                <div class="mb-3">
                    <label class="form-label">Etiqueta</label>
                    {{ form.label }}
                </div>
                <div class="mb-3">
                    <label class="form-label">Slug</label>
                    {{ form.slug }}
                </div>
                <div class="mb-3">
                    <label class="form-label">Tipo de Campo</label>
                    {{ form.field_type }}
                </div>
                <div class="mb-3 form-check">
                    {{ form.is_required }}
                    <label class="form-check-label">Es obligatorio</label>
                </div>
                <button type="submit" class="btn btn-primary w-100">Agregar Campo</button>
            </form>
        </div>
    </div>

    <div class="col-md-8">
        <h2 class="fw-bold mb-4">Tus Campos Personalizados</h2>
        <div class="card border-0 shadow-sm">
            <table class="table table-hover align-middle mb-0">
                <thead class="bg-light">
                    <tr>
                        <th class="ps-4">Servicio</th>
                        <th>Etiqueta</th>
                        <th>Tipo</th>
                        <th>Oblig.</th>
                        <th class="text-end pe-4">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in fields %}
                    <tr>
                        <td class="ps-4 fw-medium">{{ item.appointment_type.name }}</td>
                        <td>{{ item.label }}</td>
                        <td>{{ item.get_field_type_display }}</td>
                        <td>{% if item.is_required %}Sí{% else %}No{% endif %}</td>
                        <td class="text-end pe-4">
                            <button class="btn btn-link text-danger p-0">Eliminar</button>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="5" class="text-center py-4 text-muted">No has definido campos personalizados.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<style>
    input,
    select {
        width: 100%;
        padding: 0.5rem;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
    }
</style>
{% endblock %}