@extends('layouts.dashboard')

@section('dashboard')
    <ul class="breadcrumb m-0 p-0">
        <li><a href="/dashboard">Home</a></li>
        <li><strong>Clientes</strong></li>
    </ul>
    <div class="row align-items-center mb-4">
        <div class="col-md-auto">
            <h1 class="titulo-h1 mb-0">Clientes</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-cliente') }}" class="dropdown-item small">Crear Cliente</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 buscarCliente()">
                {{ csrf_field() }}
                {{-- <div class="form-group col-auto">
                    <label for="buscar" class="small mb-0">Buscar</label>
                    <input type="text" class="form-control form-control-sm" id="busqueda-cliente" placeholder="Buscar por nombre">
                </div> --}}

                <div class="form-group col-auto">
                    <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">Nombre</button>
                            <ul class="dropdown-menu rounded-0 p-0 m-0" aria-labelledby="tipo-busqueda" style="">
                                <li class="mb-0"><button type="button" class="btn-limpio dropdown-item small px-3 py-2" onclick="tipoBusquedaDTE(this, 'rut', 'rut')">RUT</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</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> --}}
                            </ul>
                        </div>
                        <div class="col">
                            <input type="text" id="busqueda-cliente" name="busqueda-cliente" class="form-control form-control-sm" placeholder="Buscar">
                        </div>
                    </div>
                </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 box-clientes">
                @include('dashboard.clientes.table-clientes')
            </div>
        </div>
    </div>


@endsection

@section('scripts')
    <script>
        function buscarCliente(){
            
            var tipoBusqueda          = document.getElementById('tipo-busqueda').innerText;

            var inputBusquedaCliente     = document.getElementById('busqueda-cliente');
            var busquedaCliente          = inputBusquedaCliente.value;

            //alert(tipoBusqueda+busquedaCliente)
            
            var data = new URLSearchParams();
            data.append('busquedaCliente', busquedaCliente);
            data.append('tipoBusqueda', tipoBusqueda);

            modalCargando();
            fetch('/dashboard/buscar-clientes', {
                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('.box-clientes').innerHTML = data.viewTableClientes;
                }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;
        }

        document.addEventListener('click', function (e) {
            if (e.target.matches('.pagination a')) {
                e.preventDefault();
                const url = e.target.getAttribute('href');

                fetch(url, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: new URLSearchParams({
                        busquedaCliente: document.getElementById('tipo-busqueda').innerText,
                        tipoBusqueda: document.getElementById('busqueda-cliente').value
                    }).toString()
                })
                .then(response => response.json())
                .then(data => {
                    document.querySelector('.box-clientes').innerHTML = data.viewTableClientes;
                });
            }
        });


    </script>   
@endsection