@extends('store.layout.main')
@section('title', 'Products')

@section('page-header')
@php
    $productListHeaderBtns = [[
        'href' => route('store.product.add'),
        'text' => 'Add Product',
        'class' => 'btn btn-primary d-inline-flex align-items-center gap-1',
        'icon' => '<i class="bi bi-plus-lg" aria-hidden="true"></i>',
    ]];
@endphp
<x-store.page-header
    pretitle="Store"
    title="Products"
    back-route="store.dashboard"
    :other-btn="$productListHeaderBtns"
/>
@endsection

@section('main-container')
@php
    $colCount = 5;
    $activeType = request('type', '');
    $activeStock = request('stock', '');
    $activeCategory = request('category', '');
    $activeTax = request('tax', '');
    $activeStatus = request('status', '');
    $hasAnyProductFilter = filled(request('type')) || filled(request('stock')) || filled(request('category')) || filled(request('tax')) || filled(request('status'));

    $categoryOpts = [];
    foreach ($productFilterCategories ?? [] as $cat) {
        $categoryOpts[(string) $cat->id] = [
            'label' => $cat->name,
            'bg' => '#e0f2fe',
            'color' => '#0369a1',
            'dot' => '#0ea5e9',
        ];
    }

    $productFilterGroups = [
        'type' => [
            'label' => 'Type',
            'active' => $activeType,
            'default' => ['label' => 'All types', 'bg' => '#f1f5f9', 'color' => '#64748b', 'dot' => '#94a3b8'],
            'options' => [
                'simple' => ['label' => 'Simple', 'bg' => '#e6f7f5', 'color' => '#0d5c56', 'dot' => '#0ca678'],
                'variant' => ['label' => 'Variants', 'bg' => '#f3e8ff', 'color' => '#7c3aed', 'dot' => '#7c3aed'],
            ],
        ],
        'stock' => [
            'label' => 'Stock',
            'active' => $activeStock,
            'default' => ['label' => 'All stock', 'bg' => '#f1f5f9', 'color' => '#64748b', 'dot' => '#94a3b8'],
            'options' => [
                'in' => ['label' => 'In stock / ∞', 'bg' => '#dcfce7', 'color' => '#15803d', 'dot' => '#16a34a'],
                'out' => ['label' => 'Out of stock', 'bg' => '#fee2e2', 'color' => '#b91c1c', 'dot' => '#dc2626'],
                'low' => ['label' => 'Low (1–10)', 'bg' => '#fef3c7', 'color' => '#b45309', 'dot' => '#d97706'],
                'unlimited' => ['label' => 'Not tracked (∞)', 'bg' => '#f1f5f9', 'color' => '#475569', 'dot' => '#64748b'],
            ],
        ],
        'category' => [
            'label' => 'Category',
            'active' => $activeCategory,
            'default' => ['label' => 'All categories', 'bg' => '#f1f5f9', 'color' => '#64748b', 'dot' => '#94a3b8'],
            'options' => $categoryOpts,
        ],
        'tax' => [
            'label' => 'Tax',
            'active' => $activeTax,
            'default' => ['label' => 'All tax', 'bg' => '#f1f5f9', 'color' => '#64748b', 'dot' => '#94a3b8'],
            'options' => [
                'yes' => ['label' => 'Taxable', 'bg' => '#ccfbf1', 'color' => '#0f766e', 'dot' => '#14b8a6'],
                'no' => ['label' => 'No tax', 'bg' => '#f8fafc', 'color' => '#64748b', 'dot' => '#94a3b8'],
            ],
        ],
        'status' => [
            'label' => 'Status',
            'active' => $activeStatus,
            'default' => ['label' => 'All status', 'bg' => '#f1f5f9', 'color' => '#64748b', 'dot' => '#94a3b8'],
            'options' => [
                'published' => ['label' => 'Published', 'bg' => '#dcfce7', 'color' => '#15803d', 'dot' => '#16a34a'],
                'draft'     => ['label' => 'Draft',     'bg' => '#fef3c7', 'color' => '#b45309', 'dot' => '#d97706'],
            ],
        ],
    ];

    $productListFpUrl = function (string $key, string $val): string {
        $params = [];
        foreach (['type', 'stock', 'category', 'tax', 'status'] as $pk) {
            $v = request($pk, '');
            if ($v !== '' && $v !== null) {
                $params[$pk] = $v;
            }
        }
        if ($val === '') {
            unset($params[$key]);
        } else {
            $params[$key] = $val;
        }
        return route('store.product.list', $params);
    };
