@model InventarioPaldaca.Models.ViewModels.ProveedorViewModel

@section Styles {
    <link rel="stylesheet" href="~/css/PerfilUsuario.css">
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
}

<section class="container form-container mt-5 mb-5">
    <h2 class="form-title">
        <img src="/img/Iconos/proveedor.svg" alt="Icono Proveedor" style="width: 32px; height: 32px; margin-right: 10px;">
        Proveedores
    </h2>
    <div class="card">
        <hr class="linea" />
        <div class="card-body cardsearch">
            <!-- Formulario de búsqueda -->
            <form id="searchFormProveedor" onsubmit="event.preventDefault();">
                <div class="form-group">
                    <div class="input-group">
                        <!-- Caja de búsqueda con icono -->
                        <div class="search">
                            <span class="material-symbols-outlined search-icon">Search</span>
                            <input type="search" id="searchTermProveedor" class="form-control border-start-0 search-input"
                                   placeholder="Buscar Proveedor" />
                        </div>
                        <!-- Botón de búsqueda -->
                        <div class="input-group-append">
                            <button type="button" class="btn btn-primary btn-search mt-2" id="searchBtnProveedor">Buscar</button>
                        </div>
                    </div>
                </div>
                <div class="filter-container mb-4 mt-4">
                    <h5 class="form-title" style="font-size: 20px;">
                        <img src="/img/Iconos/filtrar.svg" alt="Icono Activos" style="width: 32px; height: 32px; margin-right: 10px;">
                        Filtrar Proveedores
                    </h5>
                    <!-- Filtro de Categoría Maestra -->
                    <div class="form-group mt-3">
                        
                        <select class="form-select" id="categoriaMasterFilter">
                            <option value="">Seleccione una Categoría</option>
                            @foreach (var categoriaMaster in Model.CategoriasMaestras)
                            {
                                <option value="@categoriaMaster.CategoriaMasterId">@categoriaMaster.Nombre</option>
                            }
                        </select>
                    </div>
                </div>
            </form>
        </div>
    </div>
    
    <div id="proveedoresEncontradosContainer" class="text-white p-4 rounded">
        <partial name="_ProveedoresEncontradosPartial" model="Model.ProveedoresEncontrados" />
    </div>
</section>

@section Scripts {
    <script>
        // Función para realizar la búsqueda o filtrar por categoría maestra
        function buscarProveedores() {
            var searchTerm = document.getElementById("searchTermProveedor").value.trim();
            var categoriaMasterId = document.getElementById("categoriaMasterFilter").value;

            var url = `/Proveedor/BuscarProveedores?searchTerm=${encodeURIComponent(searchTerm)}&categoriaMasterId=${encodeURIComponent(categoriaMasterId)}`;

            fetch(url, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.text())
            .then(html => {
                document.getElementById("proveedoresEncontradosContainer").innerHTML = html;
            });
        }

        // Escucha del botón de búsqueda
        document.getElementById("searchBtnProveedor").addEventListener("click", function () {
            buscarProveedores();
        });

        // Escucha para la entrada de búsqueda (presionar Enter)
        document.getElementById("searchTermProveedor").addEventListener("keydown", function (event) {
            if (event.key === "Enter") {
                event.preventDefault();
                buscarProveedores();
            }
        });

        // Escucha para el cambio de la categoría maestra en el filtro
        document.getElementById("categoriaMasterFilter").addEventListener("change", function () {
            buscarProveedores();
        });
    </script>
}