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

@section('content')
<div class="space-y-6" x-data="{ ...modal() }">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
            <h1 class="text-xl font-bold">Stock on Hand</h1>
            <p class="text-sm text-ink-muted">Balances by store. Use adjustments for wastage, breakages, complimentary pours and opening stock.</p>
        </div>
        <div class="flex items-center gap-2">
            <a href="{{ route('inventory.stock.movements') }}" class="btn-secondary btn-sm"><i data-lucide="history" class="w-3.5 h-3.5"></i> Movements</a>
            @can('stock.adjust')
            <button class="btn-primary btn-sm" x-on:click="$dispatch('open-modal-adjust')"><i data-lucide="sliders-horizontal" class="w-3.5 h-3.5"></i> Adjust stock</button>
            @endcan
        </div>
    </div>

    <form method="GET" class="card card-pad !p-3 flex gap-2">
        <select name="section_id" class="input"><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="store_id" class="input"><option value="">All stores</option>@foreach ($stores as $store)<option value="{{ $store->id }}" @selected(request('store_id') == $store->id)>{{ $store->name }}</option>@endforeach</select>
        <button class="btn-secondary btn-sm">Filter</button>
    </form>

    <div class="card overflow-x-auto">
        <table class="data-table">
            <thead>
                <tr><th>Product</th><th>Section</th><th>Store</th><th>Expiry</th><th class="text-right">On hand</th><th class="text-right">Expected</th><th class="text-right">Variance</th><th>Status</th></tr>
            </thead>
            <tbody>
                @forelse ($stocks as $stock)
                    <tr>
                        <td class="font-medium">{{ $stock->product->name }}</td>
                        <td>{{ $stock->product->section->name ?? '—' }}</td>
                        <td>{{ $stock->store->name }}</td>
                        <td>{{ $stock->expiry_date?->format('d M Y') ?? '—' }}</td>
                        <td class="text-right">{{ number_format($stock->quantity_on_hand, 2) }}</td>
                        <td class="text-right">{{ number_format($stock->expected_quantity, 2) }}</td>
                        <td class="text-right {{ abs($stock->variance()) > 0.01 ? 'text-danger font-semibold' : '' }}">{{ number_format($stock->variance(), 2) }}</td>
                        <td>
                            @if ($stock->isLow())
                                <x-badge color="rose" icon="triangle-alert">Low stock</x-badge>
                            @else
                                <x-badge color="emerald">OK</x-badge>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="8" class="text-center text-ink-muted py-8">No stock records yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <x-modal id="adjust" title="Adjust stock">
        <form method="POST" action="{{ route('inventory.stock.adjust') }}" id="adjust-form" class="space-y-4"
              x-data="{
                  query: '',
                  productId: '',
                  open: false,
                  products: {{ Illuminate\Support\Js::from($products->map(fn ($p) => ['id' => $p->id, 'name' => $p->name, 'category' => $p->category->name ?? ''])) }},
                  get filtered() {
                      if (!this.query) return this.products.slice(0, 8);
                      const q = this.query.toLowerCase();
                      return this.products.filter(p => p.name.toLowerCase().includes(q)).slice(0, 8);
                  },
                  pick(p) { this.productId = p.id; this.query = p.name; this.open = false; }
              }">
            @csrf
            <div>
                <label class="field-label">Store</label>
                <select name="store_id" class="input" required>
                    @foreach ($stores as $store)
                        <option value="{{ $store->id }}">{{ $store->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="relative">
                <label class="field-label">Product</label>
                <input type="hidden" name="product_id" x-model="productId">
                <input type="text" class="input" placeholder="Type to search products…" autocomplete="off"
                       x-model="query" x-on:focus="open = true" x-on:input="open = true"
                       x-on:click.outside="open = false" required>
                <div x-show="open && filtered.length" x-cloak
                     class="absolute z-10 mt-1 w-full bg-white border border-border rounded-lg shadow-lg max-h-56 overflow-y-auto">
                    <template x-for="p in filtered" :key="p.id">
                        <button type="button" x-on:click="pick(p)" class="w-full text-left px-3 py-2 text-sm hover:bg-ink/5 flex items-center justify-between">
                            <span x-text="p.name"></span>
                            <span class="text-xs text-ink-faint" x-text="p.category"></span>
                        </button>
                    </template>
                </div>
                <p x-show="query && !productId" x-cloak class="text-xs text-accent-600 mt-1">Pick a product from the list — typing alone won't select one.</p>
            </div>
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="field-label">Movement type</label>
                    <select name="type" class="input">
                        <option value="opening_stock">Opening stock</option>
                        <option value="adjustment">Adjustment</option>
                        <option value="wastage">Wastage</option>
                        <option value="breakage">Breakage</option>
                        <option value="complimentary">Complimentary</option>
                    </select>
                </div>
                <div>
                    <label class="field-label">Quantity</label>
                    <input type="number" step="0.01" name="quantity" class="input" required>
                </div>
            </div>
            <div>
                <label class="field-label">Reason</label>
                <input type="text" name="reason" class="input" required placeholder="e.g. Bottle broke during service">
            </div>
        </form>
        <x-slot:footer>
            <button class="btn-secondary" x-on:click="open = false">Cancel</button>
            <button form="adjust-form" class="btn-primary">Save adjustment</button>
        </x-slot:footer>
    </x-modal>
</div>
@endsection