@push('css')
<link rel="stylesheet" href="{{ asset('/assets/custom/steps/jquery.steps.css') }}" />
<link rel="stylesheet" href="{{ asset('/assets/custom/select2/css/select2.min.css') }}" />
<style>
    .select2-container .select2-selection--single {
        height: 38px;
        border: 1px solid #ccc !important;
        border-radius: .375rem;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #12263f;
        line-height: 38px;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 38px;
    }

    .select2-container--default .select2-selection--single .select2-selection__placeholder {
        color: #12263f;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow b {
        display: none;
    }
</style>
<style>
    .wizard>.content {
        overflow-x: hidden !important;
        height: 40vh;
    }

    .wizard>.actions>ul>li:nth-child(3)>a {
        background-color: #00d97e !important;
    }
</style>
@endpush
<div>
    <style>
        #loader {
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 9999;
            background: rgba(255, 255, 255, 0.5);
            text-align: center;
            display: none;
            justify-content: center;
            align-items: center;
        }

        .select2-container {
            z-index: 1055;
        }

        .row {
            justify-content: center;
        }
    </style>
    <div id="loader">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>

    <div class="header">
        <div class="header-body">
            <div class="row align-items-center">
                <div class="col">
                    <h1 class="header-title">
                        Solicitudes GMM
                    </h1>
                </div>
                <div class="col-auto">
                    @can('solicitudes-gmm')
                    <button class="btn btn-success lift" data-bs-toggle="modal" data-bs-target="#modalImportar">
                        <i class="bi bi-file-excel"></i>
                        Importar Excel
                    </button>
                    <button class="btn btn-primary lift" wire:click="modalOpen(0)" id="nvSolicitud">
                        <i class="bi bi-clipboard-plus"></i>
                        Nueva Solicitud
                    </button>
                    @endcan
                </div>
            </div>
        </div>
    </div>

    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <livewire:gmm-solicitudes.gmm-solicitudes-table />
            </div>
        </div>
    </div>

    <!-- Modal Bootstrap -->
    <div class="modal fade" id="modalSolicitud" tabindex="-1" role="dialog" aria-labelledby="modalSolicitudLabel" aria-hidden="true" data-bs-focus="false" wire:ignore.self>
        <div class="modal-dialog modal-dialog-centered modal-xl justify-content-center" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalSolicitudLabel">
                        {{ $isEditing ? 'Editar Solicitud' : 'Nueva Solicitud' }}
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="form-group">
                    <form id="solicitudForm" wire:ignore class="p-4">
                        <!-- Paso 1 -->
                        <h4>Datos de OT</h4>
                        <section>
                            <div class="row">
                                <div class="col-md-6">
                                    <label for="empleado_id">Asesor <span class="text-danger">*</span></label>
                                    <select wire:model.defer="solicitudData.empleado_id" class="form-control" id="empleado_id" name="solicitudData.empleado_id" required>
                                        <option value="">Seleccionar Asesor</option>
                                        @foreach ($empleados as $id => $nombre)
                                        <option value="{{ $id }}">{{ $nombre }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-6">
                                    <label for="estatus" class="form-label">Estatus <span class="text-danger">*</span></label>
                                    <select wire:model.defer="solicitudData.estatus_id" class="form-control" id="estatus" name="solicitudData.estatus_id" required>
                                        <option value="">Selecciona una opción</option>
                                        @foreach ($estatus as $id => $nombre)
                                        <option value="{{ $id }}">{{ $nombre }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="folio" class="form-label">Folio</label>
                                        <input wire:model.defer="solicitudData.folio" type="text" class="form-control" id="folio" name="solicitudData.folio">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="poliza" class="form-label">Póliza</label>
                                        <input wire:model.defer="solicitudData.poliza" type="text" class="form-control" id="poliza" name="solicitudData.poliza">
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-12" id="comments-wrapper" style="display: none;">
                                <div class="form-group">
                                    <label for="comentarios" class="form-label">Comentarios</label>
                                    <div id="container-comentarios" class="border rounded p-2 bg-light">
                                        <div id="msgs" style="display: flex; flex-direction: column; max-height: 150px; overflow-y: auto; margin-bottom: 10px;">
                                            <!-- Comments will be loaded here -->
                                        </div>
                                        <div class="input-group">
                                            <textarea name="comment" id="comment" class="form-control" rows="2" placeholder="Escribe un comentario..."></textarea>
                                            <button class="btn btn-success" id="sendComment" type="button">
                                                <i class="bi bi-send"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </section>
                        <h4>Datos del Cliente</h4>
                        <section>
                            <div class="row">
                                <div class="col-md-12 mb-3">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="persona_moral" name="solicitudData.persona_moral" wire:model.defer="solicitudData.persona_moral">
                                        <label class="form-check-label" for="persona_moral">¿Es Persona Moral?</label>
                                    </div>
                                </div>
                            </div>
                            <div class="row" id="nombres_fisica_wrapper">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="nombre" class="form-label">Nombre <span class="text-danger">*</span></label>
                                        <input wire:model.defer="solicitudData.nombre" type="text" class="form-control" id="nombre" name="solicitudData.nombre" oninput="this.value = this.value.toUpperCase()" required>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="apellido_paterno" class="form-label">Apellido Paterno <span class="text-danger">*</span></label>
                                        <input wire:model.defer="solicitudData.apellido_paterno" type="text" class="form-control" id="apellido_paterno" name="solicitudData.apellido_paterno" oninput="this.value = this.value.toUpperCase()" required>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="apellido_materno" class="form-label">Apellido Materno</label>
                                        <input wire:model.defer="solicitudData.apellido_materno" type="text" class="form-control" id="apellido_materno" name="solicitudData.apellido_materno" oninput="this.value = this.value.toUpperCase()">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label class="form-label">Sexo <span class="text-danger">*</span></label><br>
                                        <input type="radio" class="btn-check" name="solicitudData.sexo" id="sexo_masculino" value="Masculino" wire:model.defer="solicitudData.sexo" required>
                                        <label class="btn btn-outline-info" for="sexo_masculino"><i class="bi bi-person"> Masculino</i></label>

                                        <input type="radio" class="btn-check" name="solicitudData.sexo" id="sexo_femenino" value="Femenino" wire:model.defer="solicitudData.sexo" required>
                                        <label class="btn btn-outline-info" for="sexo_femenino"><i class="bi bi-people"> Femenino</i></label>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label for="fecha_nacimiento" class="form-label">Fecha Nacimiento <span class="text-danger">*</span></label>
                                        <input wire:model.defer="solicitudData.fecha_nacimiento" type="text" class="form-control" id="fecha_nacimiento" name="solicitudData.fecha_nacimiento"
                                            placeholder="DD/MM/AAAA" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="rfc" class="form-label">RFC <span class="text-danger">*</span></label>
                                        <input wire:model.defer="solicitudData.rfc" type="text" class="form-control" id="rfc" name="solicitudData.rfc" required maxlength="13" minlength="12" oninput="this.value = this.value.toUpperCase()">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4" id="razon_social_wrapper" style="display: none;">
                                    <div class="mb-3">
                                        <label for="razon_social" class="form-label">Razón Social <span class="text-danger">*</span></label>
                                        <input wire:model.defer="solicitudData.razon_social" type="text" class="form-control" id="razon_social" name="solicitudData.razon_social" oninput="this.value = this.value.toUpperCase()" placeholder="Razón Social de la empresa">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="correo" class="form-label">Correo</label>
                                        <input wire:model.defer="solicitudData.correo" type="email" class="form-control" id="correo" name="solicitudData.correo" placeholder="correo@ejemplo.com">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="telefono" class="form-label">Teléfono</label>
                                        <input wire:model.defer="solicitudData.telefono" type="text" class="form-control" id="telefono" name="solicitudData.telefono"
                                            placeholder="___-___-____" data-inputmask="'mask': '999-999-9999', 'autoUnmask': true" :value="399-999-9999">
                                    </div>
                                </div>
                            </div>
                        </section>

                        <!-- Paso 2 -->
                        <h4>Datos del Seguro</h4>
                        <section>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label class="form-label">Tipo de Venta <span class="text-danger">*</span></label><br>
                                        <input type="radio" class="btn-check" name="solicitudData.tipo_venta" id="venta_individual" value="Individual" wire:model.defer="solicitudData.tipo_venta" required>
                                        <label class="btn btn-outline-info" for="venta_individual"> Individual</label>

                                        <input type="radio" class="btn-check" name="solicitudData.tipo_venta" id="venta_pool" value="Pool" wire:model.defer="solicitudData.tipo_venta" required>
                                        <label class="btn btn-outline-info" for="venta_pool"> Pool</label>
                                    </div>
                                </div>
                                <div class="col-md-4" id="dependencia_pool_wrapper" style="display: none;">
                                    <div class="mb-3">
                                        <label for="dependencia_pool" class="form-label">Dependencia Pool <span class="text-danger">*</span></label>
                                        <select wire:model.defer="solicitudData.dependencia_pool" class="form-select" id="dependencia_pool" name="solicitudData.dependencia_pool">
                                            <option value="">Seleccione...</option>
                                            <option value="SNTE 21">SNTE 21</option>
                                            <option value="SNTE 50">SNTE 50</option>
                                            <option value="SNTE 38">SNTE 38</option>
                                            <option value="SNTE 05">SNTE 05</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="compania" class="form-label">Compañía <span class="text-danger">*</span></label>
                                        <select id="compania" wire:model.defer="solicitudData.compania" name="solicitudData.compania" class="form-control" required>
                                            <option value="">Seleccione...</option>
                                            @foreach($companias as $compania)
                                            <option value="{{ $compania }}">{{ $compania }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label for="forma_pago" class="form-label">Forma de Pago <span class="text-danger">*</span></label>
                                        <select id="forma_pago" wire:model.defer="solicitudData.forma_pago" name="solicitudData.forma_pago" class="form-control" required>
                                            <option value="">Seleccione...</option>
                                            @foreach($formas_pago as $fp)
                                            <option value="{{ $fp }}">{{ $fp }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label for="tipo_pago" class="form-label">Tipo de Pago <span class="text-danger">*</span></label>
                                        <select id="tipo_pago" wire:model.defer="solicitudData.tipo_pago" name="solicitudData.tipo_pago" class="form-control" required>
                                            <option value="">Seleccione...</option>
                                            @foreach($tipos_pago as $tp)
                                            <option value="{{ $tp }}">{{ $tp }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="reconocimiento_antiguedad" class="form-label">Reconocimiento de Antigüedad</label>
                                        <div class="form-check form-switch">
                                            <input name="solicitudData.reconocimiento_antiguedad" wire:model.defer="solicitudData.reconocimiento_antiguedad" class="form-check-input" type="checkbox" id="reconocimiento_antiguedad" style="width: 3em; height: 1.5em;">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="fecha_inicio_vigencia" class="form-label">Fecha Inicio Vigencia <span class="text-danger">*</span></label>
                                        <input wire:model.defer="solicitudData.fecha_inicio_vigencia" type="text" class="form-control" id="fecha_inicio_vigencia" name="solicitudData.fecha_inicio_vigencia"
                                            placeholder="DD/MM/AAAA" required>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="fecha_fin_vigencia" class="form-label">Fecha Fin Vigencia <span class="text-danger">*</span></label>
                                        <input wire:model.defer="solicitudData.fecha_fin_vigencia" type="text" class="form-control" id="fecha_fin_vigencia" name="solicitudData.fecha_fin_vigencia"
                                            placeholder="DD/MM/AAAA" required readonly>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label for="prima_neta" class="form-label">Prima Neta</label>
                                        <input wire:model.defer="solicitudData.prima_neta" type="text" class="form-control" id="prima_neta" name="solicitudData.prima_neta" placeholder="$ 0.00"
                                            data-inputmask="'alias': 'currency', 'prefix': '$ ', 'groupSeparator': ',', 'digits': 2, 'autoGroup': true, 'autoUnmask': true, 'rightAlign': false">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label for="prima_total" class="form-label">Prima Total <span class="text-danger">*</span></label>
                                        <input wire:model.defer="solicitudData.prima_total" type="text" class="form-control" id="prima_total" name="solicitudData.prima_total" placeholder="$ 0.00"
                                            data-inputmask="'alias': 'currency', 'prefix': '$ ', 'groupSeparator': ',', 'digits': 2, 'autoGroup': true, 'autoUnmask': true, 'rightAlign': false" required>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label for="derechos" class="form-label">Derechos</label>
                                        <input wire:model.defer="solicitudData.derechos" type="text" class="form-control" id="derechos" name="solicitudData.derechos" placeholder="$ 0.00"
                                            data-inputmask="'alias': 'currency', 'prefix': '$ ', 'groupSeparator': ',', 'digits': 2, 'autoGroup': true, 'autoUnmask': true, 'rightAlign': false">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label for="iva" class="form-label">IVA</label>
                                        <input wire:model.defer="solicitudData.iva" type="text" class="form-control" id="iva" name="solicitudData.iva" placeholder="$ 0.00"
                                            data-inputmask="'alias': 'currency', 'prefix': '$ ', 'groupSeparator': ',', 'digits': 2, 'autoGroup': true, 'autoUnmask': true, 'rightAlign': false">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="extra_prima" class="form-label">Extra Prima <span class="text-danger">*</span></label>
                                        <input wire:model.defer="solicitudData.extra_prima" type="text" class="form-control" id="extra_prima" name="solicitudData.extra_prima" placeholder="$ 0.00"
                                            data-inputmask="'alias': 'currency', 'prefix': '$ ', 'groupSeparator': ',', 'digits': 2, 'autoGroup': true, 'autoUnmask': true, 'rightAlign': false" required>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="descuento" class="form-label">Descuento <span class="text-danger">*</span></label>
                                        <input wire:model.defer="solicitudData.descuento" type="text" class="form-control" id="descuento" name="solicitudData.descuento" placeholder="$ 0.00"
                                            data-inputmask="'alias': 'currency', 'prefix': '$ ', 'groupSeparator': ',', 'digits': 2, 'autoGroup': true, 'autoUnmask': true, 'rightAlign': false" required>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="financiamiento" class="form-label">Financiamiento <span class="text-danger">*</span></label>
                                        <input wire:model.defer="solicitudData.financiamiento" type="text" class="form-control" id="financiamiento" name="solicitudData.financiamiento" placeholder="$ 0.00"
                                            data-inputmask="'alias': 'currency', 'prefix': '$ ', 'groupSeparator': ',', 'digits': 2, 'autoGroup': true, 'autoUnmask': true, 'rightAlign': false" required>
                                    </div>
                                </div>
                            </div>
                        </section>

                        <!-- Paso 3: Datos de Asegurados -->
                        <h4>Datos de Asegurados</h4>
                        <section>
                            <div class="row">
                                <div class="col-12">
                                    <div class="alert alert-info">
                                        <i class="bi bi-info-circle"></i> Debe registrar mínimo 1 asegurado y máximo 10 asegurados.
                                    </div>
                                </div>
                            </div>

                            <!-- Asegurado Form -->
                            <div class="row mb-3">
                                <div class="col-md-3">
                                    <label for="aseg_nombre" class="form-label">Nombre <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="aseg_nombre" oninput="this.value = this.value.toUpperCase()">
                                </div>
                                <div class="col-md-3">
                                    <label for="aseg_apellido_paterno" class="form-label">Apellido Paterno <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="aseg_apellido_paterno" oninput="this.value = this.value.toUpperCase()">
                                </div>
                                <div class="col-md-3">
                                    <label for="aseg_apellido_materno" class="form-label">Apellido Materno</label>
                                    <input type="text" class="form-control" id="aseg_apellido_materno" oninput="this.value = this.value.toUpperCase()">
                                </div>
                                <div class="col-md-3">
                                    <label for="aseg_fecha_nacimiento" class="form-label">Fecha Nacimiento <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="aseg_fecha_nacimiento" placeholder="DD/MM/AAAA">
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-3">
                                    <label for="aseg_rfc" class="form-label">RFC <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="aseg_rfc" maxlength="13" oninput="this.value = this.value.toUpperCase()">
                                </div>
                                <div class="col-md-3 d-flex align-items-end">
                                    <button type="button" class="btn btn-primary" id="addAsegurado">
                                        <i class="bi bi-plus-circle"></i> Agregar Asegurado
                                    </button>
                                </div>
                            </div>

                            <!-- Asegurados Table -->
                            <div class="row">
                                <div class="col-12">
                                    <h5>Asegurados Registrados <span id="aseguradosCount" class="badge bg-primary">0</span></h5>
                                    <div class="table-responsive">
                                        <table class="table table-sm table-hover" id="aseguradosTable">
                                            <thead>
                                                <tr>
                                                    <th>Nombre</th>
                                                    <th>Apellido Paterno</th>
                                                    <th>Apellido Materno</th>
                                                    <th>Fecha Nacimiento</th>
                                                    <th>RFC</th>
                                                    <th>Acciones</th>
                                                </tr>
                                            </thead>
                                            <tbody id="aseguradosTableBody">
                                                <!-- Asegurados will be added here dynamically -->
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </section>

                        <!-- Paso 4: Documentos -->
                        <h4>Documentos</h4>
                        <section>
                            <div class="row" id="documentos">
                                <div class="col-md-6">
                                    <div class="row">
                                        <div class="col-md-10">
                                            <label for="doc_solicitud_firmada" class="form-label">Solicitud Firmada <span class="text-danger">*</span></label>
                                            <div class="col-md-2 d-flex align-items-center justify-content-center" style="width: 100%; gap: 10px;">
                                                <a href="" target="_blank" class="btn btn-white lift bi bi-eye" title="Ver documento Solicitud Firmada"></a>
                                                <input type="file" wire:model="doc_solicitud_firmada" class="form-control" id="doc_solicitud_firmada" name="doc_solicitud_firmada" accept="application/pdf">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="row">
                                        <div class="col-md-10">
                                            <label for="doc_identificacion" class="form-label">Identificación <span class="text-danger">*</span></label>
                                            <div class="col-md-2 d-flex align-items-center justify-content-center" style="width: 100%; gap: 10px;">
                                                <a href="" target="_blank" class="btn btn-white lift bi bi-eye" title="Ver documento Identificación"></a>
                                                <input type="file" wire:model="doc_identificacion" class="form-control" id="doc_identificacion" name="doc_identificacion" accept="application/pdf">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="row">
                                        <div class="col-md-10">
                                            <label for="doc_comprobante_domicilio" class="form-label">Comprobante Domicilio <span class="text-danger">*</span></label>
                                            <div class="col-md-2 d-flex align-items-center justify-content-center" style="width: 100%; gap: 10px;">
                                                <a href="" target="_blank" class="btn btn-white lift bi bi-eye" title="Ver documento Comprobante Domicilio"></a>
                                                <input type="file" wire:model="doc_comprobante_domicilio" class="form-control" id="doc_comprobante_domicilio" name="doc_comprobante_domicilio" accept="application/pdf">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="row">
                                        <div class="col-md-10">
                                            <label for="doc_cotizacion" class="form-label">Cotización <span class="text-danger">*</span></label>
                                            <div class="col-md-2 d-flex align-items-center justify-content-center" style="width: 100%; gap: 10px;">
                                                <a href="" target="_blank" class="btn btn-white lift bi bi-eye" title="Ver documento Cotización"></a>
                                                <input type="file" wire:model="doc_cotizacion" class="form-control" id="doc_cotizacion" name="doc_cotizacion" accept="application/pdf">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="row">
                                        <div class="col-md-10">
                                            <label for="doc_carta_antiguedad" class="form-label">Carta Antigüedad <span class="text-danger" id="star_carta" style="display: none;">*</span></label>
                                            <div class="col-md-2 d-flex align-items-center justify-content-center" style="width: 100%; gap: 10px;">
                                                <a href="" target="_blank" class="btn btn-white lift bi bi-eye" title="Ver documento Carta Antigüedad"></a>
                                                <input type="file" wire:model="doc_carta_antiguedad" class="form-control" id="doc_carta_antiguedad" name="doc_carta_antiguedad" accept="application/pdf">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="row">
                                        <div class="col-md-10">
                                            <label for="doc_constancia_situacion_fiscal" class="form-label">Constancia Situación Fiscal</label>
                                            <div class="col-md-2 d-flex align-items-center justify-content-center" style="width: 100%; gap: 10px;">
                                                <a href="" target="_blank" class="btn btn-white lift bi bi-eye" title="Ver documento Constancia Situación Fiscal"></a>
                                                <input type="file" wire:model="doc_constancia_situacion_fiscal" class="form-control" id="doc_constancia_situacion_fiscal" name="doc_constancia_situacion_fiscal" accept="application/pdf">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="row">
                                        <div class="col-md-10">
                                            <label for="doc_talon_cheque" class="form-label">Talon de Cheque <span class="text-danger">*</span></label>
                                            <div class="col-md-2 d-flex align-items-center justify-content-center" style="width: 100%; gap: 10px;">
                                                <a href="" target="_blank" class="btn btn-white lift bi bi-eye" title="Ver documento Talon de Cheque"></a>
                                                <input type="file" wire:model="doc_talon_cheque" class="form-control" id="doc_talon_cheque" name="doc_talon_cheque" accept="application/pdf">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </form>
                </div>
                
                {{-- Modal Footer with Quick Actions and Navigation --}}
                <div class="modal-footer" style="display: flex; justify-content: flex-end; align-items: center; gap: 10px;">
                    {{-- Quick Action Buttons (Only in Edit Mode) --}}
                    @if($isEditing)
                        <button type="button" class="btn btn-danger" id="btnRechazar">
                            <i class="bi bi-x-circle"></i> Rechazar
                        </button>
                        <!-- wire:click="$emit('quickIncomplete', {{ $solicitudId }})" -->
                        <button type="button" class="btn btn-warning" id="btnIncompleta">
                            <i class="bi bi-exclamation-circle"></i> Incompleta
                        </button>
                        <button type="button" class="btn btn-info" id="btnActualizar">
                            <i class="bi bi-check-circle"></i> Actualizar
                        </button>
                    @endif
                    
                    {{-- Navigation Buttons - Static, controlled by show/hide --}}
                    <button type="button" class="btn btn-primary" id="btnAnterior">
                        <i class="bi bi-arrow-left"></i> Anterior
                    </button>
                    <button type="button" class="btn btn-primary" id="btnSiguiente">
                        Siguiente <i class="bi bi-arrow-right"></i>
                    </button>
                    @if($solicitudData['estatus_id'] == 2 && $isEditing)
                        <button type="button" class="btn btn-success" id="btnValidar">
                            <i class="bi bi-check-circle"></i> Validar
                        </button>
                    @elseif(!$isEditing)
                        <button type="button" class="btn btn-success" id="btnFinalizar">
                            <i class="bi bi-check-circle"></i> Finalizar
                        </button>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <x-jet-modal wire:model="modalFolio" maxWidth="md">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="ModalTitle">
                    Registro de Folio
                </h4>
            </div>
            <div class="modal-body">
                <h2>
                    Nombre contratante: {{ $this->solicitudData['nombre'] }}
                    {{ $this->solicitudData['apellido_paterno'] }}
                    {{ $this->solicitudData['apellido_materno'] }}
                </h2>
                <h2>
                    RFC: {{ $this->solicitudData['rfc'] }}
                </h2>

                <div class="row">
                    <div class="mb-3 row">
                        <div class="col-md-6">
                            <label for="folio1" class="form-label">Folio</label>
                            <input type="text" class="form-control" id="folio1" name="folio1" wire:model.defer="folio1">
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <x-jet-button class="btn-danger" wire:click="$set('modalFolio', false)">
                    Cancelar
                </x-jet-button>
                <x-jet-button class="btn-success" wire:click="guardarFolio" wire:loading.attr="disabled">
                    Guardar
                </x-jet-button>
            </div>
        </div>
    </x-jet-modal>

    <x-jet-modal wire:model="modalPoliza" maxWidth="lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="ModalTitle">
                    Registro de Póliza
                </h4>
            </div>
            <div class="modal-body">
                {{-- Información básica --}}
                <div class="mb-3">
                    <h5>Información del Contratante</h5>
                    <p class="mb-1">
                        <strong>Nombre:</strong> 
                        {{ $this->solicitudData['nombre'] ?? '' }}
                        {{ $this->solicitudData['apellido_paterno'] ?? '' }}
                        {{ $this->solicitudData['apellido_materno'] ?? '' }}
                    </p>
                    <p class="mb-1">
                        <strong>RFC:</strong> {{ $this->solicitudData['rfc'] ?? '' }}
                    </p>
                    <p class="mb-1">
                        <strong>Compañía:</strong> {{ $this->solicitudData['compania'] ?? '' }}
                    </p>
                </div>

                {{-- Vigencias --}}
                <div class="mb-3">
                    <h5>Vigencia</h5>
                    <div class="row">
                        <div class="col-md-6">
                            <p class="mb-1">
                                <strong>Fecha Inicio:</strong> {{ $this->solicitudData['fecha_inicio_vigencia'] ?? '' }}
                            </p>
                        </div>
                        <div class="col-md-6">
                            <p class="mb-1">
                                <strong>Fecha Fin:</strong> {{ $this->solicitudData['fecha_fin_vigencia'] ?? '' }}
                            </p>
                        </div>
                    </div>
                </div>

                <hr>

                {{-- Campos editables de primas --}}
                <h5 class="mb-3">Información de Primas</h5>
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="polizaPrimaNeta" class="form-label">Prima Neta</label>
                            <input type="text" class="form-control" id="polizaPrimaNeta" 
                                name="polizaPrimaNeta" wire:model.defer="polizaPrimaNeta" 
                                placeholder="$ 0.00"
                                data-inputmask="'alias': 'currency', 'prefix': '$ ', 'groupSeparator': ',', 'digits': 2, 'autoGroup': true, 'autoUnmask': true, 'rightAlign': false">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="polizaDerechos" class="form-label">Derechos</label>
                            <input type="text" class="form-control" id="polizaDerechos" 
                                name="polizaDerechos" wire:model.defer="polizaDerechos" 
                                placeholder="$ 0.00"
                                data-inputmask="'alias': 'currency', 'prefix': '$ ', 'groupSeparator': ',', 'digits': 2, 'autoGroup': true, 'autoUnmask': true, 'rightAlign': false">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="polizaIva" class="form-label">IVA</label>
                            <input type="text" class="form-control" id="polizaIva" 
                                name="polizaIva" wire:model.defer="polizaIva" 
                                placeholder="$ 0.00"
                                data-inputmask="'alias': 'currency', 'prefix': '$ ', 'groupSeparator': ',', 'digits': 2, 'autoGroup': true, 'autoUnmask': true, 'rightAlign': false">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="polizaPrimaTotal" class="form-label">Prima Total <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="polizaPrimaTotal" 
                                name="polizaPrimaTotal" wire:model.defer="polizaPrimaTotal" 
                                placeholder="$ 0.00"
                                data-inputmask="'alias': 'currency', 'prefix': '$ ', 'groupSeparator': ',', 'digits': 2, 'autoGroup': true, 'autoUnmask': true, 'rightAlign': false">
                            <x-jet-input-error for="polizaPrimaTotal" class="mt-2" />
                        </div>
                    </div>
                </div>

                <hr>

                {{-- Datos de la póliza --}}
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="poliza1" class="form-label">Número de Póliza <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="poliza1" name="poliza1" wire:model.defer="poliza1">
                            <x-jet-input-error for="poliza1" class="mt-2" />
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label"><span class="bi-upload" style="font-size: 1rem;"></span>
                                Archivo Póliza <span class="text-danger">*</span>
                            </label>
                            <input class="form-control form-control" type="file" name="docPoliza"
                                id="docPoliza" wire:model="docPoliza" required accept=".pdf"
                                wire:loading.attr="disabled" wire:target="docPoliza">
                            <x-jet-input-error for="docPoliza" class="mt-2" />
                            <div wire:loading wire:target="docPoliza">Cargando...</div>
                        </div>
                    </div>
                </div>
                
                {{-- Archivos adicionales para Plan Seguro --}}
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label"><span class="bi-upload" style="font-size: 1rem;"></span>
                                Credenciales <span class="text-danger" {{ ($this->solicitudData['compania'] ?? '') === 'PLAN SEGURO SA DE CV COMPAÑIA DE SEGUROS' ? '' : 'hidden' }}>*</span>
                            </label>
                            <input class="form-control form-control" type="file" name="docCredenciales"
                                id="docCredenciales" wire:model="docCredenciales" accept=".pdf"
                                wire:loading.attr="disabled" wire:target="docCredenciales">
                            <x-jet-input-error for="docCredenciales" class="mt-2" />
                            <div wire:loading wire:target="docCredenciales">Cargando...</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label"><span class="bi-upload" style="font-size: 1rem;"></span>
                                Recibos <span class="text-danger" {{ ($this->solicitudData['compania'] ?? '') === 'PLAN SEGURO SA DE CV COMPAÑIA DE SEGUROS' ? '' : 'hidden' }}>*</span>
                            </label>
                            <input class="form-control form-control" type="file" name="docRecibos"
                                id="docRecibos" wire:model="docRecibos" accept=".pdf"
                                wire:loading.attr="disabled" wire:target="docRecibos">
                            <x-jet-input-error for="docRecibos" class="mt-2" />
                            <div wire:loading wire:target="docRecibos">Cargando...</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <x-jet-button class="btn-danger" wire:click="$emit('listenerRechazar', {{ $this->solicitudId }})">
                    Rechazar
                </x-jet-button>
                <x-jet-button class="btn-success" wire:click="guardarPoliza" wire:loading.attr="disabled">
                    Guardar
                </x-jet-button>
            </div>
        </div>
    </x-jet-modal>

    <!-- Modal Importar -->
    <div class="modal fade" id="modalImportar" tabindex="-1" aria-labelledby="modalImportarLabel" aria-hidden="true" wire:ignore.self>
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalImportarLabel">Importar Pólizas GMM (Revisión)</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Archivo Excel</label>
                        <input type="file" wire:model="docExcel" class="form-control" accept=".xlsx, .xls, .csv">
                        <x-jet-input-error for="docExcel" class="mt-2" />
                        <div wire:loading wire:target="docExcel" class="text-primary mt-2">Cargando archivo...</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-success" wire:click="submitImport" wire:loading.attr="disabled" data-bs-dismiss="modal">
                        Importar
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

@push('js')
<script src="{{ asset('/assets/custom/select2/js/select2.min.js') }}"></script>
<script src="{{ asset('/assets/custom/steps/jquery.steps.min.js') }}"></script>
<script src="{{ asset('/assets/custom/jquery-validate/jquery.validate.min.js') }}"></script>
<script src="{{ asset('/assets/custom/jquery-validate/localization/messages_es.min.js') }}"></script>
<script src="{{ asset('/assets/js/function.js') }}"></script>
<script>
    //Flatpickrs
    const locale = {
        firstDayOfWeek: 1,
        weekdays: {
            shorthand: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
            longhand: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes',
                'Sábado'
            ],
        },
        months: {
            shorthand: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct',
                'Nov', 'Dic'
            ],
            longhand: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto',
                'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
            ],
        },
    }

    document.addEventListener('livewire:update', async function() {
        // input mask
          flatpickr("#fecha_nacimiento", {
                allowInput: true,
                dateFormat: "d/m/Y",
                locale,
            });

            flatpickr("#fecha_fin_vigencia", {
                allowInput: true,
                dateFormat: "d/m/Y",
                locale,
            });

            const minDate = new Date();
            minDate.setDate(minDate.getDate() - 10);

            const maxDate = new Date();
            maxDate.setDate(maxDate.getDate() + 30);

            flatpickr("#fecha_inicio_vigencia", {
                allowInput: true,
                dateFormat: "d/m/Y",
                locale,
                // maxDate,
                // minDate,
            });

            flatpickr("#aseg_fecha_nacimiento", {
                allowInput: true,
                dateFormat: "d/m/Y",
                locale,
            });

            const maskSelectors = [
                '#telefono', '#prima_neta', 
                // '#derechos', '#iva', '#prima_total',
                // '#extra_prima', '#descuento', '#financiamiento',
                // '#polizaPrimaNeta', '#polizaDerechos', '#polizaIva', '#polizaPrimaTotal'
            ];

            maskSelectors.forEach(selector => {
                const $el = $(selector);
                if ($el.length) {
                    Inputmask().mask($el);
                }
            });
    })
    
    document.addEventListener('livewire:load', async function() {

        const modal = $('#modalSolicitud');
        const form = $('#solicitudForm');

        Livewire.on('showModal', function(links) {
            updateDocumentAsterisks();
            // Primero ocultar todos los botones de ver documento
            $('#documentos').find('a').each(function() {
                $(this)[0].style.cssText = 'display: none !important';
            });

            // Si estamos en modo edición y hay links, mostrar solo los que tienen documento guardado
            if (links !== null && Object.keys(links).length > 0) {
                Object.keys(links).forEach(key => {
                    const input = $('#' + key);
                    if (input.length) {
                        const buttonDiv = input.parent().parent().find('.col-md-2');
                        const a = buttonDiv.find('a');
                        a.attr('href', links[key]);
                        a[0].style.cssText = 'display: flex !important;';
                    }
                });
            }

            modal.modal('show');
            
            // Move steps buttons to footer after modal is shown
            setTimeout(function() {
                moveStepsButtonsToFooter();
            }, 200);
        });

        Livewire.on('hideModal', function() {
            modal.modal('hide');
        });

        // Ensure buttons are moved when modal is fully shown
        modal.on('shown.bs.modal', function() {
            moveStepsButtonsToFooter();
        });

        Livewire.on('respModal', (type, msg) => {
            Swal.fire({
                icon: type,
                title: msg,
                showConfirmButton: false,
                confirmButtonText: 'Aceptar',
            });
        });

        Livewire.on('modalOpen', function() {
            $('#loader').css('display', 'flex');
        });

        Livewire.on('modalOpenFolios', function() {
            $('#loader').css('display', 'flex');
            // $('#docFolio').val('');
        });

        // Helper function to check if a document exists (uploaded or in DB)
        function checkDocument(docId) {
            const input = $('#' + docId);
            const hasFile = input[0] && input[0].files && input[0].files.length > 0;
            
            // Check for existing document link
            const link = input.parent().parent().find('.col-md-2 a[href]');
            const hasExistingDoc = link.length > 0 && link.attr('href') && link.attr('href') !== '';
            
            return hasFile || hasExistingDoc;
        }
        
        // Helper function to mark document as invalid
        function markDocumentInvalid(docId, docName) {
            const input = $('#' + docId);
            input.addClass('is-invalid border-danger');
            input.after('<div class="document-error text-danger small mt-1">El documento ' + docName + ' es obligatorio</div>');
        }

        // Function to validate required documents
        function validateDocuments() {
            // Clear previous errors
            $('.document-error').remove();
            $('input[type="file"]').removeClass('is-invalid border-danger');
            
            let errorMessages = [];
            
            // Get tipo_venta and reconocimiento_antiguedad values
            const tipoVenta = $('input[name="solicitudData.tipo_venta"]:checked').val();
            const reconocimientoAntiguedad = $('#reconocimiento_antiguedad').is(':checked');
            
            // Always required documents
            const alwaysRequired = [
                { id: 'doc_solicitud_firmada', name: 'Solicitud Firmada' },
                { id: 'doc_identificacion', name: 'Identificación' },
                { id: 'doc_comprobante_domicilio', name: 'Comprobante Domicilio' },
                { id: 'doc_cotizacion', name: 'Cotización' }
            ];
            
            // Check always required documents
            alwaysRequired.forEach(doc => {
                if (!checkDocument(doc.id)) {
                    markDocumentInvalid(doc.id, doc.name);
                    errorMessages.push(doc.name);
                }
            });
            
            // Check Talón de cheque (required only for Pool)
            if (tipoVenta === 'Pool' && !checkDocument('doc_talon_cheque')) {
                markDocumentInvalid('doc_talon_cheque', 'Talón de cheque');
                errorMessages.push('Talón de cheque (requerido para venta Pool)');
            }
            
            // Check Carta de antigüedad (required only if reconocimiento_antiguedad is checked)
            if (reconocimientoAntiguedad && !checkDocument('doc_carta_antiguedad')) {
                markDocumentInvalid('doc_carta_antiguedad', 'Carta de Antigüedad');
                errorMessages.push('Carta de Antigüedad (requerida con reconocimiento de antigüedad)');
            }
            
            if (errorMessages.length > 0) {
                // Show alert asynchronously so we can return false immediately
                setTimeout(function() {
                    Swal.fire({
                        icon: 'error',
                        title: 'Documentos faltantes',
                        html: 'Por favor suba los siguientes documentos requeridos:<br><br>' + 
                              '<ul style="text-align: left;">' + 
                              errorMessages.map(msg => '<li>' + msg + '</li>').join('') + 
                              '</ul>',
                        confirmButtonText: 'Entendido'
                    });
                }, 100);
                return false;
            }
            
            return true;
        }

        // Steps form and actions
        form.steps({
            headerTag: 'h4',
            bodyTag: 'section',
            transitionEffect: 'slideLeft',
            labels: {
                next: 'Siguiente',
                previous: 'Anterior',
                finish: 'Finalizar',
                loading: 'Cargando...'
            },
            onStepChanging: function(event, currentIndex, newIndex) {
                // Permitir retroceder siempre
                if (currentIndex > newIndex) {
                    return true;
                }
                
                // Validar asegurados al intentar avanzar del paso 3 (índice 2) al paso 4 (índice 3)
                if (currentIndex === 3 && newIndex === 4) {
                    if (aseguradosArray.length === 0) {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Asegurados requeridos',
                            text: 'Debe agregar al menos un asegurado antes de continuar.',
                            confirmButtonText: 'Entendido'
                        });
                        return false;
                    }
                }
                
                // Validación normal de formulario
                if (currentIndex < newIndex) {
                    form.find('.body:eq(' + newIndex + ') label.error').remove();
                    form.find('.body:eq(' + newIndex + ') .error').removeClass('error');
                }
                form.validate().settings.ignore = ':disabled,:hidden';
                return form.valid();
            },
            onFinishing: function(event, currentIndex) {
                // Validate documents before finishing
                if (!validateDocuments()) {
                    return false;
                }
                
                form.validate().settings.ignore = ':disabled';
                form.validate().settings.ignore = '.ignore';
                return form.valid();
            },
            onFinished: function(event, currentIndex) {
                Swal.fire({
                    title: 'Cargando...',
                    html: '<div class="spinner-border" role="status"><span class="sr-only">Cargando...</span></div>',
                    showCancelButton: false,
                    showConfirmButton: false,
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                });

                uploadData();
            },
            onInit: function() {
                // Move the jQuery Steps action buttons to the modal footer
                setTimeout(moveStepsButtonsToFooter, 100);
            },
            onStepChanged: function() {
                // Update button visibility when step changes
                setTimeout(moveStepsButtonsToFooter, 100);
            }
        });

        modal.on("hidden.bs.modal", function() {
            $("#solicitudForm")[0].reset();
            $("#solicitudForm-t-0").trigger("click");
            $(".done").removeClass("done").addClass("disabled");
            form.validate().resetForm();
            $(".error").removeClass("error").addClass("disabled");
        });

        // Function to control static navigation buttons based on current step
        function moveStepsButtonsToFooter() {
            const stepsActions = $('#solicitudForm').closest('.wizard').find('.actions');
            
            if (stepsActions.length) {
                // Get the original jQuery Steps action buttons
                const previousBtn = stepsActions.find('a[href="#previous"]');
                const nextBtn = stepsActions.find('a[href="#next"]');
                const finishBtn = stepsActions.find('a[href="#finish"]');
                
                // Get current step info
                const wizard = $('#solicitudForm').closest('.wizard');
                const currentStep = wizard.find('.steps li.current').index();
                const totalSteps = wizard.find('.steps li').length;
                const isLastStep = (currentStep === totalSteps - 1);
                
                // Check if jQuery Steps buttons are disabled
                const prevDisabled = previousBtn.parent().hasClass('disabled');
                const nextDisabled = nextBtn.parent().hasClass('disabled');
                
                // Control Anterior button
                $('#btnAnterior').prop('disabled', prevDisabled);
                
                // Control Siguiente button  
                $('#btnSiguiente').prop('disabled', nextDisabled);
                
                // Control Finalizar button (disabled if not on last step)
                $('#btnFinalizar')?.prop('disabled', !isLastStep);
                $('#btnValidar')?.prop('disabled', !isLastStep);
                
                // Hide the original jQuery Steps actions
                stepsActions.hide();
            } else {
                setTimeout(moveStepsButtonsToFooter, 100);
            }
        }
        
        // Attach click handlers to static buttons (only once)
        $('#btnAnterior').on('click', function() {
            if (!$(this).prop('disabled')) {
                const previousBtn = $('.wizard .actions a[href="#previous"]');
                previousBtn.click();
            }
        });
        
        $('#btnSiguiente').on('click', function() {
            if (!$(this).prop('disabled')) {
                const nextBtn = $('.wizard .actions a[href="#next"]');
                nextBtn.click();
            }
        });
        
        $(document).on('click', '#btnFinalizar', function() {
            if (!$(this).prop('disabled')) {
                const finishBtn = $('.wizard .actions a[href="#finish"]');
                finishBtn.click();
            }
        });

        $(document).on('click', '#btnRechazar', async function() {
            let result = await Swal.fire({
                title: '¿Estás seguro de rechazar la solicitud?',
                icon: 'warning',
                input: 'text',
                inputPlaceholder: 'Escribe el motivo del rechazo...',
                inputAttributes: {
                    autocomplete: 'off'
                },
                allowOutsideClick: false,
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#6c757d',
                confirmButtonText: '¡Sí, rechazar!',
                cancelButtonText: 'Cancelar',
                preConfirm: (comment) => {
                    if (!comment.trim()) {
                        Swal.showValidationMessage('Por favor, escribe el motivo del rechazo.');
                        return false;
                    }
                    return comment;
                }
            });

            if (result.isConfirmed) {
                const solicitudId = @this.solicitudId;
                @this.quickReject(solicitudId);
                @this.saveComment(result.value);
            }
        });

        $(document).on('click', '#btnIncompleta', async function() {
            let result = await Swal.fire({
                title: '¿Estás seguro de marcar la solicitud como incompleta?',
                icon: 'question',
                input: 'text',
                inputPlaceholder: 'Escribe un comentario...',
                inputAttributes: {
                    autocomplete: 'off'
                },
                allowOutsideClick: false,
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: '¡Sí, marcar como incompleta!',
                cancelButtonText: 'Cancelar',
                preConfirm: (comment) => {
                    if (!comment.trim()) {
                        Swal.showValidationMessage('Por favor, escribe un comentario.');
                        return false;
                    }
                    return comment;
                }
            });

            if (result.isConfirmed) {
                const solicitudId = @this.solicitudId;
                @this.quickIncomplete(solicitudId);
                @this.saveComment(result.value);
            }
        });

        $(document).on('click', '#btnValidar', async function() {
            let result = await Swal.fire({
                title: '¿Estás seguro de validar la solicitud?',
                icon: 'question',
                input: 'text',
                inputPlaceholder: 'Escribe un comentario...',
                inputAttributes: {
                    autocomplete: 'off'
                },
                allowOutsideClick: false,
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: '¡Sí, validar!',
                cancelButtonText: 'Cancelar',
                preConfirm: (comment) => {
                    if (!comment.trim()) {
                        Swal.showValidationMessage('Por favor, escribe un comentario.');
                        return false;
                    }
                    return comment;
                }
            });

            if (result.isConfirmed) {
                @this.validarSolicitud(result.value);
                @this.saveComment(result.value);
            }
        });

        // Make Actualizar button trigger form submission
        $(document).on('click', '#btnActualizar', function() {
            // Validate documents before updating
            if (!validateDocuments()) {
                return false;
            }
            
            Swal.fire({
                title: 'Cargando...',
                html: '<div class="spinner-border" role="status"><span class="sr-only">Cargando...</span></div>',
                showCancelButton: false,
                showConfirmButton: false,
                allowOutsideClick: false,
                allowEscapeKey: false,
            });
            
            uploadData();
        });

        // ==========================================
        // Asegurados Management Logic
        // ==========================================
        let aseguradosArray = [];

        function updateAseguradosTable() {
            const tbody = $('#aseguradosTableBody');
            tbody.empty();

            aseguradosArray.forEach((asegurado, index) => {
                const row = `
                    <tr>
                        <td>${asegurado.nombre}</td>
                        <td>${asegurado.apellido_paterno}</td>
                        <td>${asegurado.apellido_materno || ''}</td>
                        <td>${asegurado.fecha_nacimiento}</td>
                        <td>${asegurado.rfc}</td>
                        <td>
                            <button type="button" class="btn btn-sm btn-danger remove-asegurado" data-index="${index}">
                                <i class="bi bi-trash"></i>
                            </button>
                        </td>
                    </tr>
                `;
                tbody.append(row);
            });

            $('#aseguradosCount').text(aseguradosArray.length);
        }

        $('#addAsegurado').on('click', function() {
            const apellidoPaterno = $('#aseg_apellido_paterno').val().trim();
            const apellidoMaterno = $('#aseg_apellido_materno').val().trim();
            const nombre = $('#aseg_nombre').val().trim();
            const fechaNacimiento = $('#aseg_fecha_nacimiento').val().trim();
            const rfc = $('#aseg_rfc').val().trim();

            // Validation
            if (!apellidoPaterno || !nombre || !fechaNacimiento || !rfc) {
                Swal.fire('Error', 'Por favor complete todos los campos obligatorios.', 'error');
                return;
            }

            if (aseguradosArray.length >= 10) {
                Swal.fire('Error', 'No puede registrar más de 10 asegurados.', 'error');
                return;
            }

            // Add to array
            aseguradosArray.push({
                apellido_paterno: apellidoPaterno,
                apellido_materno: apellidoMaterno,
                nombre: nombre,
                fecha_nacimiento: fechaNacimiento,
                rfc: rfc
            });

            // Clear form
            $('#aseg_apellido_paterno').val('');
            $('#aseg_apellido_materno').val('');
            $('#aseg_nombre').val('');
            $('#aseg_fecha_nacimiento').val('');
            $('#aseg_rfc').val('');

            updateAseguradosTable();
        });

        $(document).on('click', '.remove-asegurado', function() {
            const index = $(this).data('index');
            aseguradosArray.splice(index, 1);
            updateAseguradosTable();
        });

        Livewire.on('loadAsegurados', function(asegurados) {
            aseguradosArray = asegurados;
            updateAseguradosTable();
            handlePersonaMoralChange()
        });

        modal.on("hidden.bs.modal", function() {
            aseguradosArray = [];
            updateAseguradosTable();
        });

        // ==========================================
        // End Asegurados Management Logic
        // ==========================================

        async function uploadData() {
            try {
                let data = {};

                // Gather all inputs except files
                let inputs = $('#solicitudForm :input').not(':input[type="file"]');
                inputs.each(function() {
                    let input = $(this);
                    let name = input.attr('name');
                    // Only include fields that are part of solicitudData
                    if (name && name.startsWith('solicitudData.')) {
                        let key = name.replace('solicitudData.', '');
                        let value;

                        if (input.is(':checkbox')) {
                            value = input.is(':checked') ? 1 : 0;
                        } else if (input.is(':radio')) {
                            if (!input.is(':checked')) return;
                            value = input.val();
                        } else {
                            value = input.val();
                        }

                        data[key] = value;
                    }
                });
                
                // Add asegurados array to data
                // This is handled separately because it's not a form field
                data['asegurados'] = aseguradosArray;

                let files = $('#solicitudForm input[type="file"]');

                for (let file of files) {
                    if (!file.files[0]) continue;
                    if (file.files[0].size > 10000000) {
                        let fileName = file.files[0].name;
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'El archivo ' + fileName + ' es demasiado grande'
                        });
                        return;
                    }
                    await new Promise((resolve, reject) => {
                        // Upload to the specific property name (e.g., doc_solicitud_firmada)
                        @this.upload(file.name, file.files[0], (value) => {
                            resolve();
                        }, () => {
                            console.error('Error al cargar el archivo');
                            reject();
                        }, (event) => {
                            // console.log(event.detail.progress);
                        });
                    });
                }

                Livewire.emit('uploadData', data);
            } catch (error) {
                console.error(error);
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Ocurrió un error al procesar la solicitud'
                });
            }
        }
        // Business Rules Logic
        // input #nombre #apellido_paterno #apellido_materno #fecha_nacimiento

        $('#nombre, #apellido_paterno, #apellido_materno, #fecha_nacimiento').on('input', function() {
            let nombre = $('#nombre').val();
            let apellido_paterno = $('#apellido_paterno').val();
            let apellido_materno = $('#apellido_materno').val();
            let fecha_nacimiento = $('#fecha_nacimiento').val(); // dd/mm/yyyy
            
            if (fecha_nacimiento && fecha_nacimiento.includes('/')) {
                fecha_nacimiento = fecha_nacimiento.split('/').reverse().join('-');
            }

            if (!nombre || !apellido_paterno || !fecha_nacimiento || fecha_nacimiento.length !== 10) return;

            let rfc = calculaRFC({
                nombre: nombre,
                apellidoPaterno: apellido_paterno,
                apellidoMaterno: apellido_materno,
                fecha: fecha_nacimiento
            });
            $('#rfc').val(rfc);
            @this.set('solicitudData.rfc', rfc, true);
        });

        // Toggle Persona Moral logic
        $('#persona_moral').on('change', function() {
            handlePersonaMoralChange();
        });

        function handlePersonaMoralChange() {
            const isMoral = $('#persona_moral').is(':checked');
            const rfcInput = $('#rfc');
            const sexoInputs = $('input[name="solicitudData.sexo"]');
            const fechaNacimientoLabel = $('label[for="fecha_nacimiento"]');
            const razonSocialWrapper = $('#razon_social_wrapper');
            const nombresFisicaWrapper = $('#nombres_fisica_wrapper');
            const nombreInput = $('#nombre');
            const apellidoPaternoInput = $('#apellido_paterno');
            
            if (isMoral) {
                // RFC Validation: 12 chars
                rfcInput.attr('minlength', 12);
                rfcInput.attr('maxlength', 12);
                
                // Sexo: Not required
                sexoInputs.prop('required', false);
                
                // Label: Constitución
                fechaNacimientoLabel.html('Constitución <span class="text-danger">*</span>');
                
                // Show Razón Social
                razonSocialWrapper.show();
                $('#razon_social').prop('required', true);
                
                // Hide Nombres Físicos
                nombresFisicaWrapper.hide();
                nombreInput.prop('required', false).val('');
                apellidoPaternoInput.prop('required', false).val('');
                $('#apellido_materno').val('');
                
                // Disable auto-calculation for Moral Person
                $('#nombre, #apellido_paterno, #apellido_materno, #fecha_nacimiento').off('input');
            } else {
                // RFC Validation: 13 chars
                rfcInput.attr('minlength', 13);
                rfcInput.attr('maxlength', 13);
                
                // Sexo: Required
                sexoInputs.prop('required', true);
                
                // Label: Fecha Nacimiento
                fechaNacimientoLabel.html('Fecha Nacimiento <span class="text-danger">*</span>');
                
                // Hide Razón Social
                razonSocialWrapper.hide();
                $('#razon_social').prop('required', false).val('');
                
                // Show Nombres Físicos
                nombresFisicaWrapper.show();
                nombreInput.prop('required', true);
                apellidoPaternoInput.prop('required', true);
                
                // Re-attach listeners for auto-calc
                $('#nombre, #apellido_paterno, #apellido_materno, #fecha_nacimiento').off('input').on('input', function() {
                    let nombre = $('#nombre').val();
                    let apellido_paterno = $('#apellido_paterno').val();
                    let apellido_materno = $('#apellido_materno').val();
                    let fecha_nacimiento = $('#fecha_nacimiento').val(); 
                    
                    if (fecha_nacimiento && fecha_nacimiento.includes('/')) {
                        fecha_nacimiento = fecha_nacimiento.split('/').reverse().join('-');
                    }

                    if (!nombre || !apellido_paterno || !fecha_nacimiento || fecha_nacimiento.length !== 10) return;

                    let rfc = calculaRFC({
                        nombre: nombre,
                        apellidoPaterno: apellido_paterno,
                        apellidoMaterno: apellido_materno,
                        fecha: fecha_nacimiento
                    });
                    $('#rfc').val(rfc);
                    @this.set('solicitudData.rfc', rfc, true);
                });
            }
        }

        // Data from backend
        const companiasIndividual = @json($companiasIndividual);
        const companiasPool = @json($companiasPool);
        const formasPagoIndividual = @json($formasPagoIndividual);
        const formasPagoPool = @json($formasPagoPool);

        // Initialize on load
        handlePersonaMoralChange();
        handleTipoVentaChange();

        // 1. RFC to Birth Date
        
        // Auto-calculo RFC para Asegurados
        $('#aseg_nombre, #aseg_apellido_paterno, #aseg_apellido_materno, #aseg_fecha_nacimiento').on('input', function() {
            let nombre = $('#aseg_nombre').val();
            let apellido_paterno = $('#aseg_apellido_paterno').val();
            let apellido_materno = $('#aseg_apellido_materno').val();
            let fecha_nacimiento = $('#aseg_fecha_nacimiento').val(); 
            
            if (fecha_nacimiento && fecha_nacimiento.includes('/')) {
                fecha_nacimiento = fecha_nacimiento.split('/').reverse().join('-');
            }

            if (!nombre || !apellido_paterno || !fecha_nacimiento || fecha_nacimiento.length !== 10) return;

            let rfc = calculaRFC({
                nombre: nombre,
                apellidoPaterno: apellido_paterno,
                apellidoMaterno: apellido_materno,
                fecha: fecha_nacimiento
            });
            $('#aseg_rfc').val(rfc);
        });

        // 2. Tipo Venta & Date Logic

        $('input[name="solicitudData.tipo_venta"]').on('change', function() {
            handleTipoVentaChange();
        });

        function handleTipoVentaChange() {
            let tipoVenta = $('input[name="solicitudData.tipo_venta"]:checked').val();
            let fechaInicioInput = $('#fecha_inicio_vigencia');
            let dependenciaWrapper = $('#dependencia_pool_wrapper');
            let dependenciaSelect = $('#dependencia_pool');

            let targetCompanias = [];
            let targetFormasPago = [];

            if (tipoVenta === 'Pool') {
                targetCompanias = companiasPool;
                targetFormasPago = formasPagoPool;
                
                // Show Dependencia Pool
                dependenciaWrapper.show();
                dependenciaSelect.prop('required', true);
            } else {
                targetCompanias = companiasIndividual;
                targetFormasPago = formasPagoIndividual;
                
                // Hide Dependencia Pool
                dependenciaWrapper.hide();
                dependenciaSelect.prop('required', false).val('');
                if (typeof @this !== 'undefined') {
                    @this.set('solicitudData.dependencia_pool', '', true);
                }
            }

            // Update Selects
            updateSelectOptions('#compania', targetCompanias);
            updateSelectOptions('#forma_pago', targetFormasPago);
            
            // validateFechaInicio();
            calculateFechaFin();
        }

        function updateSelectOptions(selector, options) {
            let select = $(selector);
            let currentVal = select.val();
            select.empty();
            select.append(new Option("Seleccione...", ""));

            options.forEach(option => {
                select.append(new Option(option, option));
            });

            // Try to keep selection if valid
            if (options.includes(currentVal)) {
                select.val(currentVal);
            } else {
                select.val("");
            }
        }

        $('#fecha_inicio_vigencia').on('change', function() {
            // validateFechaInicio();
            calculateFechaFin();
        });

        function validateFechaInicio() {
            let input = $('#fecha_inicio_vigencia');
            let dateVal = input.val();
            if (!dateVal) return;

            // Parse d/m/Y
            let parts = dateVal.split('/');
            if (parts.length !== 3) return;
            let date = new Date(parts[2], parts[1] - 1, parts[0]);

            let today = new Date();
            today.setHours(0, 0, 0, 0);

            let tipoVenta = $('input[name="solicitudData.tipo_venta"]:checked').val();

            // Rule: Pool -> 1st of month
            if (tipoVenta === 'Pool') {
                if (date.getDate() !== 1) {
                    Swal.fire('Atención', 'Para venta Pool, la fecha de inicio debe ser el día 1 del mes.', 'warning');
                    input.val('');
                    return;
                }
            }

            // Rule: Max 30 days future, Max 10 days past
            let diffTime = date - today;
            let diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

            if (diffDays > 30) {
                Swal.fire('Error', 'La fecha de inicio no puede ser mayor a 30 días en el futuro.', 'error');
                input.val('');
            } else if (diffDays < -10) {
                Swal.fire('Error', 'La fecha de inicio no puede tener más de 10 días de antigüedad.', 'error');
                input.val('');
            }
        }

        // Handle asterisks for conditional documents
        function updateDocumentAsterisks() {
            let tipoVenta = $('input[name="solicitudData.tipo_venta"]:checked').val();
            let reconocimiento = $('#reconocimiento_antiguedad').is(':checked');

            if (tipoVenta === 'Pool') {
                $('#doc_talon_cheque').parent().parent().parent().show();
            } else {
                $('#doc_talon_cheque').parent().parent().parent().hide();
            }

            if (reconocimiento) {
                $('#star_carta').show();
            } else {
                $('#star_carta').hide();
            }
        }

        $('input[name="solicitudData.tipo_venta"]').on('change', updateDocumentAsterisks);
        $('#reconocimiento_antiguedad').on('change', updateDocumentAsterisks);
        

        // 3. Auto-calculate Fecha Fin
        function calculateFechaFin() {
            let inicioVal = $('#fecha_inicio_vigencia').val();
            if (inicioVal) {
                let parts = inicioVal.split('/');
                if (parts.length !== 3) return;
                let inicioDate = new Date(parts[2], parts[1] - 1, parts[0]);
                let tipoVenta = $('input[name="solicitudData.tipo_venta"]:checked').val();
                let finDate;

                if (tipoVenta === 'Pool') {
                    // Logic for Pool: Next July 1st
                    // First, try July 1st of the start year
                    finDate = new Date(inicioDate.getFullYear(), 6, 1); // Month is 0-indexed, so 6 is July

                    // If the calculated date is before or equal to the start date, move to next year
                    // e.g. Start: 02/07/2023 -> Target: 01/07/2024
                    // e.g. Start: 01/01/2023 -> Target: 01/07/2023
                    if (finDate <= inicioDate) {
                        finDate.setFullYear(finDate.getFullYear() + 1);
                    }
                } else {
                    // Default logic: +1 Year
                    finDate = new Date(inicioDate);
                    finDate.setFullYear(finDate.getFullYear() + 1);
                }

                let year = finDate.getFullYear();
                let month = String(finDate.getMonth() + 1).padStart(2, '0');
                let day = String(finDate.getDate()).padStart(2, '0');

                let finString = `${day}/${month}/${year}`;
                $('#fecha_fin_vigencia').val(finString);
                @this.set('solicitudData.fecha_fin_vigencia', finString, true);
            }
        }

        // 4. File Size and Type Validation
        $('#solicitudForm input[type="file"]').on('change', function() {
            if (this.files[0]) {
                // Validar tipo de archivo (solo PDF)
                const fileType = this.files[0].type;
                const fileName = this.files[0].name;
                const fileExtension = fileName.split('.').pop().toLowerCase();
                
                if (fileType !== 'application/pdf' && fileExtension !== 'pdf') {
                    Swal.fire('Error', 'Solo se aceptan archivos PDF.', 'error');
                    $(this).val(''); // Clear input
                    return;
                }
                
                // Validar tamaño (2MB)
                if (this.files[0].size > 1024 * 1024 * 2) { // 2MB
                    Swal.fire('Error', 'El archivo es demasiado pesado. Por favor suba un archivo menor a 2MB.', 'error');
                    $(this).val(''); // Clear input
                }
            }
        });

        // ==========================================
        // Comments Logic calling /gmm-solicitudes-comentarios
        // ==========================================
        let solicitudIdComments = null;

        Livewire.on('setComments', function(comentarios, id) {
            solicitudIdComments = id;
            $('#comments-wrapper').show();
            const msgs = document.getElementById('msgs');
            if (msgs) {
                msgs.innerHTML = '';
                comentarios.forEach(comentario => {
                    displayComment(comentario);
                });
            }
        });

        $('#sendComment').on('click', function() {
            let comment = $('#comment').val();

            if (comment && solicitudIdComments) {
                // Disable button
                let btn = $(this);
                let originalContent = btn.html();
                btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');

                fetch('/gmm-solicitudes-comentarios', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({
                            solicitud_id: solicitudIdComments,
                            comentario: comment
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.data) {
                            $('#comment').val('');
                            const newComment = {
                                ...data.data,
                                email: '{{ auth()->user()->email }}'
                            };
                            displayComment(newComment);
                        }
                    })
                    .catch(error => console.error('Error:', error))
                    .finally(() => {
                        btn.prop('disabled', false).html(originalContent);
                    });
            } else {
                Swal.fire('Atención', 'Escribe un comentario y asegúrate de estar editando una solicitud.', 'warning');
            }
        });

        function displayComment(comentario) {
            const msgs = document.getElementById('msgs');
            if (!msgs) return;

            const msgDiv = document.createElement('div');
            msgDiv.style.width = '100%';
            msgDiv.style.marginBottom = '10px';
            msgDiv.style.padding = '8px';
            msgDiv.style.border = '1px solid #e9ecef';
            msgDiv.style.borderRadius = '5px';
            msgDiv.style.backgroundColor = '#fff';

            let date = new Date(comentario.created_at).toLocaleString();

            msgDiv.innerHTML = `<strong>${comentario.email}</strong><br>${comentario.comentario}<br><small class="text-muted" style="font-size: 0.8em;">${date}</small>`;
            msgs.appendChild(msgDiv);
            msgs.scrollTop = msgs.scrollHeight;
        }

        // Clear comments when modal closes
        $('#modalSolicitud').on('hidden.bs.modal', function() {
            $('#msgs').html('');
            $('#comment').val('');
            $('#comments-wrapper').hide();
            solicitudIdComments = null;
        });
    });
</script>
@endpush