{% extends 'base_materio.html.twig' %}

{% form_theme form
    'bootstrap_5_layout.html.twig'
    '@FOSCKEditor/Form/ckeditor_widget.html.twig'
    'caso/themes/caso-materio-theme.html.twig'
%}

{% block title %}Caso N° {{ caso.numero|default(caso.id) }} - Estudio Souilhé{% endblock %}

{% block header_title %}Edición y Seguimiento de Caso{% endblock %}

{% block body %}
<div class="container-fluid px-0">
    <!-- Header Card -->
    <div class="card card-materio mb-4">
        <div class="card-body">
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3">
                <div>
                    <div class="d-flex flex-wrap align-items-center gap-2 mb-2">
                        <span class="badge bg-primary px-3 py-2 rounded-pill fs-7">
                            <i class="bx bx-folder me-1"></i> Caso N°: {{ caso.numero|default(caso.id) }}
                        </span>
                        <span class="badge badge-soft-info px-3 py-2 rounded-pill fs-7">
                            <i class="bx bx-git-branch me-1"></i> Etapa: {{ caso.etapa(1) }}
                        </span>
                        {% if caso.pasaAjuicio == 1 %}
                            <span class="badge bg-danger px-3 py-2 rounded-pill fs-7">
                                <i class="bx bx-gavel me-1"></i> PASÓ A JUICIO
                            </span>
                        {% endif %}
                        {% if caso.finalizado %}
                            <span class="badge bg-dark px-3 py-2 rounded-pill fs-7">
                                <i class="bx bx-check-double me-1"></i> FINALIZADO
                            </span>
                        {% endif %}
                    </div>
                    <h3 class="mb-1 text-dark fw-bold">
                        {{ caso.caratula|default('S/D - Sin Carátula Asignada') }}
                    </h3>
                    <p class="text-muted mb-0 small">
                        Iniciado: {{ caso.createdAt ? caso.createdAt|date('d/m/Y') : 'S/D' }}
                        {% if caso.fechaFinalizado %}
                            | Finalizado: {{ caso.fechaFinalizado|date('d/m/Y') }}
                        {% endif %}
                        | Aseguradora: <strong>{{ caso.aseguradora ? caso.aseguradora.nombre : 'No asignada' }}</strong>
                    </p>
                </div>

                <div class="d-flex flex-wrap gap-2">
                    {% if not caso.finalizado %}
                        <a href="{{ path('caso_anular', {'id': caso.id}) }}" class="btn btn-outline-danger rounded-pill px-3">
                            <i class="bx bx-trash me-1"></i> Anular
                        </a>
                        <form method="post" action="{{ path('caso_finalizar', {'id': caso.id}) }}" class="d-inline" onsubmit="return confirm('¿Está seguro de marcar este caso como FINALIZADO?');">
                            <button type="submit" class="btn btn-outline-dark rounded-pill px-3">
                                <i class="bx bx-check me-1"></i> Finalizar Caso
                            </button>
                        </form>
                    {% else %}
                        <form method="post" action="{{ path('caso_reabrir', {'id': caso.id}) }}" class="d-inline" onsubmit="return confirm('¿Desea reabrir este caso?');">
                            <button type="submit" class="btn btn-outline-primary rounded-pill px-3">
                                <i class="bx bx-redo me-1"></i> Reabrir Caso
                            </button>
                        </form>
                    {% endif %}
                    <button type="button" class="btn btn-success rounded-pill px-4 btn-guardar-header" id="btn-header-guardar-caso" onclick="guardarCasoForm();">
                        <i class="bx bx-save me-1"></i> Guardar Caso
                    </button>
                </div>
            </div>

            <!-- Progreso de Etapas -->
            <div class="mt-4 pt-3 border-top">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <span class="fw-semibold text-muted small text-uppercase"><i class="bx bx-line-chart me-1"></i> Flujo de Avance del Caso</span>
                    <span class="badge badge-soft-primary">{{ caso.etapa(1) }}</span>
                </div>
                {{ include('caso/etapas_progress.html.twig') }}
            </div>
        </div>
    </div>

    <!-- Pestañas de Navegación Modular (Tabs) -->
    <ul class="nav nav-tabs nav-fill mb-4 card-materio p-2 flex-wrap" id="casoTab" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active fw-bold py-3" id="tab-personas-btn" data-bs-toggle="tab" data-bs-target="#tab-personas" type="button" role="tab">
                <i class="bx bx-group me-1 fs-5"></i> 1. Personas
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link fw-bold py-3" id="tab-siniestro-btn" data-bs-toggle="tab" data-bs-target="#tab-siniestro" type="button" role="tab">
                <i class="bx bx-car me-1 fs-5"></i> 2. Siniestro
            </button>
        </li>
        {% if caso.id is not empty and caso.fechaAccidente is not empty %}
        <li class="nav-item" role="presentation">
            <button class="nav-link fw-bold py-3" id="tab-reclamo-btn" data-bs-toggle="tab" data-bs-target="#tab-reclamo" type="button" role="tab">
                <i class="bx bx-envelope me-1 fs-5"></i> 3. Reclamo
            </button>
        </li>
        {% endif %}

        {% set seguroHabilitado = caso.reclamo is not empty and caso.reclamo.id is not empty %}
        <li class="nav-item" role="presentation" {% if not seguroHabilitado %}title="Complete y guarde el Reclamo para habilitar Seguro"{% endif %}>
            <button class="nav-link fw-bold py-3 {% if not seguroHabilitado %}text-muted disabled{% endif %}" id="tab-seguro-btn" data-bs-toggle="tab" data-bs-target="#tab-seguro" type="button" role="tab" {% if not seguroHabilitado %}style="cursor: not-allowed; opacity: 0.65;"{% endif %}>
                {% if not seguroHabilitado %}<i class="bx bx-lock-alt me-1 text-warning"></i>{% else %}<i class="bx bx-shield-quarter me-1 fs-5"></i>{% endif %} 4. Seguro
            </button>
        </li>

        <li class="nav-item" role="presentation">
            <button class="nav-link fw-bold py-3" id="tab-doc-btn" data-bs-toggle="tab" data-bs-target="#tab-doc" type="button" role="tab">
                <i class="bx bx-folder me-1 fs-5"></i> 5. Documentación
                {% if docsFaltantes is defined and docsFaltantes|length > 0 %}
                    <span class="badge bg-danger ms-1 rounded-pill" id="tab-doc-badge">{{ docsFaltantes|length }}</span>
                {% endif %}
            </button>
        </li>

        {% if is_granted('ROLE_SECRETARIO') %}
        <li class="nav-item" role="presentation">
            <button class="nav-link fw-bold py-3" id="tab-gastos-btn" data-bs-toggle="tab" data-bs-target="#tab-gastos" type="button" role="tab">
                <i class="bx bx-money me-1 fs-5"></i> 6. Gastos
            </button>
        </li>
        {% endif %}

        {% set vistaMedicaHabilitada = caso.etapa > constant('App\\Utils\\Etapas::ETAPA_PRESENTACION_CARPETA') %}
        <li class="nav-item" role="presentation" {% if not vistaMedicaHabilitada %}title="Requiere haber presentado la carpeta sin documentaciones obligatorias pendientes"{% endif %}>
            <button class="nav-link fw-bold py-3 {% if not vistaMedicaHabilitada %}text-muted disabled{% endif %}" id="tab-medica-btn" data-bs-toggle="tab" data-bs-target="#tab-medica" type="button" role="tab" {% if not vistaMedicaHabilitada %}style="cursor: not-allowed; opacity: 0.65;"{% endif %}>
                {% if not vistaMedicaHabilitada %}<i class="bx bx-lock-alt me-1 text-warning"></i>{% else %}<i class="bx bx-health me-1 fs-5"></i>{% endif %} 7. Vista Médica
            </button>
        </li>

        {% if is_granted('ROLE_NEGOCIADOR') %}
        {% set negociacionHabilitada = caso.vistaMedicaCompletada == 1 and caso.pactoCuotaLitis is not null %}
        <li class="nav-item" role="presentation" {% if not negociacionHabilitada %}title="Requiere Vista Médica completada y Pacto de Cuota Litis registrado"{% endif %}>
            <button class="nav-link fw-bold py-3 {% if not negociacionHabilitada %}text-muted disabled{% endif %}" id="tab-negociacion-btn" data-bs-toggle="tab" data-bs-target="#tab-negociacion" type="button" role="tab" {% if not negociacionHabilitada %}style="cursor: not-allowed; opacity: 0.65;"{% endif %}>
                {% if not negociacionHabilitada %}<i class="bx bx-lock-alt me-1 text-warning"></i>{% else %}<i class="bx bx-conversation me-1 fs-5"></i>{% endif %} 8. Negociación
            </button>
        </li>

        {% set convenioHabilitado = caso.negociacionAceptada %}
        <li class="nav-item" role="presentation" {% if not convenioHabilitado %}title="Requiere Negociación Aceptada por la aseguradora"{% endif %}>
            <button class="nav-link fw-bold py-3 {% if not convenioHabilitado %}text-muted disabled{% endif %}" id="tab-convenio-btn" data-bs-toggle="tab" data-bs-target="#tab-convenio" type="button" role="tab" {% if not convenioHabilitado %}style="cursor: not-allowed; opacity: 0.65;"{% endif %}>
                {% if not convenioHabilitado %}<i class="bx bx-lock-alt me-1 text-warning"></i>{% else %}<i class="bx bx-file-blank me-1 fs-5"></i>{% endif %} 9. Convenio & Facturación
            </button>
        </li>
        {% endif %}
    </ul>

    <!-- FORMULARIO PRINCIPAL QUE ENGLOBA LAS PESTAÑAS -->
    {{ form_start(form, {'attr': {'id': 'form-edit-caso', 'class': 'needs-validation', 'novalidate': 'novalidate'}}) }}
        {{ form_errors(form) }}

        <div class="tab-content px-0">
            <!-- PESTAÑA 1: PERSONAS INVOLUCRADAS -->
            <div class="tab-pane fade show active" id="tab-personas" role="tabpanel">
                {{ include('caso/_tab_personas.html.twig') }}
            </div>

            <!-- PESTAÑA 2: SINIESTRO Y VEHÍCULOS -->
            <div class="tab-pane fade" id="tab-siniestro" role="tabpanel">
                {{ include('caso/_tab_siniestro.html.twig') }}
            </div>

            {% if caso.id is not empty and caso.fechaAccidente is not empty and form.reclamo is defined %}
            <!-- PESTAÑA 3: RECLAMO AL SEGURO (CKEDITOR) -->
            <div class="tab-pane fade" id="tab-reclamo" role="tabpanel">
                {{ include('caso/_tab_reclamo.html.twig') }}
            </div>
            {% endif %}

            <!-- PESTAÑA 4: SEGURO Y COBERTURA -->
            <div class="tab-pane fade" id="tab-seguro" role="tabpanel">
                {% if seguroHabilitado and form.tieneSeguro is defined %}
                    {{ include('caso/_tab_seguro.html.twig') }}
                {% else %}
                    <div class="card card-materio border text-center p-5">
                        <div class="py-4">
                            <i class="bx bx-lock-alt text-warning display-4 mb-3"></i>
                            <h4 class="fw-bold text-dark">Pestaña de Seguro Bloqueada</h4>
                            <p class="text-muted mb-4">Para gestionar la compañía aseguradora y cobertura, primero debe completar y guardar el <strong>Reclamo al Seguro</strong>.</p>
                            <button type="button" class="btn btn-primary rounded-pill px-4" onclick="document.getElementById('tab-reclamo-btn').click();">
                                <i class="bx bx-envelope me-1"></i> Ir a Cargar Reclamo
                            </button>
                        </div>
                    </div>
                {% endif %}
            </div>

            <!-- PESTAÑA 5: DOCUMENTACIÓN -->
            <div class="tab-pane fade" id="tab-doc" role="tabpanel">
                {{ include('caso/_tab_documentacion.html.twig') }}
            </div>

            <!-- PESTAÑA 6: GASTOS (ROLE_SECRETARIO) -->
            {% if is_granted('ROLE_SECRETARIO') %}
            <div class="tab-pane fade" id="tab-gastos" role="tabpanel">
                {{ include('caso/_tab_gastos.html.twig') }}
            </div>
            {% endif %}

            <!-- PESTAÑA 7: VISTA MÉDICA -->
            <div class="tab-pane fade" id="tab-medica" role="tabpanel">
                {% if vistaMedicaHabilitada %}
                    {{ include('caso/_tab_vistas_medicas.html.twig') }}
                {% else %}
                    <div class="card card-materio border text-center p-5">
                        <div class="py-4">
                            <i class="bx bx-lock-alt text-warning display-4 mb-3"></i>
                            <h4 class="fw-bold text-dark">Vista Médica Bloqueada</h4>
                            <p class="text-muted mb-4">Esta etapa se habilitará una vez presentada la carpeta médica y completadas todas las documentaciones obligatorias del caso.</p>
                            <button type="button" class="btn btn-outline-primary rounded-pill px-4" onclick="document.getElementById('tab-doc-btn').click();">
                                <i class="bx bx-folder me-1"></i> Ver Documentación Pendiente
                            </button>
                        </div>
                    </div>
                {% endif %}
            </div>

            <!-- PESTAÑA 8: NEGOCIACIÓN (ROLE_NEGOCIADOR) -->
            {% if is_granted('ROLE_NEGOCIADOR') %}
            <div class="tab-pane fade" id="tab-negociacion" role="tabpanel">
                {% if negociacionHabilitada %}
                    {{ include('caso/_tab_negociacion.html.twig') }}
                {% else %}
                    <div class="card card-materio border text-center p-5">
                        <div class="py-4">
                            <i class="bx bx-lock-alt text-warning display-4 mb-3"></i>
                            <h4 class="fw-bold text-dark">Negociación Bloqueada</h4>
                            <p class="text-muted mb-4">Para habilitar la negociación con la aseguradora, se requiere haber completado la <strong>Vista Médica</strong> y registrado el <strong>Pacto de Cuota Litis</strong>.</p>
                        </div>
                    </div>
                {% endif %}
            </div>
            {% endif %}

            <!-- PESTAÑA 9: CONVENIO & FACTURACIÓN (ROLE_NEGOCIADOR) -->
            {% if is_granted('ROLE_NEGOCIADOR') %}
            <div class="tab-pane fade" id="tab-convenio" role="tabpanel">
                {% if convenioHabilitado %}
                    {{ include('caso/_tab_convenio_facturacion.html.twig') }}
                {% else %}
                    <div class="card card-materio border text-center p-5">
                        <div class="py-4">
                            <i class="bx bx-lock-alt text-warning display-4 mb-3"></i>
                            <h4 class="fw-bold text-dark">Convenio y Facturación Bloqueado</h4>
                            <p class="text-muted mb-4">Para cargar el convenio y liquidación, primero debe existir una <strong>Negociación Aceptada</strong> por la aseguradora.</p>
                        </div>
                    </div>
                {% endif %}
            </div>
            {% endif %}
        </div>
        {{ form_widget(form._token) }}
    {{ form_end(form, {'render_rest': false}) }}
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script src="{{ asset('bundles/fosckeditor/ckeditor.js') }}"></script>
{{ include('caso/_caso_clientes_js.html.twig') }}

