@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>
    select:disabled {
        background-color: #eee !important;
    }

    .wizard>.content {
        overflow-x: hidden !important;
        height: 40vh;
    }

    .wizard>.actions>ul>li:nth-child(3)>a {
        background-color: #00d97e !important;
    }
</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">
                        Autos
                    </h1>
                </div>
                <div class="col-auto">
                    <button type="button" class="btn btn-primary lift" wire:click="create" id="bntNuevaAuto">
                        <i class="bi bi-clipboard-plus"></i>
                        Nuevo Auto
                    </button>
                    <button type="button" class="btn btn-primary lift" wire:click="$set('modalRetenedor', true)">
                        <i class="bi bi-journal-arrow-down"></i>
                        Archivo Retenedor
                    </button>
                    <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 autos -->
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <livewire:autos.autos-table />
            </div>
        </div>
    </div>

    <!-- Modal de auto -->
    <div class="modal fade" id="modalAuto" 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" role="document">
            <div class="modal-content">

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

                <div class="form-group">
                    <form id="autoForm" wire:ignore>
                        <!-- Paso 1 -->
                        <h4>Datos Generales</h4>
                        <section>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="aseguradora" class="form-label"><span
                                                class="text-danger">*</span>Aseguradora</label>
                                        <select wire:model="auto.aseguradora" class="form-control" id="aseguradora"
                                            name="aseguradora" required>
                                            <option value="">Selecciona una aseguradora</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="tipo_movimiento" class="form-label">
                                            <span class="text-danger">* </span>Tipo de Movimiento</label>
                                        <select wire:model="auto.tipo_movimiento" class="form-control select2"
                                            id="tipo_movimiento" name="tipo_movimiento" required>
                                            <option value="A">Alta</option>
                                            <option value="B">Baja</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <label for="doc_poliza" class="form-label">
                                        <span class="text-danger">* </span>Póliza
                                    </label>
                                    <div class="d-flex align-items-center justify-content-evenly">
                                        <input class="form-control" type="file" name="doc_poliza" id="doc_poliza"
                                            wire:model.defer="auto.doc_poliza" accept=".pdf" disabled>
                                        <a id="link_poliza" target="_blank"
                                            class="btn btn-white lift fe fe-download docs-links ms-2"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="sucursal" class="form-label">
                                            <span class="text-danger">* </span>Sucursal</label>
                                        <input wire:model="auto.sucursal" type="text" class="form-control"
                                            id="sucursal" name="sucursal" placeholder="Sucursal" maxlength="64"
                                            oninput="this.value = this.value.toUpperCase()" required>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="ramo" class="form-label">
                                            <span class="text-danger">* </span>Ramo</label>
                                        <input wire:model="auto.ramo" type="text" class="form-control"
                                            id="ramo" name="ramo" placeholder="Ramo" maxlength="64" required
                                            oninput="this.value = this.value.toUpperCase()">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="poliza" class="form-label"><span class="text-danger">*
                                            </span>Número de Póliza</label>
                                        <input wire:model="auto.poliza" type="text" class="form-control"
                                            id="poliza" name="poliza" placeholder="Póliza" maxlength="64"
                                            oninput="this.value = this.value.toUpperCase()" required>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="poliza" class="form-label"><span class="text-danger">*
                                            </span>Fecha de Emisión</label>
                                        <input wire:model="auto.fecha_emision" type="text" class="form-control"
                                            id="fecha_emision" name="fecha_emision">
                                    </div>
                                </div>
                            </div>
                        </section>
                        <!-- Paso 2 -->
                        <h4>Datos Cliente</h4>
                        <section>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="nombre_contratante" class="form-label">Nombre del
                                            Contratante</label>
                                        <input wire:model="auto.nombre_contratante" type="text"
                                            class="form-control" id="nombre_contratante" name="nombre_contratante"
                                            placeholder="Nombre del Contratante" maxlength="128"
                                            oninput="this.value = this.value.toUpperCase()" required>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="asegurado" class="form-label"><span class="text-danger">*
                                            </span>Nombre del Asegurado</label>
                                        <input wire:model="auto.asegurado" type="text" class="form-control"
                                            id="asegurado" name="asegurado" placeholder="Nombre del Contratante"
                                            maxlength="128" oninput="this.value = this.value.toUpperCase()">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="rfc_contratante" class="form-label"><span class="text-danger">*
                                            </span>RFC</label>
                                        <input wire:model="auto.rfc_contratante" type="text" class="form-control"
                                            id="rfc_contratante" name="rfc_contratante" placeholder="RFC"
                                            maxlength="13" minlength="10"
                                            oninput="this.value = this.value.toUpperCase()" required>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="correo_contra" class="form-label"><span
                                                class="text-danger">*</span> Correo</label>
                                        <input wire:model="auto.correo_contra" type="email" class="form-control"
                                            id="correo_contra" name="correo_contra" placeholder="Correo electrónico"
                                            maxlength="128" required>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="telefono_contra" class="form-label">Teléfono</label>
                                        <input wire:model="auto.telefono_contra" type="text" class="form-control"
                                            id="telefono_contra" name="telefono_contra" maxlength="20">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="movil_contra" class="form-label"><span
                                                class="text-danger">*</span> Móvil</label>
                                        <input wire:model="auto.movil_contra" type="text" class="form-control"
                                            id="movil_contra" name="movil_contra" maxlength="20" required>
                                    </div>
                                </div>
                            </div>
                        </section>

                        <!-- Paso 3 -->
                        <h4>Primas</h4>
                        <section>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="prima_neta" class="form-label"><span class="text-danger">*
                                            </span>Prima Neta</label>
                                        <input wire:model="auto.prima_neta" type="text" class="form-control"
                                            id="prima_neta" name="prima_neta" placeholder="Prima Neta" required>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="recargo" class="form-label"><span class="text-danger">*
                                            </span>Recargo</label>
                                        <input wire:model="auto.recargo" type="text" class="form-control"
                                            id="recargo" name="recargo" placeholder="Recargo" required>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="derechos" class="form-label"><span class="text-danger">*
                                            </span>Derechos</label>
                                        <input wire:model="auto.derechos" type="text" class="form-control"
                                            id="derechos" name="derechos" placeholder="Derechos" required>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="iva" class="form-label"><span class="text-danger">*
                                            </span>IVA</label>
                                        <input wire:model="auto.iva" type="text" class="form-control"
                                            id="iva" name="iva" placeholder="IVA" required>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="prima_total" class="form-label"><span class="text-danger">*
                                            </span>Prima Total</label>
                                        <input wire:model="auto.prima_total" type="text" class="form-control"
                                            id="prima_total" name="prima_total" placeholder="Prima Total" required>
                                    </div>
                                </div>
                            </div>
                        </section>

                        <!-- Paso 4 -->
                        <h4>Datos Póliza</h4>
                        <section>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="agente" class="form-label"><span class="text-danger">*
                                            </span>Agente</label>
                                        <select wire:model="auto.agente" class="form-control select2" id="agente"
                                            name="agente" required>
                                            <option value="">Selecciona un agente</option>
                                            @foreach ($empleados as $id => $nombre)
                                            <option value="{{ $id }}">{{ $id }} -
                                                {{ $nombre }}
                                            </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="plan" class="form-label"><span
                                                class="text-danger">*</span>Plan</label>
                                        <select wire:model="auto.plan" class="form-control select2" id="plan"
                                            name="plan" required>
                                            <option value="">Selecciona un plan</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="renovacion" class="form-label"><span class="text-danger">*
                                            </span>Renovación</label>
                                        <input wire:model="auto.renovacion" type="text" class="form-control"
                                            id="renovacion" name="renovacion" placeholder="Renovación" required>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="forma_pago" class="form-label"><span class="text-danger">*
                                            </span>Forma de Pago</label>
                                        <select wire:model="auto.forma_pago" class="form-control" id="forma_pago"
                                            name="forma_pago" required>
                                            <option value="">Selecciona Forma de Pago</option>
                                            @foreach ($formasPago as $item)
                                            <option value="{{ $item }}">{{ $item }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="dependencia" class="form-label"><span
                                                class="text-danger">*</span>Dependencia</label>
                                        <select wire:model="auto.dependencia" class="form-control select2"
                                            id="dependencia" name="dependencia" required>
                                            <option value="">Selecciona una dependencia</option>
                                            <option value="SEP SINALOA">SEP SINALOA</option>
                                            <option value="SERVICIOS DE SALUD SINALOA">SERVICIOS DE SALUD SINALOA
                                            </option>
                                            <option value="PARTICULAR">PARTICULAR</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="matricula" class="form-label"><span class="text-danger">*
                                            </span>Matricula</label>
                                        <input wire:model="auto.matricula" type="text" class="form-control"
                                            id="matricula" name="matricula" required>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="inicio_vigencia" class="form-label"><span class="text-danger">*
                                            </span>Inicio Vigencia</label>
                                        <input wire:model="auto.inicio_vigencia" type="text" class="form-control"
                                            id="inicio_vigencia" name="inicio_vigencia" placeholder="Inicio Vigencia"
                                            required>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="fin_vigencia" class="form-label"><span class="text-danger">*
                                            </span>Fin Vigencia</label>
                                        <input wire:model="auto.fin_vigencia" type="text" class="form-control"
                                            id="fin_vigencia" name="fin_vigencia" placeholder="Fin Vigencia"
                                            required>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="inicio_descuento" class="form-label"><span class="text-danger">*
                                            </span>Inicio Descuento</label>
                                        <input wire:model="auto.inicio_descuento" type="text" class="form-control"
                                            id="inicio_descuento" name="inicio_descuento" required>
                                    </div>
                                </div>
                            </div>

                        </section>

                        <!-- Paso 5 -->
                        <h4>Datos Vehículo</h4>
                        <section>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="marca" class="form-label"><span
                                                class="text-danger">*</span>Marca</label>
                                        <select wire:model="auto.marca" class="form-control select2" id="marca"
                                            name="marca" required>
                                            <option value="">Selecciona una marca</option>
                                            @foreach ($listas['marcas'] as $marca)
                                            <option value="{{ $marca }}">{{ $marca }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="placas" class="form-label">Placas</label>
                                        <input wire:model="auto.placas" type="text" class="form-control"
                                            id="placas" name="placas" placeholder="Placas">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="modelo" class="form-label"><span class="text-danger">*
                                            </span>Modelo</label>
                                        <input wire:model="auto.modelo" type="text" class="form-control"
                                            id="modelo" name="modelo" placeholder="Modelo" required>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="numero_serie" class="form-label"><span class="text-danger">*
                                            </span>Número de Serie</label>
                                        <input wire:model="auto.numero_serie" type="text" class="form-control"
                                            id="numero_serie" name="numero_serie" placeholder="Número de Serie"
                                            required>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="numero_motor" class="form-label"><span class="text-danger">*
                                            </span>Número de Motor</label>
                                        <input wire:model="auto.numero_motor" type="text" class="form-control"
                                            id="numero_motor" name="numero_motor" placeholder="Número de Motor"
                                            required>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="descripcion_vehiculo" class="form-label">
                                            <span class="text-danger">*</span>Descripción
                                        </label>
                                        <textarea wire:model="auto.descripcion_vehiculo" class="form-control" id="descripcion_vehiculo"
                                            name="descripcion_vehiculo" placeholder="Descripción" rows="3" required>
                                        </textarea>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <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 inicio de vigencia</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>

    <x-jet-dialog-modal wire:model="modalRetenedor" maxWidth="sm">
        <x-slot name="title">
            @lang('Archivo Retenedor')
        </x-slot>
        <x-slot name="content">
            <div class="mb-3">
                <label for="fecha_rango_emision" class="form-label">Rango de emision</label>
                <input type="text" class="form-control" id="fecha_rango_emision" wire:model="fecha_rango_emision">
            </div>
        </x-slot>
        <x-slot name="footer">
            <button class="btn btn-secondary" wire:click="$set('modalRetenedor', false)">
                @lang('Cancelar')
            </button>
            <button class="btn btn-success" id="btnExportProduccion" wire:click="exportRetenedor">
                @lang('Exportar Excel')
            </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 livewireComponent = window.Livewire.find('{{ $_instance->id }}');
        const form = $('#autoForm')
        const authUserId = {{ auth()->user()->id }};
        window.CAL_TERCEROS = {
            2025: @json($cal2025)
        };

    // 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();
        }
    })


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

    $('#aseguradora').on("change", function() {
        if ($('#aseguradora').val()) {
            $("#doc_poliza").prop('disabled', false);
            if (selectAseguradora.val() != 'GENERAL DE SEGUROS') {
                $("#sucursal, #ramo").val(0);
            } else {
                $("#sucursal, #ramo").val('');
            }
        } else {
            $("#doc_poliza").prop('disabled', true);
        }
    });

    // $("#aseguradora").on("change", function() {
    //    livewireComponent.set('aseguradora', $(this).val());
    // });

    const planes = {
        ALLIANZ: ['BÁSICO', 'LIMITADO', 'AMPLIO', 'MASTER'],
        GNP: ['RESPONSABILIDAD CIVIL', 'LIMITADA', 'AMPLIA', 'AMPLIA MAS', 'PREMIUM'],
        'GENERAL DE SEGUROS': ['CONFORT BÁSICA', 'CONFORT LIMITADA', 'CONFORT AMPLIA S/ROBO',
            'CONFORT AMPLIA', 'PRESTIGIO'
        ],
        AXA: ['BÁSICA', 'ESENCIAL', 'AMPLIA BÁSICA', 'AMPLIA', 'AMPLIA PLUS']
    }

    const selectAseguradora = $('#aseguradora');
    const selectPlan = $('#plan');
    const formaPago = $('#forma_pago');
    const dependencia = $('#dependencia');

    Object.keys(planes).forEach(function(key) {
        selectAseguradora.append($('<option>').val(key).text(key));
    });

    selectAseguradora.on("change", function() {
        selectPlan.empty();
        selectPlan.append($('<option>').val('').text('Selecciona un plan'));
        const selectedAseguradora = $(this).val();
        const selectedPlanes = planes[selectedAseguradora];
        selectedPlanes.forEach(function(plan) {
            selectPlan.append($('<option>').val(plan).text(plan));
        });
    });

    const atrFormatFecha = {
        allowInput: true,
        dateFormat: "d/m/Y",
        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'
                ],
            },
        }
    };

    // Flatpickr para fechas
    flatpickr("#inicio_vigencia", atrFormatFecha); flatpickr("#fin_vigencia", atrFormatFecha); flatpickr("#fecha_emision", atrFormatFecha); flatpickr("#inicio_descuento", atrFormatFecha);


    flatpickr("#table-filter-fecha_de_registro", {
        ...atrFormatFecha,
        mode: "range",
    }); flatpickr("#fecha_rango", {
        ...atrFormatFecha,
        mode: "range",
    }); flatpickr("#fecha_rango_emision", {
        ...atrFormatFecha,
        mode: "range",
    });

    $('#modalAuto').on('shown.bs.modal', function() {
        // Limpiar el input de archivo doc_poliza
        $('#doc_poliza').val('');
        $("#doc_poliza").prop('disabled', true);
        // Obtener aseguradora y plan actuales
        const selectedAseguradora = selectAseguradora.val();
        const selectedPlan = livewireComponent.get('auto.plan');
        selectPlan.empty();
        selectPlan.append($('<option>').val('').text('Selecciona un plan'));
        if (selectedAseguradora && planes[selectedAseguradora]) {
            planes[selectedAseguradora].forEach(function(plan) {
                selectPlan.append($('<option>').val(plan).text(plan));
            });
            if (selectedPlan) {
                selectPlan.val(selectedPlan);
            }
        }
        selectPlan.trigger('change');
    });

    const formasPago = {
        'CONTADO': {
            dependencia: ['ANUAL'],
        },
        'DESCUENTO POR NOMINA': {
            dependencia: ['SEP SINALOA', 'SERVICIOS DE SALUD SINALOA'],
        },
        'FRACCIONADO': {
            dependencia: ['TRIMESTRAL', 'SEMESTRAL'],
        },
        'DOMICILIACIÓN': {
            dependencia: ['QUINCENAL', 'MENSUAL'],
        }
    }

    const initializeFormasPago = () => {
        const selectedFormaPago = formaPago.val();
        const selectedDependencia = livewireComponent.get('auto.dependencia');
        if (selectedFormaPago) {
            dependencia.prop('disabled', false);
            const selectedDependencias = formasPago[selectedFormaPago].dependencia;
            dependencia.empty();
            dependencia.append($('<option>').val('').text('Selecciona una dependencia'));
            selectedDependencias.forEach(function(valor) {
                dependencia.append($('<option>').val(valor).text(valor));
            });
            // Seleccionar la dependencia que viene de Livewire si existe
            if (selectedDependencia && selectedDependencias.includes(selectedDependencia)) {
                dependencia.val(selectedDependencia);
            } else if (selectedDependencias.length === 1) {
                dependencia.val(selectedDependencias[0]);
            }
            dependencia.trigger('change');
        } else {
            dependencia.empty();
            dependencia.append($('<option>').val('').text('Selecciona una dependencia'));
            dependencia.prop('disabled', true);
        }
    };

    formaPago.on("change", initializeFormasPago);

    $('#modalAuto').on('shown.bs.modal', initializeFormasPago);

    formaPago.on('change', function() {
        const selectedFormaPago = formaPago.val();
        const matriculaInput = $('#matricula');

        if (selectedFormaPago === 'DESCUENTO POR NOMINA') {
            matriculaInput.prop('required', true);
        } else {
            matriculaInput.prop('required', false);
        }
    });

    $('#modalAuto').on('shown.bs.modal', function() {
        formaPago.trigger('change');
    });

    // === Helpers (si ya los tienes, puedes omitirlos) ===
    function toISODate(s) {
        if (!s) return null;
        s = s.toString().trim();
        let m;
        if ((m = s.match(/^(\d{2})[\/-](\d{2})[\/-](\d{4})$/))) {
            const [, d, mo, y] = m;
            return `${y}-${mo.padStart(2,'0')}-${d.padStart(2,'0')}`;
        }
        if (/^\d{4}-\d{2}-\d{2}$/.test(s)) return s;
        const dt = new Date(s);
        return isNaN(dt) ? null : dt.toISOString().slice(0, 10);
    }

    function quincenaDesdeCaptura(isoDate) {
        const d = new Date(isoDate + 'T00:00:00'); // evita desplazamientos de TZ
        const day = d.getUTCDate();
        let year = d.getUTCFullYear();
        let month = d.getUTCMonth() + 1; // 1..12
        let qMes;
        if (day >= 17) {
            month++;
            if (month === 13) {
                month = 1;
                year++;
            }
            qMes = 1;
        } else {
            qMes = 2;
        }
        const numero = (month - 1) * 2 + qMes; // 1..24
        return {
            year,
            numero
        };
    }

    function getFechaPagoCalendario(year, numero) {
        const M = window.CAL_TERCEROS;
        if (!M) return null;
        const yMap = M[year] || M[String(year)];
        if (!yMap) return null;
        return yMap[numero] || yMap[String(numero)] || null;
    }


    $(document).on('change', '#forma_pago, #inicio_vigencia, #fecha_emision', async function() {
        const metodo = $('#forma_pago').val();
        const $vigencia = $('#inicio_vigencia');
        const $descuento = $('#inicio_descuento');

        // Diferenete de DxN
        if (!['DXN', 'DESCUENTO POR NOMINA'].includes(metodo)) {
            $descuento.val($vigencia.val() || '').trigger('change').prop('readOnly', true);
            return;
        }

        // DxN 
        if (['DXN', 'DESCUENTO POR NOMINA'].includes(metodo)) {
            const rawCaptura = $('#fecha_emision').val();
            const capturaISO = toISODate(rawCaptura) || new Date().toISOString().slice(0, 10);
            const {
                year,
                numero
            } = quincenaDesdeCaptura(capturaISO);
            const fechaPago = getFechaPagoCalendario(year, numero);

            if (fechaPago) {
                $descuento.val(fechaPago).trigger('change').prop('readOnly', true);
                console.log(fechaPago);
            } else {
                $descuento.prop('readOnly', false);
                console.warn('Calendario no encontrado para', {
                    year,
                    numero
                });
            }
            return;
        }

        $descuento.prop('readOnly', false);
    });



    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];
                    }
                    if (input && input.tagName === 'SELECT') {
                        $(input).trigger('change');
                    }
                }
            });

            // Si estaba activo el loader de GS, cerrarlo
            if (Swal.isVisible() && Swal.getTitle() && Swal.getTitle().innerText.includes('Cargando')) {
                Swal.close();
            }
        }

    });

    let polizaData = {};

    // Constante de tamaño máx. (10 MB)
    const MAX_FILE_SIZE = 10 * 1024 * 1024;

    // Mezcla donde el FORMULARIO tiene prioridad sobre el autocompletado
    function mergePreferForm(formData, autoData) {
        // Si una misma key existe en ambos, queda el valor del formulario
        return Object.assign({}, autoData, formData);
    }

    // Mezcla que SOLO rellena vacíos del formulario con el autocompletado (opcional)
    function fillOnlyEmpty(formData, autoData) {
        const out = {
            ...formData
        };
        for (const k in autoData) {
            const v = out[k];
            if (v === undefined || v === null || v === '') {
                out[k] = autoData[k];
            }
        }
        return out;
    }

    async function uploadPoliza() {
        try {
            //Tomar datos del FORMULARIO (excluye inputs file)
            const formData = {};
            $('#autoForm :input')
                .not(':input[type="file"]')
                .each(function() {
                    const name = this.name;
                    if (!name) return;
                    formData[name] = $(this).val();
                });

            //  Archivo (opcional)
            const $fileInput = $('#doc_poliza');
            const hasFile = $fileInput.length && $fileInput[0].files.length > 0;

            if (hasFile) {
                const file = $fileInput[0].files[0];

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

                // SweetAlert con barra de progreso
                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: #3095b2;" 
                                 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>`;
                    }
                });

                await new Promise((resolve, reject) => {
                    livewireComponent.upload(
                        'docPoliza', // <- nombre de la propiedad Livewire que recibe el archivo
                        file,
                        () => {
                            // Enviar datos del formulario (si aplica guardarlos en 'auto')
                            livewireComponent.set('auto', formData);

                            if (formData.aseguradora === 'GENERAL DE SEGUROS') {
                                Swal.update({
                                    title: 'Cargando...',
                                    text: 'Por favor espera mientras se procesa la póliza.',
                                    icon: 'info',
                                    showConfirmButton: false,
                                    timer: null
                                });
                            } else {
                                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) => {
                            // Progreso
                            const progress = event.detail.progress;
                            const bar = document.getElementById('progress-bar');
                            const txt = document.getElementById('progress-text');
                            if (bar && txt) {
                                bar.style.width = `${progress}%`;
                                txt.innerText = `${progress.toFixed(0)}%`;
                            }
                        }
                    );
                });
            } else {
                livewireComponent.set('auto', formData);
            }

            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 {
            const formData = {};
            $('#autoForm :input')
                .not(':input[type="file"]')
                .each(function() {
                    const name = this.name;
                    if (!name) return;
                    formData[name] = $(this).val();
                });

            const data = mergePreferForm(formData, polizaData);

            const $files = $('#autoForm input[type="file"]');
            for (const inputEl of $files) {
                const file = inputEl.files && inputEl.files[0];
                if (!file) continue;

                if (file.size > MAX_FILE_SIZE) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'El archivo ' + file.name + ' es demasiado grande'
                    });
                    return;
                }

                await new Promise((resolve, reject) => {
                    livewireComponent.upload(
                        'auto.' + inputEl.name,
                        file,
                        resolve,
                        () => {
                            console.error('Error al cargar el archivo:', inputEl.name);
                            reject();
                        }
                    );
                });
            }

            Livewire.emit('hideModal');
            Livewire.emit('uploadData', data);

            polizaData = {};
        } 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,
        });

        livewireComponent.upload('file', archivo, () => {
            Swal.fire({
                icon: 'success',
                title: 'Importación exitosa',
                text: 'Se han importado los autos correctamente'
            });
            $('#file').val('');
            livewireComponent.set('modalImport', false);
        }, (e) => {
            console.log({
                e
            });
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Ocurrió un error al importar los autos'
            });
        }, (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('');
    });

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