{{-- New-Unity ERP | Modules/Products/Resources/Views/products/index.blade.php | v2.1 | 05/09/2026 --}}
{{-- v2.1 — material_type: etiquetas comerciales TR/RM/SV; FG oculto del filtro; usa claves material_type_* de i18n. --}}
{{-- v2.0 — Bug 3: input search con type="search" + autocomplete="new-password" (evita autofill email). --}}
{{--         Bug 4: filtro dinámico AJAX sin recargar página; clearFilters() también vía AJAX. --}}
{{-- v1.0 — Listado de productos con filtros, paginación y acciones CRUD. --}}
@extends('layouts.vertical')

@section('content')
<div class="container-fluid">
    {{-- Page Header --}}
    <div class="d-flex justify-content-between align-items-start mb-2">
        <div>
            <h1 class="h3 mb-0"><i class="fad fa-box me-2"></i>{{ __('products.list-title') }}</h1>
            <p class="text-muted mb-0">{{ __('products.list-subtitle') }}</p>
        </div>
    </div>

    {{-- Breadcrumbs --}}
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-3">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Unity ERP</a></li>
            <li class="breadcrumb-item"><a href="#">{{ __('products.breadcrumb-products') }}</a></li>
            <li class="breadcrumb-item active">{{ __('products.breadcrumb-list') }}</li>
        </ol>
    </nav>

    {{-- Filters Card --}}
    <div class="card mb-3">
        <div class="card-body">
            <form id="filterForm" onsubmit="return false;">
                <div class="row g-3">
                    {{-- Group Filter --}}
                    <div class="col-md-2">
                        <label class="form-label small text-muted mb-1">{{ __('products.filter-group') }}</label>
                        <select name="group_id" id="group_filter" class="form-select form-select-sm">
                            <option value="">{{ __('products.all-option') }}</option>
                            @foreach($allGroups as $group)
                                <option value="{{ $group->id }}" {{ request('group_id') == $group->id ? 'selected' : '' }}>
                                    {{ $group->es_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Category Filter --}}
                    <div class="col-md-2">
                        <label class="form-label small text-muted mb-1">{{ __('products.filter-category') }}</label>
                        <select name="category_id" id="category_filter" class="form-select form-select-sm">
                            <option value="">{{ __('products.all-option') }}</option>
                            @foreach($allCategories as $category)
                                <option value="{{ $category->id }}" 
                                        data-group-id="{{ $category->group_id }}"
                                        {{ request('category_id') == $category->id ? 'selected' : '' }}>
                                    {{ $category->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Brand Filter --}}
                    <div class="col-md-2">
                        <label class="form-label small text-muted mb-1">{{ __('products.filter-brand') }}</label>
                        <select name="brand_id" id="brand_filter" class="form-select form-select-sm">
                            <option value="">{{ __('products.all-option') }}</option>
                            @foreach($allBrands as $brand)
                                <option value="{{ $brand->id }}" {{ request('brand_id') == $brand->id ? 'selected' : '' }}>
                                    {{ $brand->validbrand_id }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Family Filter --}}
                    <div class="col-md-2">
                        <label class="form-label small text-muted mb-1">{{ __('products.filter-family') }}</label>
                        <select name="family" id="family_filter" class="form-select form-select-sm">
                            <option value="">{{ __('products.all-option') }}</option>
                            @foreach($allFamilies as $family)
                                <option value="{{ $family }}" {{ request('family') == $family ? 'selected' : '' }}>
                                    {{ $family }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Model Filter --}}
                    <div class="col-md-2">
                        <label class="form-label small text-muted mb-1">{{ __('products.filter-model') }}</label>
                        <select name="model" id="model_filter" class="form-select form-select-sm">
                            <option value="">{{ __('products.all-option') }}</option>
                            @foreach($allModels as $model)
                                <option value="{{ $model }}" {{ request('model') == $model ? 'selected' : '' }}>
                                    {{ $model }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Material Type Filter --}}
                    <div class="col-md-2">
                        <label class="form-label small text-muted mb-1">{{ __('products.filter-material-type') }}</label>
                        <select name="material_type" class="form-select form-select-sm">
                            <option value="">{{ __('products.all-types') }}</option>
                            <option value="TR" {{ request('material_type') == 'TR' ? 'selected' : '' }}>{{ __('products.material_type_tr') }}</option>
                            <option value="RM" {{ request('material_type') == 'RM' ? 'selected' : '' }}>{{ __('products.material_type_rm') }}</option>
                            <option value="SV" {{ request('material_type') == 'SV' ? 'selected' : '' }}>{{ __('products.material_type_sv') }}</option>
                        </select>
                    </div>

                    {{-- Status Filter --}}
                    <div class="col-md-2">
                        <label class="form-label small text-muted mb-1">{{ __('products.filter-status') }}</label>
                        <select name="status_id" class="form-select form-select-sm">
                            <option value="">{{ __('products.status-all') }}</option>
                            <option value="1" {{ request('status_id') == '1' ? 'selected' : '' }}>{{ __('products.status-active') }}</option>
                            <option value="2" {{ request('status_id') == '2' ? 'selected' : '' }}>{{ __('products.status-inactive') }}</option>
                        </select>
                    </div>

                    {{-- Action Buttons --}}
                    <div class="col-md-2 d-flex align-items-end gap-1">
                        <button type="button" class="btn btn-success btn-sm flex-fill" onclick="applyFilters()">
                            <i class="fad fa-filter me-1"></i>{{ __('products.filter-btn') }}
                        </button>
                        <button type="button" class="btn btn-secondary btn-sm" onclick="clearFilters()" title="{{ __('products.clear-filters') }}">
                            <i class="fad fa-times"></i>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {{-- Actions Bar --}}
    <div class="card">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
                {{-- Search --}}
                <div class="col-md-3">
                    <div class="input-group input-group-sm">
                        <span class="input-group-text"><i class="fad fa-search"></i></span>
                        <input type="search" id="search_input" name="product_search"
                               class="form-control form-control-sm"
                               placeholder="{{ __('products.search-products') }}"
                               autocomplete="new-password">
                    </div>
                </div>

                {{-- Action Buttons --}}
                <div>
                    <button class="btn btn-outline-danger btn-sm me-1">
                        <i class="fad fa-file-excel me-1"></i>{{ __('products.export-excel') }}
                    </button>
                    <button class="btn btn-outline-info btn-sm me-1">
                        <i class="fad fa-file-import me-1"></i>{{ __('products.import-excel') }}
                    </button>
                    <a href="{{ route('products.classification.index') }}" class="btn btn-primary btn-sm">
                        <i class="fad fa-plus me-1"></i>{{ __('products.new') }}
                    </a>
                </div>
            </div>

            {{-- Products Table --}}
            <div class="table-responsive">
                <table class="table table-sm table-hover">
                    <thead class="table-light">
                        <tr>
                            <th>{{ __('products.col-group-id') }}</th>
                            <th>{{ __('products.col-category') }}</th>
                            <th>{{ __('products.col-part-number') }}</th>
                            <th>{{ __('products.col-product-name') }}</th>
                            <th class="text-center">{{ __('products.col-type') }}</th>
                            <th class="text-center">{{ __('products.status') }}</th>
                            <th class="text-center">{{ __('products.col-actions') }}</th>
                        </tr>
                    </thead>
                    <tbody id="productsTable">
                        @include('products::products._rows', ['products' => $products])
                    </tbody>
                </table>
            </div>

            {{-- Pagination --}}
            <div class="d-flex justify-content-between align-items-center mt-3">
                <div class="text-muted small" id="paginationInfo">
                    {{ __('products.showing-entries', ['first' => $products->firstItem() ?? 0, 'last' => $products->lastItem() ?? 0, 'total' => $products->total()]) }}
                </div>
                <div id="paginationLinks">
                    {{ $products->links() }}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
