@extends('layouts.dashboard')

@section('dashboard')
    <ul class="breadcrumb m-0 p-0">
        <li><a href="/dashboard">Home</a></li>
        <li><strong>Reporte de utilidad ML</strong></li>
    </ul>
    <div class="row align-items-end">
        <div class="col-md-auto">
            <h1 class="titulo-h1 mb-4">Reporte de utilidad ML</h1>
        </div>
        <div class="col-md-auto align-self-center">
            <div class="dropdown mb-md-2">
                <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">
                    <form method="post" id="form-ventas-ml-excel" action="{{ route('excel-ventas-mercadolibre-margen') }}">
                        {{ csrf_field() }}
                        <input type="hidden" name="mes">
                        <input type="hidden" name="cuenta_ml">
                        <input type="hidden" name="tipo_busqueda">
                        <input type="hidden" name="valor_busqueda">
                        <button type="button" class="dropdown-item small border-0 bg-transparent w-100 blq-btn"
                            onclick="crearExcelNotificacionesVentasML()">Descargar
                            Excel</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-md">
            <form class="row align-items-end justify-content-end form-registro form-enter" method="post"
                action="{{ route('cargar-ventas-mercadolibre-margen') }}" class="form-inline form-registro"
                id="form-ventas-margen-ml" onsubmit="return listarVentasMercadoLibreMargen(this.id, true)">
                {{ csrf_field() }}
                <div class="col-md-auto form-group pl-md-0">
                    <label for="mes" class="small mb-0">Mes</label>
                    <input type="month" name="mes" id="mes" class="form-control form-control-sm input-date"
                        max="{{ date('Y-m') }}">
                </div>
                <div class="col-md-auto form-group pl-md-0">
                    <label for="cuenta-ml" class="small mb-0">Cuenta ML</label>
                    <select class="form-control form-control-sm select2 select2-right" name="cuenta_ml" id="cuenta-ml">
                        <option value="">-- Seleccionar Cuenta ML --</option>
                        @foreach ($cuentasML as $cuentaML)
                            <option value="{{ $cuentaML->vendedor_id }}">{{ $cuentaML->vendedor_ml_nick }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4 form-group pl-md-0">
                    <label for="busqueda" class="small mb-0">Búsqueda</label>
                    <div class="row no-gutters align-items-end">
                        <div class="col-6 dropdown">
                            <button class="dropdown-toggle form-control form-control-sm" type="button" id="valor-busqueda"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Código de Venta</button>
                            <ul class="dropdown-menu rounded-0 p-0 m-0" aria-labelledby="valor-busqueda">
                                <li class="mb-0">
                                    <button type="button" class="btn-limpio dropdown-item small px-3 py-2"
                                        onclick="valorBusqueda(this, 'codigo-venta')">Código de Venta</button>
                                </li>
                                <li class="mb-0">
                                    <button type="button" class="btn-limpio dropdown-item small px-3 py-2"
                                        onclick="valorBusqueda(this, 'monto')">Monto</button>
                                </li>
                                <li class="mb-0">
                                    <button type="button" class="btn-limpio dropdown-item small px-3 py-2"
                                        onclick="valorBusqueda(this, 'utilidad-menor')">Utilidad Menor</button>
                                </li>
                                <li class="mb-0">
                                    <button type="button" class="btn-limpio dropdown-item small px-3 py-2"
                                        onclick="valorBusqueda(this, 'utilidad-mayor')">Utilidad Mayor</button>
                                </li>
                            </ul>
                        </div>
                        <div class="col">
                            <input type="search" class="form-control form-control-sm" id="busqueda" name="valor_busqueda">
                        </div>
                    </div>
                </div>
                <div class="col-auto form-group pl-md-0">
                    <input type="hidden" name="offset">
                    <input type="hidden" name="tipo_busqueda" value="codigo-venta">
                    <button type="submit" class="btn btn-primary btn-sm">Filtrar</button>
                </div>
            </form>
        </div>
    </div>
    <div class="card">
        <div class="card-body" id="list-ventas-ml">
            @include('dashboard.mercadolibre.costos-utilidades.table-ventas-margen-ml')
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        cargarPaginacion();

        function cargarPaginacion() {
            document.querySelectorAll(".list-paginacion a").forEach(function(el) {
                const href = el.getAttribute("href");
                const pageParam = href.split("page=")[1];

                el.setAttribute("href", "javascript: void(0)");
                el.setAttribute("onclick", "cambiarPaginaVentasMLMargen(" + pageParam + ")");
            });
        }

        function cambiarPaginaVentasMLMargen(offset) {
            const offsetInput = document.querySelector("[name=offset]");
            if (offsetInput) {
                offsetInput.value = offset;
            }
            listarVentasMercadoLibreMargen('form-ventas-margen-ml');
        }

        function listarVentasMercadoLibreMargen(id, nopage = false) {
            if (nopage) {
                const offsetInput = document.querySelector("[name=offset]");
                if (offsetInput) {
                    offsetInput.value = "";
                }
            }

            var form = document.getElementById(id);
            var action = form.getAttribute('action');
            let formData = new FormData(form);

            fetch(action, {
                    method: 'POST',
                    body: formData,
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Hubo un problema al mostrar las ventas');
                    }
                    return response.text(); // Convertir la respuesta a texto
                })
                .then(data => {
                    document.getElementById('list-ventas-ml').innerHTML = data;
                    document.querySelectorAll(".select2").forEach(function(element) {
                        $(element).select2();
                    });
                    cargarPaginacion();
                })
                .catch(error => {});

            return false;
        }

        function crearExcelNotificacionesVentasML() {
            const formVentas = document.querySelector("#form-ventas-margen-ml");
            const formExcel = document.querySelector("#form-ventas-ml-excel");

            if (formVentas && formExcel) {
                const mes = formVentas.querySelector("[name=mes]").value;
                const cuentaML = formVentas.querySelector("[name=cuenta_ml]").value;
                const tipoBusqueda = formVentas.querySelector("[name=tipo_busqueda]").value;
                const valorBusqueda = formVentas.querySelector("[name=valor_busqueda]").value;

                formExcel.querySelector("[name=mes]").value = mes;
                formExcel.querySelector("[name=cuenta_ml]").value = cuentaML;
                formExcel.querySelector("[name=tipo_busqueda]").value = tipoBusqueda;
                formExcel.querySelector("[name=valor_busqueda]").value = valorBusqueda;

                formExcel.submit();
            }
        }

        function valorBusqueda(input, tipo) {
            const text = input.textContent;
            const tipoBusqueda = document.getElementById("valor-busqueda");
            if (tipoBusqueda) {
                tipoBusqueda.textContent = text;
            }
            const formVentas = document.querySelector("#form-ventas-margen-ml");
            const campoTipo = formVentas.querySelector("[name=tipo_busqueda]");
            if (campoTipo) {
                campoTipo.value = tipo;
            }
            const buscar = formVentas.querySelector("[name=valor_busqueda]");
            if (buscar) {
                buscar.classList.remove("input-number");
                buscar.removeAttribute("min");
                buscar.removeAttribute("max");
                buscar.removeAttribute("step");
                switch (tipo) {
                    case "codigo-venta":
                        buscar.setAttribute("type", "search");
                        break;

                    case "monto":
                        buscar.setAttribute("type", "text");
                        buscar.classList.add("input-number");
                        break;

                    case "utilidad-menor":
                    case "utilidad-mayor":
                        buscar.setAttribute("type", "number");
                        buscar.setAttribute("min", "1");
                        buscar.setAttribute("max", "100");
                        buscar.setAttribute("step", "0.01");
                        break;
                }

                buscar.value = '';
                buscar.focus();
            }
        }
    </script>
@endsection