@endphp
<div class="row row-deck row-cards">
    <div class="col-12">
        <div class="card product-list-card">
            <div class="card-header flex-column align-items-stretch gap-0">
                {{-- Row 1: search + count --}}
                <div class="row g-2 align-items-center w-100 mx-0">
                    <div class="col-12 col-md-9">
                        <div class="input-group product-list-search-group">
                            <span class="input-group-text bg-white product-list-search-icon">
                                <i class="bi bi-box-seam"></i>
                            </span>
                            <div class="position-relative flex-grow-1">
                                <input type="search" id="search-input" class="form-control product-list-search-input border-start-0" placeholder="Search product by name or SKU..." autocomplete="off">
                                <div id="search-dropdown" class="product-search-dropdown dropdown-menu w-100 shadow" style="display:none;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-3 d-flex justify-content-md-end align-items-center gap-2 flex-wrap">
                        <div class="product-count-pill">
                            <span class="product-count-pill__icon"><i class="bi bi-boxes"></i></span>
                            <span class="product-count-pill__text">Products</span>
                            <span class="product-count-pill__count">{{ number_format($products->total()) }}</span>
                        </div>
                        @if(isset($publishedCount) || isset($draftCount))
                        <div class="d-flex gap-1">
                            <a href="{{ $productListFpUrl('status', 'published') }}"
                               class="badge text-decoration-none {{ $activeStatus === 'published' ? 'bg-success' : 'bg-success-lt text-success' }}">
                                {{ number_format($publishedCount ?? 0) }} pub
                            </a>
                            <a href="{{ $productListFpUrl('status', 'draft') }}"
                               class="badge text-decoration-none {{ $activeStatus === 'draft' ? 'bg-warning text-dark' : 'bg-warning-lt text-warning' }}">
                                {{ number_format($draftCount ?? 0) }} draft
                            </a>
                        </div>
                        @endif
                    </div>
                </div>

                {{-- Row 2: filter pills (full width below search, left-aligned) --}}
                <div class="row g-2 w-100 mx-0 mt-2 product-list-filter-row">
                    <div class="col-12 text-start">
                    <div class="d-flex flex-wrap gap-2 align-items-center justify-content-start">
                        @foreach($productFilterGroups as $paramKey => $cfg)
                            @php
                                $activeVal = $cfg['active'];
                                $activeCfg = $activeVal !== '' && $activeVal !== null && isset($cfg['options'][$activeVal])
                                    ? $cfg['options'][$activeVal]
                                    : $cfg['default'];
                            @endphp
                            <div class="position-relative d-inline-block">
                                <div id="fpill-{{ $paramKey }}"
                                     class="product-list-fpill"
                                     style="display:inline-flex;align-items:stretch;border-radius:20px;overflow:hidden;font-size:.73rem;font-weight:600;background:{{ $activeCfg['bg'] }};color:{{ $activeCfg['color'] }};white-space:nowrap;border:1.5px solid {{ ($activeVal !== '' && $activeVal !== null) ? 'transparent' : '#e2e8f0' }};cursor:default;user-select:none">
                                    <span class="d-inline-flex align-items-center gap-1" style="padding:4px 7px 4px 10px;pointer-events:none">
                                        <span style="width:6px;height:6px;border-radius:50%;background:{{ $activeCfg['dot'] }};flex-shrink:0"></span>
                                        <span id="fplabel-{{ $paramKey }}">{{ $activeCfg['label'] }}</span>
                                    </span>
                                    <span style="width:1px;background:rgba(0,0,0,.1);align-self:stretch;flex-shrink:0"></span>
                                    <button type="button" class="fp-toggle border-0 bg-transparent"
                                            data-key="{{ $paramKey }}"
                                            style="display:flex;align-items:center;padding:4px 9px;color:inherit;cursor:pointer;font-size:.68rem;line-height:1">
                                        <i class="bi bi-chevron-down" id="fpicon-{{ $paramKey }}"></i>
                                    </button>
                                </div>
                                <div class="fp-dropdown" id="fpdrop-{{ $paramKey }}"
                                     style="display:none;position:absolute;top:calc(100% + 5px);left:0;background:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.12);min-width:160px;z-index:500;padding:4px">
                                    <button type="button" class="fp-opt w-100 border-0 text-start"
                                            data-url="{{ $productListFpUrl($paramKey, '') }}"
                                            style="display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:7px;cursor:pointer;font-size:.76rem;font-weight:{{ ($activeVal === '' || $activeVal === null) ? '600' : '400' }};color:{{ ($activeVal === '' || $activeVal === null) ? $cfg['default']['color'] : '#374151' }};background:{{ ($activeVal === '' || $activeVal === null) ? $cfg['default']['bg'] : 'transparent' }}">
                                        <span style="width:8px;height:8px;border-radius:50%;background:{{ $cfg['default']['dot'] }};flex-shrink:0"></span>
                                        {{ $cfg['default']['label'] }}
                                        @if($activeVal === '' || $activeVal === null)<i class="bi bi-check2 ms-auto" style="font-size:.7rem"></i>@endif
                                    </button>
                                    @foreach($cfg['options'] as $optVal => $opt)
                                    <button type="button" class="fp-opt w-100 border-0 text-start"
                                            data-url="{{ $productListFpUrl($paramKey, $optVal) }}"
                                            style="display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:7px;cursor:pointer;font-size:.76rem;font-weight:{{ (string)$activeVal === (string)$optVal ? '600' : '400' }};color:{{ (string)$activeVal === (string)$optVal ? $opt['color'] : '#374151' }};background:{{ (string)$activeVal === (string)$optVal ? $opt['bg'] : 'transparent' }}">
                                        <span style="width:8px;height:8px;border-radius:50%;background:{{ $opt['dot'] }};flex-shrink:0"></span>
                                        {{ $opt['label'] }}
                                        @if((string)$activeVal === (string)$optVal)<i class="bi bi-check2 ms-auto" style="font-size:.7rem"></i>@endif
                                    </button>
                                    @endforeach
                                </div>
                            </div>
                        @endforeach
                        @if($hasAnyProductFilter)
                            <a href="{{ route('store.product.list') }}" class="btn btn-sm btn-outline-danger rounded-pill" style="font-size:.72rem">
                                <i class="bi bi-x-lg me-1"></i>Clear filters
                            </a>
                        @endif
                    </div>
                    </div>
                </div>
            </div>

            <div class="card-table table-responsive">
                <table class="table table-vcenter table-hover mb-0 product-list-table">
                    <thead class="table-light">
                        <tr>
                            <th class="text-start d-none d-md-table-cell w-1">#</th>
                            <th class="text-start">Product</th>
                            <th class="text-start">Price</th>
                            <th class="text-start">Stock</th>
                            <th class="text-start w-1">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($products as $product)
                        <tr>
                            <td class="text-start text-muted align-top d-none d-md-table-cell">{{ $products->firstItem() + $loop->index }}</td>
                            <td class="text-start align-top">
                                <div class="d-flex align-items-start gap-3 product-list-product-row">
                                    @if($product->thumbnail)
                                        <img class="product-list-thumb-img popup-img flex-shrink-0"
                                             src="{{ asset('storage/' . $product->thumbnail) }}"
                                             alt=""
                                             title="Click to view"
                                             original-src="{{ asset('storage/' . $product->image) }}">
                                    @else
                                        <span class="product-list-thumb-placeholder flex-shrink-0 d-inline-flex align-items-center justify-content-center rounded bg-secondary-lt text-secondary">
                                            <i class="bi bi-box-seam"></i>
                                        </span>
                                    @endif
                                    <div class="min-w-0">
                                        <div class="fw-semibold text-truncate" title="{{ $product->name }}">{{ $product->name }}</div>
                                        <div class="text-muted small font-monospace">{{ $product->sku }}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="text-start align-top product-list-price-cell">
                                <div class="fw-semibold text-nowrap text-start">{{ $product->formatted_price }}</div>
                                @if($product->category || $product->is_variant)
                                    <div class="d-flex flex-wrap gap-1 mt-1 justify-content-start align-items-start product-list-price-badges">
                                        @if($product->category)
                                            <span class="badge bg-azure-lt text-azure">{{ $product->category->name }}</span>
                                        @endif
                                        @if($product->is_variant)
                                            <span class="badge bg-purple-lt text-purple">Variants</span>
                                        @endif
                                    </div>
                                @endif
                            </td>
                            <td class="text-start align-top">
                                <span class="fw-medium">{{ $product->formatted_total_stock }}</span>
                                @if($product->expiry_date_value)
                                    <div class="text-muted small mt-1">Expires {{ format_date($product->expiry_date_value) }}</div>
                                @endif
                            </td>
                            <td class="text-start align-top">
                                <div class="btn-list flex-nowrap justify-content-start">
                                    <a href="{{ route('store.product.analysis', $product->id) }}"
                                       class="product-list-action-btn product-list-action-btn--analysis"
                                       data-bs-toggle="tooltip"
                                       title="Analysis">
                                        <i class="bi bi-graph-up-arrow"></i>
                                    </a>
                                    <a href="{{ route('store.product.edit', $product->id) }}"
                                       class="product-list-action-btn product-list-action-btn--primary"
                                       data-bs-toggle="tooltip"
                                       title="Edit">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    <a class="open-popup product-list-action-btn product-list-action-btn--neutral"
                                       href="{{ route('store.popup.itemDetail', ['id' => $product->id, 'controller' => 'StoreProductController', 'method' => 'detailPopup']) }}"
                                       popup-title="{{ $product->name }} — details"
                                       data-bs-toggle="tooltip"
                                       title="View">
                                        <i class="bi bi-eye"></i>
                                    </a>
                                    @if($canDeleteProduct)
                                        <form action="{{ route('store.product.destroy', $product->id) }}"
                                              method="POST"
                                              class="d-inline"
                                              onsubmit="return confirm('Remove this product from your catalog? Past sales are kept.');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="product-list-action-btn product-list-action-btn--danger" data-bs-toggle="tooltip" title="Delete">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                    @endif
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="{{ $colCount }}" class="text-center text-muted py-5">
                                <div class="mb-2"><i class="bi bi-inbox fs-1 d-block opacity-50"></i></div>
                                No products yet. Use <strong>Add Product</strong> to create your first item.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if($products->hasPages())
            <div class="card-footer">
                {{ $products->links() }}
            </div>
            @endif
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
// Note: `csrfToken` is already defined globally in `store/layout/header.blade.php`.
// Reuse it here to avoid "Identifier 'csrfToken' has already been declared".
const productCsrfToken = window.csrfToken || document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';

