{{-- Usage: <x-quick-add-supplier :target-select-id="'supplier_id'" /> --}}

<div class="modal fade" id="quickAddSupplierModal" tabindex="-1" aria-labelledby="quickAddSupplierLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="border-radius:14px;border:none;">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-700" id="quickAddSupplierLabel">
                    <i class="bi bi-truck me-2 text-success"></i>Quick Add Supplier
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="quickSupplierAlert" class="alert d-none mb-3"></div>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Name <span class="text-danger">*</span></label>
                        <input type="text" id="qs_name" class="form-control" placeholder="Supplier contact name" autocomplete="off">
                        <div class="invalid-feedback" id="qs_name_err"></div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Phone <span class="text-danger">*</span></label>
                        <input type="text" id="qs_phone" class="form-control" placeholder="01XXXXXXXXX" autocomplete="off">
                        <div class="invalid-feedback" id="qs_phone_err"></div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Email</label>
                        <input type="email" id="qs_email" class="form-control" placeholder="supplier@email.com" autocomplete="off">
                        <div class="invalid-feedback" id="qs_email_err"></div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Opening Balance</label>
                        <div class="input-group">
                            <span class="input-group-text">৳</span>
                            <input type="number" id="qs_balance" class="form-control" value="0" min="0" step="0.01">
                        </div>
                    </div>
                    <div class="col-12">
                        <label class="form-label fw-semibold">Address</label>
                        <textarea id="qs_address" class="form-control" rows="2" placeholder="Supplier address (optional)"></textarea>
                    </div>
                    <div class="col-12">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="qs_active" checked>
                            <label class="form-check-label fw-semibold" for="qs_active">Active</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" id="quickSupplierSaveBtn" onclick="quickSaveSupplier()">
                    <span id="quickSupplierBtnText"><i class="bi bi-check-circle me-1"></i>Save Supplier</span>
                    <span id="quickSupplierBtnSpinner" class="spinner-border spinner-border-sm d-none"></span>
                </button>
            </div>
        </div>
    </div>
</div>