{% 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 %}Nuevo Caso - Estudio Souilhé{% endblock %}

{% block header_title %}Creación de Nuevo 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>
                    <nav aria-label="breadcrumb" class="mb-1">
                        <ol class="breadcrumb mb-0 small">
                            <li class="breadcrumb-item"><a href="{{ path('caso_index') }}">Casos</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Nuevo Caso</li>
                        </ol>
                    </nav>
                    <h3 class="mb-0 text-dark fw-bold">
                        <i class="bx bx-folder-plus me-2 text-primary"></i> Iniciar Nuevo Caso
                    </h3>
                </div>
                <div class="d-flex gap-2">
                    <a href="{{ path('caso_index') }}" class="btn btn-outline-secondary rounded-pill px-4">
                        <i class="bx bx-arrow-back me-1"></i> Volver al Listado
                    </a>
                    <button type="button" class="btn btn-success rounded-pill px-4 btn-guardar-header" id="btn-header-nuevo-caso" onclick="guardarCasoForm();">
                        <i class="bx bx-save me-1"></i> Crear Caso
                    </button>
                </div>
            </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="nuevoCasoTab" 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>
    </ul>

    <!-- FORMULARIO PRINCIPAL DE ALTA DE CASO -->
    {{ form_start(form, {'attr': {'id': 'form-nuevo-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>
        </div>
        {{ form_widget(form._token) }}
    {{ form_end(form, {'render_rest': false}) }}
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
{{ include('caso/_caso_clientes_js.html.twig') }}
{% endblock %}