@extends('layouts.app')
@section('content')
<div class="max-w-3xl mx-auto p-6">
    <h1 class="text-xl font-semibold mb-4">Pre-Booking</h1>
    @if(session('success'))<div class="p-3 mb-4 bg-green-100 text-green-800 rounded">{{ session('success') }}</div>@endif
    @if($errors->any())<div class="p-3 mb-4 bg-red-100 text-red-800 rounded">{{ $errors->first() }}</div>@endif

    <div class="mb-6 p-4 bg-white rounded shadow">
        <form method="GET" action="{{ route('bookings.pre.create') }}" class="flex items-end gap-3">
            <div class="flex-1">
                <label class="block text-sm font-medium mb-1">Unit</label>
                <select name="unit_id" class="w-full border rounded p-2">
                    <option value="">Select Unit</option>
                    @foreach($units as $phaseName => $list)
                        <optgroup label="{{ $phaseName }}">
                            @foreach($list as $u)
                                <option value="{{ $u->id }}" @if($selectedUnit && $selectedUnit->id === $u->id) selected @endif>
                                    {{ $u->unit_number }} — {{ $u->unitCategory?->name }} ({{ number_format($u->total_price, 2) }})
                                </option>
                            @endforeach
                        </optgroup>
                    @endforeach
                </select>
            </div>
            <div>
                <button class="px-4 py-2 bg-gray-800 text-white rounded">Load</button>
            </div>
        </form>
    </div>

    <div class="mb-6 p-4 bg-white rounded shadow">
        <form method="GET" action="{{ route('bookings.pre.create') }}" class="flex items-end gap-3">
            <input type="hidden" name="unit_id" value="{{ $selectedUnit?->id }}">
            <div class="flex-1">
                <label class="block text-sm font-medium mb-1">Customer CNIC</label>
                <input type="text" name="cnic" value="{{ $cnic }}" class="w-full border rounded p-2" placeholder="XXXXX-XXXXXXX-X">
            </div>
            <div>
                <button class="px-4 py-2 bg-blue-600 text-white rounded">Search Customer</button>
            </div>
        </form>
        @if($customer)
        <div class="mt-4 grid grid-cols-3 gap-4 text-sm">
            <div><span class="font-medium">Name:</span> {{ $customer->name }}</div>
            <div><span class="font-medium">Father Name:</span> {{ $customer->father_name }}</div>
            <div><span class="font-medium">Phone:</span> {{ $customer->phone }}</div>
        </div>
        @else
        <div class="mt-4 text-sm">
            No customer found. <a href="{{ url('customers/create?return=' . urlencode(request()->fullUrl())) }}" class="text-blue-600 underline">Create New Customer</a>
        </div>
        @endif
    </div>

    <form method="POST" action="{{ route('bookings.pre.store') }}" class="p-4 bg-white rounded shadow">
        @csrf
        <input type="hidden" name="unit_id" value="{{ $selectedUnit?->id }}">
        <input type="hidden" name="customer_cnic" value="{{ $customer?->cnic }}">
        <div class="grid grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium mb-1">Token Amount</label>
                <input type="text" readonly class="w-full border rounded p-2 bg-gray-100" value="{{ number_format($tokenAmount, 2) }}">
                @if($scheme)
                <div class="text-xs text-gray-600 mt-1">Based on scheme: {{ $scheme->name }} ({{ $scheme->token_pct }}%)</div>
                @endif
            </div>
            <div>
                <label class="block text-sm font-medium mb-1">Payment Type</label>
                <div class="flex items-center gap-4">
                    <label class="inline-flex items-center gap-2"><input type="radio" name="payment_type" value="cash" checked> <span>Cash</span></label>
                    <label class="inline-flex items-center gap-2"><input type="radio" name="payment_type" value="cheque"> <span>Cheque</span></label>
                    <label class="inline-flex items-center gap-2"><input type="radio" name="payment_type" value="bank_transfer"> <span>Bank Transfer</span></label>
                </div>
            </div>
        </div>
        @if(old('payment_type') === 'cheque')
        <div class="grid grid-cols-2 gap-4 mt-4">
            <div>
                <label class="block text-sm font-medium mb-1">Cheque #</label>
                <input type="text" name="cheque_number" class="w-full border rounded p-2">
            </div>
            <div>
                <label class="block text-sm font-medium mb-1">Bank Name</label>
                <input type="text" name="bank_name" class="w-full border rounded p-2">
            </div>
        </div>
        @endif
        <div class="mt-6">
            <button class="px-6 py-2 bg-green-600 text-white rounded">Submit Pre-Booking</button>
        </div>
    </form>
</div>
@endsection