@include('Partials.sidebar')
<section class="main_content dashboard_part large_header_bg">
@include('Partials.header')
<div class="main_content_iner default_main_contaner_iner">
<div class="page-body">

    <div class="container-fluid">
        <div class="page-title">
            <div class="row align-items-center">
                <div class="col-sm-6 ps-0">
                    <h3><i class="fas fa-bolt mr-2" style="color:#c9a96e"></i>Instant Bookings</h3>
                    <p class="text-muted mb-0" style="font-size:13px">Walk-in &amp; manual bookings — confirm immediately without online payment</p>
                </div>
                <div class="col-sm-6 pe-0">
                    <ol class="bc">
                        <li><a href="/project/dashboard" class="bc-home"><i class="fas fa-home"></i></a></li>
                        <li class="bc-sep">›</li>
                        <li class="bc-active">Instant Bookings</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    @foreach(['success','error'] as $t)
        @if(session($t))
        <div class="container-fluid mb-2">
            <div class="alert alert-{{ $t==='error'?'danger':$t }} alert-dismissible fade show">
                {{ session($t) }}<button type="button" class="close" data-dismiss="alert">&times;</button>
            </div>
        </div>
        @endif
    @endforeach

    {{-- ── Milestone KPI Cards ── --}}
    <div class="container-fluid mb-4">
        <div class="row">
            @php
                $kpis = [
                    ['label'=>'Overdue Milestones','value'=>$milestoneSummary['overdue'],
                     'icon'=>'fas fa-exclamation-circle','color'=>'#ef4444','bg'=>'rgba(239,68,68,0.08)','border'=>'rgba(239,68,68,0.2)'],
                    ['label'=>'Due in 30 Days','value'=>$milestoneSummary['due_soon'],
                     'icon'=>'fas fa-clock','color'=>'#f59e0b','bg'=>'rgba(245,158,11,0.08)','border'=>'rgba(245,158,11,0.2)'],
                    ['label'=>'Pending Collection','value'=>$currency.number_format($milestoneSummary['pending_amount'],0),
                     'icon'=>'fas fa-wallet','color'=>'#c9a96e','bg'=>'rgba(201,169,110,0.08)','border'=>'rgba(201,169,110,0.2)'],
                    ['label'=>'Total Collected','value'=>$currency.number_format($milestoneSummary['paid_amount'],0),
                     'icon'=>'fas fa-check-circle','color'=>'#22c55e','bg'=>'rgba(34,197,94,0.08)','border'=>'rgba(34,197,94,0.2)'],
                ];
            @endphp
            @foreach($kpis as $k)
            <div class="col-xl-3 col-sm-6 mb-3">
                <div class="card h-100" style="border:1px solid {{ $k['border'] }};background:{{ $k['bg'] }};">
                    <div class="card-body d-flex align-items-center" style="gap:14px;">
                        <div style="width:44px;height:44px;border-radius:12px;background:{{ $k['border'] }};display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                            <i class="{{ $k['icon'] }}" style="color:{{ $k['color'] }};font-size:18px;"></i>
                        </div>
                        <div>
                            <div style="font-size:20px;font-weight:800;color:{{ $k['color'] }};">{{ $k['value'] }}</div>
                            <div style="font-size:11px;color:#64748b;margin-top:1px;">{{ $k['label'] }}</div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    {{-- ── New Instant Booking Form ── --}}
    <div class="container-fluid mb-4">
        <div class="card shadow-sm" style="border-top:3px solid #c9a96e;">
            <div class="card-header" style="background:linear-gradient(135deg,#1a1a2e,#16213e);">
                <h6 class="mb-0 text-white"><i class="fas fa-plus-circle mr-2" style="color:#c9a96e;"></i>New Instant Booking</h6>
            </div>
            <div class="card-body">
                <form method="POST" action="/admin/instant-bookings" id="instantForm" onsubmit="return confirmBooking()">
                    @csrf
                    <div class="row">

                        {{-- Step 1: Unit --}}
                        <div class="col-12 mb-2">
                            <div class="ib-step-label">1. Select Unit</div>
                        </div>
                        <div class="col-md-5">
                            <div class="form-group">
                                <label class="ib-label">Unit *</label>
                                <select name="plot_id" class="form-control" id="plotSelect" required>
                                    <option value="">— Choose available unit —</option>
                                    @foreach($availablePlots as $p)
                                    @php $dp = $p->offer_price ?: $p->actual_price; @endphp
                                    <option value="{{ $p->id }}" data-price="{{ $dp }}"
                                        data-area="{{ $p->internal_area_sqft ?: $p->plot_size }}">
                                        Unit {{ $p->plot_number }} — {{ $p->plot_type }}
                                        @if($p->internal_area_sqft) ({{ $p->internal_area_sqft }} sqft)@elseif($p->plot_size) ({{ $p->plot_size }})@endif
                                        — {{ $currency }}{{ number_format($dp, 0) }}
                                    </option>
                                    @endforeach
                                </select>
                                @if($availablePlots->isEmpty())
                                <small class="text-danger">No available units at the moment.</small>
                                @endif
                            </div>
                        </div>
                        <div class="col-md-7 d-flex align-items-center">
                            <div id="unitPreview" style="display:none;padding:10px 14px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;font-size:13px;width:100%;">
                                <i class="fas fa-home mr-2" style="color:#22c55e;"></i>
                                <span id="unitPreviewText"></span>
                                <strong id="unitPreviewPrice" style="color:#22c55e;margin-left:8px;"></strong>
                            </div>
                        </div>

                        {{-- Step 2: Payment Plan --}}
                        <div class="col-12 mb-2 mt-3">
                            <div class="ib-step-label">2. Payment Plan <span style="font-weight:400;color:#94a3b8;">(optional)</span></div>
                        </div>
                        <div class="col-md-5">
                            <div class="form-group">
                                <label class="ib-label">Select Payment Plan</label>
                                <select name="payment_plan_id" class="form-control" id="planSelect">
                                    <option value="">— No plan (full / custom payment) —</option>
                                </select>
                                <small class="text-muted" style="font-size:11px;" id="planHint">Select a unit first to see available plans.</small>
                            </div>
                        </div>
                        <div class="col-md-7">
                            <div id="milestonesPanel" style="display:none;">
                                <label class="ib-label">Payment Schedule</label>
                                <div id="milestonesContent" style="background:#fffdf8;border:1px solid #f0e4cc;border-radius:8px;padding:12px;max-height:220px;overflow-y:auto;font-size:12px;"></div>
                            </div>
                        </div>

                        {{-- ── Fee Breakdown Card ── --}}
                        <div class="col-12 mt-3" id="feeBreakdownWrap" style="display:none;">
                            <div style="background:#fffdf8;border:1px solid #f0e4cc;border-radius:12px;padding:16px 20px;">
                                <div style="font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#c9a96e;margin-bottom:12px;">
                                    <i class="fas fa-calculator mr-2"></i>Charges Breakdown (incl. taxes &amp; fees)
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <table style="width:100%;font-size:13px;border-collapse:collapse;" id="feeBreakdownTable">
                                        </table>
                                    </div>
                                    <div class="col-md-6">
                                        <div id="feeInstalmentsInfo" style="display:none;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:12px;font-size:12px;">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Step 3: Client --}}
                        <div class="col-12 mb-2 mt-3">
                            <div class="ib-step-label">3. Client Details</div>
                        </div>

                        {{-- Client type toggle --}}
                        <div class="col-12 mb-3">
                            <div style="display:inline-flex;border:1px solid #dee2e6;border-radius:8px;overflow:hidden;">
                                <button type="button" id="btnRegistered" onclick="setClientType('registered')"
                                    style="padding:7px 20px;font-size:13px;font-weight:700;background:#c9a96e;color:#fff;border:none;cursor:pointer;">
                                    <i class="fas fa-user-check mr-1"></i>Registered User
                                </button>
                                <button type="button" id="btnWalkin" onclick="setClientType('walkin')"
                                    style="padding:7px 20px;font-size:13px;font-weight:600;background:#fff;color:#64748b;border:none;cursor:pointer;">
                                    <i class="fas fa-user-plus mr-1"></i>Walk-in / Unregistered
                                </button>
                            </div>
                            <input type="hidden" name="client_type" id="clientTypeInput" value="registered">
                        </div>

                        {{-- Registered user fields --}}
                        <div id="registeredFields" class="col-12">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="ib-label">Registered User *</label>
                                        <select name="user_id" class="form-control" id="userSelect" required>
                                            <option value="">— Select user —</option>
                                            @foreach($users as $u)
                                            <option value="{{ $u->id }}"
                                                data-name="{{ $u->name }}"
                                                data-phone="{{ $u->phone }}"
                                                data-email="{{ $u->email }}"
                                                data-role="{{ $u->role }}">
                                                {{ $u->name }} ({{ $u->email }}){{ $u->role === 'broker' ? ' 🤝' : '' }}
                                            </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label class="ib-label">Client Name <small class="text-muted">(override)</small></label>
                                        <input type="text" name="client_name" id="clientName" class="form-control" placeholder="Auto-filled from user">
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label class="ib-label">Phone</label>
                                        <input type="text" name="client_phone" id="clientPhone" class="form-control" placeholder="Auto-filled">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label class="ib-label">Email</label>
                                        <input type="email" name="client_email" id="clientEmail" class="form-control" placeholder="Auto-filled">
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Walk-in fields --}}
                        <div id="walkinFields" class="col-12" style="display:none;">
                            <div class="alert alert-warning py-2 px-3 mb-3" style="font-size:12px;">
                                <i class="fas fa-info-circle mr-1"></i>
                                Walk-in client has no app account. Details are stored directly on the booking.
                                You can <a href="/admin/users/create" target="_blank" style="color:#856404;font-weight:600;">create a user account</a> for them later.
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="ib-label">Full Name *</label>
                                        <input type="text" name="walkin_name" id="walkinName" class="form-control" placeholder="Client's full name">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="ib-label">Phone *</label>
                                        <div style="display:flex;gap:0;">
                                            <div style="position:relative;flex-shrink:0;">
                                                <button type="button" id="walkinCodeBtn"
                                                    onclick="toggleWalkinDd(event)"
                                                    style="height:38px;padding:0 10px;background:#fff;border:1px solid #ced4da;border-right:none;border-radius:4px 0 0 4px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:5px;min-width:90px;white-space:nowrap;">
                                                    <span id="walkinFlag">🇮🇳</span>
                                                    <span id="walkinCode">+91</span>
                                                    <span style="font-size:9px;color:#888;">▼</span>
                                                </button>
                                                <div id="walkinDd" style="display:none;position:absolute;top:40px;left:0;z-index:2000;width:260px;background:#fff;border:1px solid #ced4da;border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,0.15);overflow:hidden;">
                                                    <div style="padding:6px 8px;border-bottom:1px solid #eee;">
                                                        <input type="text" id="walkinCodeSearch" placeholder="Search country…"
                                                            oninput="filterCodes(this.value)"
                                                            style="width:100%;padding:5px 8px;border:1px solid #ddd;border-radius:4px;font-size:12px;outline:none;box-sizing:border-box;">
                                                    </div>
                                                    <div id="walkinCodeList" style="max-height:200px;overflow-y:auto;"></div>
                                                </div>
                                            </div>
                                            <input type="text" id="walkinPhoneNum" placeholder="Mobile number"
                                                oninput="this.value=this.value.replace(/\D/g,'');updatePhonePreview()"
                                                style="flex:1;height:38px;padding:0 10px;border:1px solid #ced4da;border-radius:0 4px 4px 0;font-size:13px;outline:none;">
                                        </div>
                                        <input type="hidden" name="walkin_phone" id="walkinPhone">
                                        <input type="hidden" name="walkin_country_code" id="walkinCountryCode" value="+91">
                                        <small id="phonePreview" style="font-size:11px;color:#22c55e;"></small>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label class="ib-label">Email <small class="text-muted">(optional)</small></label>
                                        <input type="email" name="walkin_email" id="walkinEmail" class="form-control" placeholder="Optional">
                                    </div>
                                </div>
                                <div class="col-md-1">
                                    <div class="form-group">
                                        <label class="ib-label">ID / Ref</label>
                                        <input type="text" name="walkin_ref" class="form-control" placeholder="Optional">
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Step 4: Payment --}}
                        <div class="col-12 mb-2 mt-3">
                            <div class="ib-step-label">4. Payment Details</div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="ib-label">Payment Mode *</label>
                                <select name="payment_mode" class="form-control" required>
                                    <option value="cash">💵 Cash</option>
                                    <option value="bank_transfer">🏦 Bank Transfer</option>
                                    <option value="cheque">📄 Cheque</option>
                                    <option value="manual">✏️ Manual Entry</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="ib-label">
                                    Amount Paid ({{ $currency }}) *
                                    <span id="amountLabel" style="font-weight:400;color:#c9a96e;font-size:11px;"></span>
                                </label>
                                <input type="number" name="amount_paid" id="amountPaid" class="form-control" required min="1" step="0.01" placeholder="Enter amount">
                                <small id="amountHint" class="text-muted" style="font-size:11px;"></small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="ib-label">Notes (optional)</label>
                                <textarea name="notes" class="form-control" rows="2" placeholder="Any additional notes…"></textarea>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="alert alert-warning py-2 px-3 mb-3" style="font-size:12px;">
                                ⚠️ This will <strong>immediately confirm</strong> the booking and mark the unit as booked. The client will receive an in-app notification if they have an account.
                            </div>
                            <button type="submit" class="btn btn-warning" style="color:#fff;font-weight:700;">
                                <i class="fas fa-bolt mr-1"></i>Create &amp; Confirm Instant Booking
                            </button>
                        </div>

                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- ── Search ── --}}
    <div class="container-fluid mb-3">
        <form method="GET" class="d-flex align-items-center" style="gap:8px;">
            <input type="text" name="search" class="form-control form-control-sm"
                   placeholder="Search unit, client name, phone…"
                   value="{{ request('search') }}" style="max-width:300px;">
            <button class="btn btn-primary btn-sm"><i class="fas fa-search mr-1"></i>Search</button>
            <a href="/admin/instant-bookings" class="btn btn-outline-secondary btn-sm"><i class="fas fa-times"></i></a>
        </form>
    </div>

    {{-- ── Bookings Table ── --}}
    <div class="container-fluid">
        <div class="card shadow-sm">
            <div class="card-header">
                <h6 class="mb-0">{{ $bookings->total() }} Walk-in / Manual Bookings</h6>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0" style="font-size:13px;">
                        <thead style="background:#f8f9fa;">
                            <tr>
                                <th style="width:40px;">#</th>
                                <th>Unit</th>
                                <th>Client</th>
                                <th>Account</th>
                                <th>Payment Plan</th>
                                <th>Amount</th>
                                <th>Mode</th>
                                <th>Date</th>
                                <th style="width:100px;">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($bookings as $b)
                            @php
                                $txn        = $b->transactions?->first();
                                $ms         = $b->milestones ?? collect();
                                $msPaid     = $ms->where('status','paid');
                                $msPending  = $ms->where('status','pending');
                                $msOverdue  = $ms->where('status','overdue');
                                $hasMs      = $ms->isNotEmpty();
                                $nextDue    = $msPending->merge($msOverdue)->filter(fn($m)=>$m->due_date)->sortBy('due_date')->first();
                            @endphp
                            <tr style="{{ $msOverdue->isNotEmpty() ? 'background:rgba(239,68,68,0.04);' : '' }}">
                                <td class="align-middle" style="color:#94a3b8;font-size:12px;">{{ $b->id }}</td>
                                <td class="align-middle">
                                    <strong>Unit {{ $b->plot_number }}</strong>
                                    <div style="font-size:11px;color:#94a3b8;">{{ $b->plot_type }}{{ $b->area ? ' · '.$b->area.' sqft' : '' }}</div>
                                </td>
                                <td class="align-middle">
                                    <div style="font-weight:600;">{{ $b->client_name ?: $b->user?->name ?: '—' }}</div>
                                    <div style="font-size:11px;color:#94a3b8;">{{ $b->client_phone ?: $b->user?->phone }}</div>
                                    @if(!$b->user_id)
                                    <span style="font-size:10px;padding:1px 6px;background:#fef3c7;color:#92400e;border-radius:4px;font-weight:600;">Walk-in</span>
                                    @endif
                                </td>
                                <td class="align-middle">
                                    @if($b->user)
                                        <div>{{ $b->user->name }}</div>
                                        <div style="font-size:11px;color:#94a3b8;">{{ $b->user->email }}</div>
                                    @else
                                        <span style="font-size:12px;color:#94a3b8;font-style:italic;">No account</span>
                                    @endif
                                </td>
                                <td class="payment-plan-column">
                                    @if($b->paymentPlan)
                                        <span style="background:#fff8ee;color:#c9a96e;padding:2px 8px;border-radius:8px;font-size:11px;font-weight:600;">
                                            <i class="fas fa-file-invoice-dollar mr-1"></i>{{ $b->paymentPlan->name }}
                                        </span>
                                        @if($hasMs)
                                        @php
                                            $msTotal   = $ms->count();
                                            $msPaidCnt = $msPaid->count();
                                            $msPct     = $msTotal > 0 ? round($msPaidCnt/$msTotal*100) : 0;
                                        @endphp
                                        <div style="margin-top:4px;">
                                            <div style="height:5px;background:#e2e8f0;border-radius:3px;overflow:hidden;width:110px;">
                                                <div style="height:100%;width:{{ $msPct }}%;background:{{ $msOverdue->isNotEmpty() ? '#ef4444' : '#22c55e' }};"></div>
                                            </div>
                                            <div style="font-size:10px;color:#64748b;margin-top:2px;">
                                                {{ $msPaidCnt }}/{{ $msTotal }} paid
                                                @if($msOverdue->isNotEmpty())
                                                <span style="color:#ef4444;font-weight:700;"> · {{ $msOverdue->count() }} overdue</span>
                                                @endif
                                            </div>
                                        </div>
                                        @endif
                                    @else
                                        <span style="color:#94a3b8;font-size:12px;">Full payment</span>
                                    @endif
                                </td>
                                <td class="align-middle">
                                    @php
                                        $collectedAmt = $hasMs && $msPaid->isNotEmpty()
                                            ? $msPaid->sum('amount')
                                            : ($b->down_payment_amount ?: $b->price);
                                        $totalAmt = $hasMs && $ms->isNotEmpty()
                                            ? $ms->sum('amount')
                                            : ($b->total_amount ?: $b->price);
                                        $overdueAmt  = $msOverdue->sum('amount');
                                        $pendingAmt  = $msPending->sum('amount');
                                        $outstandAmt = $pendingAmt + $overdueAmt;
                                    @endphp
                                    <div style="font-weight:700;color:{{ $collectedAmt >= $totalAmt ? '#22c55e' : 'inherit' }};">
                                        {{ $currency }}{{ number_format($collectedAmt, 0) }}
                                        @if($collectedAmt >= $totalAmt)
                                        <span style="font-size:10px;font-weight:600;"> ✓ Paid</span>
                                        @endif
                                    </div>
                                    <div style="font-size:11px;color:#94a3b8;">of {{ $currency }}{{ number_format($totalAmt, 0) }}</div>
                                    @if($outstandAmt > 0)
                                    <div style="font-size:11px;margin-top:2px;font-weight:600;color:{{ $overdueAmt > 0 ? '#ef4444' : '#f59e0b' }};">
                                        {{ $overdueAmt > 0 ? '⚠ ' : '' }}Due: {{ $currency }}{{ number_format($outstandAmt, 0) }}
                                    </div>
                                    @endif
                                </td>
                                <td class="align-middle">
                                    @if($txn)
                                    <span class="badge badge-success" style="text-transform:capitalize;">{{ $txn->mode }}</span>
                                    @else
                                    <span class="badge badge-secondary">—</span>
                                    @endif
                                    @if($nextDue)
                                    <div style="font-size:10px;margin-top:3px;color:{{ $nextDue->status==='overdue'?'#ef4444':'#f59e0b' }};">
                                        {{ $nextDue->status==='overdue' ? '⚠ Overdue' : '🕐 Due' }}
                                        {{ \Carbon\Carbon::parse($nextDue->due_date)->format('d M Y') }}
                                    </div>
                                    @endif
                                </td>
                                <td class="align-middle" style="font-size:12px;color:#94a3b8;">
                                    {{ $b->created_at->format('d M Y') }}<br>{{ $b->created_at->format('H:i') }}
                                </td>
                                <td class="align-middle">
                                    <div class="d-flex" style="gap:4px;flex-wrap:wrap;">
                                        <a href="/admin/bookings/{{ $b->id }}" class="btn btn-sm btn-outline-primary" title="View booking">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        @if($hasMs)
                                        <button type="button" class="btn btn-sm btn-outline-warning"
                                                onclick="toggleMs({{ $b->id }})" title="View milestones">
                                            <i class="fas fa-list-ul"></i>
                                        </button>
                                        @endif
                                        @if($b->booking_status !== 'cancelled')
                                        <form method="POST" action="/admin/instant-bookings/{{ $b->id }}"
                                              onsubmit="return confirm('Cancel this booking and release the unit?')" style="margin:0;">
                                            @csrf @method('DELETE')
                                            <button class="btn btn-sm btn-outline-danger" title="Cancel">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>

                            {{-- Expandable milestone row --}}
                            @if($hasMs)
                            <tr id="msRow_{{ $b->id }}" style="display:none;background:#fffdf8;">
                                <td colspan="9" style="padding:0;">
                                    <div style="padding:16px 20px;border-top:2px solid #f0e4cc;">
                                        <div style="font-size:12px;font-weight:700;color:#c9a96e;margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px;">
                                            <i class="fas fa-calendar-alt mr-1"></i>
                                            Payment Milestones — {{ $b->paymentPlan?->name ?? 'Custom Plan' }}
                                        </div>
                                        <div class="row">
                                            @foreach($ms->sortBy('sort_order') as $m)
                                            @php
                                                $mc = match($m->status) {
                                                    'paid'    => '#22c55e',
                                                    'overdue' => '#ef4444',
                                                    'waived'  => '#94a3b8',
                                                    default   => '#f59e0b',
                                                };
                                                $mi = match($m->status) {
                                                    'paid'    => 'fas fa-check-circle',
                                                    'overdue' => 'fas fa-exclamation-circle',
                                                    'waived'  => 'fas fa-minus-circle',
                                                    default   => 'fas fa-clock',
                                                };
                                            @endphp
                                            <div class="col-md-3 col-sm-6 mb-3">
                                                <div style="border:1px solid {{ $mc }}44;border-radius:10px;padding:12px 14px;background:{{ $mc }}0d;">
                                                    <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px;">
                                                        <span style="font-size:10px;font-weight:700;text-transform:uppercase;color:{{ $mc }};background:{{ $mc }}1a;padding:2px 8px;border-radius:20px;">
                                                            <i class="{{ $mi }} mr-1"></i>{{ ucfirst($m->status) }}
                                                        </span>
                                                        <span style="font-size:11px;color:#64748b;">{{ $m->percentage > 0 ? $m->percentage.'%' : '' }}</span>
                                                    </div>
                                                    <div style="font-weight:700;font-size:13px;margin-bottom:3px;">{{ $m->label }}</div>
                                                    <div style="font-size:16px;font-weight:800;color:{{ $mc }};">{{ $currency }}{{ number_format($m->amount, 0) }}</div>
                                                    @if($m->due_date)
                                                    <div style="font-size:11px;color:#64748b;margin-top:4px;">
                                                        <i class="fas fa-calendar mr-1"></i>{{ \Carbon\Carbon::parse($m->due_date)->format('d M Y') }}
                                                        @if($m->status === 'overdue')
                                                        <span style="color:#ef4444;font-weight:600;">({{ \Carbon\Carbon::parse($m->due_date)->diffForHumans() }})</span>
                                                        @elseif($m->status === 'pending')
                                                        <span style="color:#64748b;">(in {{ \Carbon\Carbon::parse($m->due_date)->diffForHumans(['parts'=>1]) }})</span>
                                                        @endif
                                                    </div>
                                                    @endif
                                                    @if($m->paid_at)
                                                    <div style="font-size:10px;color:#22c55e;margin-top:3px;">✓ Paid {{ \Carbon\Carbon::parse($m->paid_at)->format('d M Y') }}</div>
                                                    @endif
                                                    @if(in_array($m->status, ['pending','overdue']))
                                                    <button type="button"
                                                        onclick="openMarkPaid({{ $b->id }},{{ $m->id }},'{{ addslashes($m->label) }}',{{ $m->amount }})"
                                                        style="margin-top:8px;width:100%;padding:5px;border-radius:6px;background:#c9a96e;color:#fff;border:none;font-size:11px;font-weight:700;cursor:pointer;">
                                                        <i class="fas fa-check mr-1"></i>Mark as Paid
                                                    </button>
                                                    @endif
                                                </div>
                                            </div>
                                            @endforeach
                                        </div>
                                        {{-- Summary --}}
                                        @php
                                            $tAmt = $ms->sum('amount');
                                            $pAmt = $msPaid->sum('amount');
                                            $dAmt = $msPending->merge($msOverdue)->sum('amount');
                                            $pPct = $tAmt > 0 ? round($pAmt/$tAmt*100) : 0;
                                        @endphp
                                        <div style="margin-top:8px;padding:10px 14px;background:#f8fafc;border-radius:8px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;">
                                            <div>
                                                <div style="font-size:11px;color:#64748b;margin-bottom:4px;">Payment Progress</div>
                                                <div style="height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden;width:180px;">
                                                    <div style="height:100%;width:{{ $pPct }}%;background:#22c55e;"></div>
                                                </div>
                                                <div style="font-size:11px;color:#64748b;margin-top:2px;">{{ $pPct }}% collected</div>
                                            </div>
                                            <div style="text-align:right;">
                                                <div style="font-size:12px;color:#22c55e;font-weight:700;">Collected: {{ $currency }}{{ number_format($pAmt, 0) }}</div>
                                                @if($dAmt > 0)
                                                <div style="font-size:12px;color:{{ $msOverdue->isNotEmpty() ? '#ef4444' : '#f59e0b' }};font-weight:700;">
                                                    Outstanding: {{ $currency }}{{ number_format($dAmt, 0) }}
                                                </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            @endif

                            @empty
                            <tr>
                                <td colspan="9" class="text-center text-muted py-5">
                                    <i class="fas fa-bolt fa-2x mb-2 d-block" style="opacity:0.2;"></i>
                                    No instant bookings yet. Use the form above to create one.
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            @if($bookings->hasPages())
            <div class="card-footer">{{ $bookings->links() }}</div>
            @endif
        </div>
    </div>

