@extends('layouts.dashboard')

@section('dashboard')
    
    <ul class="breadcrumb m-0 p-0">
        <li><a href="/dashboard">Home</a></li>
        <li><strong>Compras DTE</strong></li>
    </ul>
    @if (session('message'))
        <div class="alert {{ session('alert') }} mb-0">
            {{ session('message') }}
        </div>
        @if (session('faltantes') && is_array(session('faltantes')) && !empty(session('faltantes')))
            <div class="alert alert-warning my-3">
                <ul class="pl-3 mb-0">
                    @foreach (session('faltantes') as $faltante)
                        <li>{{ $faltante }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
    @endif
    <div class="row align-items-center mb-4">
        <div class="col-md-auto col-hd-3">
            <div class="row align-items-end">
                <div class="col-md-auto">
                    <h1 class="titulo-h1 mb-0">Compras DTE</h1>
                </div>
                <div class="col-md-auto">
                    <div class="dropdown">
                        <button class="btn btn-info btn-sm dropdown-toggle" type="button" id="dropdownMenuButton-1"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Opciones</button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton-1" style="">
                            <a href="{{ route('crear-factura-compra-masiva') }}" class="dropdown-item small"
                                target="_blank" rel="noopener noreferrer">Carga masiva</a>
                            <a href="{{ route('crear-factura') }}" class="dropdown-item small" target="_blank"
                                rel="noopener noreferrer">Carga manual</a>
                            <a href="{{ route('facturas-compras-no-recibidas') }}"
                                class="dropdown-item small position-relative">Obtener facturas de compra <span
                                    id="icon-notificacion"></span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md">
            <form method="post" class="row row-mini align-items-end justify-content-end form-registro form-enter"
                id="form-dte" onsubmit="return filtarDteRecibidos(this.id, true)">
                <div class="col-md-auto form-group">
                    <label class="small mb-0">Desde:</label>
                    <input type="date" name="fecha-desde" class="form-control form-control-sm input-date"
                        max="{{ date('Y-m-d') }}" value="{{ date('Y-m') }}-01">
                </div>
                <div class="col-md-auto form-group">
                    <label class="small mb-0">Hasta:</label>
                    <input type="date" name="fecha-hasta" class="form-control form-control-sm input-date"
                        max="{{ date('Y-m-d') }}" value="{{ date('Y-m-d') }}">
                </div>
                <div class="col-md-3 form-group">
                    <select name="estado[]" id="estado" class="form-control form-control-sm select2" multiple="multiple"
                        data-toggle="select2" data-placeholder="Filtrar por estado">
                        <option value="">-- Estado --</option>
                        <option value="pendiente">Pendiente</option>
                        <option value="recepcionado">Recepcionado</option>
                        <option value="almacenado">Almacenado</option>
                        <option value="no-recibido">No Recibido</option>
                        
                    </select>
                </div>
                <div class="col-md-4 form-group">
                    <div class="row no-gutters align-items-end">
                        <div class="col-5 dropdown">
                            <button class="dropdown-toggle form-control form-control-sm" type="button"
                                id="tipo-busqueda" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Nº
                                folio</button>
                            <ul class="dropdown-menu rounded-0 p-0 m-0" aria-labelledby="tipo-busqueda">
                                <li class="mb-0"><button type="button"
                                        class="btn-limpio dropdown-item small px-3 py-2"
                                        onclick="tipoBusquedaDTE(this, 'folio', 'number')">Nº folio</button></li>
                                <li class="mb-0"><button type="button"
                                        class="btn-limpio dropdown-item small px-3 py-2"
                                        onclick="tipoBusquedaDTE(this, 'rut', 'rut')">RUT Proveedor</button></li>
                                <li class="mb-0"><button type="button"
                                        class="btn-limpio dropdown-item small px-3 py-2"
                                        onclick="tipoBusquedaDTE(this, 'nombre', 'text')">Nombre / Razón social</button>
                                </li>
                                <li class="mb-0"><button type="button"
                                        class="btn-limpio dropdown-item small px-3 py-2"
                                        onclick="tipoBusquedaDTE(this, 'monto', 'price')">Monto total</button></li>
                                <li class="mb-0">
                                    <div class="dropdown-divider m-0"></div><button type="button"
                                        class="btn-limpio dropdown-item small px-3 py-2"
                                        onclick="tipoBusquedaDTE(this, 'todo', 'text')">Todo</button>
                                </li>
                            </ul>
                        </div>
                        <div class="col">
                            <input type="number" name="buscar" class="form-control form-control-sm" min="1"
                                placeholder="Buscar">
                        </div>
                    </div>
                </div>
                <div class="col-md-auto form-group text-right pl-md-1">
                    <input type="hidden" name="cargar-dte" value="true">
                    <input type="hidden" name="origen" value="externos">
                    <input type="hidden" name="offset">
                    <input type="hidden" name="tipo-busqueda-dte" value="folio">
                    <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-search"></i> Filtrar</button>
                </div>
            </form>
        </div>
    </div>

    <div class="card">
        <div class="card-body" id="list-dte">
            @include('dashboard.dte.table-dte-recibidos')
        </div>
    </div>

@endsection

@section('scripts')
    <script>
       document.addEventListener('DOMContentLoaded', function() {
            var links = document.querySelectorAll('.list-paginacion a');
            links.forEach(function(link) {
                var page = link.getAttribute('href').split('page=')[1];
                link.setAttribute('href', 'javascript: void(0)');
                link.setAttribute('onclick', 'cambiarPaginaDTERecibidos(' + page + ')');
            });
        });



        function descargarExcelDTE() {
            // Obtener los valores de los campos del formulario #form-dte
            var fechaDesde = document.querySelector("#form-dte [name=fecha-desde]").value;
            var fechaHasta = document.querySelector("#form-dte [name=fecha-hasta]").value;
            var tipoBusqueda = document.querySelector("#form-dte [name=tipo-busqueda-dte]").value;
            var valorBusqueda = document.querySelector("#form-dte [name=buscar]").value;
            var origen = document.querySelector("#form-dte [name=origen]").value;

            // Obtener el select con múltiples opciones
            var selectEstados = document.querySelector("#form-dte [name='estado[]']");

            // Obtener las opciones seleccionadas del select (esto devuelve un HTMLCollection)
            var selectedOptions = Array.from(selectEstados.selectedOptions);

            var formExcel = document.getElementById("form-excel-dte");

            // Asignar los valores a los campos del formulario #form-excel-dte
            formExcel.querySelector("[name=fecha_desde]").value = fechaDesde;
            formExcel.querySelector("[name=fecha_hasta]").value = fechaHasta;
            formExcel.querySelector("[name=tipo_busqueda]").value = tipoBusqueda;
            formExcel.querySelector("[name=valor_busqueda]").value = valorBusqueda;
            formExcel.querySelector("[name=origen]").value = origen;

            // Eliminar los inputs hidden previos que puedan existir
            formExcel.querySelectorAll("input[name='estado[]']").forEach(input => input.remove());

            // Verificar si hay opciones seleccionadas
            if (selectedOptions.length > 0) {
                // Crear un input hidden por cada opción seleccionada
                selectedOptions.forEach(option => {
                    var input = document.createElement("input");
                    input.type = "hidden";
                    input.name = "estado[]"; // El mismo nombre que el select original
                    input.value = option.value;
                    formExcel.appendChild(input);
                });
            }

            // Enviar el formulario #form-excel-dte
            document.querySelector("#form-excel-dte").submit();
        }

        function filtarDteRecibidos(form, nopage = "") {
            // Si 'nopage' es true, resetear el valor de 'offset'
            if (nopage) {
                document.querySelector("[name=offset]").value = "";
            }
            // Recoger el formulario y serializar sus datos
            const formData = new FormData(document.getElementById(form));
            // Enviar la solicitud con fetch
            fetch("/dashboard/filtrar-dte-recibidos", {
                method: "POST",
                body: new URLSearchParams(formData), // Convertir FormData a URLSearchParams para serialización
                headers: {
                    "X-CSRF-TOKEN": token,
                    "Content-Type": "application/x-www-form-urlencoded" // Asegurarse de que sea el tipo correcto
                }
            })
            .then(response => response.json())
            .then(data => {

                if(data.success){
                    // Insertar el contenido recibido en el contenedor con ID 'list-dte'
                    document.getElementById("list-dte").innerHTML = data.html;

                    // Obtener todos los enlaces de paginación y modificar su comportamiento
                    document.querySelectorAll(".list-paginacion a").forEach(link => {
                        const page = link.getAttribute("href").split("page=")[1];
                        link.setAttribute("href", "javascript:void(0)");
                        link.setAttribute("onclick", `cambiarPaginaDTERecibidos(${page})`);
                    });
                }else{
                    //alert('holaa')
                    alert('Error: ' + (data.error || 'No se pudieron cargar las facturas de compras.'));
                }
                
            })
            .catch(error => {
                console.error("Error al cargar las los DTE Recibidos", error); // Maneja errores en la solicitud
            });

            return false;
        }

        function cambiarPaginaDTERecibidos(offset) {
            document.querySelector("[name=offset]").value = offset;
            filtarDteRecibidos("form-dte");
        }


    </script>

    {{-- REVISAR ESTA FUNCION JS --}}
    <script>
        $(document).ready(function() {
            cargarFacturasCompraNoRecibidas();
            setInterval(function() {
                cargarFacturasCompraNoRecibidas();
            }, 1800000);
        });
    </script>

@endsection