@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: #F2620F !important;
        }

        .docs-links {
            display: none;
        }

        #modalComentarios .modal-header {
            background-color: #fff;
            border-radius: 5px;
        }

        #modalComentarios .modal-content {
            background-color: transparent;
        }

        .container-chats-cards {
            display: flex;
            flex-direction: row;
            max-height: 60vh;
        }

        .chat-card {
            flex: 1;
            display: flex;
            flex-direction: column;
            background-color: #fff;
            border-radius: 0 0 20px 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            min-height: 60vh;
        }


        h4 {
            margin: 0;
        }

        .chat-body {
            flex: 1;
            display: flex;
            flex-direction: column;

            padding: 10px 10px 0 10px;
            overflow-y: auto;
        }

        .message {
            margin-bottom: 10px;
            padding: 10px;
            height: min-content;
        }

        .message-nombre {
            font-size: 12px;
            color: black;
            font-weight: bold;
            margin: 0;
        }

        .message-date {
            font-weight: bold;
            font-size: 10px;
            color: #333;
            margin: 5px 0 0 0;
        }

        .incoming .message-date {
            text-align: right;
        }

        .outgoing .message-date {
            text-align: left;
        }

        .incoming {
            background-color: #e1e1e1;
            margin-right: 20px;
            border-radius: 5px 5px 5px 0;
            background-color: #dce8fd;
        }

        .outgoing {
            margin-left: 20px;
            background-color: #f2f2f2;
            text-align: right;
            border-radius: 5px 5px 0 5px;
            background-color: #39afd1;
        }

        .outgoing p {
            color: white;
        }

        .message p {
            margin: 0;
        }

        .chat-footer {
            padding: 10px;
            background-color: #f2f2f2;
            display: flex;
            gap: 10px;
            justify-content: space-between;
            align-items: flex-end;
            border-radius: 0 0 15px 15px;
        }

        .chat-footer textarea {
            padding: 5px;
            flex: 1;
            border: none;
            border-radius: 10px;
        }

        .chat-footer textarea:focus {
            border: 2px solid #0d3973 !important;
        }

        .chat-footer button {
            padding: 5px 10px;
            border: none;
            background-color: #39afd1;
            color: #fff;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s;
            border-radius: 10px;
            height: min-content;
        }

        .chat-footer button:hover {
            background-color: #4285f4;
        }

        @keyframes chatAnimation {
            0% {
                opacity: 0;
                transform: translateY(10px);
            }

            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .chat-card .message {
            animation: chatAnimation 0.3s ease-in-out;
            animation-fill-mode: both;
            animation-delay: 0.1s;
        }

        .chat-card .message:nth-child(even) {
            animation-delay: 0.2s;
        }

        .chat-card .message:nth-child(odd) {
            animation-delay: 0.3s;
        }

        #container-docs .col-md-1 {
            min-width: min-content;
        }

        #container-docs .row {
            --bs-gutter-x: 0;
            padding: 5px;
        }
    </style>
@endpush

