<!-- Add Customer Modal -->
<div class="modal fade" id="addCustomerModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content shadow-lg border-0">
            <div class="modal-header bg-gradient-success text-white py-2">
                <h6 class="modal-title mb-0"><i class="fas fa-user-plus"></i> <span data-translate="newCustomerTitle">New Customer</span></h6>
                <button type="button" class="close text-white" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body p-3" style="max-height: 70vh; overflow-y: auto;">
                <form id="addCustomerForm">
                    <!-- Basic Information -->
                    <div class="row">
                        <div class="col-md-6 mb-2">
                            <label class="small font-weight-bold mb-1"><i class="fas fa-user text-primary"></i> <span data-translate="customerNameLabel">Customer Name</span> <span class="text-danger" data-translate="required">*</span></label>
                            <input type="text" class="form-control form-control-sm" id="newCustomerName" required>
                        </div>
                        <div class="col-md-6 mb-2">
                            <label class="small font-weight-bold mb-1"><i class="fas fa-phone text-success"></i> <span data-translate="phoneLabel">Phone Number</span> <span class="text-danger" data-translate="required">*</span></label>
                            <input type="text" class="form-control form-control-sm" id="newCustomerPhone" required>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-2">
                            <label class="small font-weight-bold mb-1"><i class="fas fa-user-tie text-info"></i> <span data-translate="contactPerson">Contact Person</span></label>
                            <input type="text" class="form-control form-control-sm" id="newContactPerson">
                        </div>
                        <div class="col-md-6 mb-2">
                            <label class="small font-weight-bold mb-1"><i class="fas fa-envelope text-warning"></i> <span data-translate="email">Email</span></label>
                            <input type="email" class="form-control form-control-sm" id="newCustomerEmail">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-3 mb-2">
                            <label class="small font-weight-bold mb-1"><i class="fas fa-users text-secondary"></i> <span data-translate="customerType">Customer Type</span></label>
                            <select class="form-control form-control-sm" id="newCustomerType">
                                <option value="Individual" data-translate="individual">Individual</option>
                                <option value="Business" data-translate="business">Business</option>
                                <option value="Retailer" data-translate="retailer">Retailer</option>
                                <option value="Wholesaler" data-translate="wholesaler">Wholesaler</option>
                            </select>
                        </div>
                        <div class="col-md-9 mb-2">
                            <label class="small font-weight-bold mb-1"><i class="fas fa-map-marker-alt text-danger"></i> <span data-translate="addressLabel">Address</span></label>
                            <input type="text" class="form-control form-control-sm" id="newCustomerAddress">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4 mb-2">
                            <label class="small font-weight-bold mb-1"><i class="fas fa-city text-primary"></i> <span data-translate="city">City</span></label>
                            <input type="text" class="form-control form-control-sm" id="newCustomerCity">
                        </div>
                        <div class="col-md-4 mb-2">
                            <label class="small font-weight-bold mb-1"><i class="fas fa-map text-info"></i> <span data-translate="state">State</span></label>
                            <input type="text" class="form-control form-control-sm" id="newCustomerState">
                        </div>
                        <div class="col-md-4 mb-2">
                            <label class="small font-weight-bold mb-1"><i class="fas fa-mail-bulk text-secondary"></i> <span data-translate="pincode">Pin Code</span></label>
                            <input type="text" class="form-control form-control-sm" id="newCustomerPinCode" maxlength="10">
                        </div>
                    </div>

                    <!-- Tax & Business Details -->
                    <div class="row mt-2 pt-2" style="border-top: 1px dashed #dee2e6;">
                        <div class="col-md-6 mb-2">
                            <label class="small font-weight-bold mb-1"><i class="fas fa-file-invoice text-success"></i> <span data-translate="gstNumber">GST Number</span></label>
                            <input type="text" class="form-control form-control-sm text-uppercase" id="newCustomerGST" maxlength="15" placeholder="33XXXX7777XXXU">
                        </div>
                        <div class="col-md-6 mb-2">
                            <label class="small font-weight-bold mb-1"><i class="fas fa-id-card text-warning"></i> <span data-translate="panNumber">PAN Number</span></label>
                            <input type="text" class="form-control form-control-sm text-uppercase" id="newCustomerPAN" maxlength="10" placeholder="PMXXXXXX7H">
                        </div>
                    </div>
                    
                    <!-- Credit Information -->
                    <div class="row mt-2 pt-2" style="border-top: 1px dashed #dee2e6;">
                        <div class="col-md-6 mb-2">
                            <label class="small font-weight-bold mb-1"><i class="fas fa-rupee-sign text-danger"></i> <span data-translate="creditLimit">Credit Limit (₹)</span></label>
                            <input type="number" class="form-control form-control-sm" id="newCreditLimit" value="0.00" step="0.01" min="0">
                        </div>
                        <div class="col-md-6 mb-2">
                            <label class="small font-weight-bold mb-1"><i class="fas fa-calendar-alt text-primary"></i> <span data-translate="creditDays">Credit Days</span></label>
                            <input type="number" class="form-control form-control-sm" id="newCreditDays" value="0" min="0">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer py-2 bg-light">
                <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">
                    <i class="fas fa-times"></i> <span data-translate="close">Close</span>
                </button>
                <button type="button" class="btn btn-sm btn-success" id="btnSaveCustomer">
                    <i class="fas fa-save"></i> <span data-translate="save">Save Customer</span>
                </button>
            </div>
        </div>
    </div>
</div>
