{# ============================================================ 
   BLOQUE SUPERIOR FIJO (CABECERA DEL EXPEDIENTE)
   ============================================================ #}

<div class="p-4 mb-4" style="border:1px solid #e5e7eb; border-radius:8px; background:#fff;">
    
    <div class="row g-4">

        <!-- Nº EXPEDIENTE -->
        <div class="col-md-2">
            <label class="form-label fw-bold">N.º expediente</label>

            <input type="text"
                class="form-control"
                value="{{ expediente.codigo }}"
                readonly>
        </div>

        <!-- Nombre -->
        <div class="col-md-3">
            {{ form_row(form.persona.nombre) }}
        </div>

        <!-- Apellidos -->
        <div class="col-md-4">
            {{ form_row(form.persona.apellidos) }}
        </div>

    </div>
</div>


{# ============================================================
   PESTAÑA PRINCIPAL: DATOS INICIALES
   ============================================================ #}

<ul class="nav nav-pills bizka-tabs mt-5">
    <li class="nav-item">
        <a class="nav-link active" data-bs-toggle="tab" href="#tabDatosIniciales">
            Datos iniciales
        </a>
    </li>
    {# ============================================================
    PESTAÑA VALORACIONES SOLO EN EDICIÓN
    ============================================================ #}
    {% if expediente.id is defined and expediente.id is not null %}
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#tabValoraciones">Valoraciones exclusión</a>
        </li>
    {% endif %}
    <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#tabAmbitoEstatusAdministrativo">
            Estatus administrativo
        </a>
    </li>
        <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#tabAmbitoSalud">
            Salud
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#tabAmbitoEmocionalRelacional">
            Emocional/Relacional
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#tabAmbitoAyudasSociales">
            Ayudas sociales
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#tabAmbitoVivienda">
            Vivienda
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#tabAmbitoLegal">
            Legal
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#tabAmbitoFormativoLaboral">
            Formativo laboral
        </a>
    </li>
</ul>

<div class="tab-content mt-5">

    {# ============================================================
       TAB 1: DATOS INICIALES (SIEMPRE)
       ============================================================ #}

    <div id="tabDatosIniciales" class="tab-pane fade show active">

        {# BLOQUE 1: DATOS PERSONA #}
        <div class="row g-4 mt-5">

            <div class="col-md-2">
                {{ form_row(form.persona.genero) }}
            </div>

            <div class="col-md-2">
                {{ form_row(form.persona.fechaNacimiento) }}
            </div>

            <div class="col-md-2">
                {{ form_row(form.persona.procedencia) }}
            </div>

            <div class="col-md-2">
                {{ form_row(form.persona.regionNacimiento) }}
            </div>

            <div class="col-md-2">
                {{ form_row(form.persona.lugarNacimiento) }}
            </div>

            <div class="col-md-2">
                {{ form_row(form.persona.telefono) }}
            </div>

        </div>

        {# BLOQUE 2: DOCUMENTACIÓN #}
        <h5 class="fw-bold mt-4 mt-5">Documentación</h5>

        <div class="row g-4 mb-4">

            <div class="col-md-2">
                {{ form_row(form.persona.tieneDni) }}
            </div>

            <div class="col-md-2" id="dniNumeroWrapper">
                {{ form_row(form.persona.dniNumero) }}
            </div>

            <div class="col-md-2">
                {{ form_row(form.persona.tieneNie) }}
            </div>

            <div class="col-md-2" id="nieNumeroWrapper">
                {{ form_row(form.persona.nieNumero) }}
            </div>

            <div class="col-md-2">
                {{ form_row(form.persona.tienePasaporte) }}
            </div>

            <div class="col-md-2" id="pasaporteNumeroWrapper">
                {{ form_row(form.persona.pasaporteNumero) }}
            </div>

        </div>

        {# BLOQUE 3: DATOS EXPEDIENTE #}
        <h5 class="fw-bold mt-4 mt-5">Expediente</h5>

        <div class="row g-4 mb-4">

            <div class="col-md-2">
                {{ form_row(form.fechaEntrada) }}
            </div>

            {% if form.fechaCierre is defined %}
                <div class="col-md-3">
                    {{ form_row(form.fechaCierre) }}
                </div>

                <div class="col-md-3">
                    {{ form_row(form.motivoCierre) }}
                </div>
            {% endif %}

            <div class="col-md-2">
                {{ form_row(form.estadoSerologico) }}
            </div>

            <div class="col-md-2">
                {{ form_row(form.situacionVivienda) }}
            </div>

            <div class="col-md-2">
                {{ form_row(form.domiciliadoEkinez) }}
            </div>

            <div class="col-md-2">
                {{ form_row(form.consentimientoDatos) }}
            </div>

        </div>

    </div> {# FIN TAB DATOS INICIALES #}



    {# ============================================================
       TAB 2: VALORACIONES (SOLO EN EDICIÓN)
       ============================================================ #}

    {% if expediente.id is defined and expediente.id is not null %}
        <div id="tabValoraciones" class="tab-pane fade">

            <!-- HEADER DE LA PESTAÑA -->
            <div class="d-flex justify-content-between align-items-center mb-5">
                <div class="d-flex align-items-center">
                    <div class="page-title-icon" style="width: 44px; height: 44px;">
                        <i class="fa-solid fa-clipboard-list fs-3"></i>
                    </div>
                    <h3 class="fw-bold text-dark ms-3 mb-0">Valoraciones de exclusión</h3>
                </div>

                <button id="btnNuevaValoracion"
                        type="button"
                        class="btn btn-orange fw-bold"
                        data-url-nueva="{{ path('valoracion_new_ajax', { id: expediente.id }) }}">
                    <i class="fa-solid fa-plus me-2"></i> Nueva valoración
                </button>
            </div>


            <!-- TABLA -->
            <div class="section-box">
                <div class="table-responsive">

                    <table id="tablaValoraciones"
                        class="table table-striped align-middle table-row-dashed fs-6 gy-5"
                        data-url-listado="{{ path('expediente_valoraciones_server', { id: expediente.id }) }}"
                        style="width:100%;">

                        <thead class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                            <tr>
                                <th>Fecha</th>
                                <th>Estado</th>
                                <th>Creado por</th>
                                <th style="width:120px;">Acciones</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    {% endif %}

    {# ============================================================
       TAB 8: ÁMBITO LEGAL (SIEMPRE)
       ============================================================ #}
    <div id="tabAmbitoLegal" class="tab-pane fade">

        <!-- HEADER UNIFICADO -->
        <div class="d-flex align-items-center gap-3 mb-4">
            <div class="page-title-icon" style="width: 44px; height: 44px;">
                <i class="fa-solid fa-scale-balanced fs-3"></i>
            </div>

            <h3 class="fw-bold text-dark mb-0">Ámbito legal</h3>

            {% if expediente.id and not ultimoAmbito %}
                <button id="btnNuevoAmbitoLegal"
                    type="button"
                    class="btn btn-orange fw-bold ms-3"
                    data-url="{{ path('ambito_legal_new', { id: expediente.id }) }}">
                    <i class="fa-solid fa-plus me-2"></i> Nuevo registro
                </button>
            {% endif %}
        </div>

        {% if expediente.id %}
            <!-- HISTÓRICO -->
<div class="bizka-card">

    <div class="bizka-card-title">
        <i class="fa-solid fa-clock-rotate-left"></i>
        Historial de registros legales
    </div>

    <!-- FIX DEL RESPONSIVE -->
    <div class="table-responsive">
        <table id="tablaAmbitoLegal"
               class="table align-middle table-row-dashed fs-6 gy-4"
               data-expediente="{{ expediente.id }}"
               data-url-json="{{ path('ambito_legal_list_json', { id: expediente.id }) }}">
            <thead class="bg-light">
                <tr>
                    <th></th>  {# Columna responsive #}
                    <th>Fecha</th>
                    <th style="display:none;">Orden</th>
                    <th>Tipo</th>
                    <th>Causas pendientes</th>
                    <th>Penas cumplidas</th>
                    <th>Penas pendientes</th>
                    <th>Trabajos BC</th>
                    <th>Profesional</th>
                    <th class="text-end">Acciones</th>
                </tr>
            </thead>
        </table>
    </div>
</div>


        {% else %}
            <div class="alert alert-info mt-3">
                Debes guardar el expediente antes de añadir registros legales.
            </div>
        {% endif %}
    </div>

</div>


{# ============================================================
   BOTÓN GUARDAR
   ============================================================ #}

<div class="d-flex justify-content-end mt-4">
    <button type="submit" class="btn btn-primary fw-bold">
        <i class="fa-solid fa-floppy-disk me-2"></i> Guardar
    </button>
</div>