@extends('layouts.dashboard')

@section('dashboard')
    <ul class="breadcrumb m-0 p-0">
        <li><a href="/dashboard">Home</a></li>
        <li><strong>Proveedores</strong></li>
    </ul>
    <div class="row align-items-center mb-4">
        <div class="col-md-auto">
            <h1 class="titulo-h1 mb-0">Proveedores</h1>
        </div>
        <div class="col-md-auto my-1 pr-md-1">
            <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">
                    <a href="{{ route('crear-proveedor') }}" class="dropdown-item small">Crear Proveedor</a>
                    <a href="{{ route('crear-proveedor', ['tipoNacionalidad' => 'internacional']) }}"
                        class="dropdown-item small">Crear Proveedor Internacional</a>
                </div>
            </div>
        </div>

        <div class="col-md">
            <form method="post" class="row row-mini align-items-end justify-content-end form-registro form-enter" onsubmit="return buscarProveedor()">
                {{ csrf_field() }}
                <div class="form-group col-auto col-md-4">
                    <label for="buscar" class="small mb-0">Buscar</label>
                    <input type="text" class="form-control form-control-sm" id="busqueda-proveedor" placeholder="Buscar por nombre">
                </div>
                <div class="col-md-auto form-group text-right pl-md-1">
                    <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-search"></i> Buscar</button>
                </div>
            </form>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover text-center align-middle table-bordered">
                    <thead class="thead-light">
                        <tr>
                            <th>RUT / TAX</th>
                            <th>Razón Social</th>
                            <th>Tipo Nacionalidad</th>
                            <th>País</th>
                            <th>Comuna</th>
                            <th>Dirección</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody class="tbody-proveedores">
                        @include('dashboard.proveedores.table-proveedores')
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="d-flex justify-content-center mt-3">
        {{ $proveedores->links() }}
    </div>

@endsection

@section('scripts')
    <script>
        function buscarProveedor(){
            

            var inputBusquedaProveedor     = document.getElementById('busqueda-proveedor');
            var busquedaProveedor          = inputBusquedaProveedor.value;
            
            var data = new URLSearchParams();
            data.append('busquedaProveedor', busquedaProveedor);

            modalCargando();
            fetch('/dashboard/buscar-proveedores', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}' //Añade el token CSRF para la protección contra ataques CSRF
                },
                body: data.toString()
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json(); //Parsear la respuesta JSON
            })
            .then(data => {
                cerrarCargando();
                if(data.success){
                    document.querySelector('.tbody-proveedores').innerHTML = data.viewTableProveedores;
                }else{
                    alert(data.message);
                }
                
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Ocurrió un error al cargar la informacion. Por favor, inténtelo de nuevo.');
            });

            return false;
        }





    </script>   
@endsection