</div>
</div>
</section>

{{-- Fee config data for JS ── passed from controller --}}
<div id="feeConfigData"
     data-config="{{ json_encode($feeConfig) }}"
     style="display:none"></div>

@include('Partials.footer')

{{-- ── Mark Paid Modal ── --}}
<div class="modal fade" id="markPaidModal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header" style="background:linear-gradient(135deg,#1a1a2e,#16213e);border-bottom:1px solid rgba(201,169,110,0.2);">
                <h6 class="modal-title mb-0" style="color:#c9a96e;"><i class="fas fa-check-circle mr-2"></i>Mark Milestone Paid</h6>
                <button type="button" class="close text-white" data-dismiss="modal" style="color:#fff;">&times;</button>
            </div>
            <form method="POST" id="markPaidForm">
                @csrf @method('PATCH')
                <div class="modal-body">
                    <p id="markPaidLabel" style="font-weight:600;font-size:14px;margin-bottom:14px;color:#1e293b;"></p>
                    <div class="form-group">
                        <label style="font-size:12px;font-weight:600;">Payment Mode *</label>
                        <select name="payment_mode" class="form-control form-control-sm" required>
                            <option value="cash">💵 Cash</option>
                            <option value="bank_transfer">🏦 Bank Transfer</option>
                            <option value="cheque">📄 Cheque</option>
                            <option value="manual">✏️ Manual</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label style="font-size:12px;font-weight:600;">Amount ({{ $currency }})</label>
                        <input type="number" name="amount" id="markPaidAmount" class="form-control form-control-sm" step="0.01" min="0">
                        <small class="text-muted" style="font-size:11px;">Leave blank to use the milestone amount.</small>
                    </div>
                    <div class="form-group mb-0">
                        <label style="font-size:12px;font-weight:600;">Notes</label>
                        <input type="text" name="notes" class="form-control form-control-sm" placeholder="Optional reference / remark">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-sm btn-warning" style="color:#fff;font-weight:700;">
                        <i class="fas fa-check mr-1"></i>Confirm Payment
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
.ib-step-label { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#c9a96e;border-bottom:1px solid #f0e4cc;padding-bottom:4px;margin-bottom:12px; }
.ib-label      { font-size:12px;font-weight:600;margin-bottom:4px;display:block; }
.fee-row       { border-top:1px solid #f0e4cc; }
.fee-row td    { padding:5px 4px; }
</style>

<script>
(function () {
    'use strict';

    var CURRENCY  = "{{ $currency }}";
    var PLANS_URL = "/admin/instant-bookings/plans/";
    var csrfToken = (document.querySelector('meta[name="csrf-token"]') || {}).content || '';

    // ── Read fee config injected by controller ────────────────────────────────
    var feeConfigEl  = document.getElementById('feeConfigData');
    var FEE_CONFIG   = feeConfigEl ? JSON.parse(feeConfigEl.dataset.config || '{}') : {};
    var TAX_ENABLED  = FEE_CONFIG.tax_enabled  || false;
    var TAX_RATE     = parseFloat(FEE_CONFIG.tax_rate   || 0);
    var TAX_LABEL    = FEE_CONFIG.tax_label    || 'Tax';
    var TAX_SYSTEM   = FEE_CONFIG.tax_system   || '';
    var TAX_INCL     = FEE_CONFIG.tax_inclusive || false;
    var FEES         = FEE_CONFIG.fees          || {};

    // Current state
    var _unitPrice   = 0;
    var _grandTotal  = 0;
    var _planData    = null; // selected plan object

    // ── Formatting ────────────────────────────────────────────────────────────
    function fmt(n) {
        return CURRENCY + parseFloat(n || 0).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    }
    function fmtR(n) { // rounded, no decimals
        return CURRENCY + Math.round(parseFloat(n || 0)).toLocaleString('en-IN');
    }

    // ── Fee calculator ────────────────────────────────────────────────────────
    function calcFees(unitPrice) {
        function oneFee(cfg) {
            if (!cfg) return 0;
            if (parseFloat(cfg.fixed) > 0) return parseFloat(cfg.fixed);
            if (parseFloat(cfg.rate)  > 0) return unitPrice * parseFloat(cfg.rate) / 100;
            return 0;
        }

        var processing  = oneFee(FEES.processing_fee);
        var stampDuty   = oneFee(FEES.stamp_duty);
        var regFee      = oneFee(FEES.registration_fee);
        var maintenance = oneFee(FEES.maintenance_charge);
        var custom1     = oneFee(FEES.custom_fee1);
        var custom2     = oneFee(FEES.custom_fee2);
        var subtotal    = unitPrice + processing + stampDuty + regFee + maintenance + custom1 + custom2;
        var taxAmount   = 0;

        if (TAX_ENABLED && TAX_RATE > 0) {
            if (TAX_INCL) {
                taxAmount = subtotal - (subtotal / (1 + TAX_RATE / 100));
                subtotal  = subtotal - taxAmount;
            } else {
                taxAmount = subtotal * TAX_RATE / 100;
            }
        }

        return {
            unit_price:         unitPrice,
            processing_fee:     processing,
            stamp_duty:         stampDuty,
            registration_fee:   regFee,
            maintenance_charge: maintenance,
            custom_fee1:        custom1,
            custom_fee2:        custom2,
            subtotal:           subtotal,
            tax_amount:         taxAmount,
            grand_total:        subtotal + taxAmount,
        };
    }

    // ── Render breakdown table ─────────────────────────────────────────────────
    function renderBreakdown(unitPrice, selectedPlan) {
        _unitPrice = unitPrice;
        var b = calcFees(unitPrice);
        _grandTotal = b.grand_total;

        var table = document.getElementById('feeBreakdownTable');
        var wrap  = document.getElementById('feeBreakdownWrap');
        if (!table || !wrap) return;

        function row(label, value, opts) {
            opts = opts || {};
            var style = 'padding:5px 4px;';
            var valStyle = 'padding:5px 4px;text-align:right;font-weight:' + (opts.bold ? '700' : '500') + ';'
                         + (opts.color ? 'color:' + opts.color + ';' : '');
            var trStyle = opts.borderTop ? 'border-top:2px solid #f0e4cc;' : 'border-top:1px solid #f8f0e4;';
            return '<tr style="' + trStyle + '"><td style="' + style + (opts.muted ? 'color:#64748b;' : '') + '">'
                 + label + '</td><td style="' + valStyle + '">' + value + '</td></tr>';
        }

        var rows = '';
        rows += row('Unit Price', fmt(b.unit_price));

        if (b.processing_fee   > 0) rows += row((FEES.processing_fee?.label   || 'Processing Fee'),   fmt(b.processing_fee),   { muted: true });
        if (b.stamp_duty        > 0) rows += row((FEES.stamp_duty?.label        || 'Stamp Duty'),       fmt(b.stamp_duty),        { muted: true });
        if (b.registration_fee  > 0) rows += row((FEES.registration_fee?.label  || 'Registration Fee'), fmt(b.registration_fee),  { muted: true });
        if (b.maintenance_charge> 0) rows += row((FEES.maintenance_charge?.label|| 'Maintenance'),      fmt(b.maintenance_charge), { muted: true });
        if (b.custom_fee1       > 0) rows += row((FEES.custom_fee1?.label        || 'Custom Fee 1'),     fmt(b.custom_fee1),        { muted: true });
        if (b.custom_fee2       > 0) rows += row((FEES.custom_fee2?.label        || 'Custom Fee 2'),     fmt(b.custom_fee2),        { muted: true });

        // Tax row
        if (b.tax_amount > 0) {
            var taxLbl = TAX_LABEL;
            if (TAX_RATE > 0) taxLbl += ' (' + TAX_RATE + '%)';
            if (TAX_SYSTEM) taxLbl += ' <small style="color:#aaa;font-size:10px;">' + TAX_SYSTEM.toUpperCase() + (TAX_INCL ? ' · Incl.' : '') + '</small>';
            rows += row(taxLbl, fmt(b.tax_amount), { color: '#f59e0b', borderTop: true });
        } else if (TAX_ENABLED === false || TAX_RATE === 0) {
            rows += row('Tax', '<span style="color:#94a3b8;font-size:11px;font-style:italic;">Not applicable</span>', { muted: true });
        }

        rows += row('Grand Total', fmt(b.grand_total), { bold: true, color: '#c9a96e', borderTop: true });

        table.innerHTML = '<tbody>' + rows + '</tbody>';
        wrap.style.display = 'block';

        // Update instalment info panel
        updateInstalmentInfo(b, selectedPlan);
    }

    function updateInstalmentInfo(b, plan) {
        var panel = document.getElementById('feeInstalmentsInfo');
        if (!panel) return;

        if (!plan || !plan.milestones || plan.milestones.length === 0) {
            // No plan — full payment due now
            panel.innerHTML = '<div style="font-size:12px;font-weight:700;color:#22c55e;margin-bottom:6px;">💳 Full Payment</div>'
                + '<div style="font-size:20px;font-weight:800;color:#22c55e;">' + fmt(b.grand_total) + '</div>'
                + '<div style="font-size:11px;color:#64748b;margin-top:3px;">Total due now (incl. all taxes &amp; fees)</div>';
            panel.style.display = 'block';

            document.getElementById('amountPaid').value        = b.grand_total.toFixed(2);
            document.getElementById('amountLabel').textContent = '(full amount incl. taxes)';
            document.getElementById('amountHint').textContent  = 'Grand total: ' + fmt(b.grand_total);
            return;
        }

        // Plan — calculate instalment amounts on grand total
        var rows = '<div style="font-size:12px;font-weight:700;color:#1e293b;margin-bottom:8px;">💳 Instalment Schedule (on Grand Total)</div>';
        var firstAmt = 0;

        plan.milestones.forEach(function(m, i) {
            var amt = 0;
            if (m.fixed_amount > 0) {
                amt = m.fixed_amount;
            } else if (m.percentage > 0) {
                amt = b.grand_total * m.percentage / 100;
            }
            if (i === 0) firstAmt = amt;

            var isFirst = i === 0;
            rows += '<div style="display:flex;justify-content:space-between;padding:4px 0;'
                + (i > 0 ? 'border-top:1px solid #d1fae5;' : '') + '">'
                + '<span style="font-size:12px;' + (isFirst ? 'font-weight:700;' : 'color:#065f46;') + '">'
                + (isFirst ? '⭐ ' : '') + m.label + (m.percentage > 0 ? ' (' + m.percentage + '%)' : '') + '</span>'
                + '<span style="font-size:12px;font-weight:700;color:#065f46;">' + fmtR(amt) + '</span>'
                + '</div>';
        });

        rows += '<div style="margin-top:8px;padding-top:8px;border-top:2px solid #22c55e;display:flex;justify-content:space-between;">'
            + '<span style="font-size:12px;font-weight:700;">Total</span>'
            + '<span style="font-size:12px;font-weight:700;color:#c9a96e;">' + fmt(b.grand_total) + '</span>'
            + '</div>';

        panel.innerHTML = rows;
        panel.style.display = 'block';

        // Set amount_paid to first instalment
        document.getElementById('amountPaid').value        = firstAmt.toFixed(2);
        document.getElementById('amountLabel').textContent = '(1st instalment incl. taxes)';
        document.getElementById('amountHint').textContent  = 'Grand total: ' + fmt(b.grand_total) + ' · Down: ' + fmtR(firstAmt);
    }

    // ── Country codes ─────────────────────────────────────────────────────────
    var ALL_CODES = [
        {c:'+91',f:'🇮🇳',n:'India'},{c:'+971',f:'🇦🇪',n:'UAE'},
        {c:'+966',f:'🇸🇦',n:'Saudi Arabia'},{c:'+974',f:'🇶🇦',n:'Qatar'},
        {c:'+965',f:'🇰🇼',n:'Kuwait'},{c:'+973',f:'🇧🇭',n:'Bahrain'},
        {c:'+968',f:'🇴🇲',n:'Oman'},{c:'+1',f:'🇺🇸',n:'USA / Canada'},
        {c:'+44',f:'🇬🇧',n:'UK'},{c:'+61',f:'🇦🇺',n:'Australia'},
        {c:'+65',f:'🇸🇬',n:'Singapore'},{c:'+60',f:'🇲🇾',n:'Malaysia'},
        {c:'+86',f:'🇨🇳',n:'China'},{c:'+81',f:'🇯🇵',n:'Japan'},
        {c:'+49',f:'🇩🇪',n:'Germany'},{c:'+33',f:'🇫🇷',n:'France'},
        {c:'+39',f:'🇮🇹',n:'Italy'},{c:'+34',f:'🇪🇸',n:'Spain'},
        {c:'+7',f:'🇷🇺',n:'Russia'},{c:'+55',f:'🇧🇷',n:'Brazil'},
        {c:'+92',f:'🇵🇰',n:'Pakistan'},{c:'+880',f:'🇧🇩',n:'Bangladesh'},
        {c:'+94',f:'🇱🇰',n:'Sri Lanka'},{c:'+977',f:'🇳🇵',n:'Nepal'},
        {c:'+20',f:'🇪🇬',n:'Egypt'},{c:'+234',f:'🇳🇬',n:'Nigeria'},
        {c:'+27',f:'🇿🇦',n:'South Africa'},{c:'+254',f:'🇰🇪',n:'Kenya'},
        {c:'+62',f:'🇮🇩',n:'Indonesia'},{c:'+63',f:'🇵🇭',n:'Philippines'},
        {c:'+66',f:'🇹🇭',n:'Thailand'},{c:'+84',f:'🇻🇳',n:'Vietnam'},
        {c:'+82',f:'🇰🇷',n:'South Korea'},{c:'+90',f:'🇹🇷',n:'Turkey'},
        {c:'+98',f:'🇮🇷',n:'Iran'},{c:'+964',f:'🇮🇶',n:'Iraq'},
        {c:'+961',f:'🇱🇧',n:'Lebanon'},{c:'+962',f:'🇯🇴',n:'Jordan'},
    ];

    function renderCodes(list) {
        var cur = document.getElementById('walkinCountryCode').value;
        document.getElementById('walkinCodeList').innerHTML = list.map(function (x) {
            var sel = x.c === cur;
            return '<div data-code="' + x.c + '" data-flag="' + x.f + '"'
                + ' style="padding:8px 12px;display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;'
                + (sel ? 'background:#fff8ee;color:#c9a96e;font-weight:600;' : 'color:#333;') + '"'
                + ' onmouseenter="this.style.background=\'#f8f9fa\'" onmouseleave="this.style.background=\'' + (sel ? '#fff8ee' : 'transparent') + '\'">'
                + '<span style="font-size:16px;">' + x.f + '</span>'
                + '<span style="flex:1;">' + x.n + '</span>'
                + '<span style="opacity:.5;font-size:12px;">' + x.c + '</span>'
                + '</div>';
        }).join('');

        Array.prototype.forEach.call(document.getElementById('walkinCodeList').children, function (el) {
            el.addEventListener('click', function () {
                var code = this.dataset.code, flag = this.dataset.flag;
                document.getElementById('walkinCountryCode').value = code;
                document.getElementById('walkinCode').textContent  = code;
                document.getElementById('walkinFlag').textContent  = flag;
                document.getElementById('walkinDd').style.display  = 'none';
                updatePhonePreview();
            });
        });
    }

    window.toggleWalkinDd = function (e) {
        e.stopPropagation();
        var dd = document.getElementById('walkinDd');
        var open = dd.style.display !== 'none';
        dd.style.display = open ? 'none' : 'block';
        if (!open) {
            document.getElementById('walkinCodeSearch').value = '';
            renderCodes(ALL_CODES);
            setTimeout(function () { document.getElementById('walkinCodeSearch').focus(); }, 60);
        }
    };

    window.filterCodes = function (q) {
        var lq = q.trim().toLowerCase();
        renderCodes(lq ? ALL_CODES.filter(function (x) { return x.n.toLowerCase().includes(lq) || x.c.includes(q); }) : ALL_CODES);
    };

    window.updatePhonePreview = function () {
        var code = document.getElementById('walkinCountryCode').value || '+91';
        var num  = (document.getElementById('walkinPhoneNum') || {}).value || '';
        var el   = document.getElementById('phonePreview');
        if (el) el.textContent = num.trim() ? 'Full number: ' + code + num.trim() : '';
    };

    document.addEventListener('click', function () {
        var dd = document.getElementById('walkinDd');
        if (dd) dd.style.display = 'none';
    });

    // ── Client type toggle ────────────────────────────────────────────────────
    window.setClientType = function (type) {
        var isReg = type === 'registered';
        document.getElementById('clientTypeInput').value = type;
        document.getElementById('registeredFields').style.display = isReg ? 'block' : 'none';
        document.getElementById('walkinFields').style.display     = isReg ? 'none'  : 'block';
        document.getElementById('btnRegistered').style.background = isReg ? '#c9a96e' : '#fff';
        document.getElementById('btnRegistered').style.color      = isReg ? '#fff'    : '#64748b';
        document.getElementById('btnWalkin').style.background     = isReg ? '#fff'    : '#c9a96e';
        document.getElementById('btnWalkin').style.color          = isReg ? '#64748b' : '#fff';
        document.getElementById('userSelect').required = isReg;
        var wn = document.getElementById('walkinName');
        var wp = document.getElementById('walkinPhoneNum');
        if (wn) wn.required = !isReg;
        if (wp) wp.required = !isReg;
    };

    // ── Plot selector ─────────────────────────────────────────────────────────
    document.getElementById('plotSelect').addEventListener('change', function () {
        var opt    = this.options[this.selectedIndex];
        var plotId = this.value;
        var price  = parseFloat(opt.dataset.price) || 0;

        // Reset plan selector
        var planSel = document.getElementById('planSelect');
        planSel.innerHTML = '<option value="">— No plan (full / custom payment) —</option>';
        document.getElementById('milestonesPanel').style.display    = 'none';
        document.getElementById('feeBreakdownWrap').style.display   = 'none';
        document.getElementById('feeInstalmentsInfo').style.display = 'none';
        document.getElementById('planHint').textContent = 'Select a unit first to see available plans.';
        _planData = null;

        if (!plotId || !price) {
            document.getElementById('unitPreview').style.display = 'none';
            document.getElementById('amountPaid').value = '';
            document.getElementById('amountLabel').textContent = '';
            return;
        }

        // Unit preview chip
        document.getElementById('unitPreview').style.display    = 'block';
        document.getElementById('unitPreviewText').textContent  = opt.text.split('—')[0].trim();
        document.getElementById('unitPreviewPrice').textContent = CURRENCY + ' ' + price.toLocaleString('en-IN');

        // Show breakdown immediately for full payment (no plan yet)
        renderBreakdown(price, null);

        // Fetch plans
        document.getElementById('planHint').textContent = 'Loading plans…';
        fetch(PLANS_URL + plotId, {
            headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken }
        })
        .then(function (r) { return r.json(); })
        .then(function (data) {
            if (data.plans && data.plans.length > 0) {
                data.plans.forEach(function (plan) {
                    // Recalculate down payment using grand total
                    var b = calcFees(data.plot_price || price);
                    var firstMs = plan.milestones && plan.milestones[0];
                    var downOnGrandTotal = 0;
                    if (firstMs) {
                        if (firstMs.fixed_amount > 0) {
                            downOnGrandTotal = firstMs.fixed_amount;
                        } else if (firstMs.percentage > 0) {
                            downOnGrandTotal = b.grand_total * firstMs.percentage / 100;
                        }
                    }

                    var o = document.createElement('option');
                    o.value = plan.id;
                    o.text  = plan.name + (downOnGrandTotal > 0
                        ? ' — Down: ' + CURRENCY + ' ' + Math.round(downOnGrandTotal).toLocaleString('en-IN') + ' (incl. tax)'
                        : '');
                    o.setAttribute('data-plan', JSON.stringify(plan));
                    planSel.appendChild(o);
                });
                document.getElementById('planHint').textContent = data.plans.length + ' plan(s) available. Amounts shown include all taxes.';
            } else {
                document.getElementById('planHint').textContent = 'No payment plans assigned to this unit.';
            }
        })
        .catch(function () {
            document.getElementById('planHint').textContent = 'Could not load plans.';
        });
    });

    // ── Plan selector ─────────────────────────────────────────────────────────
    document.getElementById('planSelect').addEventListener('change', function () {
        var opt = this.options[this.selectedIndex];

        if (!opt.getAttribute('data-plan')) {
            // No plan selected — full payment
            _planData = null;
            if (_unitPrice > 0) renderBreakdown(_unitPrice, null);
            document.getElementById('milestonesPanel').style.display = 'none';
            return;
        }

        var plan = JSON.parse(opt.getAttribute('data-plan'));
        _planData = plan;

        // Re-render breakdown with this plan's instalment info
        if (_unitPrice > 0) renderBreakdown(_unitPrice, plan);

        // Milestone schedule table
        if (plan.milestones && plan.milestones.length > 0) {
            var b    = calcFees(_unitPrice);
            var rows = plan.milestones.map(function (m, i) {
                var amt = 0;
                if (m.fixed_amount > 0) {
                    amt = m.fixed_amount;
                } else if (m.percentage > 0) {
                    amt = b.grand_total * m.percentage / 100; // ← on grand total
                }
                var amtTxt = CURRENCY + ' ' + Math.round(amt).toLocaleString('en-IN')
                    + (m.percentage > 0 ? ' (' + m.percentage + '%)' : '');
                var due    = m.due_date || (m.due_after_days ? m.due_after_days + 'd after booking' : '—');
                var rs     = i === 0 ? 'background:#fffdf8;font-weight:700;' : '';
                return '<tr style="border-top:1px solid #f0e4cc;' + rs + '">'
                    + '<td style="padding:5px 8px;">' + (i === 0 ? '⭐ ' : '') + m.label + '</td>'
                    + '<td style="padding:5px 8px;text-align:right;">' + (m.percentage > 0 ? m.percentage + '%' : '—') + '</td>'
                    + '<td style="padding:5px 8px;text-align:right;color:#c9a96e;font-weight:600;">' + amtTxt + '</td>'
                    + '<td style="padding:5px 8px;color:#94a3b8;">' + due + '</td>'
                    + '</tr>';
            }).join('');

            document.getElementById('milestonesContent').innerHTML =
                '<table style="width:100%;font-size:12px;border-collapse:collapse;">'
                + '<thead><tr style="background:#f0e4cc33;">'
                + '<th style="padding:4px 8px;text-align:left;">Milestone</th>'
                + '<th style="padding:4px 8px;text-align:right;">%</th>'
                + '<th style="padding:4px 8px;text-align:right;">Amount <small style="color:#c9a96e;font-size:9px;">incl. tax</small></th>'
                + '<th style="padding:4px 8px;text-align:left;">Due</th>'
                + '</tr></thead><tbody>' + rows + '</tbody></table>';
            document.getElementById('milestonesPanel').style.display = 'block';
        } else {
            document.getElementById('milestonesPanel').style.display = 'none';
        }
    });

    // ── Registered user auto-fill ─────────────────────────────────────────────
    document.getElementById('userSelect').addEventListener('change', function () {
        var opt = this.options[this.selectedIndex];
        document.getElementById('clientName').value  = opt.dataset.name  || '';
        document.getElementById('clientPhone').value = opt.dataset.phone || '';
        document.getElementById('clientEmail').value = opt.dataset.email || '';
    });

    // ── Milestone expand toggle ───────────────────────────────────────────────
    window.toggleMs = function (id) {
        var row = document.getElementById('msRow_' + id);
        if (row) row.style.display = row.style.display === 'none' ? 'table-row' : 'none';
    };

    // ── Mark milestone paid modal ─────────────────────────────────────────────
    window.openMarkPaid = function (bookingId, milestoneId, label, amount) {
        document.getElementById('markPaidForm').action   = '/admin/instant-bookings/' + bookingId + '/milestone/' + milestoneId;
        document.getElementById('markPaidLabel').textContent = label + ' — ' + CURRENCY + ' ' + Number(amount).toLocaleString('en-IN');
        document.getElementById('markPaidAmount').value  = Math.round(amount);
        $('#markPaidModal').modal('show');
    };

    // ── Form submit validation ────────────────────────────────────────────────
    window.confirmBooking = function () {
        var type   = document.getElementById('clientTypeInput').value;
        var unit   = document.getElementById('plotSelect').value;
        var amount = parseFloat(document.getElementById('amountPaid').value);

        if (!unit) { alert('Please select a unit.'); return false; }
        if (!amount || amount <= 0) { alert('Please enter a valid amount paid.'); return false; }

        if (type === 'registered') {
            if (!document.getElementById('userSelect').value) {
                alert('Please select a registered user.'); return false;
            }
        } else {
            var name = (document.getElementById('walkinName').value || '').trim();
            var num  = (document.getElementById('walkinPhoneNum').value || '').trim();
            if (!name) { alert('Please enter the client\'s full name.'); return false; }
            if (!num)  { alert('Please enter the client\'s phone number.'); return false; }
            var code = document.getElementById('walkinCountryCode').value || '+91';
            document.getElementById('walkinPhone').value = code + num;
        }

        // Confirm with grand total
        if (_grandTotal > 0) {
            var msg = 'Confirm instant booking?\n\n'
                + 'Unit: ' + (document.getElementById('unitPreviewText').textContent || '') + '\n'
                + 'Grand Total (incl. taxes): ' + CURRENCY + ' ' + Math.round(_grandTotal).toLocaleString('en-IN') + '\n'
                + 'Amount collecting now: ' + CURRENCY + ' ' + Math.round(amount).toLocaleString('en-IN');
            if (!confirm(msg)) return false;
        }

        return true;
    };

}());
</script>