@once
{{-- Outside document forms (see garage.layouts.app). Nested required fields block parent form submit. --}}
<div class="modal fade" id="grgCvQuickAddModal" tabindex="-1" aria-labelledby="grgCvQuickAddModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header py-2">
                <h5 class="modal-title" id="grgCvQuickAddModalLabel">
                    <i class="bi bi-person-plus me-2 text-primary"></i><span id="grgCvQuickAddModalTitle">Add customer</span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body pt-2">
                {{-- Walk-in tab kept for future use --}}
                <ul class="nav nav-pills nav-fill small mb-3 d-none" id="grgCvQuickAddTabs" role="tablist" aria-hidden="true">
                    <li class="nav-item d-none" role="presentation" id="grgCvTabWalkinWrap">
                        <button class="nav-link" id="grgCvTabWalkin" data-bs-toggle="pill" data-bs-target="#grgCvPaneWalkin" type="button" role="tab">Walk-in</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="grgCvTabCustomer" data-bs-toggle="pill" data-bs-target="#grgCvPaneCustomer" type="button" role="tab">Customer</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="grgCvTabVehicle" data-bs-toggle="pill" data-bs-target="#grgCvPaneVehicle" type="button" role="tab">Vehicle</button>
                    </li>
                </ul>

                <div class="tab-content" id="grgCvQuickAddTabContent">
                    <div class="tab-pane fade d-none" id="grgCvPaneWalkin" role="tabpanel">
                        <p class="small text-muted mb-2">New customer with vehicle — ready to add services on this document.</p>
                        <div id="grgCvWalkinForm" data-grg-cv-quick-form autocomplete="off">
                            <div class="mb-2">
                                <label class="form-label small mb-0">Customer name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control form-control-sm" name="name" required placeholder="e.g. Mr Ahsan">
                            </div>
                            <div class="mb-2">
                                <label class="form-label small mb-0">Phone</label>
                                <input type="text" class="form-control form-control-sm" name="phone" placeholder="0300…">
                            </div>
                            <div class="mb-2">
                                <label class="form-label small mb-0">Plate / registration <span class="text-danger">*</span></label>
                                <input type="text" class="form-control form-control-sm text-uppercase" name="registration_number" required placeholder="LEB 582">
                            </div>
                            <div class="row g-2">
                                <div class="col-6">
                                    <label class="form-label small mb-0">Make</label>
                                    <input type="text" class="form-control form-control-sm" name="make" placeholder="Toyota">
                                </div>
                                <div class="col-6">
                                    <label class="form-label small mb-0">Model</label>
                                    <input type="text" class="form-control form-control-sm" name="model" placeholder="Corolla">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade show active" id="grgCvPaneCustomer" role="tabpanel">
                        <p class="small text-muted mb-2">Add customer only; pick or add a vehicle next.</p>
                        <div id="grgCvCustomerForm" data-grg-cv-quick-form autocomplete="off">
                            <div class="mb-2">
                                <label class="form-label small mb-0">Customer name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control form-control-sm" name="name" required>
                            </div>
                            <div class="mb-2">
                                <label class="form-label small mb-0">Phone</label>
                                <input type="text" class="form-control form-control-sm" name="phone">
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="grgCvPaneVehicle" role="tabpanel">
                        <p class="small text-muted mb-2" id="grgCvVehicleHint">Select a customer on the form first, or choose below.</p>
                        <div id="grgCvVehicleForm" data-grg-cv-quick-form autocomplete="off">
                            <div class="mb-2">
                                <label class="form-label small mb-0">Customer <span class="text-danger">*</span></label>
                                <select class="form-select form-select-sm" name="customer_ledger_id" id="grgCvVehicleCustomer" required>
                                    <option value="">— Select customer —</option>
                                </select>
                            </div>
                            <div class="mb-2">
                                <label class="form-label small mb-0">Plate / registration <span class="text-danger">*</span></label>
                                <input type="text" class="form-control form-control-sm text-uppercase" name="registration_number" required>
                            </div>
                            <div class="row g-2">
                                <div class="col-6">
                                    <label class="form-label small mb-0">Make</label>
                                    <input type="text" class="form-control form-control-sm" name="make">
                                </div>
                                <div class="col-6">
                                    <label class="form-label small mb-0">Model</label>
                                    <input type="text" class="form-control form-control-sm" name="model">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="grgCvQuickAddError" class="alert alert-danger py-2 small d-none mb-0 mt-2" role="alert"></div>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-sm btn-primary" id="grgCvQuickAddSubmit">
                    <i class="bi bi-check-lg me-1"></i>Save &amp; select
                </button>
            </div>
        </div>
    </div>
</div>
@endonce