@extends('layouts.app')

@section('title', 'POS Items & Categories')

@push('styles')
<style>
    .cat-list .list-group-item { border-left: 0; border-right: 0; padding: .65rem 1rem; }
    .cat-link { display: flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; flex: 1; min-width: 0; }
    .cat-row.is-selected { background: #eef2ff; box-shadow: inset 3px 0 0 #6366f1; }
    .cat-row .cat-actions { opacity: 0; transition: opacity .15s ease; }
    .cat-row:hover .cat-actions, .cat-row:focus-within .cat-actions { opacity: 1; }
    .cat-count { font-size: .72rem; font-variant-numeric: tabular-nums; color: #64748b; background: #f1f5f9; border-radius: 999px; padding: 1px 8px; }
    .item-unavailable td:not(:last-child) { opacity: .55; }
</style>
@endpush

@php
    $reopen = old('_form');
@endphp

@section('content')
<div class="page-header">
    <div>
        <div class="eyebrow">POS &amp; Revenue Centers</div>
        <h1>POS Items &amp; Categories</h1>
        <p>The menu and service catalog sold at the POS terminal. Prices are VAT-inclusive. Link an item to a stock item so each sale can deduct inventory.</p>
    </div>
    @if ($can['create'])
        <div class="d-flex gap-2">
            <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#categoryModal" data-mode="create"><i class="bi bi-folder-plus me-1"></i> New Category</button>
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#itemModal" data-mode="create" @disabled($categories->isEmpty())><i class="bi bi-plus-lg me-1"></i> Add Item</button>
        </div>
    @endif
</div>

<div class="row g-3 mb-4">
    @foreach ([
        ['Catalog items', $stats['items'], 'bi-menu-button-wide', '#eef2ff', '#4f46e5'],
        ['Available to sell', $stats['available'], 'bi-check2-circle', '#dcfce7', '#15803d'],
        ['Hidden from terminal', $stats['unavailable'], 'bi-eye-slash', '#f1f5f9', '#475569'],
        ['Linked to stock', $stats['stockLinked'], 'bi-box-seam', '#fef3c7', '#b45309'],
    ] as [$label, $value, $icon, $bg, $fg])
        <div class="col-sm-6 col-xl-3">
            <div class="stat-card">
                <span class="stat-icon" style="background:{{ $bg }};color:{{ $fg }};"><i class="bi {{ $icon }}"></i></span>
                <span><span class="stat-value d-block">{{ $value }}</span><span class="stat-label">{{ $label }}</span></span>
            </div>
        </div>
    @endforeach
</div>

<div class="row g-4">
    {{-- Categories --}}
    <div class="col-xl-3 col-lg-4">
        <section class="panel">
            <div class="panel-header">
                <div>
                    <h2>Categories</h2>
                    <p>Pick one to filter the catalog.</p>
                </div>
            </div>
            <ul class="list-group list-group-flush cat-list">
                <li class="list-group-item cat-row d-flex align-items-center {{ $selected ? '' : 'is-selected' }}">
                    <a href="{{ route('hotel.pos-items.index') }}" class="cat-link" @if (!$selected) aria-current="page" @endif>
                        <i class="bi bi-grid text-primary"></i><span class="fw-semibold flex-grow-1">All items</span>
                        <span class="cat-count">{{ $stats['items'] }}</span>
                    </a>
                </li>
                @forelse ($categories as $cat)
                    @php $isSel = $selected?->category_id === $cat->category_id; @endphp
                    <li class="list-group-item cat-row d-flex align-items-center gap-1 {{ $isSel ? 'is-selected' : '' }}">
                        <a href="{{ route('hotel.pos-items.index', ['category' => $cat->category_id]) }}" class="cat-link" @if ($isSel) aria-current="page" @endif>
                            <i class="bi bi-folder2 text-muted"></i>
                            <span class="flex-grow-1 text-truncate">
                                <span class="d-block text-truncate fw-medium">{{ $cat->category_name }}</span>
                                <span class="d-block small text-muted text-truncate">{{ $cat->outlet_type }}@if ($showBranch) · {{ $cat->branch->branch_name ?? 'All branches' }}@endif</span>
                            </span>
                            <span class="cat-count">{{ $cat->items_count }}</span>
                        </a>
                        @if ($can['edit'] || $can['delete'])
                            <div class="dropdown cat-actions">
                                <button type="button" class="btn btn-sm btn-link text-muted px-1" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Actions for {{ $cat->category_name }}"><i class="bi bi-three-dots-vertical"></i></button>
                                <ul class="dropdown-menu dropdown-menu-end shadow-sm">
                                    @if ($can['edit'])
                                        <li><button type="button" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#categoryModal" data-mode="edit"
                                                    data-action="{{ route('hotel.pos-items.categories.update', $cat) }}" data-name="{{ $cat->category_name }}"
                                                    data-type="{{ $cat->outlet_type }}" data-branch="{{ $cat->branch_id }}"><i class="bi bi-pencil me-2"></i>Edit</button></li>
                                    @endif
                                    @if ($can['delete'])
                                        <li>
                                            <form method="POST" action="{{ route('hotel.pos-items.categories.destroy', $cat) }}" onsubmit="return confirm('Delete category {{ addslashes($cat->category_name) }}?');">
                                                @csrf @method('DELETE')
                                                <button type="submit" class="dropdown-item text-danger" @disabled($cat->items_count > 0)>
                                                    <i class="bi bi-trash3 me-2"></i>Delete{{ $cat->items_count ? ' (has items)' : '' }}
                                                </button>
                                            </form>
                                        </li>
                                    @endif
                                </ul>
                            </div>
                        @endif
                    </li>
                @empty
                    <li class="list-group-item"><div class="empty-state py-3"><i class="bi bi-folder2-open"></i>No categories yet.</div></li>
                @endforelse
            </ul>
        </section>
    </div>

    {{-- Items --}}
    <div class="col-xl-9 col-lg-8">
        <section class="panel">
            <div class="panel-header">
                <div>
                    <h2>{{ $selected ? $selected->category_name : 'All items' }}</h2>
                    <p>{{ $items->total() }} {{ Str::plural('item', $items->total()) }}{{ $selected ? ' in this category' : '' }}{{ $search !== '' || $status ? ' matching your filter' : '' }}.</p>
                </div>
                {{-- Server-side: searches every page of the catalog, not just the one on screen. --}}
                <form method="GET" action="{{ route('hotel.pos-items.index') }}" class="d-flex gap-2 align-items-center" role="search" id="itemFilter">
                    @if ($selected)<input type="hidden" name="category" value="{{ $selected->category_id }}">@endif
                    <div class="input-group input-group-sm" style="width: 230px;">
                        <span class="input-group-text bg-white"><i class="bi bi-search"></i></span>
                        <label for="itemSearch" class="visually-hidden">Search items</label>
                        <input type="search" id="itemSearch" name="q" class="form-control" placeholder="Search items…" autocomplete="off" value="{{ $search }}">
                    </div>
                    <label for="statusFilter" class="visually-hidden">Filter by availability</label>
                    <select id="statusFilter" name="status" class="form-select form-select-sm" style="width: 150px;" onchange="this.form.submit()">
                        <option value="">All statuses</option>
                        <option value="available" @selected($status === 'available')>Available</option>
                        <option value="unavailable" @selected($status === 'unavailable')>Hidden</option>
                    </select>
                    @if ($search !== '' || $status)
                        <a href="{{ route('hotel.pos-items.index', array_filter(['category' => $selected?->category_id])) }}" class="btn btn-sm btn-light border text-nowrap">Clear</a>
                    @endif
                </form>
            </div>
            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead>
                        <tr>
                            <th>Item</th>
                            @unless ($selected)<th>Category</th>@endunless
                            <th>Stock deduction</th>
                            @if ($showBranch)<th>Branch</th>@endif
                            <th class="text-end">Price</th>
                            <th>Status</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="itemRows">
                        @forelse ($items as $item)
                            @php
                                $available = $item->status === 'available';
                                $sold = $soldItemIds->has($item->item_id);
                            @endphp
                            <tr class="{{ $available ? '' : 'item-unavailable' }}" data-name="{{ mb_strtolower($item->item_name . ' ' . ($item->category->category_name ?? '')) }}" data-status="{{ $available ? 'available' : 'unavailable' }}">
                                <td class="fw-semibold">{{ $item->item_name }}</td>
                                @unless ($selected)<td><span class="status-pill pill-neutral">{{ $item->category->category_name ?? '—' }}</span></td>@endunless
                                <td class="small">
                                    @if ($item->inventoryItem)
                                        <i class="bi bi-box-seam text-warning me-1"></i>{{ rtrim(rtrim(number_format((float) $item->consumption_qty, 2), '0'), '.') }} {{ $item->inventoryItem->unit_of_measure }} of {{ $item->inventoryItem->item_name }}
                                    @elseif ($item->linked_inventory_item_id)
                                        <span class="text-danger"><i class="bi bi-exclamation-triangle me-1"></i>Linked stock item missing</span>
                                    @else
                                        <span class="text-muted">Service — no stock</span>
                                    @endif
                                </td>
                                @if ($showBranch)<td class="small text-muted text-nowrap">{{ $item->branch->branch_name ?? 'All branches' }}</td>@endif
                                <td class="text-end money fw-semibold">₦{{ number_format((float) $item->price, 2) }}</td>
                                <td><span class="status-pill {{ $available ? 'pill-available' : 'pill-neutral' }}">{{ $available ? 'Available' : 'Hidden' }}</span></td>
                                <td class="text-end text-nowrap">
                                    @if ($can['edit'])
                                        <button type="button" class="btn btn-sm btn-light border" title="Edit item" aria-label="Edit {{ $item->item_name }}"
                                                data-bs-toggle="modal" data-bs-target="#itemModal" data-mode="edit"
                                                data-action="{{ route('hotel.pos-items.update', $item) }}" data-name="{{ $item->item_name }}"
                                                data-category="{{ $item->category_id }}" data-price="{{ $item->price }}" data-branch="{{ $item->branch_id }}"
                                                data-linked="{{ $item->linked_inventory_item_id }}" data-qty="{{ (float) $item->consumption_qty }}">
                                            <i class="bi bi-pencil"></i>
                                        </button>
                                        <form method="POST" action="{{ route('hotel.pos-items.toggle', $item) }}" class="d-inline">
                                            @csrf
                                            <button type="submit" class="btn btn-sm btn-light border" title="{{ $available ? 'Hide from POS terminal' : 'Make available' }}" aria-label="{{ $available ? 'Hide' : 'Show' }} {{ $item->item_name }}">
                                                <i class="bi {{ $available ? 'bi-eye-slash' : 'bi-eye' }}"></i>
                                            </button>
                                        </form>
                                    @endif
                                    @if ($can['delete'])
                                        <form method="POST" action="{{ route('hotel.pos-items.destroy', $item) }}" class="d-inline" onsubmit="return confirm('Permanently delete {{ addslashes($item->item_name) }}?');">
                                            @csrf @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-light border text-danger" @disabled($sold)
                                                    title="{{ $sold ? 'Has sales history — hide it instead' : 'Delete item' }}" aria-label="Delete {{ $item->item_name }}"><i class="bi bi-trash3"></i></button>
                                        </form>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="8">
                                @if ($search !== '' || $status)
                                    <div class="empty-state py-4"><i class="bi bi-search"></i>No items match your search.</div>
                                @else
                                    <div class="empty-state"><i class="bi bi-cup-hot"></i>{{ $categories->isEmpty() ? 'Create a category first, then add the items you sell.' : ($items->total() ? 'No items on this page.' : 'No items here yet.') }}</div>
                                @endif
                            </td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="pb-3">@include('partials.list-pager', ['page' => $items, 'noun' => 'item'])</div>
        </section>
    </div>
</div>

{{-- ============ Modals ============ --}}

<div class="modal fade" id="categoryModal" tabindex="-1" aria-labelledby="categoryModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <form method="POST" action="{{ $reopen === 'category-edit' ? old('_action') : route('hotel.pos-items.categories.store') }}" class="modal-content border-0 shadow" id="categoryForm">
            @csrf
            <input type="hidden" name="_method" id="categoryMethod" value="{{ $reopen === 'category-edit' ? 'PUT' : 'POST' }}">
            <input type="hidden" name="_form" id="categoryFormKey" value="{{ $reopen === 'category-edit' ? 'category-edit' : 'category-create' }}">
            <input type="hidden" name="_action" id="categoryActionField" value="{{ old('_action') }}">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-semibold" id="categoryModalTitle">{{ $reopen === 'category-edit' ? 'Edit Category' : 'New Category' }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label for="c_name" class="form-label">Category name</label>
                    <input type="text" id="c_name" name="category_name" class="form-control" maxlength="100" placeholder="e.g. Cocktails, Spa Massages" value="{{ old('category_name') }}" required>
                </div>
                <div class="mb-3">
                    <label for="c_type" class="form-label">Outlet type</label>
                    <select id="c_type" name="outlet_type" class="form-select" required>
                        <option value="" disabled @selected(!old('outlet_type'))>Choose a type…</option>
                        @foreach ($outletTypes as $ot)
                            <option value="{{ $ot }}" @selected(old('outlet_type') === $ot)>{{ $ot }}</option>
                        @endforeach
                    </select>
                    <div class="form-text">Outlets of this type show this category at the POS terminal (e.g. a Bar &amp; Lounge outlet shows Bar &amp; Lounge categories). Manage this list on <a href="{{ route('hotel.pos-outlets.index') }}">Sales Outlets</a>.</div>
                </div>
                @if ($branches->isNotEmpty())
                    <div>
                        <label for="c_branch" class="form-label">Available in</label>
                        <select id="c_branch" name="branch_id" class="form-select">
                            <option value="">All branches (company-wide)</option>
                            @foreach ($branches as $b)
                                <option value="{{ $b->branch_id }}" @selected((string) old('branch_id') === (string) $b->branch_id)>{{ $b->branch_name }} only</option>
                            @endforeach
                        </select>
                    </div>
                @endif
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary px-4">Save Category</button>
            </div>
        </form>
    </div>
</div>

<div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <form method="POST" action="{{ $reopen === 'item-edit' ? old('_action') : route('hotel.pos-items.store') }}" class="modal-content border-0 shadow" id="itemForm">
            @csrf
            <input type="hidden" name="_method" id="itemMethod" value="{{ $reopen === 'item-edit' ? 'PUT' : 'POST' }}">
            <input type="hidden" name="_form" id="itemFormKey" value="{{ $reopen === 'item-edit' ? 'item-edit' : 'item-create' }}">
            <input type="hidden" name="_action" id="itemActionField" value="{{ old('_action') }}">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-semibold" id="itemModalTitle">{{ $reopen === 'item-edit' ? 'Edit Item' : 'Add Item' }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row g-3">
                    <div class="col-md-8">
                        <label for="i_name" class="form-label">Item or service name</label>
                        <input type="text" id="i_name" name="item_name" class="form-control" maxlength="150" placeholder="e.g. Chapman, Full Body Massage" value="{{ old('item_name') }}" required>
                    </div>
                    <div class="col-md-4">
                        <label for="i_price" class="form-label">Price (₦, VAT-inclusive)</label>
                        <input type="number" id="i_price" name="price" class="form-control" step="0.01" min="0" value="{{ old('price', '0.00') }}" required>
                    </div>
                    @if ($branches->isNotEmpty())
                        <div class="col-md-6">
                            <label for="i_branch" class="form-label">Available in</label>
                            <select id="i_branch" name="branch_id" class="form-select">
                                <option value="">All branches (company-wide)</option>
                                @foreach ($branches as $b)
                                    <option value="{{ $b->branch_id }}" @selected((string) old('branch_id') === (string) $b->branch_id)>{{ $b->branch_name }} only</option>
                                @endforeach
                            </select>
                        </div>
                    @endif
                    <div class="{{ $branches->isNotEmpty() ? 'col-md-6' : 'col-12' }}">
                        <label for="i_category" class="form-label">Category</label>
                        <select id="i_category" name="category_id" class="form-select" required>
                            <option value="" disabled @selected(!old('category_id', $selected?->category_id))>Choose a category…</option>
                            @foreach ($categories as $cat)
                                <option value="{{ $cat->category_id }}" data-branch="{{ $cat->branch_id }}" @selected((string) old('category_id', $selected?->category_id) === (string) $cat->category_id)>{{ $cat->category_name }} ({{ $cat->outlet_type }})</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <hr class="my-4">
                <h6 class="text-uppercase small fw-semibold text-muted mb-1">Stock deduction <span class="fw-normal text-lowercase">(optional)</span></h6>
                <p class="small text-muted mb-3">For items made from stock (drinks, packaged goods), choose the stock item each sale uses up. Leave it on "service" for things like massages or laundry.</p>
                <div class="row g-3">
                    <div class="col-md-8">
                        <label for="i_linked" class="form-label">Deducts from stock item</label>
                        <select id="i_linked" name="linked_inventory_item_id" class="form-select">
                            <option value="">Service — no stock consumed</option>
                            @foreach ($inventoryItems as $inv)
                                <option value="{{ $inv->item_id }}" data-unit="{{ $inv->unit_of_measure }}" @selected((string) old('linked_inventory_item_id') === (string) $inv->item_id)>
                                    {{ $inv->item_name }} — {{ rtrim(rtrim(number_format((float) $inv->quantity_in_stock, 2), '0'), '.') }} {{ $inv->unit_of_measure }} in stock
                                </option>
                            @endforeach
                        </select>
                        @if ($inventoryItems->isEmpty())
                            <div class="form-text">No stock items exist yet — add them in Inventory.</div>
                        @endif
                    </div>
                    <div class="col-md-4">
                        <label for="i_qty" class="form-label">Quantity per sale <span class="text-muted fw-normal" id="i_unit"></span></label>
                        <input type="number" id="i_qty" name="consumption_qty" class="form-control" step="0.01" min="0.01" value="{{ old('consumption_qty', '1') }}">
                    </div>
                </div>
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary px-4">Save Item</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
(() => {
    const $ = (id) => document.getElementById(id);

    // ---- Search: runs on the server across every page; searches a moment after typing stops (or on Enter) ----
    const search = $('itemSearch');
    let typing;
    search.addEventListener('input', () => {
        clearTimeout(typing);
        typing = setTimeout(() => $('itemFilter').submit(), 600);
    });
    // Keep the cursor in the box after the page reloads with results.
    if (search.value) { search.focus(); search.setSelectionRange(search.value.length, search.value.length); }

    // ---- Only offer categories usable in the item's branch ----
    const filterCategories = () => {
        const branch = $('i_branch')?.value || '';
        const sel = $('i_category');
        [...sel.options].forEach(o => {
            if (!o.value) return;
            const ok = !o.dataset.branch || (branch && o.dataset.branch === branch);
            o.hidden = !ok; o.disabled = !ok;
        });
        if (sel.selectedOptions[0]?.disabled) sel.value = '';
    };
    $('i_branch')?.addEventListener('change', filterCategories);

    // ---- Stock link: quantity only matters when an item is linked ----
    const syncStock = () => {
        const opt = $('i_linked').selectedOptions[0];
        $('i_qty').disabled = !opt.value;
        $('i_unit').textContent = opt.value && opt.dataset.unit ? `(${opt.dataset.unit})` : '';
    };
    $('i_linked').addEventListener('change', syncStock);

    // ---- Modals double as create + edit ----
    const setForm = (prefix, edit, action, storeUrl, title) => {
        $(`${prefix}Form`).action = edit ? action : storeUrl;
        $(`${prefix}Method`).value = edit ? 'PUT' : 'POST';
        $(`${prefix}FormKey`).value = `${prefix}-${edit ? 'edit' : 'create'}`;
        $(`${prefix}ActionField`).value = edit ? action : '';
        $(`${prefix}ModalTitle`).textContent = title;
    };

    $('categoryModal').addEventListener('show.bs.modal', (e) => {
        const b = e.relatedTarget;
        if (!b || !b.dataset.mode) return;
        const edit = b.dataset.mode === 'edit';
        setForm('category', edit, b.dataset.action, @json(route('hotel.pos-items.categories.store')), edit ? 'Edit Category' : 'New Category');
        $('c_name').value = edit ? b.dataset.name : '';
        $('c_type').value = edit ? b.dataset.type : '';
        if ($('c_branch')) $('c_branch').value = edit ? (b.dataset.branch || '') : @json((string) ($activeBranchId ?? ''));
    });

    $('itemModal').addEventListener('show.bs.modal', (e) => {
        const b = e.relatedTarget;
        if (!b || !b.dataset.mode) { filterCategories(); syncStock(); return; }
        const edit = b.dataset.mode === 'edit';
        setForm('item', edit, b.dataset.action, @json(route('hotel.pos-items.store')), edit ? 'Edit Item' : 'Add Item');
        $('i_name').value = edit ? b.dataset.name : '';
        $('i_price').value = edit ? b.dataset.price : '0.00';
        if ($('i_branch')) $('i_branch').value = edit ? (b.dataset.branch || '') : @json((string) ($activeBranchId ?? ''));
        filterCategories();
        $('i_category').value = edit ? b.dataset.category : @json((string) ($selected?->category_id ?? ''));
        if ($('i_category').selectedOptions[0]?.disabled) $('i_category').value = '';
        $('i_linked').value = edit ? (b.dataset.linked || '') : '';
        $('i_qty').value = edit ? b.dataset.qty : '1';
        syncStock();
    });

    // After a validation error, re-open the form the user was working in.
    const target = { 'category-create': 'categoryModal', 'category-edit': 'categoryModal', 'item-create': 'itemModal', 'item-edit': 'itemModal' }[@json($reopen)];
    if (target) bootstrap.Modal.getOrCreateInstance($(target)).show();
})();
</script>
@endpush