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

@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 Transfers</h1>
            <p class="text-sm text-ink-muted">Move stock between stores — e.g. Main Store to Bar Store.</p>
        </div>
        @can('transfers.create')
        <button class="btn-primary btn-sm" x-on:click="$dispatch('open-modal-transfer')"><i data-lucide="arrow-left-right" class="w-3.5 h-3.5"></i> New transfer</button>
        @endcan
    </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>
        <button class="btn-secondary btn-sm">Filter</button>
    </form>

    <div class="card overflow-x-auto">
        <table class="data-table">
            <thead><tr><th>Date</th><th>Product</th><th>Section</th><th>To store</th><th class="text-right">Qty</th><th>By</th></tr></thead>
            <tbody>
                @forelse ($transfers as $t)
                    <tr>
                        <td>{{ $t->created_at->format('d M, H:i') }}</td>
                        <td class="font-medium">{{ $t->product->name }}</td>
                        <td>{{ $t->product->section->name ?? '—' }}</td>
                        <td>{{ $t->store->name }}</td>
                        <td class="text-right text-success">+{{ number_format($t->quantity, 2) }}</td>
                        <td>{{ $t->user->name ?? 'System' }}</td>
                    </tr>
                @empty
                    <tr><td colspan="6" class="text-center text-ink-muted py-8">No transfers yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    {{ $transfers->links() }}

    <x-modal id="transfer" title="Transfer stock">
        <form method="POST" action="{{ route('inventory.transfers.store') }}" id="transfer-form" class="space-y-4">
            @csrf
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="field-label">From store</label>
                    <select name="from_store_id" class="input" required>
                        @foreach ($stores as $store)<option value="{{ $store->id }}">{{ $store->name }}</option>@endforeach
                    </select>
                </div>
                <div>
                    <label class="field-label">To store</label>
                    <select name="to_store_id" class="input" required>
                        @foreach ($stores as $store)<option value="{{ $store->id }}">{{ $store->name }}</option>@endforeach
                    </select>
                </div>
            </div>
            <div>
                <label class="field-label">Product</label>
                <select name="product_id" class="input" required>
                    @foreach ($products as $product)<option value="{{ $product->id }}">{{ $product->name }}</option>@endforeach
                </select>
            </div>
            <div><label class="field-label">Quantity</label><input type="number" step="0.01" min="0.01" name="quantity" class="input" required></div>
            <div><label class="field-label">Reason (optional)</label><input type="text" name="reason" class="input"></div>
        </form>
        <x-slot:footer>
            <button class="btn-secondary" x-on:click="open = false">Cancel</button>
            <button form="transfer-form" class="btn-primary">Transfer</button>
        </x-slot:footer>
    </x-modal>
</div>
@endsection