@extends('layouts.dashboard')

@section('dashboard')
    <ul class="breadcrumb m-0 p-0">
        <li><a href="/dashboard">Home</a></li>
        <li><strong>Registro de Ordenes de Compra</strong></li>
    </ul>
    <div class="row align-items-center mb-4">
        <div class="col-md-auto">
            <h1 class="titulo-h1 mb-0">Registro de Ordenes de Compra</h1>
        </div>
        <div class="col-md">
            <form class="row justify-content-end form-registro form-enter" method="post" class="form-inline"
                id="form-ordenes-compra" action="{{ route('buscar-ordenes-compra') }}"
                onsubmit="return cargarOrdenesCompra(this.id, true)">
                {{ csrf_field() }}
                <div class="col-auto col-md-4 form-group pl-0">
                    <input type="search" name="buscar" class="form-control form-control-sm"
                        placeholder="Buscar por Nº OC, SKU, Código de venta ML">
                </div>
                <div class="col-auto form-group pl-0">
                    <input type="hidden" name="offset">
                    <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-search"></i> Buscar</button>
                </div>
            </form>
        </div>
    </div>

    <div id="list-ordenes-compra">
        <div class="card">
            <div class="card-body text-center">
                ¿Desea mostrar las ordenes de compra? <button type="button" class="btn btn-primary btn-sm ml-3 blq-btn"
                    onclick="cargarOrdenesCompra('form-ordenes-compra', true)">Mostrar ordenes de compra</button>
            </div>
        </div>
    </div>
@endsection

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

            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 obtener las ordenes de compra');
                        cerrarCargando();
                    }
                    return response.text();
                })
                .then(data => {
                    document.getElementById('list-ordenes-compra').innerHTML = data;
                    cargarPaginacion();
                    cerrarCargando();
                })
                .catch(error => {
                    cerrarCargando();
                    console.log(error);
                });

            return false;
        }

        function cambiarPaginaOrdenesCompra(offset) {
            document.querySelector('[name=offset]').value = offset;
            cargarOrdenesCompra('form-ordenes-compra');
        }

        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', 'cambiarPaginaOrdenesCompra(' + page + ')');
            });
        }
    </script>
@endsection