let originalTableHtml = '';
let searchTimeout = null;

$(document).ready(function () {
    originalTableHtml = $('table tbody').html();
});

function escapeHtml(s) {
    if (s == null) return '';
    return String(s)
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;');
}

function buildSearchResultRow(product) {
    const thumb = product.thumbnail
        ? `<img class="product-list-thumb-img popup-img flex-shrink-0" src="${escapeHtml(product.thumbnail)}" alt="" original-src="${escapeHtml(product.thumbnail)}">`
        : `<span class="product-list-thumb-placeholder flex-shrink-0 d-inline-flex align-items-center justify-content-center rounded bg-secondary-lt text-secondary"><i class="bi bi-box-seam"></i></span>`;

    let badges = '';
    if (product.category_name) {
        badges += `<span class="badge bg-azure-lt text-azure">${escapeHtml(product.category_name)}</span>`;
    }
    if (product.is_variant) {
        badges += `<span class="badge bg-purple-lt text-purple">Variants</span>`;
    }
    const badgesRow = badges
        ? `<div class="d-flex flex-wrap gap-1 mt-1 justify-content-start align-items-start product-list-price-badges">${badges}</div>`
        : '';
    const expiryLine = product.expiry_formatted
        ? `<div class="text-muted small mt-1">Expires ${escapeHtml(product.expiry_formatted)}</div>`
        : '';

    let deleteBlock = '';
    if (product.can_delete && product.delete_url) {
        deleteBlock = `
            <form action="${escapeHtml(product.delete_url)}" method="POST" class="d-inline" onsubmit="return confirm('Remove this product from your catalog? Past sales are kept.');">
                <input type="hidden" name="_token" value="${escapeHtml(productCsrfToken)}">
                <input type="hidden" name="_method" value="DELETE">
                <button type="submit" class="product-list-action-btn product-list-action-btn--danger" data-bs-toggle="tooltip" title="Delete">
                    <i class="bi bi-trash"></i>
                </button>
            </form>`;
    }

    return `
    <tr>
        <td class="text-start text-muted align-top d-none d-md-table-cell">1</td>
        <td class="text-start align-top">
            <div class="d-flex align-items-start gap-3 product-list-product-row">
                ${thumb}
                <div class="min-w-0">
                    <div class="fw-semibold text-truncate" title="${escapeHtml(product.name)}">${escapeHtml(product.name)}</div>
                    <div class="text-muted small font-monospace">${escapeHtml(product.sku)}</div>
                </div>
            </div>
        </td>
        <td class="text-start align-top product-list-price-cell">
            <div class="fw-semibold text-nowrap text-start">${escapeHtml(product.price)}</div>
            ${badgesRow}
        </td>
        <td class="text-start align-top">
            <span class="fw-medium">${escapeHtml(product.total_stock)}</span>
            ${expiryLine}
        </td>
        <td class="text-start align-top">
            <div class="btn-list flex-nowrap justify-content-start">
                <a href="${escapeHtml(product.analysis_url)}" class="product-list-action-btn product-list-action-btn--analysis" data-bs-toggle="tooltip" title="Analysis">
                    <i class="bi bi-graph-up-arrow"></i>
                </a>
                <a href="${escapeHtml(product.edit_url)}" class="product-list-action-btn product-list-action-btn--primary" data-bs-toggle="tooltip" title="Edit">
                    <i class="bi bi-pencil"></i>
                </a>
                <a class="open-popup product-list-action-btn product-list-action-btn--neutral"
                   href="${escapeHtml(product.detail_url)}"
                   popup-title="${escapeHtml(product.name)} — details"
                   data-bs-toggle="tooltip" title="View">
                    <i class="bi bi-eye"></i>
                </a>
                ${deleteBlock}
            </div>
        </td>
    </tr>`;
}

