@push('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<style> 

    .card { 
        padding: 50px;
        justify-content: center;
        margin-top: 50px;
    }

    .contain-body button {
    margin-right: 2%; 
    }

    .border-right{ 
        border-right: 2px solid #ccc;
    }

    .input-field{ 
        margin-top: 15px ;
        margin-left: 10px ;
        margin-bottom: 5px ;
        margin-right: 10px ;
    }

    select{ 
        margin-bottom: 5px;
    }

    .label-totales{ 
        margin-top: 35px !important;
    }

    h3{ 
        margin-bottom: 3% !important;
    }

    select{ 
        margin-left: 10px !important;
    }

    .dropzone {
        margin-top: 50px;
        padding: 20px;
        margin-bottom: 3%;
        min-height: 200px !important; 
    }
    .dz-message {
      text-align: center;
      font-size: 1.5em;
    }

    .dz-preview {
      display: inline-block;
      width: 100px;
      height: 100px;
      border: 2px solid #ebebeb;
      margin: 10px;
      position: relative;
      overflow: hidden;
      border-radius: 5px;
    }
    .dz-preview img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .choices {
    position: relative;
    overflow: hidden;
    margin-bottom: 35;
    margin-top: 15px;
    font-size: 16px;
    }

    p{ 
        font-weight: 500;
    }

    .separador{ 
        margin-top: 20px;
        margin-bottom: 20px;
        width: 20px; /* Ancho del espacio */
        height: 20px; /* Altura del espacio */
    }
    .btn-color{ 
        background-color: #1fa8e0; 
        color: white;
    }

    h5 {
        font-size: 1.16rem !important;
        color: #1fa8e0 !important;
        padding: 0;
        margin-left: 10px;
        text-align: start;
    }

    h1{
        margin-top: 20px !important;
    }

    .custom-select-wrapper {
        margin-top: 15px ;

        display: block;
        width: 100%;
        font-size: .925rem;
        font-weight: 400;
        line-height: 1.5;
        color: var(--bs-body-color);
        background-color: var(--bs-secondary-bg);
        background-clip: padding-box;
        border: var(--bs-border-width) solid var(--bs-border-color);
        appearance: none;
        border-radius: var(--bs-border-radius);
        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    }

    .custom-select {
        padding: .25rem 2.5rem .25rem .5rem;
        background-color: var(--bs-secondary-bg);
        vertical-align: middle;
        border-radius: var(--bs-border-radius);
        min-height: 38px;
        font-size: 14px;
        padding-bottom: .25rem;
        border-bottom-color: var(--bs-border-color) !important;    
        cursor: pointer;
        position: relative;
        overflow: hidden;
        font-size: 16px;
    }

    .custom-select-icon {
        position: absolute;
        top: 20px;
        right: 10px;
        transform: translateY(-50%);
        font-size: 18px;
        font-weight: 700;
    }

    .input-search{
        background-color: var(--bs-secondary-bg) !important;
        border-bottom-color: var(--bs-border-color) !important;
        border-right: 0 !important;
        display: block;
        width: 100%;
        padding: 10px;
        border-bottom: 1px solid #ddd;
        margin: 0;
        outline-offset: -2px;
    }



    .custom-select-dropdown {
        z-index: 1;
        position: absolute;
        width: 98%;
        background-color: #fff;
        border: 1px solid #ddd;
        top: 100%;
        margin-top: -5px;
        border-bottom-left-radius: 2.5px;
        border-bottom-right-radius: 2.5px;
        max-height: 300px;
        overflow-y: auto; 
        overflow-x: hidden;
        word-break: break-all;
        will-change: visibility;
        background-color: var(--bs-secondary-bg) !important;
        border-color: var(--bs-border-color-translucent) !important;
        box-shadow: var(--bs-box-shadow) !important;
        border: 1px solid #ddd;
    }

    .custom-select-option {
        padding: 10px;
        cursor: pointer;
    }

    .custom-select-option:hover {
        background-color: var(--bs-tertiary-bg) !important;
    }

    .custom-select-option.selected {
        background-color: #ddd;
    }

    .custom-placeholder{ 
        display: inline-block;
        padding: 4px 16px 4px 4px;
        width: 100%;
        font-size: 14px !important;
    }

    .check-container{
        padding-left: 0px; 
        padding-right: 0px; 
        margin: 0; 
        margin-left: 10px !important;
        text-align: center;
    }

    .pickr .pcr-button{
        width: 100% !important;
        margin-top: 12px;

    }

    .pick-container{
        text-align: center;
    }

    .hidden{ 
        display: none;
    }

    .show{ 
        display: flex !important;
    }

    .mt-15px{
        margin-top: 15px;
    }

    .mt-35px{
        margin-top: 35px;
    }

    select{
        width:100%;
        background-color: white;
        border: 1px solid #eee; 
        border-radius: 12px;
        height: 42px;
        display: flex;
        align-items: center;
        padding: 5px 12px;
        font-family: inherit;
        font-size: 16px;
    }
    .select2-container--default .select2-selection--single {
        background-color: white;
        border: 1px solid #ccc; 
        border-radius: 12px;
        height: 42px;
        display: flex;
        align-items: center;
        padding: 5px 12px;
        font-family: inherit;
        font-size: 16px;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: 10px;
    }


    .select2-container--default .select2-selection--single .select2-selection__arrow b {
        display: none !important; 
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow::after {
        content: ">";
        display: block;
        transform: rotate(90deg);
        font-size: 14px;
        position: absolute;
        top: 50%;
        right: 8px;
        transform-origin: center;
        translate: 0 -50%;
        pointer-events: none;
    }

    .select2-search__field{
        margin:1px;
    }

    .has-selection .select2-selection {
        border-color: #3b82f6 !important;
        box-shadow: 0 0 0 1px #3b82f6 !important;
    }

    .select2-container {
        width: 100% !important;
    }
        
</style>
@endpush

@section('title')
    Generar solicitud
@endsection
@section('page-title')
    Generar solicitud
@endsection

<div>
    @can('crear aprobaciones')
        <h1> Generar solicitud</h1>

        <div class="card">
            <form wire:submit="crearAprobacion" >
                <!-- <div class="separador"></div> -->
                <div class="row ">

                    <div class="col-sm-6 input-box mt-35px" wire:ignore>
                        <h5>Categoría</h5>

                        <select class="form-control select2 mt-15px" name="categoriaNombre" id="categoriaSelect" wire:model="selectedCategoria">
                            <option value="">Selecciona una categoría</option>
                            @foreach($categorias as $categoria)
                                <option value="{{ $categoria->id }}">{{ $categoria->nombre }}</option>
                            @endforeach
                        </select>
                        @error('selectedCategoria') <span class="text-danger">{{ $message }}</span> @enderror
                    </div>

                    <div class="col-sm-6 input-box mt-35px" wire:ignore>
                        <h5>Catálogo</h5>
                        <select class="form-control select2 mt-15px" name="catalogoNombre" id="catalogoSelect" wire:model="selectedCatalogo">
                            <option value="">Selecciona una catalogo</option>
                            @foreach($catalogos as $catalogo)
                                <option value="{{ $catalogo['id'] }}">{{ $catalogo['nombre'] }}</option>
                            @endforeach
                        </select>
                        @error('selectedCatalogo') <span class="text-danger">{{ $message }}</span> @enderror
                    </div>

                    <div class="col-sm-6 input-box mt-35px" wire:ignore>
                        <h5>Empresa</h5>

                        <select class="form-control select2 mt-15px" name="empresaNombre" id="empresaSelect" wire:model="selectedEmpresa">
                            <option value="">Selecciona una empresa</option>
                            @foreach($empresas as $empresa)
                                <option value="{{ $empresa->id }}">{{ $empresa->nombre }}</option>
                            @endforeach
                        </select>
                        @error('selectedEmpresa') <span class="text-danger">{{ $message }}</span> @enderror
                    </div>

                    <div class="col-sm-6 input-box mt-35px" wire:ignore>
                        <h5>Sucursal</h5>

                        <select class="form-control select2 mt-15px" name="sucursalNombre" id="sucursalSelect" wire:model="selectedSucursal">
                            <option value="">Selecciona una sucursal</option>
                            @foreach($sucursales as $sucursal)
                                <option value="{{ $sucursal->id }}">{{ $sucursal->nombre }}</option>
                            @endforeach
                        </select>
                        @error('selectedSucursal') <span class="text-danger">{{ $message }}</span> @enderror
                    </div>



                    @if($this->perfil == 'Master' || $this->perfil == 'Contralor' || $this->perfil == 'Administrador' ) 

                        <div class="col-sm-6 input-box mt-35px" wire:ignore>
                            <h5>Solicitante</h5>

                            <select class="form-control select2 mt-15px" name="usuario" id="solicitanteSelect" wire:model="selectedSolicitante">
                                <option value="">Selecciona una solicitante</option>
                                @foreach($usuarios as $usuario)
                                    <option value="{{ $usuario->id }}">{{ $usuario->name }} {{ $usuario->apellidos }}</option>
                                @endforeach
                            </select>
                            @error('selectedSolicitante') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>

                    @endif    

                    <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 mt-35px">
                        <h5> Monto </h5>
                        <input class="form-control mt-15px" type="text" wire:model="monto" wire:keyup="formatear()" placeholder="Monto" id="number-mask">
                        @error('monto') <span class="text-danger">{{ $message }}</span> @enderror
                    </div>

                    <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 mt-35px">
                        <h5> Descripción</h5>
                        <input class="form-control mt-15px" type="text" wire:model="descripcion" placeholder="Descripción">
                    </div>

                    <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 mt-35px">
                        <h5> Proveedor/Acreedor</h5>
                        <input class="form-control mt-15px" type="text" wire:model="destinatario" placeholder="Proveedor/Acreedor">
                        @error('destinatario') <span class="text-danger">{{ $message }}</span> @enderror
                    </div>

                    <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 mt-35px">
                        <h5> Fecha de pago</h5>
                        <input class="form-control mt-15px" type="date" wire:model="fechaPago">
                        @error('fechaPago') <span class="text-danger">{{ $message }}</span> @enderror
                    </div>

                </div>

                <div class="row justify-content-end" style="margin-top: 40px; margin-right: 30px">
                    <button wire:click="cancelar()" type="button" class="col-sm-2 btn btn-secondary btn-rounded waves-effect waves-light"> Cancelar </button>
                    <button style="margin-left: 25px;" type="submit" class="col-sm-2 btn btn-color btn-rounded waves-effect waves-light"> Añadir solicitud</button>
                </div>

            </form>
        </div>
    @endcan
</div>



@section('scripts')
        
    <script
    src="https://code.jquery.com/jquery-3.7.1.min.js"
    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
    crossorigin="anonymous"></script>
    <script src="{{ URL::asset('build/libs/imask/imask.min.js') }}"></script>

    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    


    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Obtener todos los elementos con el id 'selectCategoria'
            const selectWrappers = document.querySelectorAll('.custom-select-wrapper');
            
            selectWrappers.forEach(function(selectWrapper) {
                const customSelect = selectWrapper.querySelector('.custom-select');
                const dropdown = selectWrapper.querySelector('.custom-select-dropdown');
                const placeholder = customSelect.querySelector('.custom-placeholder');
                const options = dropdown.querySelectorAll('.custom-select-option');
                
                // Mostrar u ocultar el dropdown al hacer clic en el selector
                customSelect.addEventListener('click', function() {
                    const isDropdownVisible = dropdown.style.display === 'block';
                    dropdown.style.display = isDropdownVisible ? 'none' : 'block';
                });

                // Cambiar el valor seleccionado al hacer clic en una opción
                options.forEach(function(option) {
                    option.addEventListener('click', function() {
                        const selectedOption = option.querySelector('.opcion').textContent;
                        placeholder.textContent = selectedOption;
                        dropdown.style.display = 'none';  // Cerrar el dropdown al seleccionar
                    });
                });

                // Cerrar el dropdown si se hace clic fuera del select
                document.addEventListener('click', function(event) {
                    if (!selectWrapper.contains(event.target)) {
                        dropdown.style.display = 'none';
                    }
                });
            });
        });
    </script>

    <script>
        Livewire.on('change', function(data){ 
            let id = 'number-mask';

            setTimeout(function() {
                let mask = IMask(document.getElementById(id), {
                    lazyPlaceholder: false,
                    mask: '$num',
                    blocks: {
                        num: {
                            mask: Number,
                            thousandsSeparator: ',',
                            radix: '.',
                            decimalPlaces: 2,
                            padFractionalZeros: false,
                            normalizeZeros: false,
                        }
                    }
                });

                mask.updateValue();
            }, 1000);  
        });
    </script>

    <script>
        var primerMenu = 0;

        Livewire.on('mostrar-barra', function(){
            const barra = $('.vertical-menu');
            console.log(barra);
            if (primerMenu == 0) {
                barra.removeClass('hidden');
                barra.addClass('show');
                primerMenu++;

            }else{
                if (barra.hasClass('hidden')) {
                    barra.removeClass('hidden');
                    barra.addClass('show');
                } else {
                    barra.addClass('hidden');
                    barra.removeClass('show');
                }
            }
        });
    </script>

    <script>
            const body = document.body;

            document.addEventListener('readystatechange', function () {
                document.addEventListener('set-tema', function (data) {
                    body.setAttribute('data-bs-theme', data.detail.tema);
                    console.log(body);
                    });

            });


            document.addEventListener('cambiar-tema', function (data) {
                    console.log(data.detail);
                    body.setAttribute('data-bs-theme', data.detail.tema);
                    console.log( body);
                });
            
            document.addEventListener('cambiar-tamaño', function (data) {
                if (body.getAttribute('data-sidebar-size') =='sm') {
                    body.setAttribute('data-sidebar-size', '');
                    localStorage.setItem('size', '');

                } else {
                body.setAttribute('data-sidebar-size', 'sm');
                // localStorage.setItem('size', 'sm');

                }

            });

    </script>


    <script>
        document.addEventListener('livewire:init', () => {
            // Inicializar Select2 para marca
            const categoriaSelect = $('#categoriaSelect').select2({
                placeholder: 'Selecciona una categoria',
                allowClear: true
            });
            
            // Inicializar Select2 para vehículo (inicialmente deshabilitado)
            const catalogoSelect = $('#catalogoSelect').select2({
                placeholder: 'Selecciona un catalogo',
                allowClear: true,
                disabled: true
            });

            const empresaSelect = $('#empresaSelect').select2({
                placeholder: 'Selecciona una empresa',
                allowClear: true
            });

            const sucursalSelect = $('#sucursalSelect').select2({
                placeholder: 'Selecciona una sucursal',
                allowClear: true
            });

            const solicitanteSelect = $('#solicitanteSelect').select2({
                placeholder: 'Selecciona una solicitante',
                allowClear: true
            });

            // Evento cambio de marca
            categoriaSelect.on('change', function (e) {
                const value = $(this).val();
                @this.set('selectedCategoria', value || null, true);
            });

            // Evento cambio de modelo
            catalogoSelect.on('change', function (e) {
                const value = $(this).val();
                @this.set('selectedCatalogo', value || null, true);
            });

            empresaSelect.on('change', function (e) {
                const value = $(this).val();
                @this.set('selectedEmpresa', value || null, true);
            });

            sucursalSelect.on('change', function (e) {
                const value = $(this).val();
                @this.set('selectedSucursal', value || null, true);
            });

            solicitanteSelect.on('change', function (e) {
                const value = $(this).val();
                @this.set('selectedSolicitante', value || null, true);
            });

            // Escuchar evento para actualizar el select de vehículos
            Livewire.on('catalogos-actualizados', (event) => {
                // Destruir el Select2 existente
                if ($('#catalogoSelect').hasClass('select2-hidden-accessible')) {
                    $('#catalogoSelect').select2('destroy');
                }
                
                // Limpiar opciones
                $('#catalogoSelect').empty().append('<option value="">Selecciona un catalogo</option>');
                
                // Agregar nuevas opciones
                if (event.catalogos && event.catalogos.length > 0) {
                    event.catalogos.forEach(catalogo => {
                        $('#catalogoSelect').append(
                            `<option value="${catalogo.id}">${catalogo.nombre}</option>`
                        );
                    });
                    
                    // Habilitar y recrear Select2
                    $('#catalogoSelect').prop('disabled', false)
                        .select2({
                            placeholder: 'Selecciona un catalogo',
                            allowClear: true
                        });
                } else {
                    // Deshabilitar si no hay catálogos
                    $('#catalogoSelect').prop('disabled', true)
                        .select2({
                            placeholder: 'No hay catálogos disponibles',
                            allowClear: true,
                            disabled: true
                        });
                }
                
                // Resetear selección
                $('#catalogoSelect').val(null).trigger('change');
            });

            // Sincronizar cambios desde Livewire a Select2
            // Livewire.hook('morph.updated', () => {
            //     // Sincronizar categoria
            //     const categoriaLivewire = @this.selectedCategoria;
            //     if (categoriaLivewire !== categoriaSelect.val()) {
            //         categoriaSelect.val(categoriaLivewire).trigger('change');
            //     }
                
            //     // Sincronizar catalogo
            //     const catalogoLivewire = @this.selectedCatalogo;
            //     if (catalogoLivewire !== catalogoSelect.val()) {
            //         catalogoSelect.val(catalogoLivewire).trigger('change');
            //     }
            // });

            Livewire.hook('morph.updated', () => {
                // Sincronizar categoría
                const categoriaLivewire = @this.selectedCategoria;
                if (categoriaLivewire !== $('#categoriaSelect').val()) {
                    $('#categoriaSelect').val(categoriaLivewire).trigger('change');
                }
                
                // Sincronizar catálogo
                const catalogoLivewire = @this.selectedCatalogo;
                if (catalogoLivewire !== $('#catalogoSelect').val()) {
                    $('#catalogoSelect').val(catalogoLivewire).trigger('change');
                }


                const empresaLivewire = @this.selectedEmpresa;
                if (empresaLivewire !== $('#empresaSelect').val()) {
                    $('#empresaSelect').val(empresaLivewire).trigger('change');
                }

                const sucursalLivewire = @this.selectedSucursal;
                if (sucursalLivewire !== $('#sucursalSelect').val()) {
                    $('#sucursalSelect').val(sucursalLivewire).trigger('change');
                }

            });
        });
    </script>

    <script>
        function logout() {
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = '{{ route('logout') }}';
            form.style.display = 'none';

            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
            const csrfInput = document.createElement('input');
            csrfInput.type = 'hidden';
            csrfInput.name = '_token';
            csrfInput.value = csrfToken;

            form.appendChild(csrfInput);

            document.body.appendChild(form);

            form.submit();
        }
    </script>
 @endsection