@push('css')
    <style>
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
    </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">
                        Conciliación
                    </h1>
                </div>
                <div class="col-auto">
                    <!--if (auth()->user()->can('cobranza.domiciliada.gnp.cargar'))-->
                    <button class="btn btn-primary lift" wire:click="$set('modalComisiones', true)">
                        Cargar comisiones
                    </button>
                    <!--endif-->
                </div>
            </div>
        </div>
    </div>

    <x-jet-dialog-modal wire:model="modalComisiones" maxWidth='md'>
        <x-slot name="title">
            Cargar Comisiones
        </x-slot>
        <x-slot name="content">
            <label for="import" class="mt-2">Cargar archivo de comisiones</label>
            <input type="file" class="form-control mt-2" accept=".xls, .xlsx" id="fileImport" wire:model="fileImport"
                name="import">
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                    wire:click="$set('modalComisiones', false)">Cerrar</button>
                <button type="button" class="btn btn-success" id="btnUploadAltas" {{ !$fileImport ? 'disabled' : '' }}
                    onclick="startLoading()" wire:click="import">
                    Importar
                </button>
            </div>
            @error('fileImport')
                <span class="error">{{ $message }}</span>
            @enderror
        </x-slot>
    </x-jet-dialog-modal>

    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3 mb-3">
                        <label class="form-label" for="tipo">Tipo de Reporte <span class="text-danger">*</span></label>
                        <select name="tipo" id="tipo" wire:model.defer="tipoSeleccionado" class="form-control">
                            <option value="">Selecciona un tipo</option>
                            <option value="POLIZA">Póliza</option>
                            <option value="TOTALES">Totales</option>
                        </select>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label" for="table-filter-rango">Rango Fecha de Pago <span class="text-danger">*</span></label>
                        <input type="text" id="table-filter-rango" class="form-control"
                            placeholder="Selecciona un rango de fechas" wire:model.defer="rangoFechasSeleccionado" readonly>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label" for="table-filter-rango-emision">Rango Fecha de Emisión</label>
                        <input type="text" id="table-filter-rango-emision" class="form-control"
                            placeholder="Opcional" wire:model.defer="rangoFechasEmision" readonly>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label" for="table-filter-rango-vigencia">Rango Fecha Inicio Vigencia</label>
                        <input type="text" id="table-filter-rango-vigencia" class="form-control"
                            placeholder="Opcional" wire:model.defer="rangoFechasVigencia" readonly>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3 mb-5 d-flex align-items-end">
                        <button class="btn btn-primary w-100" wire:click="aplicarFiltros" wire:loading.attr="disabled" id="btnAplicarFiltros">
                            Aplicar Filtros
                        </button>
                    </div>
                </div>
                @if (!empty($meses) && $tipoSeleccionado == 'POLIZA')
                    <hr class="my-4">
                    <div class="row mb-4">
                        <div class="col-md-4">
                            <label for="busquedaPoliza" class="form-label">Buscar Póliza</label>
                            <input type="text" class="form-control" id="busquedaPoliza" wire:model.defer="busquedaPoliza" placeholder="Ej: 123456">
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <button class="btn btn-primary w-100" wire:click="aplicarBusquedaPoliza" id="btnBuscarPoliza">
                                <i class="fe fe-search"></i> Buscar
                            </button>
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <button class="btn btn-secondary w-100" wire:click="limpiarBusquedaPoliza" id="btnLimpiarPoliza">
                                <i class="fe fe-x"></i> Limpiar
                            </button>
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <button class="btn btn-success w-100" onclick="exportarExcel()">
                                <i class="fe fe-download"></i> Exportar
                            </button>
                        </div>
                    </div>

                    <div class="row mb-2">
                        <div class="col-12 text-end">
                            <h3>Total Seleccionado: <span id="totalSeleccionado">0</span></h3>
                        </div>
                    </div>

                    <livewire:conciliacion.conciliacion-table-poliza
                        :meses="$meses"
                        :rangoFechasEmision="$rangoFechasEmision"
                        :rangoFechasVigencia="$rangoFechasVigencia"
                        :key="'poliza-' . $tipo . '-' . md5(json_encode($meses)) . '-' . md5(json_encode($rangoFechasEmision)) . '-' . md5(json_encode($rangoFechasVigencia))"
                    />
                @endif
                @if (!empty($meses) && $tipoSeleccionado == 'TOTALES')
                    <hr class="my-4">
                    <div class="row mb-4">
                        <div class="col-md-2 d-flex align-items-end">
                            <button class="btn btn-success w-100" onclick="exportarExcelTotal()">
                                <i class="fe fe-download"></i> Exportar
                            </button>
                        </div>
                    </div>
                    <livewire:conciliacion.conciliacion-table-total
                        :meses="$meses"
                        :rangoFechasEmision="$rangoFechasEmision"
                        :rangoFechasVigencia="$rangoFechasVigencia"
                        :key="'total-' . $tipo . '-' . md5(json_encode($meses)) . '-' . md5(json_encode($rangoFechasEmision)) . '-' . md5(json_encode($rangoFechasVigencia))"
                    />
                @endif 
            </div>
        </div>
    </div>
    <script>
        function startLoading() {
            Swal.fire({
                title: 'Cargando...',
                text: 'Espere mientras se realiza la operación.',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });
        }
        document.addEventListener("livewire:load", function() {
            Livewire.on('success', (message) => {
                setTimeout(() => {
                    Swal.fire({
                        title: '¡Éxito!',
                        text: message,
                        icon: 'success',
                        confirmButtonText: 'OK'
                    });
                }, 500);
            });

            Livewire.on('error', (message) => {
                setTimeout(() => {
                    Swal.fire({
                        title: 'Error',
                        text: message,
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                }, 500);
            });

            Livewire.on('importSuccess', () => {
                setTimeout(() => {
                    Swal.fire({
                        title: '¡Éxito!',
                        text: 'Archivo importado correctamente.',
                        icon: 'success',
                        confirmButtonText: 'OK'
                    });
                }, 500);
            });

            Livewire.on('importError', (message) => {
                setTimeout(() => {
                    Swal.fire({
                        title: 'Error en la Importación',
                        text: message,
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                }, 500);
            });
        });
    </script>

    <script>
        let loadingAlert;

        window.addEventListener('livewire:load', () => {
            Livewire.hook('message.sent', (message, component) => {
                loadingAlert = Swal.fire({
                    title: 'Cargando...',
                    text: 'Espere mientras se cargan los datos',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });
            });

            Livewire.hook('message.processed', (message, component) => {
                if (loadingAlert) {
                    Swal.close();
                }
            });
        });
    </script>

    <script>
        function exportarExcel() {
            Livewire.emit('exportarExcel');
        }
        function exportarExcelTotal() { 
            Livewire.emit('exportarExcelTotal');
        }
    </script>
</div>
@push('js')
    <script src="{{ asset('/assets/js/conciliacion/conciliacion.js?1.2') }}"></script>
    <script>
        $(document).ready(function() {
            let intervalId = null;
            
            $('#btnAplicarFiltros, #btnBuscarPoliza, #btnLimpiarPoliza').on('click', function() {
                intervalId = setInterval(function() {
                    let totalSeleccionado = $('span[data-total-seleccionado]').data('total-seleccionado');
                    if (totalSeleccionado !== undefined) {
                        let formatted = new Intl.NumberFormat('es-MX', {
                            style: 'currency',
                            currency: 'MXN',
                            minimumFractionDigits: 2,
                            maximumFractionDigits: 2,
                        }).format(totalSeleccionado);
                        $('#totalSeleccionado').text(formatted);
                        clearInterval(intervalId);
                        intervalId = null;
                    }
                }, 1000);
            });
        });
    </script>
@endpush