@push('styles')
<style> 


/*media queries*/

@media only screen and (max-width: 601px){
  .fileuploader {
    width: 100%;
  }

 .preview-container {
    width: 100%;
  }
}

.secondary-content {
    float: right;
    color: #26a69a;
    margin-top: -35px;

}

.btn-floating {
    border-radius: 50%;
}

.hidden{ 
    display: none;
}

.show{ 
    display: flex !important;
}
.modal-nuevo {
        position: fixed;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.8);
    }

    .spinner {
    border: 8px solid #C9C9C9;  /* Color de fondo del spinner */
    border-top: 8px solid #3498db; /* Color de la parte superior del spinner */
    border-radius: 50%;
    width: 150px;
    height: 150px;
    animation: spin 1s linear infinite;
}

/* Animación del spinner */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.icon-container{ 
    text-align: center;
    margin-bottom: 15px;
}

.hidden{ 
        display: none;
    }

    .show{ 
        display: flex !important;
    }

.wizard-container {

}

.wizard-section {

    padding: 1.5rem;
}

.wizard-section h2 {
    color: #f9a825;
    margin-bottom: 0.5rem;
}

.drop-area {
    margin: 1rem 0;
    border: 1px dashed #a1a1a1;
    border-radius: 10px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    background-color: #fff;
    transition: border-color 0.3s ease;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.drop-area:hover {
    border-color: #4caf50;
}

.drop-content p {
    color: #a1a1a1;
    font-size: 0.7rem;
}

.upload-btn {
    background-color: #00a748;
    color: white;
    /* padding: 0.6rem 1.5rem; */
    padding: 5px 50px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background-color 0.3s ease;
    width: fit-content;
}

/* .upload-btn:hover {
    background-color: #089c52;
} */

.hidden {
    display: none;
}

.btn-container{
    display: flex;
    justify-content: center;
    margin-top: 0.2rem;
}


.subtitulo{
    font-size: 0.8rem;
}

.card-title{
    font-size: 1rem;
}

.input-arch {
  position: absolute;
  top: 0;
  left: 0;
}

.error-container{
    margin-top: 0.5rem;
    text-align: center;
}
</style>
@endpush

@section('title')
    Carga Masiva
@endsection

@section('css')
<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />

@endsection

@section('page-title')
    Carga Masiva
@endsection

<div>
       
        <div class="row">
            <div class="col-12 ">
                <h1 class="text-left texto-cafe"><span class="texto-rojo material-symbols-outlined">favorite</span> Hola, ¿Qué archivo quieres subir hoy?</h1>
            </div>
        </div>

         @if(session()->has('success'))
            <div class="alert alert-success" style="margin-top: 15px;">
                {{ session()->get('success') }}
            </div>
        @endif

         @if(session()->has('error'))
            <div class="alert alert-danger" style="margin-top: 15px;">
                {{ session()->get('error') }}
            </div>
        @endif

        <div class="wizard-container row">

           @php 
                $ambos = Auth::user()->can('registrar cartones masivas') && Auth::user()->can('registrar ventas masivas');
           @endphp

            @can('registrar cartones masivas')
                <div class="wizard-section {{$ambos == true ? 'col-xl-6 col-lg-6' : 'col-xl-12 col-lg-12'}}  col-md-12 col-sm-12">
                    <div class="card">
                        <div class="card-header" style="padding: 0px !important;">
                            <h4 class="texto-cafe card-title"> Cartones </h4>
                            <p class="texto-gris subtitulo">Aquí podrás subir toda la información y datos de cartones.</p>
                        </div>

                        <div class="card-body"  style="padding-bottom: 0px;">
                            <div class="drop-area" onclick="document.getElementById('cartonesInput').click()" ondrop="dropHandler(event, 'cartones')" ondragover="dragOverHandler(event)">
                                <input onchange="cargarCartones(event)" type="file"  accept=".xls,.xlsx, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" id="cartonesInput" class="hidden" wire:model="cartones"/>
                                @if($nombreArchivoCartones != null)
                                    <div class="drop-content">
                                        <p id="cartonesFileName">Archivo cargado: {{ $nombreArchivoCartones }}</p>
                                        <p>Si quiere reemplazar el archivo suelte otro archivo aquí o haga clic para cargar uno nuevo.</p>
                                    </div>
                                @else
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="#a1a1a1" width="28" height="28" viewBox="0 0 24 24" class="eva eva-cloud-upload-outline icon nav-icon"><g data-name="Layer 2"><g data-name="cloud-upload"><rect width="24" height="24" opacity="0"></rect><path d="M12.71 11.29a1 1 0 0 0-1.4 0l-3 2.9a1 1 0 1 0 1.38 1.44L11 14.36V20a1 1 0 0 0 2 0v-5.59l1.29 1.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path><path d="M17.67 7A6 6 0 0 0 6.33 7a5 5 0 0 0-3.08 8.27A1 1 0 1 0 4.75 14 3 3 0 0 1 7 9h.1a1 1 0 0 0 1-.8 4 4 0 0 1 7.84 0 1 1 0 0 0 1 .8H17a3 3 0 0 1 2.25 5 1 1 0 0 0 .09 1.42 1 1 0 0 0 .66.25 1 1 0 0 0 .75-.34A5 5 0 0 0 17.67 7z"></path></g></g></svg>
                                    <div class="drop-content">
                                        <p id="cartonesFileName">Suelte los archivos aquí o haga clic para cargar.</p>
                                    </div>
                                @endif
                            </div>
                        </div>                
                        <div class="btn-container">
                            <button class="upload-btn" wire:click="uploadCartones">
                            <svg style="margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" fill="white" width="18" height="18" viewBox="0 0 24 24" class="eva eva-cloud-upload-outline icon nav-icon"><g data-name="Layer 2"><g data-name="cloud-upload"><rect width="24" height="24" opacity="0"></rect><path d="M12.71 11.29a1 1 0 0 0-1.4 0l-3 2.9a1 1 0 1 0 1.38 1.44L11 14.36V20a1 1 0 0 0 2 0v-5.59l1.29 1.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path><path d="M17.67 7A6 6 0 0 0 6.33 7a5 5 0 0 0-3.08 8.27A1 1 0 1 0 4.75 14 3 3 0 0 1 7 9h.1a1 1 0 0 0 1-.8 4 4 0 0 1 7.84 0 1 1 0 0 0 1 .8H17a3 3 0 0 1 2.25 5 1 1 0 0 0 .09 1.42 1 1 0 0 0 .66.25 1 1 0 0 0 .75-.34A5 5 0 0 0 17.67 7z"></path></g></g></svg>    
                                Subir archivos
                            </button>      
                        </div>

                        <div class="error-container">
                            @error('cartones') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>   
                    </div>
                </div>
            @endcan

            @can('registrar ventas masivas')
                <div class="wizard-section {{$ambos == true ? 'col-xl-6 col-lg-6' : 'col-xl-12 col-lg-12'}} col-md-12 col-sm-12">
                    <div class="card">
                        <div class="card-header" style="padding: 0px !important;">
                            <h4 class="texto-cafe card-title"> Ventas </h4>
                            <p class="texto-gris subtitulo">Aquí podrás subir toda la información y datos de ventas.</p>
                        </div>

                        <div class="card-body" style="padding-bottom: 0px;">
                            <div class="drop-area" onclick="document.getElementById('ventasInput').click()" ondrop="dropHandler(event, 'ventas')" ondragover="dragOverHandler(event)">
                                @if($nombreArchivoVentas != null)
                                    <div class="drop-content">
                                        <p id="cartonesFileName">Archivo cargado: {{ $nombreArchivoVentas }}</p>
                                        <p>Si quiere reemplazar el archivo suelte otro archivo aquí o haga clic para cargar uno nuevo.</p>
                                    </div>
                                @else
                                    <input type="file"    accept=".xls,.xlsx, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" id="ventasInput" class="hidden" wire:model="ventas" onchange="cargarVentas(event)"/>
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="#a1a1a1" width="28" height="28" viewBox="0 0 24 24" class="eva eva-cloud-upload-outline icon nav-icon"><g data-name="Layer 2"><g data-name="cloud-upload"><rect width="24" height="24" opacity="0"></rect><path d="M12.71 11.29a1 1 0 0 0-1.4 0l-3 2.9a1 1 0 1 0 1.38 1.44L11 14.36V20a1 1 0 0 0 2 0v-5.59l1.29 1.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path><path d="M17.67 7A6 6 0 0 0 6.33 7a5 5 0 0 0-3.08 8.27A1 1 0 1 0 4.75 14 3 3 0 0 1 7 9h.1a1 1 0 0 0 1-.8 4 4 0 0 1 7.84 0 1 1 0 0 0 1 .8H17a3 3 0 0 1 2.25 5 1 1 0 0 0 .09 1.42 1 1 0 0 0 .66.25 1 1 0 0 0 .75-.34A5 5 0 0 0 17.67 7z"></path></g></g></svg>
                                    <div class="drop-content">
                                        <p id="cartonesFileName">Suelte los archivos aquí o haga clic para cargar.</p>
                                    </div>
                                @endif
                            </div>
                        </div>                
                        <div class="btn-container">
                            <button class="upload-btn" wire:click="uploadVentas">                               
                                <svg style="margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" fill="white" width="18" height="18" viewBox="0 0 24 24" class="eva eva-cloud-upload-outline icon nav-icon"><g data-name="Layer 2"><g data-name="cloud-upload"><rect width="24" height="24" opacity="0"></rect><path d="M12.71 11.29a1 1 0 0 0-1.4 0l-3 2.9a1 1 0 1 0 1.38 1.44L11 14.36V20a1 1 0 0 0 2 0v-5.59l1.29 1.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path><path d="M17.67 7A6 6 0 0 0 6.33 7a5 5 0 0 0-3.08 8.27A1 1 0 1 0 4.75 14 3 3 0 0 1 7 9h.1a1 1 0 0 0 1-.8 4 4 0 0 1 7.84 0 1 1 0 0 0 1 .8H17a3 3 0 0 1 2.25 5 1 1 0 0 0 .09 1.42 1 1 0 0 0 .66.25 1 1 0 0 0 .75-.34A5 5 0 0 0 17.67 7z"></path></g></g></svg>
                                Subir archivos
                            </button> 
                        </div>

                        <div class="error-container">
                            @error('ventas') <span class="text-danger">{{ $message }}</span> @enderror                    
                        </div>
                    </div>
                </div>
            @endcan
        </div>

        <div class="modal-nuevo hidden" wire:loading.class="show">
            <div class="modal-dialog modal-dialog-centered">
                <div class="contenido-modal">
                    <div class="spinner"></div>
                </div>
            </div>
        </div>

        @if($modal === true)   
            <div class="modal-nuevo" tabindex="-1" role="dialog">
                <div class="modal-dialog modal-dialog-centered ">
                    <div class="card contenido-modal" >
                        <div class="modal-content" >
                            <div class="d-flex justify-content-center texto-principal" style="text-align: center;">
                                <h5 class="modal-title texto-cafe" > La carga de datos tuvo las siguientes consideraciones </h5>
                            </div> 
                                    
                            <div class="d-flex elemento justify-content-center">
                                @foreach($excepciones as $excepcion)
                                    <div class="alert alert-danger" role="alert">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-exclamation-triangle-fill" viewBox="0 0 16 16">
                                            <path d="M8.982 1.566a1.5 1.5 0 0 1 2.036 0l6.5 6.5a1.5 1.5 0 0 1 .001 2.122l-6.5 6.5a1.5 1.5 0 0 1-2.122-.001l-6.5-6.5a1.5 1.5 0 0 1-.001-2.122l6.5-6.5zM8.93 4a1 1 0 0 0-1.86-.002L7.07 9h2l-.14-5zm-.93 7a1 1 0 1 0 .001-2A1 1 0 0 0 8 .999z"/>
                                        </svg>
                                        Los datos con clave: {{ $excepcion }} fueron omitidos por falta de nombre del cliente al que se asignará.
                                    </div>
                                @endforeach
                            </div>



                            <div class="d-flex flex-wrap botonera justify-content-center" >
                                <button class="btn button text-white waves-effect waves-light" wire:click="cerrarModal()">Aceptar</button>
                            </div>
                                    
                        </div>
                    </div>
                </div>
            </div>
        @endif  
    
</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>

    function dragOverHandler(event) {
        event.preventDefault();
        event.currentTarget.style.borderColor = "#4caf50";
    }

    function dropHandler(event, type) {
        event.preventDefault();
        const input = document.getElementById(`${type}Input`);
        input.files = event.dataTransfer.files;
        const changeEvent = new Event('change', { bubbles: true });
        input.dispatchEvent(changeEvent);
    }

    function cargarCartones() {
        console.log('Cargando cartones...');
        const input = document.getElementById('cartonesInput');
        if (input.files.length > 0) {
            console.log(`Archivo(s) seleccionado(s): ${input.files.length}`);
            setTimeout(() => Livewire.dispatch('cargarCartones'), 1000);
        } else {
            console.log('No se ha seleccionado ningún archivo.');
        }
    }

    function cargarVentas() {
        console.log('Cargando ventas...');
        const input = document.getElementById('ventasInput');
        if (input.files.length > 0) {
            console.log(`Archivo(s) seleccionado(s): ${input.files.length}`);
            setTimeout(() => Livewire.dispatch('cargarVentas'), 1000);
        } else {
            console.log('No se ha seleccionado ningún archivo.');
        }
    }

  </script>
    
<script>



Livewire.on('iniciar', function() {

    console.log('Iniciando carga masiva...');

   
    // setTimeout(() => {
    //     const dropArea = document.getElementById('zdrop');
    //     const fileInput = document.getElementById('input-file');

    //     function preventDefaults(e) {
    //         e.preventDefault();
    //         e.stopPropagation();
    //     }

    //     function addDragAndDropListeners() {
    //         ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    //             dropArea.addEventListener(eventName, preventDefaults, false);
    //             document.body.addEventListener(eventName, preventDefaults, false);
    //         });

    //         ['dragenter', 'dragover'].forEach(eventName => {
    //             dropArea.addEventListener(eventName, () => dropArea.classList.add('highlight'), false);
    //         });

    //         ['dragleave', 'drop'].forEach(eventName => {
    //             dropArea.addEventListener(eventName, () => dropArea.classList.remove('highlight'), false);
    //         });
    //     }

    //     function handleDrop(e) {
    //         const files = e.dataTransfer.files;
    //         if (files.length > 0) {
    //             processFiles(files);
    //             console.log(`Archivo recibido: ${files[0].name}`);
    //         }
    //     }

    //     function handleClick() {
    //         fileInput.click();
    //     }

    //     function handleFileInputChange() {
    //         if (fileInput.files.length > 0) {
    //             console.log(`Archivo seleccionado: ${fileInput.files[0].name}`);
    //             setTimeout(() => Livewire.dispatch('cargar'), 500);
    //         }
    //     }

    //     function processFiles(files) {
    //         // Aquí puedes manejar los archivos como desees
    //         // Por ejemplo, podrías utilizar FileReader para leer el contenido de los archivos
    //         console.log('Archivos procesados:', files);
    //         // Simular un cambio en el input
    //         const dataTransfer = new DataTransfer();
    //         for (let file of files) {
    //             dataTransfer.items.add(file);
    //         }
    //         fileInput.files = dataTransfer.files;

    //         // Disparar el evento change manualmente
    //         const event = new Event('change', { bubbles: true });
    //         fileInput.dispatchEvent(event);
    //     }

    //     addDragAndDropListeners();
    //     dropArea.addEventListener('drop', handleDrop, false);
    //     dropArea.addEventListener('click', handleClick, false);
    //     fileInput.addEventListener('change', handleFileInputChange, false);
    // }, 400);
});


        </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>
            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