@extends('layouts.franchise', ['heading' => 'POS / बिक्री'])

@section('content')
    @if(session('status'))
        <div class="mb-4 rounded bg-emerald-100 p-3 text-emerald-800">{{ session('status') }}</div>
    @endif
    @if($errors->any())
        <div class="mb-4 rounded bg-rose-100 p-3 text-rose-800">
            <ul class="list-disc pl-5 text-sm">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form method="GET" class="mb-4 flex gap-2">
        <input name="search" value="{{ $search }}" placeholder="Search product" class="flex-1 rounded border p-2 text-sm" />
        <button class="rounded bg-slate-900 px-4 py-2 text-sm text-white">Search</button>
    </form>

    <form method="POST" action="{{ route('franchise.pos.checkout') }}" class="rounded-2xl bg-white p-4 shadow">
        @csrf
        <div class="grid gap-3 md:grid-cols-2">
            <input name="customer" placeholder="Customer Member Code / Mobile" class="rounded border p-2 text-sm" required>
            <select name="payment_mode" class="rounded border p-2 text-sm">
                <option value="cash">Cash</option>
                <option value="upi">UPI</option>
                <option value="wallet">Wallet</option>
                <option value="gateway">Gateway</option>
            </select>
            <input name="utr" placeholder="UTR (for UPI)" class="rounded border p-2 text-sm">
        </div>

        <div class="mt-4 grid grid-cols-1 gap-3 md:grid-cols-3">
            @forelse($products as $product)
                <div class="rounded-2xl border p-3">
                    <div class="font-semibold">{{ $product->name }}</div>
                    <div class="text-xs text-slate-500">SKU: {{ $product->sku }}</div>
                    <div class="text-sm">₹ {{ number_format((float) $product->dp_price, 2) }} | BV {{ number_format((float) $product->bv, 2) }}</div>
                    <input type="number" inputmode="numeric" name="quantity[{{ $product->id }}]" min="0" step="1" placeholder="Qty" class="mt-2 w-full rounded border p-2 text-sm">
                </div>
            @empty
                <div class="rounded-2xl bg-white p-4 text-center text-slate-500 md:col-span-3">No products available.</div>
            @endforelse
        </div>

        <button class="mt-4 w-full rounded bg-emerald-600 px-4 py-2 text-white">Confirm Sale</button>
    </form>
@endsection