<div class="modal fade" id="modal-quick-client" tabindex="-1" aria-labelledby="modalQuickClientLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered billing-quick-client-dialog">
        <div class="modal-content billing-quick-client-modal">
            <div class="modal-header billing-quick-client-modal__header flex-shrink-0">
                <div class="billing-quick-client-modal__header-main">
                    <div class="billing-quick-client-modal__header-icon" aria-hidden="true">
                        <i class="ri-user-add-line"></i>
                    </div>
                    <div class="billing-quick-client-modal__header-text">
                        <h5 class="modal-title" id="modalQuickClientLabel">Add new client</h5>
                        <p class="billing-quick-client-modal__subtitle">Quick add while creating invoice or quote</p>
                    </div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <form id="form-quick-client" class="billing-quick-client-form">
                <div class="modal-body billing-quick-client-modal__body">
                    <div id="quick-client-errors" class="alert alert-danger d-none small py-2 mb-2"></div>

                    {{-- Essentials — always visible --}}
                    <div class="billing-quick-client-section">
                        <div class="billing-quick-client-section__title">
                            <i class="ri-building-2-line"></i> Client details
                        </div>
                        <div class="row g-2">
                            <div class="col-12">
                                <label class="form-label form-label-sm">Company name <span class="text-danger">*</span></label>
                                <input type="text" name="name" class="form-control form-control-sm" required autofocus placeholder="e.g. Acme Pvt Ltd">
                            </div>
                            <div class="col-sm-6">
                                <label class="form-label form-label-sm">Phone</label>
                                <input type="text" name="phone" class="form-control form-control-sm" placeholder="Mobile or landline">
                            </div>
                            <div class="col-sm-6">
                                <label class="form-label form-label-sm">Email</label>
                                <input type="email" name="email" class="form-control form-control-sm" placeholder="billing@company.com">
                            </div>
                        </div>
                    </div>

                    {{-- Address — important for place of supply --}}
                    <div class="billing-quick-client-section">
                        <div class="billing-quick-client-section__title">
                            <i class="ri-map-pin-line"></i> Billing address
                            <span class="text-muted fw-normal small">(used for place of supply)</span>
                        </div>
                        <div class="row g-2">
                            <div class="col-12">
                                <label class="form-label form-label-sm">Street address</label>
                                <input type="text" name="billing_address_line1" class="form-control form-control-sm" placeholder="Building, street, area">
                                <input type="hidden" name="billing_address_line2" value="">
                            </div>
                            <div class="col-sm-6">
                                <label class="form-label form-label-sm">State <span class="text-danger">*</span></label>
                                <select name="state" class="form-select form-select-sm" id="quick_state" required>
                                    <option value="">Select state</option>
                                </select>
                            </div>
                            <div class="col-sm-6">
                                <label class="form-label form-label-sm">City</label>
                                <input type="text" name="city" class="form-control form-control-sm" placeholder="City">
                            </div>
                            <div class="col-sm-6">
                                <label class="form-label form-label-sm">PIN code</label>
                                <input type="text" name="pincode" class="form-control form-control-sm" maxlength="10" placeholder="PIN">
                            </div>
                            <div class="col-sm-6">
                                <label class="form-label form-label-sm">Country</label>
                                <select name="country" class="form-select form-select-sm" id="quick_country"></select>
                            </div>
                        </div>
                    </div>

                    {{-- Optional sections (accordion) --}}
                    <div class="accordion billing-quick-client-accordion" id="quickClientAccordion">
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#qcTax" aria-expanded="false">
                                    <i class="ri-percent-line me-2"></i> Tax &amp; GST <span class="text-muted fw-normal ms-1">(optional)</span>
                                </button>
                            </h2>
                            <div id="qcTax" class="accordion-collapse collapse" data-bs-parent="#quickClientAccordion">
                                <div class="accordion-body pt-0">
                                    <div class="row g-2">
                                        <div class="col-12">
                                            <label class="form-label form-label-sm">GST treatment</label>
                                            <select name="gst_treatment" class="form-select form-select-sm" id="quick_gst_treatment">
                                                <option value="">Select treatment</option>
                                            </select>
                                        </div>
                                        <div class="col-12">
                                            <label class="form-label form-label-sm">GSTIN</label>
                                            <div class="input-group input-group-sm">
                                                <input type="text" name="gstin" id="quick_gstin" class="form-control" maxlength="15" placeholder="15-character GSTIN">
                                                <button type="button" class="btn btn-outline-secondary" id="quick-btn-fetch-gstin">Fetch</button>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <label class="form-label form-label-sm">PAN</label>
                                            <input type="text" name="pan" class="form-control form-control-sm" maxlength="10">
                                        </div>
                                        <div class="col-6">
                                            <label class="form-label form-label-sm">Currency</label>
                                            <select name="currency" class="form-select form-select-sm" id="quick_currency"></select>
                                        </div>
                                        <div class="col-12 d-flex flex-wrap gap-3 pt-1">
                                            <div class="form-check form-check-sm">
                                                <input class="form-check-input" type="checkbox" name="also_use_as_vendor" value="1" id="quick_also_vendor">
                                                <label class="form-check-label small" for="quick_also_vendor">Also use as vendor</label>
                                            </div>
                                            <div class="form-check form-check-sm">
                                                <input class="form-check-input" type="checkbox" name="client_wise_item_price" value="1" id="quick_client_price">
                                                <label class="form-check-label small" for="quick_client_price">Client-wise item price</label>
                                            </div>
                                        </div>
                                    </div>
                                        <input type="hidden" name="tan" value="">
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#qcContact" aria-expanded="false">
                                    <i class="ri-user-line me-2"></i> Contact person <span class="text-muted fw-normal ms-1">(optional)</span>
                                </button>
                            </h2>
                            <div id="qcContact" class="accordion-collapse collapse" data-bs-parent="#quickClientAccordion">
                                <div class="accordion-body pt-0">
                                    <div class="row g-2">
                                        <div class="col-12">
                                            <label class="form-label form-label-sm">Name</label>
                                            <input type="text" name="contact_person" class="form-control form-control-sm">
                                        </div>
                                        <div class="col-6">
                                            <label class="form-label form-label-sm">Phone</label>
                                            <input type="text" name="contact_phone" class="form-control form-control-sm">
                                        </div>
                                        <div class="col-6">
                                            <label class="form-label form-label-sm">Email</label>
                                            <input type="email" name="contact_email" class="form-control form-control-sm">
                                        </div>
                                    </div>
                                    <div id="quick-extra-contacts" class="mt-2"></div>
                                    <button type="button" class="btn btn-link btn-sm px-0 mt-1" id="quick-btn-add-contact">
                                        <i class="ri-add-line"></i> Add another contact
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#qcShipping" aria-expanded="false">
                                    <i class="ri-truck-line me-2"></i> Shipping address <span class="text-muted fw-normal ms-1">(optional)</span>
                                </button>
                            </h2>
                            <div id="qcShipping" class="accordion-collapse collapse" data-bs-parent="#quickClientAccordion">
                                <div class="accordion-body pt-0">
                                    <div class="form-check form-check-sm mb-2">
                                        <input class="form-check-input" type="checkbox" name="has_shipping_address" value="1" id="quick_has_shipping">
                                        <label class="form-check-label small" for="quick_has_shipping">Different from billing address</label>
                                    </div>
                                    <div id="quick-shipping-fields" class="d-none">
                                        <div class="row g-2">
                                            <div class="col-12">
                                                <input type="text" name="shipping_address_line1" class="form-control form-control-sm" placeholder="Street address">
                                                <input type="hidden" name="shipping_address_line2" value="">
                                            </div>
                                            <div class="col-6">
                                                <select name="shipping_state" class="form-select form-select-sm" id="quick_shipping_state">
                                                    <option value="">State</option>
                                                </select>
                                            </div>
                                            <div class="col-6">
                                                <input type="text" name="shipping_city" class="form-control form-control-sm" placeholder="City">
                                            </div>
                                            <div class="col-6">
                                                <input type="text" name="shipping_pincode" class="form-control form-control-sm" placeholder="PIN">
                                            </div>
                                            <div class="col-6">
                                                <select name="shipping_country" class="form-select form-select-sm" id="quick_shipping_country"></select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer billing-quick-client-modal__footer flex-shrink-0">
                    <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success btn-sm">
                        <i class="ri-check-line"></i> Save client
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
