@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>Stock location</th><th class="text-right">Movement</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 ?? 'Deleted product' }}</td>
                        <td>{{ $t->product?->section?->name ?? '—' }}</td>
                        <td>{{ $t->store?->branch?->name ?? 'Branch' }} — {{ $t->store?->name ?? 'Deleted store' }}</td>
                        <td class="text-right {{ (float) $t->quantity < 0 ? 'text-danger' : 'text-success' }}">{{ (float) $t->quantity > 0 ? '+' : '' }}{{ 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" x-data="{ fromBranch: '{{ $branches->first()->id ?? '' }}', toBranch: '{{ $branches->skip(1)->first()->id ?? $branches->first()->id ?? '' }}' }">
                <div class="col-span-2">
                    <label class="field-label">Transfer from branch</label>
                    <select name="from_branch_id" class="input" x-model="fromBranch" x-on:change="$nextTick(() => { $refs.fromStore.value = [...$refs.fromStore.options].find(o => o.dataset.branch === String(fromBranch))?.value || ''; })" required>
                        @foreach ($branches as $branch)<option value="{{ $branch->id }}">{{ $branch->name }}</option>@endforeach
                    </select>
                </div>
                <div>
                    <label class="field-label">From stock location</label>
                    <select name="from_store_id" class="input" x-ref="fromStore" required>
                        @foreach ($stores as $store)
                            <option value="{{ $store->id }}" data-branch="{{ $store->branch_id }}" :disabled="String(fromBranch) !== '{{ $store->branch_id }}'" :selected="String(fromBranch) === '{{ $store->branch_id }}'">{{ $store->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="field-label">Transfer to branch</label>
                    <select name="to_branch_id" class="input" x-model="toBranch" x-on:change="$nextTick(() => { $refs.toStore.value = [...$refs.toStore.options].find(o => o.dataset.branch === String(toBranch))?.value || ''; })" required>
                        @foreach ($branches as $branch)<option value="{{ $branch->id }}">{{ $branch->name }}</option>@endforeach
                    </select>
                </div>
                <div class="col-span-2">
                    <label class="field-label">To stock location</label>
                    <select name="to_store_id" class="input" x-ref="toStore" required>
                        @foreach ($stores as $store)
                            <option value="{{ $store->id }}" data-branch="{{ $store->branch_id }}" :disabled="String(toBranch) !== '{{ $store->branch_id }}'" :selected="String(toBranch) === '{{ $store->branch_id }}'">{{ $store->branch->name ?? 'Branch' }} — {{ $store->name }}</option>
                        @endforeach
                    </select>
                </div>
                <p class="col-span-2 text-xs text-ink-muted">Choose the source and destination branches. Stock locations are filtered to the selected branches.</p>
            </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