@extends('layouts.franchise', ['heading' => 'Warehouse & Territory'])

@section('content')
    <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
        <div class="user-card p-4">
            <div class="mb-3 text-sm font-semibold">Map Territory Pincode</div>
            <form method="POST" action="{{ route('franchise.distribution.territories.store') }}" class="grid grid-cols-1 gap-3 md:grid-cols-2">
                @csrf
                <div class="md:col-span-2">
                    <label class="text-xs text-[var(--user-muted)]">Warehouse</label>
                    <select name="warehouse_id" class="mt-1 w-full rounded-lg border border-[var(--user-border)] bg-transparent px-3 py-2 text-sm">
                        <option value="">No preferred warehouse</option>
                        @foreach($warehouses as $warehouse)
                            <option value="{{ $warehouse->id }}">{{ $warehouse->name }} ({{ $warehouse->code }})</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="text-xs text-[var(--user-muted)]">State</label>
                    <input name="state" class="mt-1 w-full rounded-lg border border-[var(--user-border)] bg-transparent px-3 py-2 text-sm">
                </div>
                <div>
                    <label class="text-xs text-[var(--user-muted)]">District</label>
                    <input name="district" class="mt-1 w-full rounded-lg border border-[var(--user-border)] bg-transparent px-3 py-2 text-sm">
                </div>
                <div>
                    <label class="text-xs text-[var(--user-muted)]">Area</label>
                    <input name="area_name" class="mt-1 w-full rounded-lg border border-[var(--user-border)] bg-transparent px-3 py-2 text-sm">
                </div>
                <div>
                    <label class="text-xs text-[var(--user-muted)]">Pincode</label>
                    <input name="pincode" required class="mt-1 w-full rounded-lg border border-[var(--user-border)] bg-transparent px-3 py-2 text-sm">
                </div>
                <div class="md:col-span-2">
                    <button class="rounded-lg bg-[var(--user-primary)] px-4 py-2 text-sm font-semibold text-white">Save Territory</button>
                </div>
            </form>
        </div>

        <div class="user-card p-4">
            <div class="mb-3 text-sm font-semibold">Assigned Territories</div>
            <div class="space-y-3">
                @forelse($territories as $territory)
                    <div class="rounded-xl border border-[var(--user-border)] p-3">
                        <div class="flex items-center justify-between">
                            <div class="text-sm font-semibold">{{ $territory->pincode }}</div>
                            <span class="user-badge {{ $territory->is_active ? 'success' : 'warning' }}">
                                {{ $territory->is_active ? 'Active' : 'Inactive' }}
                            </span>
                        </div>
                        <div class="mt-1 text-xs text-[var(--user-muted)]">
                            {{ $territory->area_name ?: '-' }}, {{ $territory->district ?: '-' }}, {{ $territory->state ?: '-' }}
                        </div>
                        <div class="mt-1 text-xs text-[var(--user-muted)]">
                            Warehouse: {{ $territory->warehouse?->name ?? 'Not set' }}
                        </div>
                        <form method="POST" action="{{ route('franchise.distribution.territories.status', $territory) }}" class="mt-2">
                            @csrf
                            <input type="hidden" name="state" value="{{ $territory->is_active ? 'inactive' : 'active' }}">
                            <button class="rounded-lg border border-[var(--user-border)] px-3 py-1 text-xs text-[var(--user-text)]">
                                {{ $territory->is_active ? 'Set Inactive' : 'Set Active' }}
                            </button>
                        </form>
                    </div>
                @empty
                    <div class="rounded-xl border border-[var(--user-border)] p-4 text-center text-sm text-[var(--user-muted)]">No territories mapped yet.</div>
                @endforelse
            </div>
            <div class="mt-4">{{ $territories->appends(request()->except('territories'))->links() }}</div>
        </div>
    </div>

    <div class="mt-4 user-card p-4">
        <form method="GET" class="mb-3 flex flex-wrap items-end gap-3">
            <div>
                <label class="text-xs text-[var(--user-muted)]">Warehouse Stock View</label>
                <select name="warehouse_id" class="mt-1 rounded-lg border border-[var(--user-border)] bg-transparent px-3 py-2 text-sm">
                    <option value="0">Select warehouse</option>
                    @foreach($warehouses as $warehouse)
                        <option value="{{ $warehouse->id }}" @selected((int) $warehouseId === (int) $warehouse->id)>
                            {{ $warehouse->name }} ({{ $warehouse->code }})
                        </option>
                    @endforeach
                </select>
            </div>
            <button class="rounded-lg bg-[var(--user-primary)] px-3 py-2 text-xs font-semibold text-white">Load Stock</button>
        </form>
        <div class="overflow-x-auto">
            <table class="min-w-full text-left text-sm">
                <thead class="text-xs text-[var(--user-muted)]">
                    <tr>
                        <th class="px-2 py-2">Product</th>
                        <th class="px-2 py-2">SKU</th>
                        <th class="px-2 py-2">Qty</th>
                        <th class="px-2 py-2">Reserved</th>
                        <th class="px-2 py-2">DP</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($warehouseStocks as $stock)
                        <tr class="border-t border-[var(--user-border)]">
                            <td class="px-2 py-2">{{ $stock->name }}</td>
                            <td class="px-2 py-2">{{ $stock->sku }}</td>
                            <td class="px-2 py-2">{{ number_format((float) $stock->quantity, 2) }}</td>
                            <td class="px-2 py-2">{{ number_format((float) $stock->reserved_quantity, 2) }}</td>
                            <td class="px-2 py-2">₹ {{ number_format((float) $stock->dp_price, 2) }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-2 py-4 text-center text-[var(--user-muted)]">Select warehouse to view stock.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="mt-4 user-card p-4">
        <div class="mb-3 text-sm font-semibold">Recent Dispatch Logs</div>
        <div class="space-y-2">
            @forelse($dispatchLogs as $log)
                <div class="rounded-xl border border-[var(--user-border)] p-2 text-xs">
                    <div class="font-semibold">{{ strtoupper($log->transaction_type) }} • Qty {{ number_format((float) $log->quantity, 2) }}</div>
                    <div class="text-[var(--user-muted)]">Ref: {{ $log->reference ?: '-' }} • {{ optional($log->transacted_at)->format('d M Y h:i A') }}</div>
                </div>
            @empty
                <div class="rounded-xl border border-[var(--user-border)] p-3 text-center text-sm text-[var(--user-muted)]">No dispatch logs.</div>
            @endforelse
        </div>
    </div>
@endsection