<div style="height: 100vh;">
    <!-- Indicador de carga -->
    <dialog id="loader">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </dialog>

    <!-- Encabezado de pagina -->
    <div class="header">
        <div class="header-body">
            <div class="row align-items-center">
                <div class="col">
                    <h1 class="header-title">
                        Solicitudes
                    </h1>
                </div>
                <div class="col-auto">
                    <!--button type="button" class="btn btn-info lift" wire:click="$set('modalImport', true)">
                        <i class="bi bi-journal-arrow-down"></i>
                        Importar Cartera
                    </button-->
                    @if (auth()->user()->can('solicitudes.crear'))
                        <button type="button" class="btn btn-primary lift" wire:click="create" id="bntNuevaSolicitud">
                            <i class="bi bi-clipboard-plus"></i>
                            Nueva Solicitud
                        </button>
                    @endif
                    <button type="button" class="btn btn-success lift" wire:click="$set('modalExport', true)">
                        <i class="bi bi-journal-arrow-up"></i>
                        Exportar Producción
                    </button>
                </div>
            </div>
        </div>
    </div>

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

    <!-- Modal de solicitud -->
    <div class="modal fade" id="modalSolicitud" tabindex="-1" role="dialog" aria-hidden="true"
        aria-labelledby="myLargeModalLabel" data-bs-focus="false" wire:ignore data-bs-backdrop="static"
        data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered modal-xl justify-content-center" role="document">
            <div class="modal-content">

                <div class="modal-header">
                    <h4>{{ isset($solicitud['id']) ? 'Actualizar Solicitud' : 'Registrar solicitud' }}</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="form-group">
                    <form id="solicitudForm" wire:ignore>
                        <!-- Paso 1 -->
                        <h4>Datos Folio</h4>
                        <section>
                            <div class="row">
                                <!-- folio -->
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="folio" class="form-label">Folio <span
                                                class="text-danger">*</span></label>
                                        <input wire:model.defer="solicitud.folio" type="text" class="form-control"
                                            id="folio" name="folio" placeholder="Folio" maxlength="20" required>

                                    </div>
                                </div>
                                <!-- colaborador -->
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="colaborador_id" class="form-label input-ignore">Colaborador <span
                                                class="text-danger">*</span></label>
                                        <select wire:model="solicitud.colaborador_id" name="colaborador_id"
                                            id="colaborador_id" name="colaborador_id" class="form-control" required>
                                            <option value="">Selecciona un colaborador</option>
                                            @foreach ($empleados ?? [] as $id => $nombre)
                                                <option value="{{ $id }}">{{ $id . ' - ' . $nombre }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <!-- mes -->
                                    <div class="mb-3">
                                        <label for="mes" class="form-label">Mes <span
                                                class="text-danger">*</span></label>
                                        <select wire:model="solicitud.mes" class="form-control select2" id="mes"
                                            name="mes" required>
                                            <option value="">Selecciona un mes</option>
                                            <option value="ENERO">ENERO</option>
                                            <option value="FEBRERO">FEBRERO</option>
                                            <option value="MARZO">MARZO</option>
                                            <option value="ABRIL">ABRIL</option>
                                            <option value="MAYO">MAYO</option>
                                            <option value="JUNIO">JUNIO</option>
                                            <option value="JULIO">JULIO</option>
                                            <option value="AGOSTO">AGOSTO</option>
                                            <option value="SEPTIEMBRE">SEPTIEMBRE</option>
                                            <option value="OCTUBRE">OCTUBRE</option>
                                            <option value="NOVIEMBRE">NOVIEMBRE</option>
                                            <option value="DICIEMBRE">DICIEMBRE</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <!-- año -->
                                    <div class="mb-3">
                                        <label for="anio_emision" class="form-label">Año <span
                                                class="text-danger">*</span></label>
                                        <select wire:model="solicitud.anio_emision" class="form-control"
                                            id="anio_emision" name="anio_emision" required>
                                            @foreach ($years as $year)
                                                <option value="{{ $year }}" {{ $year }}>
                                                    {{ $year }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <!-- fecha emisión -->
                                    <div class="mb-3">
                                        <label for="fecha_emision" class="form-label">Fecha Emisión</label>
                                        <input wire:model="solicitud.fecha_emision" type="text"
                                            class="form-control" id="fecha_emision" name="fecha_emision"
                                            placeholder="Fecha Emisión">
                                    </div>
                                </div>
                                <!-- semana -->
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="semana" class="form-label">Semana <span
                                                class="text-danger">*</span></label>
                                        <input wire:model.defer="solicitud.semana" type="text"
                                            class="form-control" id="semana" name="semana" placeholder="Semana"
                                            required>
                                        <input wire:model="solicitud.inicio_semana" type="text"
                                            class="form-control" id="inicio_semana" name="inicio_semana" hidden>
                                        <input wire:model="solicitud.fin_semana" type="text" class="form-control"
                                            id="fin_semana" name="fin_semana" hidden>
                                    </div>
                                </div>
                                <!-- póliza -->
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="poliza" class="form-label">Número de Póliza</label>
                                        <input wire:model="solicitud.poliza" type="text" class="form-control"
                                            id="poliza" name="poliza" placeholder="Número de póliza"
                                            maxlength="20">
                                    </div>
                                </div>
                            </div>
                            <div class="row">

                                <div class="col-md-6">
                                    <label for="doc_poliza" class="form-label">
                                        Póliza
                                    </label>
                                    <input class="form-control form-control" type="file" name="doc_poliza"
                                        id="doc_poliza" wire:model="solicitud.doc_poliza" accept=".pdf">
                                </div>
                                <div class="col-md-1">
                                    <label for="link_poliza" class="form-label">

                                    </label>
                                    <a id="link_poliza" target="_blank"
                                        class="btn btn-white lift bi bi-download docs-links"></a>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="estatus_id" class="form-label">Estatus de Trámite <span
                                                class="text-danger">*</span></label>
                                        <select wire:model="solicitud.estatus_id" class="form-control"
                                            id="estatus_id" name="estatus_id" required>
                                            <option value="">Selecciona un estatus</option>
                                            @foreach ($estatus ?? [] as $id => $estatus)
                                                <option value="{{ $id }}">{{ $estatus }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </section>

                        <!-- Paso 2 -->
                        <h4>Datos del contratante</h4>
                        <section>
                            <div class="row">
                                <!-- Nombre(s) -->
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="nombres_contra" class="form-label">Nombre del contratante <span
                                                class="text-danger">*</span></label>
                                        <input wire:model="solicitud.nombres_contra" type="text"
                                            class="form-control" id="nombres_contra" name="nombres_contra"
                                            placeholder="Nombre" maxlength="60"
                                            oninput="this.value = this.value.toUpperCase()" required>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label for="fecha_nacimiento_contra" class="form-label">Fecha Nacimiento <span
                                                class="text-danger">*</span></label>
                                        <input wire:model.defer="solicitud.fecha_nacimiento_contra" type="date"
                                            class="form-control" id="fecha_nacimiento_contra"
                                            name="fecha_nacimiento_contra" placeholder="Fecha Nacimiento" required>
                                    </div>
                                </div>

                                <!-- RFC -->
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label for="rfc_contra" class="form-label">RFC <span
                                                class="text-danger">*</span></label>
                                        <input wire:model="solicitud.rfc_contra" type="text" class="form-control"
                                            id="rfc_contra" name="rfc_contra" placeholder="RFC" maxlength="13"
                                            minlength="10" oninput="this.value = this.value.toUpperCase()" required>
                                    </div>
                                </div>

                            </div>
                            <div class="row">
                                <!-- fecha nacimiento -->


                                <!-- movil -->
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label for="movil_contra" class="form-label">Movil <span
                                                class="text-danger">*</span></label>
                                        <input wire:model="solicitud.movil_contra" type="text"
                                            class="form-control" id="movil_contra" name="movil_contra"
                                            placeholder="Teléfono" minlength="12" maxlength="12" required>
                                    </div>
                                </div>

                                <!-- correo -->
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label for="correo_contra" class="form-label">Correo <span
                                                class="text-danger">*</span></label>
                                        <input wire:model="solicitud.correo_contra" type="email"
                                            class="form-control" id="correo_contra" name="correo_contra"
                                            placeholder="Correo" maxlength="50"
                                            oninput="this.value = this.value.toUpperCase()" required>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="nombre_asegurado" class="form-label">Asegurado </label>
                                        <input wire:model="solicitud.nombre_asegurado" type="text"
                                            class="form-control" id="nombre_asegurado" name="nombre_asegurado"
                                            placeholder="Nombre" oninput="this.value = this.value.toUpperCase()"
                                            maxlength="60">
                                    </div>
                                </div>
                            </div>
                        </section>

                        <!-- Paso 3 -->
                        <h4>Datos del Trabajo</h4>
                        <section>

                            <div class="row">

                                <!-- matricula -->
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="matricula" class="form-label">Llave de descuento</label>
                                        <input wire:model="solicitud.matricula" type="text" class="form-control"
                                            id="matricula" name="matricula" placeholder="Llave de descuento"
                                            oninput="this.value = this.value.toUpperCase()">
                                    </div>
                                </div>

                                <!-- dependencia -->
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="dependencia" class="form-label">Dependencia <span
                                                class="text-danger">*</span></label>
                                        <select wire:model="solicitud.dependencia" class="form-control"
                                            id="dependencia" name="dependencia" required>
                                            <option value="">Selecciona una dependencia</option>
                                            @foreach ($dependencias ?? [] as $nombre)
                                                <option value="{{ $nombre }}">{{ $nombre }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </section>

                        <!-- Paso 4 -->
                        <h4>Datos Poliza</h4>
                        <section>

                            <div class="row">
                                <!-- prima quincenal -->
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="prima_quincenal" class="form-label">Prima Quincenal <span
                                                class="text-danger">*</span></label>
                                        <input wire:model="solicitud.prima_quincenal" type="text"
                                            class="form-control" id="prima_quincenal" name="prima_quincenal"
                                            placeholder="Prima Quincenal" required>
                                    </div>
                                </div>

                                <!-- ahorro anual -->
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="ahorro_anual" class="form-label">Ahorro Anual </label>
                                        <input wire:model="solicitud.ahorro_anual" type="text"
                                            class="form-control" id="ahorro_anual" name="ahorro_anual"
                                            placeholder="Ahorro Anual">
                                    </div>
                                </div>

                                <!-- prima riesgo anual -->
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="prima_total_se" class="form-label">Prima Total S/E <span
                                                class="text-danger">*</span></label>
                                        <input wire:model="solicitud.prima_total_se" type="text"
                                            class="form-control" id="prima_total_se" name="prima_total_se"
                                            placeholder="Prima Riesgo Anual" required>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <!-- prima total anual -->
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="prima_total" class="form-label">Prima Total <span
                                                class="text-danger">*</span></label>
                                        <input wire:model="solicitud.prima_total" type="text" class="form-control"
                                            id="prima_total" name="prima_total" placeholder="Prima Total Anual"
                                            required>
                                    </div>
                                </div>

                                <!-- enviada cobro -->
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="enviada_cobro" class="form-label">Enviada Cobro</label>
                                        <input wire:model.defer="solicitud.enviada_cobro" type="text"
                                            class="form-control" id="enviada_cobro" name="enviada_cobro">
                                    </div>
                                </div>

                                <!-- tipo venta -->
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="tipo_venta" class="form-label">Tipo de Venta <span
                                                class="text-danger">*</span></label>
                                        <select wire:model="solicitud.tipo_venta" class="form-control"
                                            id="tipo_venta" name="tipo_venta" required>
                                            <option value="">Selecciona un tipo de venta</option>
                                            @foreach ($tiposVenta ?? [] as $nombre)
                                                <option value="{{ $nombre }}">{{ $nombre }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </section>

                        <!-- Paso 5 -->
                        <h4>Observaciones</h4>
                        <section>

                            <div class="row">

                                <!-- fecha pago -->
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="fecha_pago" class="form-label">Fecha Pago <span
                                                class="text-danger">*</span></label>
                                        <input wire:model="solicitud.fecha_pago" type="text" class="form-control"
                                            id="fecha_pago" name="fecha_pago" placeholder="Fecha Pago" required>
                                    </div>
                                </div>

                                <!-- observaciones -->
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="comentario" class="form-label">Observaciones </label>
                                        <textarea wire:model="solicitud.comentario" class="form-control" id="comentario" name="comentario" rows="1"
                                            placeholder="Observaciones de la solicitud" oninput="this.value = this.value.toUpperCase()"></textarea>
                                    </div>
                                </div>
                            </div>
                        </section>

                        <!-- Paso 6 -->
                        <h4>Documentos</h4>
                        <section>
                            <div class="row row-cols-1 row-cols-sm-2 " id="container-docs">
                                <!-- Identifiación -->
                                <div class="row">
                                    <div class="col-md-1">
                                        <a id="link_identificacion" target="_blank"
                                            class="btn btn-primary lift bi bi-eye m-3 docs-links"></a>
                                    </div>
                                    <div class="col-md">
                                        <label for="doc_identificacion" class="form-label">
                                            <span class="bi bi-upload"
                                                style="font-size: 1rem; padding-right: 10px;"></span> Identificación
                                        </label>
                                        <input class="form-control form-control-sm" type="file"
                                            name="doc_identificacion" id="doc_identificacion"
                                            wire:model="solicitud.doc_identificacion" accept=".pdf">
                                    </div>
                                </div>
                                <!-- Comprobante de Domicilio -->
                                <div class="row">
                                    <div class="col-md-1">
                                        <a id="link_comprobante_domicilio" target="_blank"
                                            class="btn btn-primary lift bi bi-eye m-3 docs-links"></a>
                                    </div>
                                    <div class="col-md">
                                        <label for="doc_comprobante_domicilio" class="form-label">
                                            <span class="bi bi-upload"
                                                style="font-size: 1rem; padding-right: 10px;"></span> Comprobante de
                                            Domicilio
                                        </label>
                                        <input class="form-control form-control-sm" type="file"
                                            name="doc_comprobante_domicilio" id="doc_comprobante_domicilio"
                                            wire:model="solicitud.doc_comprobante_domicilio" accept=".pdf">
                                    </div>
                                </div>
                                <!-- Solicitud -->
                                <div class="row">
                                    <div class="col-md-1">
                                        <a id="link_solicitud" target="_blank"
                                            class="btn btn-primary lift bi bi-eye m-3 docs-links"></a>
                                    </div>
                                    <div class="col">
                                        <label for="doc_solicitud" class="form-label">
                                            <span class="bi bi-upload"
                                                style="font-size: 1rem; padding-right: 10px;"></span> Solicitud
                                        </label>
                                        <input class="form-control form-control-sm" type="file"
                                            name="doc_solicitud" id="doc_solicitud"
                                            wire:model="solicitud.doc_solicitud" accept=".pdf">
                                    </div>
                                </div>
                                <!-- Talon de descuento -->
                                <div class="row">
                                    <div class="col-md-1">
                                        <a id="link_talon" target="_blank"
                                            class="btn btn-primary lift bi bi-eye m-3 docs-links"></a>
                                    </div>
                                    <div class="col">
                                        <label for="doc_talon" class="form-label">
                                            <span class="bi bi-upload"
                                                style="font-size: 1rem; padding-right: 10px;"></span> Talón de
                                            descuento
                                        </label>
                                        <input class="form-control form-control-sm" type="file" name="doc_talon"
                                            id="doc_talon" wire:model="solicitud.doc_talon" accept=".pdf">
                                    </div>
                                </div>
                                <!-- Consentimiento de Descuento -->
                                <div class="row">
                                    <div class="col-md-1">
                                        <a id="link_consentimiento_descuento" target="_blank"
                                            class="btn btn-primary lift bi bi-eye m-3 docs-links"></a>
                                    </div>
                                    <div class="col-md">
                                        <label for="doc_consentimiento_descuento" class="form-label">
                                            <span class="bi bi-upload"
                                                style="font-size: 1rem; padding-right: 10px;"></span> Consentimiento de
                                            Descuento
                                        </label>
                                        <input class="form-control form-control-sm" type="file"
                                            name="doc_consentimiento_descuento" id="doc_consentimiento_descuento"
                                            wire:model="solicitud.doc_consentimiento_descuento" accept=".pdf">
                                    </div>
                                </div>
                                <!-- Carta de instrucción -->
                                <div class="row">
                                    <div class="col-md-1">
                                        <a id="link_carta_instruccion" target="_blank"
                                            class="btn btn-primary lift bi bi-eye m-3 docs-links"></a>
                                    </div>
                                    <div class="col-md">
                                        <label for="doc_carta_instruccion" class="form-label">
                                            <span class="bi bi-upload"
                                                style="font-size: 1rem; padding-right: 10px;"></span> Carta de
                                            Instrucción
                                        </label>
                                        <input class="form-control form-control-sm" type="file"
                                            name="doc_carta_instruccion" id="doc_carta_instruccion"
                                            wire:model="solicitud.doc_carta_instruccion" accept=".pdf">
                                    </div>
                                </div>
                                <!-- Documento Especial WS -->
                                <div class="row">
                                    <div class="col-md-1">
                                        <a id="link_especial_ws" target="_blank"
                                            class="btn btn-primary lift bi bi-eye m-3 docs-links"></a>
                                    </div>
                                    <div class="col-md">
                                        <label for="doc_especial_ws" class="form-label">
                                            <span class="bi bi-upload"
                                                style="font-size: 1rem; padding-right: 10px;"></span> Documento
                                            Especial WS
                                        </label>
                                        <input class="form-control form-control-sm" type="file"
                                            name="doc_especial_ws" id="doc_especial_ws"
                                            wire:model="solicitud.doc_especial_ws" accept=".pdf">
                                    </div>
                                </div>
                            </div>
                        </section>

                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal Observaciones -->
    <div class="modal fade" id="modalComentarios" tabindex="-1" aria-labelledby="exampleModalLabel"
        aria-hidden="true" wire:ignore data-bs-focus="false" wire:ignore data-bs-backdrop="static"
        data-bs-keyboard="false">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header" style="border-radius: 20px 20px 0 0;">
                    <h3>Observaciones</h3>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body" style="padding: 0;">
                    <div class="container-chats-cards">
                        <div class="chat-card">
                            <div class="chat-body" id="msgs">
                                @foreach ($solicitud['comentarios'] ?? [] as $comentario)
                                    @if ($comentario['user_id'] == auth()->user()->id)
                                        <div class="message outgoing">
                                            <p>{{ $comentario['comentario'] ?? '' }}</p>
                                            <p class="message-date">
                                                {{ date('d/m/Y H:i', strtotime($comentario['created_at'])) ?? 'no FECHA' }}
                                            </p>
                                        </div>
                                    @else
                                        <div class="message incoming">
                                            <p class="message-nombre">
                                                {{ ($comentario['user']['empleado']['nombre'] ?? '') . ' ' . ($comentario['user']['empleado']['apellido_paterno'] ?? '') }}
                                            </p>
                                            <p>{{ $comentario['comentario'] ?? '' }}</p>
                                            <p class="message-date">
                                                {{ date('d/m/Y H:i', strtotime($comentario['created_at'])) ?? 'no FECHA' }}
                                            </p>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                            <div class="chat-footer">
                                <textarea name="chat-comment" id="chat-comment" placeholder="Escribe un comentario..." class="form-control"></textarea>
                                <button id="btnSendComment"><i class="bi bi-send"></i></button>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal Import -->
    <x-jet-dialog-modal wire:model="modalImport">
        <x-slot name="title">
            @lang('Importar Cartera')
        </x-slot>
        <x-slot name="content">
            <div class="form-group">
                <label for="file">Archivo</label>
                <input type="file" class="form-control" id="file" accept=".xlsx">
                <x-jet-input-error for="file" />
            </div>
        </x-slot>
        <x-slot name="footer">
            <button class="btn btn-secondary" wire:click="$set('modalImport', false)">
                @lang('Cancelar')
            </button>
            <button class="btn btn-success" id="btnImportCartera">
                @lang('Importar')
            </button>
        </x-slot>
    </x-jet-dialog-modal>
    <!-- Modal Export -->
<x-jet-dialog-modal wire:model="modalExport" maxWidth="sm" >
    <x-slot name="title">
        @lang('Exportar Producción')
    </x-slot>
    <x-slot name="content">
        <div class="mb-3">
            <label for="fecha_rango" class="form-label">Rango de Fechas</label>
            <input type="text" class="form-control" id="fecha_rango" wire:model="fecha_rango">
        </div>
    </x-slot>
    <x-slot name="footer">
        <button class="btn btn-secondary" wire:click="$set('modalExport', false)">
            @lang('Cancelar')
        </button>
        <button class="btn btn-success" id="btnExportProduccion" wire:click="exportProduccion">
            @lang('Exportar Excel')
        </button>
    </x-slot>
</x-jet-dialog-modal>

    {{-- modal carga de poliza --}}
    <x-jet-dialog-modal wire:model="modalPoliza">
        <x-slot name="title">
            @lang('Cargar Póliza')
        </x-slot>
        <x-slot name="content">
            <div class="form-group mb-3">
                <label for="inputModalPoliza">Póliza</label>
                <input type="file" class="form-control" id="inputModalPoliza" wire:model="poliza"
                    accept=".pdf">
                <x-jet-input-error for="inputModalPoliza" />
            </div>
        </x-slot>
        <x-slot name="footer">
            <button class="btn btn-secondary" wire:click="$set('modalPoliza', false)">
                @lang('Cancelar')
            </button>
            <button class="btn btn-success" id="btnUploadPoliza" {{ $poliza ? '' : 'disabled' }}>
                @lang('Cargar')
            </button>
        </x-slot>
    </x-jet-dialog-modal>
</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>
        // $(document).ready(function() {
        document.addEventListener('livewire:load', function() {
            const form = $('#solicitudForm')
            let polizaData = {};
            const authUserId = {{ auth()->user()->id }};

            // 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) {
                    if (currentIndex > newIndex) {
                        return true
                    }
                    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) {
                    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();
                    polizaData = {};
                }
            })


            $("#doc_poliza").on("change", function() {
                uploadPoliza();
            });

            Livewire.on('polizaData', function(object) {
                console.log(object);

                if (object) {
                    polizaData = object;
                    Object.keys(object).forEach(function(key) {
                        if (key !== 'doc_poliza') {

                            let input = document.querySelector(`[name="${key}"]`);

                            if (input) {
                                input.value = object[key];
                            }
                        }
                    });

                }

                $('#prima_total_se').val(object['prima_total_se']);
            });

            async function uploadPoliza() {
                try {
                    let polizaData = {};
                    let fileInput = $('#doc_poliza');

                    // Obtener los datos del formulario (excluyendo input file)
                    let inputs = $('#solicitudForm :input').not(':input[type="file"]');
                    inputs.each(function() {
                        let input = $(this);
                        let name = input.attr('name');
                        let value = input.val();
                        polizaData[name] = value;
                    });

                    // Verificar si hay un archivo seleccionado
                    if (fileInput.length && fileInput[0].files.length > 0) {
                        let file = fileInput[0].files[0];

                        // Validar tamaño del archivo
                        if (file.size > 10000000) {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: `El archivo ${file.name} es demasiado grande`
                            });
                            return;
                        }

                        // Mostrar SweetAlert con barra de progreso
                        const swalWithProgress = Swal.fire({
                            title: 'Cargando archivo...',
                            text: 'Por favor espera mientras se carga el archivo.',
                            allowOutsideClick: false,
                            showConfirmButton: false,
                            didOpen: () => {
                                Swal.getHtmlContainer().innerHTML += `
                        <div class="progress" style="height: 20px; background-color: #f3f3f3; margin-top: 15px;">
                            <div id="progress-bar" class="progress-bar" 
                            role="progressbar" style="width: 0%; background-color: #12263f;" 
                            aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                            </div>
                        </div>
                        <p id="progress-text" style="text-align: center; margin-top: 10px; font-size: 14px;">0%</p> 
                    `;
                            }
                        });

                        // Subir archivo con Livewire
                        await new Promise((resolve, reject) => {
                            @this.upload('docPoliza', file, (value) => {
                                // Emitir evento con los datos del formulario
                                @this.set('solicitud', polizaData);

                                Swal.fire({
                                    icon: 'success',
                                    title: 'Archivo cargado',
                                    text: 'El archivo se ha cargado correctamente.',
                                    timer: 2000,
                                    showConfirmButton: false
                                });

                                resolve();
                            }, () => {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: 'Hubo un problema al subir el archivo.'
                                });
                                reject();
                            }, (event) => {
                                // Actualizar barra de progreso
                                const progress = event.detail.progress;
                                const progressBar = document.getElementById('progress-bar');
                                const progressText = document.getElementById('progress-text');
                                if (progressBar && progressText) {
                                    progressBar.style.width = `${progress}%`;
                                    progressText.innerText = `${progress.toFixed(0)}%`;
                                }
                            });
                        });
                    } else {
                        // Si no hay archivo, solo enviar los datos
                        @this.set('doc_poliza', polizaData);
                    }

                    // Emitir evento de actualización en Livewire
                    Livewire.emit('storageTemp');

                } catch (error) {
                    console.error(error);
                    Swal.fire({
                        icon: 'error',
                        title: 'Error inesperado',
                        text: 'Ocurrió un error al subir el archivo.'
                    });
                }
            }

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

                    // Obtener inputs que no sean archivos
                    let inputs = $('#solicitudForm :input').not(':input[type="file"]');
                    inputs.each(function() {
                        let input = $(this);
                        let name = input.attr('name');
                        let value = input.val();
                        data[name] = value;
                    });


                    // Mezclar polizaData con data
                    Object.assign(data, polizaData);

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

                    for (let fileInput of files) {
                        if (!fileInput.files[0]) continue;
                        if (fileInput.files[0].size > 10000000) {
                            let fileName = fileInput.files[0].name;
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: 'El archivo ' + fileName + ' es demasiado grande'
                            });
                            return;
                        }
                        await new Promise((resolve, reject) => {
                            @this.upload('solicitud.' + fileInput.name, fileInput.files[0], () => {
                                resolve();
                            }, () => {
                                console.error('Error al cargar el archivo');
                                reject();
                            });
                        });
                    }

                    // Emitir eventos de Livewire
                    Livewire.emit('hideModal');
                    Livewire.emit('uploadData', data);
                    polizaData = {};

                    // Opcional: recargar la página
                    // setTimeout(() => {
                    //     location.reload();
                    // }, 4000);

                } catch (error) {
                    console.error(error);
                }
            }





            $('#btnImportCartera').on('click', function() {
                let archivo = document.getElementById('file').files[0];
                if (!archivo) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Selecciona un archivo'
                    });
                    return;
                }

                Swal.fire({
                    title: 'Cargando archivo...',
                    html: '<div class="progress"><div id="progressBar" class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div></div>',
                    showConfirmButton: false,
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                });

                @this.upload('file', archivo, () => {
                    Swal.fire({
                        icon: 'success',
                        title: 'Importación exitosa',
                        text: 'Se han importado las solicitudes correctamente'
                    });
                    $('#file').val('');
                    @this.set('modalImport', false);
                }, (e) => {
                    console.log({
                        e
                    });
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Ocurrió un error al importar las solicitudes'
                    });
                }, (event) => {
                    const progress = event.detail.progress;
                    $('#progressBar').css('width', progress + '%').attr('aria-valuenow', progress)
                        .text(
                            progress + '%');
                }, () => {
                    // Cancelled callback...
                });
            });

            $('#btnUploadPoliza').on('click', function() {
                let archivo = document.getElementById('inputModalPoliza').files[0];
                if (!archivo) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Selecciona un archivo'
                    });
                    return;
                } else Livewire.emit('uploadPoliza')

                $('#inputModalPoliza').val('');
            });

            Livewire.on('showComments', (comments) => {
                const msgsContainer = $('#msgs');
                msgsContainer.empty(); // Limpiar comentarios anteriores

                comments.forEach(comentario => {

                    const isOutgoing = comentario.user_id === authUserId;
                    const messageClass = isOutgoing ? 'outgoing' : 'incoming';
                    const nombre = isOutgoing ? '' :
                        `${comentario.user.empleado?.nombre ?? ''} ${comentario.user.empleado?.apellido_paterno ?? ''}`;
                    const fecha = new Date(comentario.created_at).toLocaleString('es-ES', {
                        day: '2-digit',
                        month: '2-digit',
                        year: 'numeric',
                        hour: '2-digit',
                        minute: '2-digit'
                    });

                    const messageHtml = `
                <div class="message ${messageClass}">
                    ${!isOutgoing ? `<p class="message-nombre">${nombre}</p>` : ''}
                    <p>${comentario.comentario ?? ''}</p>
                    <p class="message-date">${fecha}</p>
                </div>
            `;

                    msgsContainer.append(messageHtml);
                });

                $('#modalComentarios').modal('show');
            });

        })
    </script>
    <script src="{{ asset('/assets/js/solicitudes/solicitudes.js') }}"></script>
    <script src="{{ asset('/assets/js/function.js') }}"></script>
@endpush