function hideSearchDropdown() {
    $('#search-dropdown').removeClass('show').hide().empty();
}

function showSearchDropdown() {
    $('#search-dropdown').addClass('show').show();
}

$(document).on('input', '#search-input', function () {
    const query = $(this).val().trim();

    if (query.length === 0) {
        hideSearchDropdown();
        $('table tbody').html(originalTableHtml);
        if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
            document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => new bootstrap.Tooltip(el));
        }
        return;
    }

    clearTimeout(searchTimeout);

    if (query.length < 2) {
        hideSearchDropdown();
        return;
    }

    searchTimeout = setTimeout(() => {
        $.ajax({
            url: "{{ route('store.products.search') }}",
            method: 'GET',
            data: { q: query },
        }).done(function (data) {
            const $dropdown = $('#search-dropdown');
            $dropdown.empty();

            if (!data.length) {
                hideSearchDropdown();
                return;
            }

            data.forEach(product => {
                const $btn = $(`
                    <button type="button" class="dropdown-item product-item text-start border-0 bg-transparent w-100 py-2">
                        <div class="d-flex align-items-center gap-2">
                            ${product.thumbnail
                                ? `<img src="${escapeHtml(product.thumbnail)}" class="rounded product-search-thumb" width="40" height="40" alt="">`
                                : `<span class="product-search-thumb-placeholder rounded d-inline-flex align-items-center justify-content-center bg-secondary-lt text-secondary" style="width:40px;height:40px;"><i class="bi bi-box-seam"></i></span>`}
                            <div class="min-w-0">
                                <div class="fw-semibold text-truncate"></div>
                                <small class="text-muted"></small>
                            </div>
                        </div>
                    </button>
                `);
                $btn.data('product', product);
                $btn.find('.fw-semibold').text(product.name);
                $btn.find('small').text(`${product.price} · Stock: ${product.total_stock} · ${product.sku}`);
                $dropdown.append($btn);
            });

            showSearchDropdown();
        }).fail(function () {
            hideSearchDropdown();
            if (typeof toastr !== 'undefined') {
                toastr.error('Search failed. Please refresh and try again.');
            }
        });
    }, 300);
});

