@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;
        }
        .select2-search__field {
            outline: none;
            box-shadow: none !important;
            border: 1px solid #ccc !important;
            border-radius: .375rem;
        }

    </style>
    <style>
        select:disabled {
            background-color: #eee !important;
        }
    </style>
@endpush

<div style="height: 100vh;">

    <!-- Encabezado de pagina -->
    <div class="header">
        <div class="header-body">
            <div class="row align-items-center">
                <div class="col">
                    <h1 class="header-title">
                        Trámites
                    </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 Trámite
                    </button>
                    <button type="button" class="btn btn-success lift" wire:click="$set('modalExport', true)">
                        <i class="bi bi-journal-arrow-up"></i>
                        Exportar Trámites
                    </button>
                    <button type="button" class="btn btn-secondary lift" wire:click="$emit('filtrarRechazados')">
                        <i class="bi bi-x-circle"></i>
                        Trámites Rechazados
                    </button>
                </div>
            </div>
        </div>
    </div>

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

    <!-- Modal de tramite -->
    <div class="modal fade" id="modalTramite" 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($tramite['id']) ? 'Actualizar Trámite' : 'Registrar Trámite' }}</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="form-group">
                    <form id="tramiteForm" wire:ignore>
                        <!-- Paso 1 -->
                        <h4>Datos Generales</h4>
                        <section>
                            <div class="row">
                                <div class="col-md-4">
                                    <label for="poliza" class="form-label">
                                        Número de póliza
                                    </label>
                                    <input class="form-control" type="text" name="poliza" id="poliza">
                                </div>
                                <div class="col-md-6">
                                    <label for="nombre" class="form-label">
                                        Nombre del contratante
                                    </label>
                                    <input class="form-control" type="text" name="nombre" id="nombre"
                                        wire:model.defer="tramite.nombre" maxlength="128">
                                </div>
                            </div>
                        </section>
                        <!-- Paso 2 -->
                        <h4>Datos Trámite</h4>
                        <section>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="dependencia" class="form-label">Dependencia</label>
                                        <select wire:model="tramite.dependencia" class="form-control" id="dependencia"
                                            name="dependencia">
                                            <option value="">Selecciona un dependencia</option>
                                            @foreach ($dependencias as $item)
                                                <option value="{{ $item }}">{{ $item }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="agente" class="form-label">Agente</label>
                                        <select wire:model="tramite.agente" class="form-control select2" id="agente"
                                            name="agente">
                                            <option value="">Selecciona un agente</option>
                                            @foreach ($empleados as $id => $nombre)
                                                <option value="{{ $id }}">{{ $nombre }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="fecha" class="form-label">Fecha de trámite</label>
                                        <input wire:model="tramite.fecha" type="text" class="form-control"
                                            id="fecha" name="fecha">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="estatus_tramite" class="form-label">Estatus de trámite</label>
                                        <select wire:model="tramite.estatus_tramite" class="form-control"
                                            id="estatus_tramite" name="estatus_tramite">
                                            <option value="">Selecciona un estatus</option>
                                            @foreach ($estatusTramite as $item)
                                                <option value="{{ $item }}">{{ $item }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="tramite" class="form-label">Tipo de trámite</label>
                                        <select wire:model="tramite.tramite" class="form-control"
                                            id="tramite" name="tramite"
                                            onchange="mostrarOtroTramite(this)">
                                            <option value="">Selecciona un tipo</option>
                                            @foreach ($tipoTramite as $item)
                                                <option value="{{ $item }}">{{ $item }}</option>
                                            @endforeach
                                        </select>

                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="tramite" class="form-label" style="display:none;"
                                            id="otro_tramite_label">Especifica el trámite</label>
                                        <input type="text" class="form-control" id="otro_tramite_input"
                                            name="otro_tramite_input" style="display:none;" maxlength="128" />
                                    </div>
                                </div>
                            </div>
                        </section>

                        <!-- Paso 3 -->
                        <h4>Datos Contacto</h4>
                        <section>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="correo" class="form-label">Correo</label>
                                        <input wire:model="tramite.correo" type="email" class="form-control"
                                            id="correo" name="correo">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="telefono" class="form-label">Teléfono</label>
                                        <input wire:model.defer="tramite.telefono" type="text"
                                            class="form-control" id="telefono" name="telefono">
                                    </div>
                                </div>
                            </div>
                        </section>

                        <!-- Paso 4 -->
                        <h4>Comentarios</h4>
                        <section>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="comentario" class="form-label">Comentario</label>
                                        <textarea wire:model="tramite.comentario" class="form-control" id="comentario" name="comentario" rows="3"></textarea>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="notificacion" class="form-label">Notificación</label>
                                        <textarea wire:model="tramite.notificacion" class="form-control" id="notificacion" name="notificacion"
                                            rows="3"></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 Fechas</label>
                <input type="text" class="form-control" id="fecha_rango" wire:model="fechaRango">
            </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="btnexportTramites" wire:click="exportTramites">
                @lang('Exportar Excel')
            </button>
        </x-slot>
    </x-jet-dialog-modal>
</div>

@push('js')
    <script>
        function mostrarOtroTramite(select) {
            var otroInput = document.getElementById('otro_tramite_input');
            var otroLabel = document.getElementById('otro_tramite_label');
            if (select.value === 'OTROS') {
                otroInput.style.display = '';
                otroLabel.style.display = '';
            } else {
                otroInput.style.display = 'none';
                otroLabel.style.display = 'none';
                otroInput.value = '';
            }
        }
        // Inicializar visibilidad al cargar (por si se edita)
        document.addEventListener('DOMContentLoaded', function() {
            var select = document.getElementById('tramite');
            if (select) mostrarOtroTramite(select);
        });
        // Si Livewire actualiza el modal, volver a checar
        document.addEventListener('livewire:load', function() {
            var select = document.getElementById('tramite');
            if (select) mostrarOtroTramite(select);
        });
    </script>
    <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>
        function changePlaceholder() {
            const inputSearch = document.querySelector('input[placeholder="Buscar"]');
            if (inputSearch) {
                inputSearch.setAttribute('placeholder', 'Buscar por póliza...');
            }
        }

        document.addEventListener('livewire:update', function() {
            changePlaceholder();
        });
        // $(document).ready(function() {
        document.addEventListener('livewire:load', function() {
            changePlaceholder();
            const form = $('#tramiteForm')
            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();
                }
            })

            const atrFormatFecha = {
                allowInput: true,
                dateFormat: "d/m/Y",
                locale: {
                    firstDayOfWeek: 1,
                    rangeSeparator: ' hasta ',
                    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("#fecha", atrFormatFecha);
            flatpickr("#fecha_rango", {
                ...atrFormatFecha,
                mode: "range",
            });
            flatpickr("#table-filter-fecha_de_registro", {
                ...atrFormatFecha,
                mode: "range",
            });


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

                    // Obtener inputs que no sean archivos
                    let inputs = $('#tramiteForm :input').not(':input[type="file"]');
                    inputs.each(function() {
                        let input = $(this);
                        let name = input.attr('name');
                        let value = input.val();
                        data[name] = value;
                    });
                    console.log(data);
                    // Emitir eventos de Livewire
                    Livewire.emit('hideModal');
                    Livewire.emit('uploadData', data);
                    polizaData = {};

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

            Livewire.on('showModal', function() {
                $('#tramite').trigger('change.select2');
                $('#agente').trigger('change.select2');
                $('#dependencia').trigger('change.select2');
                $('#estatus_tramite').trigger('change.select2');
                
                $('#poliza').val(@this.tramite['poliza']);

                var tipoTramite = @json($tipoTramite);
                var currentTipo = @this.tramite['tramite'] ?? '';
               
                if (!tipoTramite.includes(currentTipo) && currentTipo) {
                    $('#tramite').val('OTROS').trigger('change');
                } else {
                    $('#tramite').val(currentTipo).trigger('change');
                }
              
                // Si es personalizado, poner el valor en el input
                if (!tipoTramite.includes(currentTipo) && currentTipo) {
                    $('#otro_tramite_input').val(currentTipo);
                    $('#otro_tramite_input').show();
                    $('#otro_tramite_label').show();
                } else {
                    $('#otro_tramite_input').val('');
                    $('#otro_tramite_input').hide();
                    $('#otro_tramite_label').hide();
                }

                let polizaTimeout;
                
                $('#poliza').off('input').on('input', function() {
                    clearTimeout(polizaTimeout);
                    const value = $(this).val();
                    polizaTimeout = setTimeout(function() {
                        @this.set('tramite.poliza', value);
                    }, 500);
                });
            });

            Livewire.on('delete', function (id) {
                Swal.fire({
                    title: 'Eliminar trámite',
                    text: 'Por favor, ingresa el motivo de eliminación:',
                    input: 'text',
                    inputPlaceholder: 'Motivo de eliminación',
                    inputAttributes: {
                        maxlength: 255,
                        autocapitalize: 'off',
                        autocorrect: 'off'
                    },
                    showCancelButton: true,
                    confirmButtonText: 'Eliminar',
                    cancelButtonText: 'Cancelar',
                    confirmButtonColor: "#3095b2",
                    inputValidator: (value) => {
                        if (!value) {
                            return 'Debes ingresar un motivo';
                        }
                    }
                }).then((result) => {
                    if (result.isConfirmed && result.value) {
                        Livewire.emit('confirmDelete', [id, result.value]);
                    }
                });
            })


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