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

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

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

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

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

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

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

        .row {
            justify-content: center;
        }
    </style>
    <script src="{{ asset('/assets/js/function.js') }}"></script>
    <div id="loader">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>

    <div class="header">
        <div class="header-body">
            <div class="row align-items-center">
                <div class="col">

                    <h1 class="header-title">
                        Autorizaciones
                    </h1>
                </div>
                <div class="col-auto">
                    <button class="btn btn-primary lift" wire:click="create">
                        <i class="bi bi-clipboard-plus"></i>
                        Nueva Autorización
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <livewire:solicitudes.autorizaciones-table />
            </div>
        </div>
    </div>

    <!-- Modal de solicitud -->
    <div class="modal fade" id="modalAutorizacion" tabindex="-1" role="dialog" aria-hidden="true"
        aria-labelledby="myLargeModalLabel" data-bs-focus="false">
        <div class="modal-dialog modal-dialog-centered modal-lg justify-content-center" role="document">
            <div class="modal-content">

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

                <div class="form-group">
                    <form id="autorizacionForm" wire:ignore>
                        <!-- Paso 1 -->
                        <h4>Datos Autorización</h4>
                        <section>
                            <div class="row">
                                <!-- folio -->
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="folio" class="form-label">Folio <span
                                                class="text-danger">*</span></label>
                                        <input wire:model="autorizacion.folio" type="text" class="form-control"
                                            id="folio" name="folio" placeholder="Folio" maxlength="20">
                                    </div>
                                </div>
                                <!-- póliza -->
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="ot" class="form-label">Número de Solicitud</label>
                                        <input wire:model="autorizacion.id" type="text" class="form-control"
                                            id="ot" name="ot" placeholder="Número de Solicitud"
                                            maxlength="20" readonly>
                                    </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="nombre_contratante" class="form-label">Nombre del contratante <span
                                                class="text-danger">*</span></label>
                                        <input wire:model="autorizacion.nombre_contratante" type="text"
                                            class="form-control" id="nombre_contratante" name="nombre_contratante"
                                            placeholder="Nombre" maxlength="60"
                                            oninput="this.value = this.value.toUpperCase()">
                                    </div>
                                </div>
                                <!-- RFC -->
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="rfc_contratante" class="form-label">RFC <span
                                                class="text-danger">*</span></label>
                                        <input wire:model="autorizacion.rfc_contratante" type="text"
                                            class="form-control" id="rfc_contratante" name="rfc_contratante"
                                            placeholder="RFC" maxlength="13" minlength="10">
                                    </div>
                                </div>
                            </div>
                        </section>

                        <!-- Paso 3 -->
                        <h4>Datos de la Compra</h4>
                        <section>

                            <div class="row">
                                <!-- poliza -->
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="poliza" class="form-label">Póliza <span
                                                class="text-danger">*</span></label>
                                        <input wire:model="autorizacion.poliza" type="text" class="form-control"
                                            id="poliza" name="poliza" placeholder="Póliza" maxlength="20"
                                            oninput="this.value = this.value.toUpperCase()">
                                    </div>
                                </div>

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

                                <!-- producto -->
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="tipo_producto" class="form-label">Producto <span
                                                class="text-danger">*</span></label>
                                        <select wire:model.defer="autorizacion.tipo_producto" class="form-control"
                                            id="tipo_producto" name="tipo_producto" disabled>
                                            <option value="AUTO">AUTO</option>
                                            <option value="VIDA">VIDA</option>
                                            <option value="GMM">GMM</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <!-- quincena -->
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="quincena" class="form-label">Quincena <span
                                                class="text-danger">*</span></label>
                                        <select wire:model.defer="autorizacion.quincena" class="form-control"
                                            id="quincena" name="quincena" disabled>
                                            <option value="20" selected>20</option>
                                            <option value="24">24</option>
                                        </select>
                                    </div>
                                </div>
                                <!-- costo total -->
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="costo_total" class="form-label">Costo Total <span
                                                class="text-danger">*</span></label>
                                        <input wire:model="autorizacion.costo_total" type="text"
                                            class="form-control" id="costo_total" name="costo_total" maxlength="11">
                                    </div>
                                </div>

                                <!-- descuento quincenal -->
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="descuento_quincenal" class="form-label">Descuento Quincenal <span
                                                class="text-danger">*</span></label>
                                        <input wire:model="autorizacion.descuento_quincenal" type="text"
                                            class="form-control" id="descuento_quincenal" id="descuento_quincenal"
                                            name="descuento_quincenal" maxlength="10">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <!-- quincena inicio-->
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="quincena_inicio" class="form-label">Quincena Inicio<span
                                                class="text-danger">*</span></label>
                                        <input wire:model="autorizacion.quincena_inicio" type="text"
                                            class="form-control" id="quincena_inicio" name="quincena_inicio">
                                    </div>
                                </div>
                                <!-- ano inicio -->
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="anio_inicio" class="form-label">Año Inicio <span
                                                class="text-danger">*</span></label>
                                        <input wire:model="autorizacion.anio_inicio" type="text"
                                            class="form-control" id="anio_inicio" name="anio_inicio">
                                    </div>
                                </div>

                                <!-- seccion -->
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="seccion" class="form-label">Sección <span
                                                class="text-danger">*</span></label>
                                        <select wire:model.defer="autorizacion.seccion" class="form-control"
                                            id="seccion" name="seccion">
                                            @foreach ($secciones as $seccion)
                                                <option value="{{ $seccion }}">{{ $seccion }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </section>

                        <!-- Paso 4 -->
                        <h4>Datos del Asegurado</h4>
                        <section>

                            <div class="row">
                                <!-- nombre de contacto -->
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label for="nombre_contacto" class="form-label">Nombre de Contacto del
                                            Asegurado <span class="text-danger">*</span></label>
                                        <input wire:model="autorizacion.nombre_contacto" type="text"
                                            class="form-control" id="nombre_contacto" name="nombre_contacto">
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <!-- celular -->
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="celular" class="form-label">Celular <span
                                                class="text-danger">*</span></label>
                                        <input wire:model="autorizacion.celular" type="text"
                                            class="form-control phone-input" id="celular" name="celular">
                                    </div>
                                </div>
                                <!-- teléfono casa -->
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="telefono_casa" class="form-label">Teléfono Casa</label>
                                        <input wire:model="autorizacion.telefono_casa" type="text"
                                            class="form-control phone-input" id="telefono_casa" name="telefono_casa">
                                    </div>
                                </div>
                                <!-- correo -->
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="email" class="form-label">Correo <span
                                                class="text-danger">*</span></label>
                                        <input wire:model="autorizacion.email" type="text" class="form-control"
                                            id="email" name="email" placeholder="Correo">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <!-- nombre asegurado -->
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label for="nombre_asegurado" class="form-label">Nombre Asegurado<span
                                                class="text-danger">*</span></label>
                                        <input wire:model.defer="autorizacion.nombre_asegurado" type="text"
                                            class="form-control" id="nombre_asegurado" name="nombre_asegurado"
                                            placeholder="Nombre Asegurado">
                                    </div>
                                </div>
                            </div>

                        </section>

                        <!-- Paso 5 -->
                        <h4>Datos Laborales</h4>
                        <section>
                            <div class="row">
                                <!-- escuela -->
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="escuela" class="form-label">Escuela <span
                                                class="text-danger">*</span></label>
                                        <input wire:model="autorizacion.escuela" type="text" class="form-control"
                                            id="escuela" name="escuela" placeholder="Escuela" required>
                                    </div>
                                </div>

                                <!-- teléfono escuela -->
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="telefono_escuela" class="form-label">Teléfono Escuela </label>
                                        <input wire:model="autorizacion.telefono_escuela"
                                            class="form-control phone-input" id="telefono_escuela"
                                            name="telefono_escuela">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <!-- rfc escuela -->
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="rfc_escuela" class="form-label">RFC </label>
                                        <input wire:model="autorizacion.rfc_escuela" type="text"
                                            class="form-control" id="rfc_escuela" name="rfc_escuela"
                                            placeholder="RFC" oninput="this.value = this.value.toUpperCase()"
                                            maxlength="15" minlength="10">
                                    </div>
                                </div>

                                <!-- nivel -->
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="nivel" class="form-label">Nivel </label>
                                        <input wire:model="autorizacion.nivel" class="form-control" id="nivel"
                                            name="nivel" placeholder="Nivel">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <!-- turno -->
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="turno" class="form-label">Turno</label>
                                        <input wire:model="autorizacion.turno" class="form-control" id="turno"
                                            name="turno" placeholder="Turno">
                                    </div>
                                </div>
                            </div>
                        </section>

                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal de firmas -->
    <div class="modal fade" id="modalFirma" tabindex="-1" role="dialog" aria-hidden="true"
        aria-labelledby="myLargeModalLabel" data-bs-focus="false" wire:ignore.self>
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">

                <div class="modal-header">
                    <h4>Firmas</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <h3>Firma Representantes de Ventas</h3>
                                <button class="btn btn-primary"
                                    wire:click="getLinkVentas({{ $autorizacion['id'] ?? '' }})">Generar Liga</button>
                                @if ($linkVentas)
                                    <div class="mt-2">
                                        <a href="{{ $linkVentas }}" target="_blank">{{ $linkVentas }}</a>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <h3>Firma Contratante</h3>
                                <button class="btn btn-primary"
                                    wire:click="getLinkContratante({{ $autorizacion['id'] ?? '' }})">Generar
                                    Liga</button>
                                @if ($linkContratante)
                                    <div class="mt-2">
                                        <a href="{{ $linkContratante }}" target="_blank">{{ $linkContratante }}</a>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@push('js')
    <script src="{{ asset('/assets/custom/select2/js/select2.min.js') }}"></script>
    <script src="{{ asset('/assets/custom/steps/jquery.steps.min.js') }}"></script>
    <script src="{{ asset('/assets/custom/jquery-validate/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('/assets/custom/jquery-validate/localization/messages_es.min.js') }}"></script>
    <script>
        // $(document).ready(function() {
        document.addEventListener('livewire:load', function() {

            const form = $('#autorizacionForm')

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

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

                    let inputs = $('#autorizacionForm :input').not(':input[type="file"]')
                    inputs.each(function() {
                        let input = $(this)
                        let name = input.attr('name')
                        let value = input.val()

                        data[name] = value
                    });

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

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

                    Livewire.emit('hideModal')
                    Livewire.emit('uploadData', data)
                } catch (error) {
                    console.error(error)
                }
            }
        })
    </script>
    <script src="{{ asset('/assets/js/solicitudes/autorizacion.js') }}"></script>
@endpush