@extends('layouts.dashboard')

@section('dashboard')
    
    <ul class="breadcrumb m-0 p-0">
        <li><a href="/dashboard">Home</a></li>
        <li><strong>{{ $titulo }}</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">{{ $titulo }}</h1>
                </div>
                @if ($origen == 'propios')
                    <div class="col-md-auto">
                        <div class="dropdown">
                            <button class="btn btn-success btn-sm rounded-0 dropdown-toggle" type="button"
                                id="dropdownMenuButton-1" data-toggle="dropdown" aria-haspopup="true"
                                aria-expanded="false"><i class="fa fa-plus"></i> Nuevo</button>
                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton-1" style="">
                                <a href="{{ route('crear-cotizacion') }}" class="dropdown-item small blq-btn-extra-large"
                                   rel="noopener noreferrer">Crear venta</a>
                                <a href="{{ route('crear-boleta-factura-venta-masiva') }}"
                                    class="dropdown-item small blq-btn" rel="noopener noreferrer">Carga
                                    masiva DTE externo</a>
                                <a href="{{ route('crear-boleta-factura') }}" class="dropdown-item small blq-btn"
                                   rel="noopener noreferrer">Carga manual DTE externo</a>
                                <a href="javascript: void(0)" class="dropdown-item small blq-btn"
                                    onclick="modalNotaCreditoExterna()">Crear nota de crédito</a>
                            </div>
                        </div>
                    </div>
                @endif
                @if ($origen == 'externos')
                    <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>
                @endif
            </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 cargarDTE(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>
                        @if ($origen == 'externos')
                            <option value="pendiente">Pendiente</option>
                            <option value="recepcionado">Recepcionado</option>
                            <option value="almacenado">Almacenado</option>
                            <option value="no-recibido">No Recibido</option>
                        @else
                            <option value="aceptado">Aceptado</option>
                            <option value="aceptado-d">Aceptado con Descuento</option>
                            <option value="aceptado-m">Aceptado con Modificación</option>
                            <option value="pendiente">Pendiente</option>
                            <option value="rechazado">Rechazado</option>
                            <option value="anulado">Anulado</option>
                            <option value="por validar">Por validar</option>
                        @endif
                    </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 Cliente</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="{{ $origen }}">
                    @if ($origen == 'externos')
                        <input type="hidden" name="documento" value="3">
                    @endif
                    <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-ventas-dte')
        </div>
    </div>

@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $('.list-paginacion a').map(function() {
                var page = $(this).attr('href').split('page=')[1];
                return $(this).attr('href', 'javascript: void(0)').attr('onclick', 'cambiarPaginaDTE(' +
                    page + ')');
            }).get();
        });


        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();
        }
    </script>
@endsection