// ── Opciones originales (accesibles desde clearFilters) ───────────────────────
var allCategories, allBrands, allFamilies, allModels;

$(document).ready(function() {
    allCategories = $('#category_filter option').clone();
    allBrands     = $('#brand_filter option').clone();
    allFamilies   = $('#family_filter option').clone();
    allModels     = $('#model_filter option').clone();

    // Cascada: Grupo → Categoría
    $('#group_filter').on('change', function() {
        filterCategories();
        $('#category_filter').val('');
        $('#brand_filter').empty().append(allBrands.clone());
        $('#family_filter').empty().append(allFamilies.clone());
        $('#model_filter').empty().append(allModels.clone());
    });

    // Cascada: Categoría → Marca
    $('#category_filter').on('change', function() {
        loadBrands();
        $('#brand_filter').val('');
        $('#family_filter').val('');
        $('#model_filter').val('');
    });

    // Búsqueda con debounce desde el 2do carácter (Bug 3 & 4)
    var _searchTimer = null;
    $('#search_input').on('input', function() {
        var term = $(this).val().trim();
        clearTimeout(_searchTimer);
        if (term.length === 1) return; // esperar al 2do carácter
        _searchTimer = setTimeout(applyFilters, 300);
    });

    // Filtrado inicial si hay grupo seleccionado (cascada al cargar desde URL)
    if ($('#group_filter').val()) {
        filterCategories();
    }
});

function filterCategories() {
    var groupId = $('#group_filter').val();
    $('#category_filter option').remove();
    $('#category_filter').append('<option value="">{{ __('products.all-option') }}</option>');
    if (groupId) {
        allCategories.each(function() {
            if ($(this).val() === '' || $(this).data('group-id') == groupId) {
                $('#category_filter').append($(this).clone());
            }
        });
    } else {
        $('#category_filter').append(allCategories.clone());
    }
}

