@extends('layouts.dashboard')

@section('dashboard')
    <ul class="breadcrumb m-0 p-0">
        <li><a href="/dashboard">Home</a></li>
        <li><strong>Stock En Línea WMS</strong></li>
    </ul>
    <div class="row align-items-center">
        <div class="col-md-auto">
            <h1 class="titulo-h1">Stock En Línea WMS</h1>
        </div>
        <div class="col-md-auto">
            <div class="dropdown">
                <button class="btn btn-info btn-sm dropdown-toggle ml-3 ml-md-0" 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" action="{{ route('pedidos-imprimir-etiqueta-ml') }}">
                        {{ csrf_field() }} --}}
                        <button type="button" onclick="descargarExcelInventarioWMS()" class="dropdown-item small border-0 bg-transparent w-100 blq-btn">Descargar Inventario</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('buscar-stock-en-linea-wms') }}" id="form-stock-en-linea"
                onsubmit="return cargarStockEnLinea(this.id, true)">
                {{ csrf_field() }}
                <div class="col-md-2 form-group pl-md-0">
                    <label for="articulo" class="small mb-0">ID de Artículo</label>
                    <input type="search" name="articulo" id="articulo" class="form-control form-control-sm"
                        placeholder="Buscar por ID de Artículo">
                </div>
                <div class="col-auto form-group pl-md-0">
                    <input type="hidden" name="offset">
                    <button type="submit" class="btn btn-primary btn-sm">Filtrar</button>
                </div>
            </form>
        </div>
    </div>
    <div id="list-productos-ml" style="color: #212529;">
        <div class="card">
            <div class="card-body">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>ID Artículo</th>
                            <th>Título</th>
                            <th>Stock en WMS</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="text-center">
                            <td colspan="3">¿Desea cargar el stock WMS? <button type="button"
                                    class="btn btn-primary btn-sm ml-3"
                                    onclick="cargarStockEnLinea('form-stock-en-linea', true);modalCargando()">Cargar Stock
                                    WMS</button></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
            </div>
@endsection

@section('scripts')
    <script>
        //cargarPaginacion();
        function cargarStockEnLinea(id, nopage = false) {
            if (nopage) {
                document.querySelector('[name=offset]').value = '';
            }

            var form = document.getElementById(id);
            var action = form.getAttribute('action');

            let formData = new FormData(form);

            fetch(action, {
                    method: 'POST',
                    body: formData
                })
                .then(response => {
                    cerrarCargando();
                    if (!response.ok) {
                        throw new Error('Hubo un problema al obtener el stock en línea WMS');
                    }
                    return response.text();
                })
                .then(data => {
                    document.getElementById('list-productos-ml').innerHTML = data;
                    cerrarCargando();
                    cargarPaginacion();
                })
                .catch(error => {
                    cerrarCargando();
                    console.log(error);
                });

            return false;
        }

        function cambiarPaginaStockEnLinea(offset) {
            document.querySelector('[name=offset]').value = offset;
            cargarStockEnLinea('form-stock-en-linea');
        }

        function cargarPaginacion() {
            document.querySelectorAll('.list-paginacion a').forEach(function(anchor) {
                var href = anchor.getAttribute('href');
                var page = href.split('page=')[1];
                anchor.setAttribute('href', 'javascript:void(0)');
                anchor.setAttribute('onclick', 'cambiarPaginaStockEnLinea(' + page + ')');
            });
        }


        function descargarExcelInventarioWMS() {
            // const tipoInforme = document.querySelector('select[name="tipo-informe"]');
            // const fecha = document.getElementById('fecha');

            // Validar tipo de informe
            // if (!tipoInforme || !tipoInforme.value) {
            //     alert('Por favor selecciona un tipo de informe.');
            //     return;
            // }

            // Validar fecha
            // if (!fecha || !fecha.value) {
            //     alert('Por favor ingresa una fecha.');
            //     return;
            // }

            // Crear los datos de la solicitud
            const data = new URLSearchParams();
            // data.append('tipo-informe', tipoInforme.value);
            // data.append('fecha', fecha.value);

            modalCargando()
            // Enviar la solicitud fetch
            fetch('/dashboard/descargar-excel-inventario-wms', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                            'content') // CSRF token
                    },
                    body: data.toString()
                })
                .then(response => {
                    cerrarCargando();
                    if (!response.ok) {
                        throw new Error('Error al generar el archivo. Por favor intenta nuevamente.');
                    }
                    return response.blob(); // Descargar el archivo como blob
                })
                .then(blob => {
                    // Crear un enlace temporal para la descarga
                    const url = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = 'inventario-wms.xlsx'; // Nombre del archivo
                    document.body.appendChild(a);
                    a.click();
                    a.remove();
                    window.URL.revokeObjectURL(url); // Limpiar el URL blob
                    cerrarCargando();
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Ocurrió un error al descargar el archivo. Por favor, intenta nuevamente.');
                    cerrarCargando();
                });
        }
    </script>
@endsection