{{-- New-Unity ERP | purchases/costs/index.blade.php | v2.5 | 26/07/2026 --}}
{{-- v2.5 — Dropdown de filtro usa name (razón social) en lugar de commercial_name. --}}
{{-- v2.4 — Badge N Proveedor: dropdown AJAX al primer click (todos los proveedores, 🥇 mejor precio). --}}
{{-- v2.3 — Columna Proveedor + badge de conteo multi-proveedor. 10 columnas totales. --}}
{{-- v2.2 — Sort AJAX sin recargar página — solo actualiza tbody + paginación. --}}
{{-- v2.1 — Sort por columna al hacer click en header. --}}
{{-- v2.0 — Elimina columna Valid Until. --}}
{{-- v1.9 — Fix descripción con truncado. --}}
{{-- v1.8 — Cascada controlada: Category/Brand disabled hasta que su padre tenga valor. --}}
{{--         submitFilter() habilita selects antes del GET para incluir sus valores. --}}
{{-- v1.7 — Sin botón Filter. v1.6 — Part #. v1.5 — Auto-submit. --}}
{{-- v1.3 — Lista TODOS los productos con LEFT JOIN. v1.2 — Rediseño. v1.1 — Columnas. v1.0 — Inicial. --}}
@extends('layouts.vertical')

@section('content')
<div class="container-fluid px-3 py-2">

    {{-- Page Header --}}
    <div class="d-flex justify-content-between align-items-start mb-3">
        <div>
            <h1 class="h3 mb-0"><i class="fad fa-tags me-2"></i>{{ __('purchases.product-costs') }}</h1>
            <p class="text-muted mb-0 small">{{ __('purchases.costs-subtitle') }}</p>
            <nav><ol class="breadcrumb mb-0 small">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">{{ __('purchases.erp') }}</a></li>
                <li class="breadcrumb-item active">{{ __('purchases.product-costs') }}</li>
            </ol></nav>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('purchases.costs.history') }}" class="btn btn-outline-secondary btn-sm">
                <i class="fas fa-history me-1"></i>{{ __('purchases.price-history') }}
            </a>
            <a href="{{ route('purchases.costs.create') }}" class="btn btn-primary btn-sm">
                <i class="fas fa-plus me-1"></i>{{ __('purchases.new-cost') }}
            </a>
        </div>
    </div>

    {{-- Notifications --}}
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show py-2 small mb-3">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif
    @if(session('warning'))
        <div class="alert alert-warning alert-dismissible fade show py-2 small mb-3">
            {{ session('warning') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    {{-- Filters --}}
    <div class="card mb-3">
        <div class="card-header py-2" style="background:#3d0f5e; color:#fff;">
            <span class="fw-bold small"><i class="fas fa-filter me-2"></i>{{ __('purchases.filters') }}</span>
        </div>
        <div class="card-body py-2 px-3">
            <form method="GET" id="filterForm" action="{{ route('purchases.costs.index') }}">
                <input type="hidden" name="sort" id="sortField" value="{{ request('sort', 'id') }}">
                <input type="hidden" name="dir"  id="sortDir"   value="{{ request('dir', 'asc') }}">

                {{-- Row 1: Group → Category → Brand → Search --}}
                <div class="row g-2 mb-2 align-items-center">
                    {{-- Group --}}
                    <div class="col-md-3">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text bg-light border-end-0 text-muted">{{ __('purchases.group') }}</span>
                            <select name="group_id" id="filterGroup" class="form-select border-start-0"
                                    >
                                <option value="">{{ __('purchases.all') }}</option>
                                @foreach($groups as $g)
                                    <option value="{{ $g->id }}" @selected(request('group_id') == $g->id)>
                                        {{ $g->es_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    {{-- Category --}}
                    <div class="col-md-3">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text bg-light border-end-0 text-muted">{{ __('purchases.category') }}</span>
                            <select name="category_id" id="filterCategory" class="form-select border-start-0"
                                    >
                                <option value="">{{ __('purchases.all') }}</option>
                                @foreach($categories as $c)
                                    <option value="{{ $c->id }}" @selected(request('category_id') == $c->id)>
                                        {{ $c->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    {{-- Brand --}}
                    <div class="col-md-2">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text bg-light border-end-0 text-muted">{{ __('purchases.brand') }}</span>
                            <select name="brand_id" id="filterBrand" class="form-select border-start-0">
                                <option value="">{{ __('purchases.all') }}</option>
                                @foreach($brands as $b)
                                    <option value="{{ $b->id }}" @selected(request('brand_id') == $b->id)>
                                        {{ $b->validbrand_id }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    {{-- Search text --}}
                    <div class="col-md-4">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text bg-light border-end-0 text-muted">{{ __('purchases.product') }}</span>
                            <input type="text" name="search" class="form-control border-start-0"
                                   placeholder="{{ __('purchases.ph-product-search') }}" value="{{ request('search') }}">
                        </div>
                    </div>
                </div>

                {{-- Row 2: Supplier → Has Cost → Material Type → Buttons --}}
                <div class="row g-2 align-items-center">
                    {{-- Supplier --}}
                    <div class="col-md-3">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text bg-light border-end-0 text-muted">{{ __('purchases.supplier') }}</span>
                            <select name="supplier_id" class="form-select border-start-0">
                                <option value="">{{ __('purchases.all') }}</option>
                                @foreach($suppliers as $s)
                                    <option value="{{ $s->id }}" @selected(request('supplier_id') == $s->id)>
                                        {{ $s->name ?? $s->commercial_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    {{-- Has cost --}}
                    <div class="col-md-2">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text bg-light border-end-0 text-muted">{{ __('purchases.cost') }}</span>
                            <select name="has_cost" class="form-select border-start-0">
                                <option value="">{{ __('purchases.all') }}</option>
                                <option value="yes" @selected(request('has_cost') === 'yes')>{{ __('purchases.with-cost') }}</option>
                                <option value="no"  @selected(request('has_cost') === 'no')>{{ __('purchases.without-cost') }}</option>
                            </select>
                        </div>
                    </div>
                    {{-- Material Type --}}
                    <div class="col-md-2">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text bg-light border-end-0 text-muted">{{ __('purchases.type') }}</span>
                            <select name="material_type" class="form-select border-start-0">
                                <option value="">{{ __('purchases.all') }}</option>
                                <option value="TR" @selected(request('material_type') === 'TR')>{{ __('purchases.mt-tr') }}</option>
                                <option value="RM" @selected(request('material_type') === 'RM')>{{ __('purchases.mt-rm') }}</option>
                                <option value="FG" @selected(request('material_type') === 'FG')>{{ __('purchases.mt-fg') }}</option>
                                <option value="SV" @selected(request('material_type') === 'SV')>{{ __('purchases.mt-sv') }}</option>
                            </select>
                        </div>
                    </div>
                    {{-- Solo Clear — el filtro es automático --}}
                    <div class="col-auto">
                        <a href="{{ route('purchases.costs.index') }}" class="btn btn-secondary btn-sm">
                            <i class="fas fa-times me-1"></i>{{ __('purchases.clear') }}
                        </a>
                    </div>
                </div>

            </form>
        </div>
    </div>

    {{-- Table --}}
    <div class="card">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0" style="font-size:0.82rem;">
                    @php
                        $sort = request('sort', 'id');
                        $dir  = request('dir', 'asc');
                        $next = $dir === 'asc' ? 'desc' : 'asc';
                        function sortIcon($col, $sort, $dir) {
                            if ($sort !== $col) return '<i class="fas fa-sort text-muted ms-1" style="font-size:10px;opacity:.4;"></i>';
                            return $dir === 'asc'
                                ? '<i class="fas fa-sort-up text-primary ms-1" style="font-size:10px;"></i>'
                                : '<i class="fas fa-sort-down text-primary ms-1" style="font-size:10px;"></i>';
                        }
                    @endphp
                    <thead>
                        <tr style="border-bottom:2px solid #dee2e6;">
                            <th class="ps-3" style="width:70px;cursor:pointer;user-select:none;white-space:nowrap;" onclick="setSort('id')">{{ __('purchases.col-part') }} {!! sortIcon('id', $sort, $dir) !!}</th>
                            <th style="min-width:260px;cursor:pointer;user-select:none;white-space:nowrap;" onclick="setSort('product_name')">{{ __('purchases.product') }} {!! sortIcon('product_name', $sort, $dir) !!}</th>
                            <th style="width:95px;">{{ __('purchases.col-sku') }}</th>
                            <th style="min-width:130px;">{{ __('purchases.supplier') }}</th>
                            <th style="width:70px;cursor:pointer;user-select:none;white-space:nowrap;text-align:center;" onclick="setSort('material_type')">{{ __('purchases.type') }} {!! sortIcon('material_type', $sort, $dir) !!}</th>
                            <th style="width:65px;" class="text-center">{{ __('purchases.col-curr') }}</th>
                            <th style="width:95px;cursor:pointer;user-select:none;white-space:nowrap;text-align:right;" onclick="setSort('list_cost')">{{ __('purchases.col-list-cost') }} {!! sortIcon('list_cost', $sort, $dir) !!}</th>
                            <th style="width:65px;" class="text-center">{{ __('purchases.col-iva') }}</th>
                            <th style="width:100px;cursor:pointer;user-select:none;white-space:nowrap;text-align:right;" onclick="setSort('total_cost')">{{ __('purchases.col-total-cost') }} {!! sortIcon('total_cost', $sort, $dir) !!}</th>
                            <th style="width:60px;" class="text-center">{{ __('purchases.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody id="costsTableBody">
                        @include('purchases::costs._rows', ['products' => $products])
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Pagination --}}
        @if($products->hasPages())
        <div id="costsPagination" class="card-footer py-2 d-flex justify-content-between align-items-center small text-muted">
            <span>
                {{ __('purchases.showing-products', ['first' => $products->firstItem(), 'last' => $products->lastItem(), 'total' => $products->total()]) }}
                @if(request('has_cost') === 'no')
                    <span class="badge bg-warning text-dark ms-2">{{ __('purchases.without-cost') }}</span>
                @elseif(request('has_cost') === 'yes')
                    <span class="badge bg-success ms-2">{{ __('purchases.with-cost') }}</span>
                @endif
            </span>
            {{ $products->links() }}
        </div>
        @endif
    </div>

</div>
@endsection

@section('scripts')
@parent
<script>
var AppUrl      = '{{ url('') }}';
var searchTimer = null;

$(function() {

    // ── Estado inicial: Category y Brand deshabilitados ───────────────────────
    $('#filterCategory').prop('disabled', true);
    $('#filterBrand').prop('disabled', true);

    // ── Group → carga Categories, habilita Category, deshabilita Brand ────────
    $('#filterGroup').on('change', function() {
        var groupId = $(this).val();

        // Resetear y deshabilitar dependientes
        $('#filterCategory').find('option:not(:first)').remove().end().val('').prop('disabled', true);
        $('#filterBrand').find('option:not(:first)').remove().end().val('').prop('disabled', true);

        if (!groupId) {
            submitFilter();
            return;
        }

        $.ajax({
            url: AppUrl + '/invoices/getCategories',
            data: { idGroup: groupId },
            success: function(data) {
                $.each(data.categories, function(i, c) {
                    $('#filterCategory').append('<option value="' + c.id + '">' + c.name + '</option>');
                });
                $('#filterCategory').prop('disabled', false); // habilitar Category
                submitFilter();
            }
        });
    });

    // ── Category → carga Brands, habilita Brand ───────────────────────────────
    $('#filterCategory').on('change', function() {
        var categoryId = $(this).val();

        // Resetear y deshabilitar Brand
        $('#filterBrand').find('option:not(:first)').remove().end().val('').prop('disabled', true);

        if (!categoryId) {
            submitFilter();
            return;
        }

        $.ajax({
            url: AppUrl + '/invoices/getBrands',
            data: { categoryId: categoryId },
            success: function(data) {
                $.each(data.brands, function(i, b) {
                    $('#filterBrand').append('<option value="' + b.id + '">' + b.name + '</option>');
                });
                $('#filterBrand').prop('disabled', false); // habilitar Brand
                submitFilter();
            }
        });
    });

    // ── Brand, Supplier, has_cost, material_type → submit inmediato ───────────
    $('#filterBrand, select[name="supplier_id"], select[name="has_cost"], select[name="material_type"]')
        .on('change', function() {
            submitFilter();
        });

    // ── Texto: submit tras 300ms de inactividad ───────────────────────────────
    $('input[name="search"]').on('input', function() {
        clearTimeout(searchTimer);
        searchTimer = setTimeout(submitFilter, 300);
    });

    // ── Si hay filtros activos al cargar: rehabilitar selects según estado ─────
    @if(request('group_id'))
        $('#filterCategory').prop('disabled', false);
        @if(request('category_id'))
            $('#filterBrand').prop('disabled', false);
        @endif
    @endif

});

function submitFilter() {
    // Habilitar temporalmente los selects disabled antes de submit
    // para que sus valores se incluyan en el GET
    $('#filterCategory, #filterBrand').prop('disabled', false);
    $('#filterForm').submit();
}

    // ── Sort por columna — AJAX sin recargar página ─────────────────
    function setSort(col) {
        var currentSort = document.getElementById('sortField').value;
        var currentDir  = document.getElementById('sortDir').value;
        var newDir = (currentSort === col && currentDir === 'asc') ? 'desc' : 'asc';

        document.getElementById('sortField').value = col;
        document.getElementById('sortDir').value   = newDir;

        // Construir URL con todos los filtros actuales
        var form    = document.getElementById('filterForm');
        var params  = new URLSearchParams(new FormData(form));
        params.set('ajax', '1');

        // Spinner en tbody
        document.getElementById('costsTableBody').innerHTML =
            '<tr><td colspan="10" class="text-center py-4">' +
            '<i class="fas fa-spinner fa-spin me-2"></i>{{ __('purchases.loading') }}</td></tr>';

        fetch('{{ route("purchases.costs.index") }}?' + params.toString(), {
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(r => r.json())
        .then(data => {
            document.getElementById('costsTableBody').innerHTML = data.rows;
            // Actualizar paginación si existe
            var pag = document.getElementById('costsPagination');
            if (pag && data.pagination) {
                pag.querySelector('nav, ul')
                    ? pag.querySelector('nav').outerHTML = data.pagination
                    : null;
            }
            // Actualizar íconos de sort en headers
            updateSortIcons(col, newDir);
        })
        .catch(() => {
            // Si falla el AJAX, hacer submit normal
            document.getElementById('filterForm').submit();
        });
    }

    // ── Dropdown multi-proveedor — carga AJAX al primer show ───────────────
    document.addEventListener('show.bs.dropdown', function (e) {
        var btn = e.relatedTarget;
        if (!btn || !btn.dataset.url) return;
        if (btn.dataset.loaded) return;

        var menu = btn.nextElementSibling;

        fetch(btn.dataset.url, {
            headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
        })
        .then(function (r) { return r.json(); })
        .then(function (data) {
            btn.dataset.loaded = '1';
            var costs = (data.costs || []).slice().sort(function (a, b) {
                return parseFloat(String(a.cost).replace(/,/g, '')) -
                       parseFloat(String(b.cost).replace(/,/g, ''));
            });
            var head = '<thead class="table-light"><tr style="font-size:10px;">' +
                '<th class="ps-2">{{ __("purchases.supplier") }}</th>' +
                '<th class="text-end">{{ __("purchases.col-list-cost") }}</th>' +
                '<th class="text-center">{{ __("purchases.col-curr") }}</th>' +
                '<th class="text-end">{{ __("purchases.col-total-cost") }}</th>' +
                '<th class="text-center">{{ __("purchases.valid-until") }}</th>' +
                '</tr></thead>';
            var rows = costs.map(function (c, i) {
                var bestBadge = i === 0
                    ? '<span class="badge bg-warning text-dark ms-1" style="font-size:8px;">&#x1F947; Mejor</span>'
                    : '';
                var expBadge = !c.is_active
                    ? '<span class="badge bg-danger ms-1" style="font-size:8px;">&#x26A0; Exp.</span>'
                    : '';
                return '<tr>' +
                    '<td class="ps-2" style="max-width:170px;"><span class="d-inline-block text-truncate" style="max-width:130px;" title="' + c.supplier + '">' + c.supplier + '</span>' + bestBadge + expBadge + '</td>' +
                    '<td class="text-end">$' + c.cost + '</td>' +
                    '<td class="text-center text-muted">' + c.currency + '</td>' +
                    '<td class="text-end fw-semibold text-success">$' + c.total_cost + '</td>' +
                    '<td class="text-center text-muted">' + (c.valid_to || '—') + '</td>' +
                    '</tr>';
            }).join('');
            menu.innerHTML = '<li class="p-0"><div class="table-responsive"><table class="table table-sm table-hover mb-0" style="font-size:11px;">' +
                head + '<tbody>' + rows + '</tbody></table></div></li>';
        })
        .catch(function () {
            menu.innerHTML = '<li class="px-3 py-2 text-danger small"><i class="fas fa-exclamation-circle me-1"></i>Error al cargar proveedores</li>';
        });
    });

    function updateSortIcons(activeCol, dir) {
        var cols = { 'id': 0, 'product_name': 1, 'material_type': 4, 'list_cost': 6, 'total_cost': 8 };
        document.querySelectorAll('thead th').forEach(function(th) {
            var icon = th.querySelector('i.fa-sort, i.fa-sort-up, i.fa-sort-down');
            if (!icon) return;
            icon.className = 'fas fa-sort text-muted ms-1';
            icon.style.fontSize = '10px';
            icon.style.opacity = '0.4';
        });
        var colIdx = cols[activeCol];
        if (colIdx !== undefined) {
            var th = document.querySelectorAll('thead th')[colIdx];
            if (th) {
                var icon = th.querySelector('i');
                if (icon) {
                    icon.className = dir === 'asc' ? 'fas fa-sort-up text-primary ms-1' : 'fas fa-sort-down text-primary ms-1';
                    icon.style.opacity = '1';
                }
            }
        }
    }
</script>
@endsection