$(document).on('click', '.product-item', function (e) {
    e.preventDefault();

    const product = $(this).data('product');
    if (!product) {
        return;
    }

    $('#search-dropdown').hide().empty();
    $('#search-input').val(product.name);

    $('table tbody').html(buildSearchResultRow(product));
    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
        document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => new bootstrap.Tooltip(el));
    }
});

// Split-pill filters (same behavior as store sales list)
document.addEventListener('click', function (e) {
    var card = e.target.closest('.product-list-card');
    if (!card) return;

    var fpToggle = e.target.closest('.fp-toggle');
    if (fpToggle && card.contains(fpToggle)) {
        var key = fpToggle.getAttribute('data-key');
        var drop = document.getElementById('fpdrop-' + key);
        var icon = document.getElementById('fpicon-' + key);
        if (!drop || !icon) return;
        var willOpen = (drop.style.display === 'none' || drop.style.display === '');
        card.querySelectorAll('.fp-dropdown').forEach(function (d) { d.style.display = 'none'; });
        card.querySelectorAll('[id^=\"fpicon-\"]').forEach(function (i) {
            i.className = 'bi bi-chevron-down';
            i.style.color = '';
        });
        if (willOpen) {
            drop.style.display = 'block';
            icon.className = 'bi bi-x-lg';
            icon.style.color = '#dc2626';
        }
        return;
    }

    var fpOpt = e.target.closest('.fp-opt');
    if (fpOpt && card.contains(fpOpt)) {
        window.location.href = fpOpt.getAttribute('data-url');
        return;
    }

    if (!e.target.closest('.fp-dropdown') && !e.target.closest('.fp-toggle')) {
        card.querySelectorAll('.fp-dropdown').forEach(function (d) { d.style.display = 'none'; });
        card.querySelectorAll('[id^=\"fpicon-\"]').forEach(function (i) {
            i.className = 'bi bi-chevron-down';
            i.style.color = '';
        });
    }
});
</script>
@endsection