@extends('layouts.dashboard')

@section('dashboard')
    <ul class="breadcrumb m-0 p-0">
        <li><a href="/dashboard">Home</a></li>
        <li><strong>{{ $titulo }}</strong></li>
    </ul>
    <form method="post" class="row align-items-center mb-4 form-registro form-enter" action="{{ route('buscar-usuarios') }}"
        id="form-usuarios" onsubmit="return buscarUsuarios(this.id)">
        {{ csrf_field() }}
        <div class="col-md">
            <h1 class="titulo-h1 mb-0">{{ $titulo }}</h1>
        </div>
        <div class="col-md-4">
            <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="valor-busqueda"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Nombre / Razón social</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, 'nombre')">Nombre / Razón social</button>
                        </li>
                        <li class="mb-0">
                            <button type="button" class="btn-limpio dropdown-item small px-3 py-2"
                                onclick="valorBusqueda(this, 'rut')">RUT</button>
                        </li>
                        <li class="mb-0">
                            <button type="button" class="btn-limpio dropdown-item small px-3 py-2"
                                onclick="valorBusqueda(this, 'email')">Email</button>
                        </li>
                    </ul>
                </div>
                <div class="col">
                    <input type="search" class="form-control form-control-sm" name="busqueda"
                        placeholder="Buscar {{ $tipoBusqueda }}..." required="">
                </div>
            </div>
        </div>
        <div class="col-md-auto">
            <input type="hidden" name="tipobusqueda" value="{{ $tipoBusqueda }}">
            <input type="hidden" name="valorbusqueda" value="nombre">
            <input type="hidden" name="offset">
            <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-search"></i> Filtrar</button>
        </div>
    </form>

    <div class="list-usuarios">
        @include('dashboard.usuarios.table-usuarios')
    </div>
@endsection

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

        function buscarUsuarios(formId) {
            var form = document.getElementById(formId);
            var action = form.getAttribute('action');

            let formData = new FormData(form);

            modalCargando();

            const buscar = document.querySelector("[name=busqueda]");
            if (buscar) {
                buscar.value = buscar.value.trim();
            }

            fetch(action, {
                    method: 'POST',
                    body: formData,
                })
                .then(response => response.text())
                .then(data => {
                    const listUsuarios = document.querySelector(".list-usuarios");
                    if (listUsuarios) {
                        listUsuarios.innerHTML = data;
                    }

                    paginacion();
                    cerrarCargando();
                })
                .catch(error => {
                    cerrarCargando();
                    console.error("Error al buscar usuarios:", error);
                });

            return false;
        }

        function cambiarPaginaUsuarios(offset, tipo) {
            const offsetInput = document.querySelector("[name=offset]");
            if (offsetInput) {
                offsetInput.value = offset;
            }
            buscarUsuarios("form-usuarios");
        }

        function paginacion() {
            // Actualizar enlaces de paginación
            document.querySelectorAll(".list-paginacion a").forEach(function(el) {
                const href = el.getAttribute("href");
                const page = href.split("page=")[1];

                el.setAttribute("href", "javascript:void(0)");
                el.setAttribute("onclick", `cambiarPaginaUsuarios(${page})`);
            });
        }

        function valorBusqueda(input, tipo) {
            const text = input.textContent;
            const tipoBusqueda = document.getElementById("valor-busqueda");
            if (tipoBusqueda) {
                tipoBusqueda.textContent = text;
            }

            const campoTipo = document.querySelector("[name=valorbusqueda]");
            if (campoTipo) {
                campoTipo.value = tipo;
            }

            const buscar = document.querySelector("[name=busqueda]");
            if (buscar) {
                buscar.classList.remove("input-rut");
                switch (tipo) {
                    case "nombre":
                        buscar.setAttribute("type", "search");
                        break;
                    case "rut":
                        buscar.setAttribute("type", "text");
                        buscar.classList.add("input-rut");
                        break;
                    case "email":
                        buscar.setAttribute("type", "email");
                        break;
                }

                const valor = buscar.value;
                const nuevoBuscar = buscar.cloneNode(true);
                nuevoBuscar.value = valor;
                buscar.parentNode.replaceChild(nuevoBuscar, buscar);

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