<script>
window.CASO_ETAPA = {{ caso.etapa|default(10) }};

document.addEventListener('DOMContentLoaded', function() {
    // 1. Redimensionar CKEditor al 100% cuando el usuario abre la pestaña Reclamo
    const reclamoTabBtn = document.getElementById('tab-reclamo-btn');
    if (reclamoTabBtn) {
        reclamoTabBtn.addEventListener('shown.bs.tab', function() {
            if (typeof CKEDITOR !== 'undefined') {
                for (const instanceName in CKEDITOR.instances) {
                    if (CKEDITOR.instances.hasOwnProperty(instanceName)) {
                        try {
                            CKEDITOR.instances[instanceName].resize('100%');
                        } catch (e) {
                            console.warn('Resize CKEditor:', e);
                        }
                    }
                }
            }
        });
    }

    // 2. Carga dinámica de contenido de Reclamo al cambiar el Tipo de Reclamo
    $(document).on('change', '.tipoReclamo', function() {
        const tipoReclamo = $(this).val();
        const casoId = '{{ caso.id }}';

        if (tipoReclamo && casoId) {
            let url = "{{ path('get_reclamo_contenido', {'tipo': '__TIPO__', 'caso': '__CASO__' }) }}"
                .replace('__TIPO__', encodeURIComponent(tipoReclamo))
                .replace('__CASO__', encodeURIComponent(casoId));

            $.ajax({
                type: "POST",
                url: url,
                data: { tipo: tipoReclamo, caso: casoId },
                success: function(data) {
                    if (typeof CKEDITOR !== 'undefined') {
                        const editor = CKEDITOR.instances['CasoPrincipalType_reclamo_contenido']
                                    || CKEDITOR.instances['CasoType_reclamo_contenido']
                                    || Object.values(CKEDITOR.instances)[0];
                        if (editor) {
                            editor.setData(data);
                        }
                    }
                },
                error: function(err) {
                    console.error('Error al obtener contenido de reclamo:', err);
                }
            });
        }
    });
});
</script>
{% endblock %}