@extends('layouts.app')
@section('title', 'Products')

@section('content')
<div class="space-y-6" x-data="{
        n: 0,
        count() { this.n = document.querySelectorAll('.product-check:checked').length },
        toggleAll(e) { document.querySelectorAll('.product-check').forEach(c => c.checked = e.target.checked); this.count() },
        clear() { document.querySelectorAll('.product-check, .product-check-all').forEach(c => c.checked = false); this.n = 0 },
        confirmDelete(e) { if (! confirm('Delete ' + this.n + ' selected product(s)? They will be removed from the menu and stock. Past sales history is kept.')) e.preventDefault() }
    }">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
            <h1 class="text-xl font-bold">Products</h1>
            <p class="text-sm text-ink-muted">Menu items and stock-tracked ingredients across all departments.</p>
        </div>
        @can('products.manage')
        <div class="flex gap-2">
            <a href="{{ route('inventory.categories.index') }}" class="btn-secondary btn-sm"><i data-lucide="tags" class="w-3.5 h-3.5"></i> Categories</a>
            <a href="{{ route('inventory.products.create') }}" class="btn-primary btn-sm"><i data-lucide="plus" class="w-3.5 h-3.5"></i> Add product</a>
        </div>
        @endcan
    </div>

    <form method="GET" class="card card-pad !p-3 flex flex-col sm:flex-row gap-2">
        <input type="text" name="search" value="{{ request('search') }}" placeholder="Search by name or SKU…" class="input flex-1">
        <select name="section_id" class="input sm:w-48"><option value="">All sections</option>@foreach ($sections as $section)<option value="{{ $section->id }}" @selected(request('section_id') == $section->id)>{{ $section->name }}</option>@endforeach</select>
        <select name="department_id" class="input sm:w-48" onchange="this.form.submit()">
            <option value="">All departments</option>
            @foreach ($departments as $dept)
                <option value="{{ $dept->id }}" @selected(request('department_id') == $dept->id)>{{ $dept->name }}</option>
            @endforeach
        </select>
        <select name="per_page" class="input sm:w-32" onchange="this.form.submit()" aria-label="Rows per page">
            @foreach ([20, 50, 100] as $size)
                <option value="{{ $size }}" @selected((int) request('per_page', 20) === $size)>{{ $size }} per page</option>
            @endforeach
        </select>
        <button class="btn-secondary btn-sm">Filter</button>
    </form>

    @can('products.manage')
    {{-- Bulk delete: the checkboxes sit in the table and point at this form with form="bulk-delete-form" (forms cannot be nested). --}}
    <form method="POST" action="{{ route('inventory.products.bulk-destroy') }}" id="bulk-delete-form">@csrf @method('DELETE')</form>
    <div x-show="n > 0" x-cloak class="card card-pad !p-3 flex items-center justify-between gap-3 border-danger/40">
        <p class="text-sm"><span class="font-bold" x-text="n"></span> selected</p>
        <div class="flex items-center gap-2">
            <button type="button" class="btn-ghost btn-sm" x-on:click="clear()">Clear</button>
            <button type="submit" form="bulk-delete-form" class="btn-primary btn-sm !bg-danger" x-on:click="confirmDelete($event)">
                <i data-lucide="trash-2" class="w-3.5 h-3.5"></i> Delete selected
            </button>
        </div>
    </div>
    @endcan

    <div class="card overflow-x-auto">
        <table class="data-table">
            <thead>
                <tr>
                    @can('products.manage')<th class="w-8"><input type="checkbox" class="product-check-all" x-on:change="toggleAll($event)" aria-label="Select all on this page"></th>@endcan
                    <th>Product</th><th>Section</th><th>Department</th><th class="text-right">Selling</th>@can('data.costs')<th class="text-right">Cost</th>
                    <th class="text-right">Margin</th>@endcan<th>Tax</th><th>Stock</th><th></th>
                </tr>
            </thead>
            <tbody>
                @forelse ($products as $product)
                    @php $stockQty = $product->stocks->sum('quantity_on_hand'); @endphp
                    <tr>
                        @can('products.manage')<td><input type="checkbox" name="ids[]" value="{{ $product->id }}" form="bulk-delete-form" class="product-check" x-on:change="count()" aria-label="Select {{ $product->name }}"></td>@endcan
                        <td>
                            <p class="font-medium">{{ $product->name }}</p>
                            <p class="text-xs text-ink-faint">{{ $product->sku }}</p>
                        </td>
                        <td>{{ $product->section->name ?? '—' }}</td>
                        <td>{{ $product->department->name ?? '—' }}</td>
                        <td class="text-right">{{ number_format($product->selling_price, 2) }}</td>
                        @can('data.costs')
                        <td class="text-right">{{ number_format($product->cost_price, 2) }}</td>
                        <td class="text-right font-semibold text-success">{{ $product->grossMarginPercent() }}%</td>
                        @endcan
                        <td><x-badge color="teal">{{ $product->tax_type->label() }}</x-badge></td>
                        <td>
                            @if ($product->track_stock)
                                <span class="{{ $stockQty <= $product->reorder_level ? 'text-danger font-semibold' : '' }}">{{ number_format($stockQty, 1) }}</span>
                            @else
                                <span class="text-ink-faint">N/A</span>
                            @endif
                        </td>
                        <td class="text-right whitespace-nowrap">
                            @can('products.manage')
                            <a href="{{ route('inventory.products.edit', $product) }}" class="btn-ghost btn-sm">Edit</a>
                            <form method="POST" action="{{ route('inventory.products.destroy', $product) }}" class="inline"
                                  onsubmit="return confirm('Delete {{ addslashes($product->name) }}? It will be removed from the menu and stock. Past sales history is kept.')">
                                @csrf @method('DELETE')
                                <button type="submit" class="btn-ghost btn-sm text-danger">Delete</button>
                            </form>
                            @endcan
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="10" class="text-center text-ink-muted py-8">No products found.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{ $products->links() }}
</div>
@endsection