@extends('layouts.app')
@section('title', $type === 'warehouse' ? __('Warehouse Stock') : __('POS Stock'))

@section('content')
    <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
        <form method="GET" class="flex items-center gap-2">
            <input type="text" name="q" value="{{ request('q') }}" class="input max-w-xs" placeholder="{{ __('Search product') }}">
            <button class="btn-secondary"><x-icon name="search" class="h-4 w-4"/>{{ __('Search') }}</button>
        </form>
        <div class="flex items-center gap-2" x-data="stockRefresh()" x-init="start()">
            <span class="badge bg-brand-100 text-brand-700">{{ __('Auto-refresh') }} <span x-text="interval"></span>m</span>
            <span class="text-xs text-slate-400">{{ __('Synced') }}: <span x-text="lastSync"></span></span>
        </div>
    </div>

    @if (! $store)
        <div class="card text-center text-slate-400">{{ __('No store of this type configured.') }}</div>
    @else
        @if ($stores->count() > 1)
            <div class="mb-3 flex flex-wrap items-center gap-2">
                <span class="text-sm text-slate-500">{{ __('Store') }}:</span>
                @foreach ($stores as $option)
                    <a href="{{ route($type === 'warehouse' ? 'stock.warehouse' : 'stock.pos', array_merge(request()->except('page'), ['store_id' => $option->id])) }}"
                       class="badge {{ $option->id === $store->id ? 'bg-brand-100 text-brand-700' : 'bg-slate-100 text-slate-600' }}">{{ $option->name }}</a>
                @endforeach
            </div>
        @endif
        <div class="mb-2 text-sm text-slate-500">{{ $store->name }} ({{ $store->code }})</div>
        <div class="table-wrap">
            <table class="min-w-full divide-y divide-slate-100">
                <thead class="bg-slate-50">
                    <tr>
                        <th class="th">{{ __('Product') }}</th>
                        <th class="th">{{ __('Category') }}</th>
                        <th class="th">{{ __('Batch') }}</th>
                        <th class="th">{{ __('Expiration') }}</th>
                        <th class="th">{{ __('Quantity') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse ($stocks as $stock)
                        <tr class="hover:bg-slate-50">
                            <td class="td font-medium">{{ $stock->product?->name }}</td>
                            <td class="td">{{ $stock->product?->category?->name ?? '—' }}</td>
                            <td class="td font-mono text-xs">{{ $stock->batch?->batch_number }}</td>
                            <td class="td">
                                {{ $stock->batch?->expiration_date?->format('d/m/Y') ?? '—' }}
                                @if ($stock->batch?->isExpired())<span class="badge ml-1 bg-red-100 text-red-700">Exp</span>@endif
                            </td>
                            <td class="td font-semibold">{{ $stock->quantity }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="5" class="td py-10 text-center text-slate-400">{{ __('No stock records.') }}</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="mt-4">{{ $stocks->links() }}</div>
    @endif

@push('scripts')
<script>
function stockRefresh() {
    return {
        interval: {{ stock_refresh_minutes() }}, lastSync: '—',
        start() {
            const run = async () => {
                try {
                    const r = await fetch('{{ route('stock.feed') }}?type={{ $type }}&store_id={{ $store?->id }}', { headers: { 'Accept': 'application/json' } });
                    const d = await r.json();
                    this.lastSync = new Date(d.refreshed_at).toLocaleTimeString();
                    this.interval = d.interval_minutes;
                } catch (e) {}
                clearTimeout(this._t);
                this._t = setTimeout(run, Math.max(1, this.interval) * 60 * 1000);
            };
            run();
        }
    };
}
</script>
@endpush
@endsection