function loadBrands() {
    var categoryId = $('#category_filter').val();
    if (categoryId) {
        $.ajax({
            url: '/products/categories/' + categoryId + '/brands',
            method: 'GET',
            success: function(data) {
                $('#brand_filter').empty().append('<option value="">{{ __('products.all-option') }}</option>');
                data.brands.forEach(function(brand) {
                    $('#brand_filter').append($('<option>').val(brand.id).text(brand.validbrand_id));
                });
            },
            error: function() { $('#brand_filter').empty().append(allBrands.clone()); }
        });
    } else {
        $('#brand_filter').empty().append(allBrands.clone());
    }
}

// ── Filtro AJAX principal ─────────────────────────────────────────────────────
var _showingTpl = '{{ __("products.showing-entries", ["first" => "__F__", "last" => "__L__", "total" => "__T__"]) }}';

function applyFilters() {
    var tbody   = document.getElementById('productsTable');
    var infoEl  = document.getElementById('paginationInfo');
    var linksEl = document.getElementById('paginationLinks');

    var params = new URLSearchParams();
    var v;
    if ((v = document.getElementById('group_filter').value))               params.set('group_id',      v);
    if ((v = document.getElementById('category_filter').value))            params.set('category_id',   v);
    if ((v = document.getElementById('brand_filter').value))               params.set('brand_id',       v);
    if ((v = document.getElementById('family_filter').value))              params.set('family',         v);
    if ((v = document.getElementById('model_filter').value))               params.set('model',          v);
    if ((v = document.querySelector('[name="material_type"]').value))      params.set('material_type',  v);
    if ((v = document.querySelector('[name="status_id"]').value))          params.set('status_id',      v);
    if ((v = document.getElementById('search_input').value.trim()))        params.set('search',         v);

    var url = '/products' + (params.toString() ? '?' + params.toString() : '');
    history.pushState(null, '', url);

    if (tbody) tbody.innerHTML = '<tr><td colspan="7" class="text-center py-4">'
        + '<i class="fad fa-spinner fa-spin me-2"></i>Buscando…</td></tr>';

    fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' } })
        .then(function(r) { if (!r.ok) throw new Error('HTTP ' + r.status); return r.json(); })
        .then(function(data) {
            if (tbody) tbody.innerHTML = data.html;
            if (linksEl) linksEl.innerHTML = data.links;
            if (infoEl) infoEl.textContent = _showingTpl
                .replace('__F__', data.from || 0)
                .replace('__L__', data.to   || 0)
                .replace('__T__', data.total || 0);
        })
        .catch(function() {
            if (tbody) tbody.innerHTML = '<tr><td colspan="7" class="text-center text-danger py-4">'
                + '<i class="fad fa-exclamation-triangle me-2"></i>Error al cargar. Intenta de nuevo.</td></tr>';
        });
}

function clearFilters() {
    document.getElementById('group_filter').value = '';
    $('#category_filter').empty().append(allCategories ? allCategories.clone() : '<option value="">{{ __("products.all-option") }}</option>');
    $('#brand_filter').empty().append(allBrands ? allBrands.clone() : '<option value="">{{ __("products.all-option") }}</option>');
    $('#family_filter').empty().append(allFamilies ? allFamilies.clone() : '');
    $('#model_filter').empty().append(allModels ? allModels.clone() : '');
    document.querySelector('[name="material_type"]').value = '';
    document.querySelector('[name="status_id"]').value = '';
    document.getElementById('search_input').value = '';
    applyFilters();
}

// Eliminar producto (con validación en servidor)
function confirmDelete(id, name) {
    const title = '{{ __('products.delete-confirm-title') }}';
    const body  = '{{ __('products.delete-confirm-body') }}';
    if (!confirm(title + '\n\n' + name + '\n\n' + body)) return;

    const form = document.createElement('form');
    form.method = 'POST';
    form.action = `/products/${id}`;
    const csrf = document.createElement('input');
    csrf.type = 'hidden'; csrf.name = '_token'; csrf.value = '{{ csrf_token() }}';
    const method = document.createElement('input');
    method.type = 'hidden'; method.name = '_method'; method.value = 'DELETE';
    form.appendChild(csrf);
    form.appendChild(method);
    document.body.appendChild(form);
    form.submit();
}

// Toggle Activo / Inactivo
function toggleStatus(id, activate) {
    const msg = activate
        ? '{{ __('products.toggle-activate-confirm') }}'
        : '{{ __('products.toggle-deactivate-confirm') }}';
    if (!confirm(msg)) return;

    const form = document.createElement('form');
    form.method = 'POST';
    form.action = `/products/${id}/toggle-status`;
    const csrf = document.createElement('input');
    csrf.type = 'hidden'; csrf.name = '_token'; csrf.value = '{{ csrf_token() }}';
    form.appendChild(csrf);
    document.body.appendChild(form);
    form.submit();
}
</script>
@endsection