<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
  body .modal {
    width: 850px;
    margin-left: -375px;
  }

  .container {
    max-width: 1000px;
    margin: 0 auto;
  }

  .card {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    margin-bottom: 2rem;
    border: none;
    overflow: hidden;
  }

  .card-header {
    background: linear-gradient(135deg, #3498db, #2c3e50);
    color: white;
    padding: 1.8rem;
    text-align: center;
  }

  .card-body {
    padding: 2.5rem;
  }

  .form-section {
    background-color: #ffffff;
    padding: 1.8rem;
    border-radius: 10px;
    margin-bottom: 1.8rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border-left: 4px solid #3498db;
  }

  .form-section h5 {
    color: #2c3e50;
    border-bottom: 2px solid #ecf0f1;
    padding-bottom: 0.8rem;
    margin-bottom: 1.8rem;
    font-weight: 600;
  }

  .step-indicator {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2.5rem;
    position: relative;
  }

  .step {
    text-align: center;
    flex: 1;
    position: relative;
    z-index: 2;
  }

  .step-number {
    width: 45px;
    height: 45px;
    background-color: #bdc3c7;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.8rem;
    font-weight: bold;
    font-size: 1.2rem;
    transition: all 0.3s ease;
  }

  .step.active .step-number {
    background-color: #3498db;
    box-shadow: 0 0 0 8px rgba(52, 152, 219, 0.2);
    transform: scale(1.1);
  }

  .step.completed .step-number {
    background-color: #2ecc71;
    box-shadow: 0 0 0 8px rgba(46, 204, 113, 0.2);
  }

  .step-title {
    font-weight: 600;
    color: #7f8c8d;
    font-size: 0.9rem;
  }

  .step.active .step-title {
    color: #3498db;
  }

  .step-line {
    position: absolute;
    top: 22px;
    left: 0;
    right: 0;
    height: 3px;
    background-color: #ecf0f1;
    z-index: 1;
  }

  .step:first-child .step-line {
    left: 50%;
    right: 0;
  }

  .step:last-child .step-line {
    left: 0;
    right: 50%;
  }

  .required-field::after {
    content: " *";
    color: #e74c3c;
  }

  .btn-primary {
    background: linear-gradient(135deg, #3498db, #2980b9);
    border: none;
    padding: 12px 30px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
  }

  .btn-primary:hover {
    background: linear-gradient(135deg, #2980b9, #3498db);
    transform: translateY(-3px);
    box-shadow: 0 7px 14px rgba(52, 152, 219, 0.3);
  }

  .btn-secondary {
    background: linear-gradient(135deg, #95a5a6, #7f8c8d);
    border: none;
    padding: 12px 30px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
  }

  .btn-secondary:hover {
    background: linear-gradient(135deg, #7f8c8d, #95a5a6);
    transform: translateY(-3px);
    box-shadow: 0 7px 14px rgba(149, 165, 166, 0.3);
  }

  .asset-item {
    margin-bottom: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
  }

  .document-item:hover {
    background: #e9ecef;
    transform: translateX(5px);
  }

  .upload-status {
    margin-top: 10px;
    font-size: 14px;
  }

  .progress {
    height: 8px;
    margin-top: 10px;
  }

  .document-uploaded {
    border-left: 4px solid #2ecc71;
  }

  .asset-item:hover {
    background: #e9ecef;
    transform: translateX(5px);
  }

  .bank-table {
    margin-top: 20px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  }

  .section-title {
    color: #2c3e50;
    border-bottom: 3px solid #3498db;
    padding-bottom: 12px;
    margin-bottom: 25px;
    font-weight: 700;
  }

  .success-message {
    display: none;
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    margin-top: 20px;
  }

  .upload-btn {
    margin-top: 10px;
  }

  .bank-table th {
    background-color: #3498db;
    color: white;
    font-weight: 600;
    padding: 1rem;
  }

  .bank-table td {
    padding: 1rem;
    vertical-align: middle;
  }

  .section-title {
    color: #2c3e50;
    border-bottom: 3px solid #3498db;
    padding-bottom: 12px;
    margin-bottom: 25px;
    font-weight: 700;
  }

  .form-control {
    padding: 5px 15px;
    border-radius: 8px;
    border: 2px solid #e1e8ed;
    transition: all 0.3s ease;
  }

  .form-control:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.2);
  }

  .input-group-text {
    background-color: #e1e8ed;
    border: 2px solid #e1e8ed;
    font-weight: 600;
  }

  .form-check-input:checked {
    background-color: #3498db;
    border-color: #3498db;
  }

  .add-bank-btn {
    border-radius: 8px;
    margin-top: 15px;
    transition: all 0.3s ease;
  }

  .add-bank-btn:hover {
    transform: translateY(-2px);
  }

  .form-step {
    display: none;
  }

  .form-step.active {
    display: block;
  }

  .success-message {
    display: none;
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    margin-top: 20px;
  }

  .edit-mode-banner {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 600;
  }
  .bank-row,.loan-row{
    margin-top: 10px;
  }
</style>


<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  <h4 class="modal-title"><i class="fas fa-user-plus me-2"></i>Customer Registration</h4>
</div>
<div class="modal-body" style="padding: 5px;">
  <div id="error"></div>
  <div class="card">

    <div class="card-body">
      <!-- Edit Mode Banner -->
      <div id="editModeBanner" class="edit-mode-banner" style="display: none;">
        <i class="fas fa-edit me-2"></i>Editing Existing Customer
      </div>

      <!-- Step Indicator -->
      <div class="step-indicator">
        <div class="step active" id="step1-indicator">
          <div class="step-number">1</div>
          <div class="step-title">Personal Info</div>
          <div class="step-line"></div>
        </div>
        <div class="step" id="step2-indicator">
          <div class="step-number">2</div>
          <div class="step-title">Business Information</div>
          <div class="step-line"></div>
        </div>
        <div class="step" id="step3-indicator">
          <div class="step-number">3</div>
          <div class="step-title">Documents</div>
        </div>
      </div>

      <!-- Personal Information Form -->
      <form id="personalInfoForm" class="form-step active">
        <input type="hidden" value="<?= $cus_id; ?>" id="customer_id" name="customer_id">
        <h3 class="section-title"><i class="fas fa-user me-2"></i>Personal Information</h3>

        <div class="row mb-4">
          <div class="col-md-6">
            <div class="form-group mb-4">
              <label for="title" class="form-label">Title</label>
              <select class="form-control" id="title" name="title">
                <option value="">Select</option>
                <option value="Mr">Mr</option>
                <option value="Mrs">Mrs</option>
                <option value="Miss">Miss</option>
              </select>
            </div>



            <div class="form-group mb-4">
              <label for="date_of_birth" class="form-label">Date of Birth</label>
              <input type="date" class="form-control" id="date_of_birth" autocomplete="off" name="date_of_birth">
            </div>

            <div class="form-group mb-4">
              <label for="nic" class="form-label required-field">NIC</label>
              <input type="text" class="form-control" id="nic" name="nic" >
            </div>
            <div class="form-group mb-4">
              <label for="mobile" class="form-label required-field">Mobile 01</label>
              <input type="tel" class="form-control" id="mobile" name="mobile" >
            </div>
          </div>

          <div class="col-md-6">

            <div class="form-group mb-4">
              <label for="cus_code" class="form-label required-field">Code</label>
              <input type="text" class="form-control" id="cus_code" name="cus_code" required>
            </div>
            <div class="form-group mb-4">
              <label for="full_name" class="form-label required-field">Full Name</label>
              <input type="text" class="form-control" id="full_name" name="full_name" required>
            </div>


            <div class="form-group mb-4">
              <label for="passport_number" class="form-label">Passport Number</label>
              <input type="text" class="form-control" id="passport_number" name="passport_number">
            </div>
            <div class="form-group mb-4">
              <label for="nic_issue_date" class="form-label">NIC Issue Date</label>
              <input type="date" class="form-control" id="nic_issue_date" autocomplete="off" name="nic_issue_date">
            </div>


            <div class="form-group mb-4">
              <label for="mobile2" class="form-label">Mobile 02</label>
              <input type="tel" class="form-control" id="mobile2" name="mobile2">
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-6">
            <div class="form-group mb-4">
              <label for="email" class="form-label">Email Address</label>
              <input type="email" class="form-control" id="email" name="email">
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group mb-4">
              <label for="home_phone" class="form-label">Home Phone</label>
              <input type="tel" class="form-control" id="home_phone" name="home_phone">
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-6">
            <div class="form-group mb-4">
              <label for="permanent_address" class="form-label">Permanent Address</label>
              <textarea class="form-control" id="permanent_address" name="permanent_address" rows="3" ></textarea>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group mb-4">
              <label for="correspondent_address_personal" class="form-label">Correspondent Address</label>
              <textarea class="form-control" id="correspondent_address_personal" name="correspondent_address_personal" rows="3"></textarea>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-6">
            <div class="form-group mb-4">
              <label for="position_held" class="form-label">Position Held</label>
              <select class="form-control" id="position_held" name="position_held">
                <option value="Proprietor">Proprietor</option>
                <option value="Partner">Partner</option>
                <option value="Director">Director</option>
              </select>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group mb-4">
              <label for="status_residential_address" class="form-label">Status Of Residential Address</label>
              <select class="form-control" id="status_residential_address" name="status_residential_address">
                <option value="">Select</option>
                <option value="Owner">Owner</option>
                <option value="Lease">Lease</option>
                <option value="Parents">Parents</option>
              </select>
            </div>
          </div>
          <!-- Assets Section -->
          <div class="form-section row">
            <h5><i class="fas fa-landmark me-2"></i>Applications Ownership of wealth and estimated Value</h5>

            <div class="asset-item col-md-3">

              <div class="input-group mt-2">
                <input type="text" class="form-control" id="residential_property_value" name="residential_property_value" placeholder="Residential Property">
              </div>
            </div>

            <div class="asset-item col-md-3">

              <div class="input-group mt-2">
                <input type="text" class="form-control" id="motor_vehicles_value" name="motor_vehicles_value" placeholder="Motor Vehicles">
              </div>
            </div>

            <div class="asset-item col-md-3">

              <div class="input-group mt-2">
                <input type="text" class="form-control" id="investments" name="investments" placeholder="Investments">
              </div>
            </div>
            <div class="asset-item col-md-3">

              <div class="input-group mt-2">
                <input type="text" class="form-control" id="aoowaev_other" name="aoowaev_other" placeholder="Other">
              </div>
            </div>
          </div>

          <div class="col-md-12">
            <div class="form-group mb-4">
              <label for="permanent_address" class="form-label">Other connected Business/Professional Activities</label>
              <textarea class="form-control" id="other_connected_activities" name="other_connected_activities" rows="2"></textarea>
            </div>

          </div>

        </div>

        <div class="form-section row">
          <h5><i class="fas fa-ring me-2"></i>Spouse Details</h5>

          <div class="col-md-6">
            <div class="form-group mb-4">
              <label for="spouse_name" class="form-label">Name</label>
              <input type="text" class="form-control" id="spouse_name" name="spouse_name">
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group mb-4">
              <label for="spouse_occupation" class="form-label">Occupation</label>
              <input type="text" class="form-control" id="spouse_occupation" name="spouse_occupation">
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group mb-4">
              <label for="spouse_contact" class="form-label">Contact No</label>
              <input type="text" class="form-control" id="spouse_contact" name="spouse_contact">
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group mb-4">
              <label for="spouse_nic" class="form-label">N.I.C No</label>
              <input type="text" class="form-control" id="spouse_nic" name="spouse_nic">
            </div>
          </div>
          <div class="col-md-12">
            <div class="form-group mb-4">
              <label for="spouse_em_address" class="form-label">Employer Name & Address</label>
              <input type="text" class="form-control" id="spouse_em_address" name="spouse_em_address">
            </div>
          </div>

        </div>

        <div class="form-section row">
          <h5><i class="fas fa-user-shield me-2"></i>Guarantor Details</h5>

          <div class="col-md-6">
            <div class="form-group mb-4">
              <label for="guarantor_name" class="form-label">Name</label>
              <input type="text" class="form-control" id="guarantor_name" name="guarantor_name">
            </div>
          </div>

          <div class="col-md-6">
            <div class="form-group mb-4">
              <label for="guarantor_contact" class="form-label">Contact No</label>
              <input type="text" class="form-control" id="guarantor_contact" name="guarantor_contact">
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group mb-4">
              <label for="guarantor_nic" class="form-label">N.I.C No</label>
              <input type="text" class="form-control" id="guarantor_nic" name="guarantor_nic">
            </div>
          </div>
          <div class="col-md-12">
            <div class="form-group mb-4">
              <label for="guarantor_address" class="form-label">Address</label>
              <input type="text" class="form-control" id="guarantor_address" name="guarantor_address">
            </div>
          </div>

        </div>

        <div class="row">

          <div class="col-md-6">
            <div class="form-group mb-4">
              <label for="dependents" class="form-label">No of Dependents</label>
              <input type="text" class="form-control" id="dependents" name="dependents">
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group mb-4">
              <label for="income" class="form-label">Monthly Income</label>
              <input type="text" class="form-control" id="income" name="income">
            </div>
          </div>
        </div>

        <!-- Banking Relationship Section -->
        <div class="form-section">
          <h5><i class="fas fa-university me-2"></i>Banking Relationship with Banks</h5>

          <div id="banking-relationship-list">
            <div class="bank-row row mb-2">
              <div class="col-md-3">
                <input type="text" name="banks[0][bank_name]" class="form-control" placeholder="Bank Name">
              </div>
              <div class="col-md-2">
                <input type="text" name="banks[0][branch]" class="form-control" placeholder="Branch">
              </div>
              <div class="col-md-2">
                <input type="text" name="banks[0][account_number]" class="form-control" placeholder="Account No">
              </div>
              <div class="col-md-2">
                <input type="text" name="banks[0][account_type]" class="form-control" placeholder="Account Type">
              </div>
              <div class="col-md-2">
                <input type="date" name="banks[0][relationship_since]" class="form-control">
              </div>
              <div class="col-md-1">
                <button type="button" class="btn btn-danger remove-bank"><i class="fas fa-trash"></i></button>
              </div>
            </div>
          </div>

          <button style="margin-top:10px;" type="button" class="btn btn-sm btn-success mt-2" id="addBankRow">
            <i class="fas fa-plus"></i> Add Bank
          </button>
        </div>

        <hr>

        <!-- Loans Obtained Section -->
        <div class="form-section">
          <h5><i class="fas fa-money-check-alt me-2"></i>Loans Obtained from Banks/Financial Institutes</h5>

          <div id="loan-list">
            <div class="loan-row row mb-2">
              <div class="col-md-3">
                <input type="text" name="loans[0][bank_name]" class="form-control" placeholder="Bank Name">
              </div>
              <div class="col-md-2">
                <input type="text" name="loans[0][loan_type]" class="form-control" placeholder="Loan Type">
              </div>
              <div class="col-md-2">
                <input type="text" name="loans[0][loan_amount]" class="form-control" placeholder="Loan Amount">
              </div>
              <div class="col-md-2">
                <input type="text" name="loans[0][outstanding_balance]" class="form-control" placeholder="Outstanding Balance">
              </div>
              <div class="col-md-2">
                <input type="text" name="loans[0][monthly_installment]" class="form-control" placeholder="Monthly Installment">
              </div>
              <div class="col-md-1">
                <button type="button" class="btn btn-danger remove-loan"><i class="fas fa-trash"></i></button>
              </div>
            </div>
          </div>

          <button style="margin-top:10px;" type="button" class="btn btn-sm btn-success mt-2" id="addLoanRow">
            <i class="fas fa-plus"></i> Add Loan
          </button>
        </div>




        <div class="d-flex justify-content-end mt-4">
          <button type="submit" class="btn btn-primary">
            Save & Continue <i class="fas fa-arrow-right ms-1"></i>
          </button>

          <button type="button" class="btn btn-secondary" id="nextToBusiness"><i class="fas fa-arrow-right me-1"></i> Next: Business Info</button>
        </div>

      </form>

      <!-- Business Information Form -->
      <form id="businessInfoForm" class="form-step">
        <h3 class="section-title"><i class="fas fa-building me-2"></i>Business Information (Section B)</h3>


        <div class="row mb-4">
          <div class="col-md-6">
            <div class="form-group mb-4">
              <label for="business_name" class="form-label ">Name of the Business</label>
              <input type="text" class="form-control" id="business_name" name="business_name" >
            </div>

            <div class="form-group mb-4">
              <label for="registered_address" class="form-label ">Registered Address</label>
              <textarea class="form-control" id="registered_address" name="registered_address" rows="3" ></textarea>
            </div>

            <div class="form-group mb-4">
              <label for="correspondent_address" class="form-label">Correspondent Address</label>
              <textarea class="form-control" id="correspondent_address" name="correspondent_address" rows="3"></textarea>
            </div>

            <div class="form-group mb-4">
              <label for="registration_number" class="form-label">Registration Number</label>
              <input type="text" class="form-control" id="registration_number" name="registration_number" >
            </div>
          </div>

          <div class="col-md-6">
            <div class="form-group mb-4">
              <label for="incorporation_date" class="form-label ">Date of Incorporation</label>
              <input type="date" class="form-control" id="incorporation_date" name="incorporation_date" >
            </div>

            <div class="form-group mb-4">
              <label for="business_nature" class="form-label">Nature of the Business</label>
              <input type="text" class="form-control" id="business_nature" name="business_nature">
            </div>

            <div class="form-group mb-4">
              <label for="contact_number" class="form-label ">Contact Number</label>
              <input type="tel" class="form-control" id="contact_number" name="contact_number" >
            </div>

            <div class="form-group mb-4">
              <label for="email_address" class="form-label">Email Address</label>
              <input type="email" class="form-control" id="email_address" name="email_address">
            </div>
          </div>
        </div>

        <!-- Assets Section -->
        <div class="form-section">
          <h5><i class="fas fa-landmark me-2"></i>Assets owned by the Entity and Estimated Value</h5>

          <div class="asset-item">
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="checkbox" id="property_asset" value="property" name="assets[]">
              <label class="form-check-label" for="property_asset">Property</label>
            </div>
            <div class="input-group mt-2">
              <span class="input-group-text">LKR</span>
              <input type="text" class="form-control" id="property_value" name="property_value" placeholder="Estimated value" >
            </div>
          </div>

          <div class="asset-item">
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="checkbox" id="vehicles_asset" value="vehicles" name="assets[]">
              <label class="form-check-label" for="vehicles_asset">Motor Vehicles</label>
            </div>
            <div class="input-group mt-2">
              <span class="input-group-text">LKR</span>
              <input type="text" class="form-control" id="vehicles_value" name="vehicles_value" placeholder="Estimated value" >
            </div>
          </div>

          <div class="asset-item">
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="checkbox" id="investments_asset" value="investments" name="assets[]">
              <label class="form-check-label" for="investments_asset">Investments</label>
            </div>
            <div class="input-group mt-2">
              <span class="input-group-text">LKR</span>
              <input type="text" class="form-control" id="investments_value" name="investments_value" placeholder="Estimated value" >
            </div>
          </div>
        </div>

        <!-- Financial Information -->
        <div class="form-section">
          <h5><i class="fas fa-chart-line me-2"></i>Financial Information</h5>

          <div class="row">
            <div class="col-md-4">
              <div class="form-group mb-3">
                <label for="daily_turnover" class="form-label">Per Day Sales Turnover</label>
                <div class="input-group">
                  <span class="input-group-text">LKR</span>
                  <input type="text" class="form-control" id="daily_turnover" name="daily_turnover">
                </div>
              </div>
            </div>

            <div class="col-md-4">
              <div class="form-group mb-3">
                <label for="daily_profit" class="form-label">Per Day Net Profit/Loss</label>
                <div class="input-group">
                  <span class="input-group-text">LKR</span>
                  <input type="text" class="form-control" id="daily_profit" name="daily_profit">
                </div>
              </div>
            </div>

            <div class="col-md-4">
              <div class="form-group mb-3">
                <label for="total_liabilities" class="form-label">Total Liabilities</label>
                <div class="input-group">
                  <span class="input-group-text">LKR</span>
                  <input type="text" class="form-control" id="total_liabilities" name="total_liabilities">
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Banking Relationship -->
        <div class="form-section">
          <h5><i class="fas fa-university me-2"></i>Banking Relationship with Banks</h5>

          <div id="bankAccounts">
            <div class="bank-account">
              <div class="row">
                <div class="col-md-3">
                  <div class="form-group mb-3">
                    <label class="form-label">Bank Name</label>
                    <input type="text" class="form-control" name="bank_name[]">
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="form-group mb-3">
                    <label class="form-label">Branch</label>
                    <input type="text" class="form-control" name="bank_branch[]">
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="form-group mb-3">
                    <label class="form-label">Account Number</label>
                    <input type="text" class="form-control" name="account_number[]">
                  </div>
                </div>
                <div class="col-md-2">
                  <div class="form-group mb-3">
                    <label class="form-label">Account Type</label>
                    <select class="form-control" name="account_type[]">
                      <option value="">Select</option>
                      <option value="Savings">Savings</option>
                      <option value="Current">Current</option>
                      <option value="Business">Business</option>
                    </select>
                  </div>
                </div>
                <div class="col-md-1 d-flex align-items-end">
                  <button type="button" class="btn btn-danger remove-bank" style="display: none;">
                    <i class="fas fa-times"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>

          <button type="button" class="btn btn-outline-primary add-bank-btn" id="addBank">
            <i class="fas fa-plus me-1"></i> Add Another Bank
          </button>
        </div>

        <div class="d-flex justify-content-between mt-5 pt-3">
          <button type="button" class="btn btn-secondary" id="backToPersonal">
            <i class="fas fa-arrow-left me-1"></i> Back to Personal Info
          </button>
          <button type="submit" class="btn btn-primary">
            Save & Continue <i class="fas fa-arrow-right ms-1"></i>
          </button>
          <button type="button" class="btn btn-secondary" id="nextToDocuments"><i class="fas fa-arrow-right me-1"></i> Next: Documents</button>
        </div>
      </form>

      <!-- Document Upload Section -->
      <div id="documentUploadSection" class="form-step">
        <h3 class="section-title"><i class="fas fa-file-upload me-2"></i>Document Upload</h3>

        <div class="alert alert-info">
          <i class="fas fa-info-circle me-2"></i>Please upload the required documents to complete your registration.
        </div>

        <!-- Progress Indicator -->
        <div class="alert alert-info">
          <i class="fas fa-info-circle me-2"></i>
          <span id="progress-text">Uploaded 0 of 9 documents</span>
          <div class="progress mt-2">
            <div class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-6">
            <!-- Identification Documents -->
            <div class="form-section">
              <h5><i class="fas fa-id-card me-2"></i>Identification Documents</h5>

              <div class="document-item" id="nic-front-item">
                <label for="nic_front" class="form-label required-field">NIC Front Side</label>
                <div class="input-group">
                  <input type="file" class="form-control" id="nic_front" data-doc-type="nic_front">
                  <button class="btn btn-primary upload-btn" type="button" data-file-id="nic_front">
                    <i class="fas fa-upload me-1"></i> Upload
                  </button>
                </div>
                <div class="upload-status" id="nic_front_status"></div>
                <div class="progress" id="nic_front_progress">
                  <div class="progress-bar" role="progressbar" style="width: 0%"></div>
                </div>
              </div>

              <div class="document-item" id="nic-back-item">
                <label for="nic_back" class="form-label required-field">NIC Back Side</label>
                <div class="input-group">
                  <input type="file" class="form-control" id="nic_back" data-doc-type="nic_back">
                  <button class="btn btn-primary upload-btn" type="button" data-file-id="nic_back">
                    <i class="fas fa-upload me-1"></i> Upload
                  </button>
                </div>
                <div class="upload-status" id="nic_back_status"></div>
                <div class="progress" id="nic_back_progress">
                  <div class="progress-bar" role="progressbar" style="width: 0%"></div>
                </div>
              </div>

              <div class="document-item" id="passport-item">
                <label for="passport_copy" class="form-label">Passport Copy (if available)</label>
                <div class="input-group">
                  <input type="file" class="form-control" id="passport_copy" data-doc-type="passport_copy">
                  <button class="btn btn-primary upload-btn" type="button" data-file-id="passport_copy">
                    <i class="fas fa-upload me-1"></i> Upload
                  </button>
                </div>
                <div class="upload-status" id="passport_copy_status"></div>
                <div class="progress" id="passport_copy_progress">
                  <div class="progress-bar" role="progressbar" style="width: 0%"></div>
                </div>
              </div>
            </div>

            <!-- Address Verification -->
            <div class="form-section">
              <h5><i class="fas fa-home me-2"></i>Address Verification</h5>
              <div class="document-item" id="utility-bill-item">
                <label for="utility_bill" class="form-label required-field">Utility Bill</label>
                <div class="input-group">
                  <input type="file" class="form-control" id="utility_bill" data-doc-type="utility_bill">
                  <button class="btn btn-primary upload-btn" type="button" data-file-id="utility_bill">
                    <i class="fas fa-upload me-1"></i> Upload
                  </button>
                </div>
                <div class="upload-status" id="utility_bill_status"></div>
                <div class="progress" id="utility_bill_progress">
                  <div class="progress-bar" role="progressbar" style="width: 0%"></div>
                </div>
              </div>
              <div class="document-item" id="deed-lease-item">
                <label for="deed_lease" class="form-label">Deed or Lease Agreement</label>
                <div class="input-group">
                  <input type="file" class="form-control" id="deed_lease" data-doc-type="deed_lease">
                  <button class="btn btn-primary upload-btn" type="button" data-file-id="deed_lease">
                    <i class="fas fa-upload me-1"></i> Upload
                  </button>
                </div>
                <div class="upload-status" id="deed_lease_status"></div>
                <div class="progress" id="deed_lease_progress">
                  <div class="progress-bar" role="progressbar" style="width: 0%"></div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-6">
            <!-- Business Documents -->
            <div class="form-section">
              <h5><i class="fas fa-briefcase me-2"></i>Business Documents</h5>
              <div class="document-item" id="business-registration-item">
                <label for="business_registration" class="form-label required-field">Business Registration Certificate</label>
                <div class="input-group">
                  <input type="file" class="form-control" id="business_registration" data-doc-type="business_registration">
                  <button class="btn btn-primary upload-btn" type="button" data-file-id="business_registration">
                    <i class="fas fa-upload me-1"></i> Upload
                  </button>
                </div>
                <div class="upload-status" id="business_registration_status"></div>
                <div class="progress" id="business_registration_progress">
                  <div class="progress-bar" role="progressbar" style="width: 0%"></div>
                </div>
              </div>
              <div class="document-item" id="business-license-item">
                <label for="business_license" class="form-label required-field">Business License</label>
                <div class="input-group">
                  <input type="file" class="form-control" id="business_license" data-doc-type="business_license">
                  <button class="btn btn-primary upload-btn" type="button" data-file-id="business_license">
                    <i class="fas fa-upload me-1"></i> Upload
                  </button>
                </div>
                <div class="upload-status" id="business_license_status"></div>
                <div class="progress" id="business_license_progress">
                  <div class="progress-bar" role="progressbar" style="width: 0%"></div>
                </div>
              </div>
              <div class="document-item" id="tax-registration-item">
                <label for="tax_registration" class="form-label required-field">Tax Registration Certificate</label>
                <div class="input-group">
                  <input type="file" class="form-control" id="tax_registration" data-doc-type="tax_registration">
                  <button class="btn btn-primary upload-btn" type="button" data-file-id="tax_registration">
                    <i class="fas fa-upload me-1"></i> Upload
                  </button>
                </div>
                <div class="upload-status" id="tax_registration_status"></div>
                <div class="progress" id="tax_registration_progress">
                  <div class="progress-bar" role="progressbar" style="width: 0%"></div>
                </div>
              </div>
            </div>

            <!-- Financial Documents -->
            <div class="form-section">
              <h5><i class="fas fa-file-invoice me-2"></i>Financial Documents</h5>
              <div class="document-item" id="bank-statements-item">
                <label for="bank_statements" class="form-label required-field">Bank Statements (Last 6 months)</label>
                <div class="input-group">
                  <input type="file" class="form-control" id="bank_statements" data-doc-type="bank_statements" multiple>
                  <button class="btn btn-primary upload-btn" type="button" data-file-id="bank_statements">
                    <i class="fas fa-upload me-1"></i> Upload
                  </button>
                </div>
                <div class="upload-status" id="bank_statements_status"></div>
                <div class="progress" id="bank_statements_progress">
                  <div class="progress-bar" role="progressbar" style="width: 0%"></div>
                </div>
              </div>
              <div class="document-item" id="financial-statements-item">
                <label for="financial_statements" class="form-label">Financial Statements (if available)</label>
                <div class="input-group">
                  <input type="file" class="form-control" id="financial_statements" data-doc-type="financial_statements">
                  <button class="btn btn-primary upload-btn" type="button" data-file-id="financial_statements">
                    <i class="fas fa-upload me-1"></i> Upload
                  </button>
                </div>
                <div class="upload-status" id="financial_statements_status"></div>
                <div class="progress" id="financial_statements_progress">
                  <div class="progress-bar" role="progressbar" style="width: 0%"></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="d-flex justify-content-between mt-5 pt-3">
          <button type="button" class="btn btn-secondary" id="backToBusiness">
            <i class="fas fa-arrow-left me-1"></i> Back to Business Info
          </button>
          <button type="button" class="btn btn-success" id="completeRegistration">Complete Registration</button>
        </div>
      </div>

      <!-- Success Message -->
      <div class="success-message" id="successMessage">
        <h3><i class="fas fa-check-circle me-2"></i>Registration Completed Successfully!</h3>
        <p>Your customer registration has been completed. You will receive a confirmation email shortly.</p>
        <button type="button" class="btn btn-light mt-3" id="closeModal">
          <i class="fas fa-times me-1"></i> Close
        </button>
      </div>
    </div>
  </div>

</div>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
  let bankIndex = 1;
  let loanIndex = 1;

  // Add Bank Row
  $('#addBankRow').click(function() {
    let row = `<div class="bank-row row mb-2">
        <div class="col-md-3"><input type="text" name="banks[${bankIndex}][bank_name]" class="form-control" placeholder="Bank Name"></div>
        <div class="col-md-2"><input type="text" name="banks[${bankIndex}][branch]" class="form-control" placeholder="Branch"></div>
        <div class="col-md-2"><input type="text" name="banks[${bankIndex}][account_number]" class="form-control" placeholder="Account No"></div>
        <div class="col-md-2"><input type="text" name="banks[${bankIndex}][account_type]" class="form-control" placeholder="Account Type"></div>
        <div class="col-md-2"><input type="date" name="banks[${bankIndex}][relationship_since]" class="form-control"></div>
        <div class="col-md-1"><button type="button" class="btn btn-danger remove-bank"><i class="fas fa-trash"></i></button></div>
    </div>`;
    $('#banking-relationship-list').append(row);
    bankIndex++;
  });

  // Add Loan Row
  $('#addLoanRow').click(function() {
    let row = `<div class="loan-row row mb-2">
        <div class="col-md-3"><input type="text" name="loans[${loanIndex}][bank_name]" class="form-control" placeholder="Bank Name"></div>
        <div class="col-md-2"><input type="text" name="loans[${loanIndex}][loan_type]" class="form-control" placeholder="Loan Type"></div>
        <div class="col-md-2"><input type="text" name="loans[${loanIndex}][loan_amount]" class="form-control" placeholder="Loan Amount"></div>
        <div class="col-md-2"><input type="text" name="loans[${loanIndex}][outstanding_balance]" class="form-control" placeholder="Outstanding Balance"></div>
        <div class="col-md-2"><input type="text" name="loans[${loanIndex}][monthly_installment]" class="form-control" placeholder="Monthly Installment"></div>
        <div class="col-md-1"><button type="button" class="btn btn-danger remove-loan"><i class="fas fa-trash"></i></button></div>
    </div>`;
    $('#loan-list').append(row);
    loanIndex++;
  });

  function addBankRow(bank_name = '', branch = '', account_number = '', account_type = '', relationship_since = '') {
    let row = `<div class="bank-row row mb-2">
        <div class="col-md-3"><input type="text" name="banks[${bankIndex}][bank_name]" class="form-control" placeholder="Bank Name" value="${bank_name}"></div>
        <div class="col-md-2"><input type="text" name="banks[${bankIndex}][branch]" class="form-control" placeholder="Branch" value="${branch}"></div>
        <div class="col-md-2"><input type="text" name="banks[${bankIndex}][account_number]" class="form-control" placeholder="Account No" value="${account_number}"></div>
        <div class="col-md-2"><input type="text" name="banks[${bankIndex}][account_type]" class="form-control" placeholder="Account Type" value="${account_type}"></div>
        <div class="col-md-2"><input type="date" name="banks[${bankIndex}][relationship_since]" class="form-control" value="${relationship_since}"></div>
        <div class="col-md-1"><button type="button" class="btn btn-danger remove-bank"><i class="fas fa-trash"></i></button></div>
    </div>`;
    $('#banking-relationship-list').append(row);
    bankIndex++;
  }

  function addLoanRow(bank_name = '', loan_type = '', loan_amount = '', outstanding_balance = '', monthly_installment = '', start_date = '', end_date = '') {
    let row = `<div class="loan-row row mb-2">
        <div class="col-md-3"><input type="text" name="loans[${loanIndex}][bank_name]" class="form-control" placeholder="Bank Name" value="${bank_name}"></div>
        <div class="col-md-2"><input type="text" name="loans[${loanIndex}][loan_type]" class="form-control" placeholder="Loan Type" value="${loan_type}"></div>
        <div class="col-md-2"><input type="text" name="loans[${loanIndex}][loan_amount]" class="form-control" placeholder="Loan Amount" value="${loan_amount}"></div>
        <div class="col-md-2"><input type="text" name="loans[${loanIndex}][outstanding_balance]" class="form-control" placeholder="Outstanding Balance" value="${outstanding_balance}"></div>
        <div class="col-md-2"><input type="text" name="loans[${loanIndex}][monthly_installment]" class="form-control" placeholder="Monthly Installment" value="${monthly_installment}"></div>
        <div class="col-md-1"><button type="button" class="btn btn-danger remove-loan"><i class="fas fa-trash"></i></button></div>
    </div>`;
    $('#loan-list').append(row);
    loanIndex++;
  }


  // Remove Bank Row
  $(document).on('click', '.remove-bank', function() {
    $(this).closest('.bank-row').remove();
  });

  // Remove Loan Row
  $(document).on('click', '.remove-loan', function() {
    $(this).closest('.loan-row').remove();
  });

  $(document).ready(function() {

    // Current step tracking
    let currentStep = 1;
    const totalSteps = 3;

    // Track uploaded documents
    const uploadedDocuments = {};
    let totalDocuments = 9; // Total required documents
    let uploadedCount = 0;

    // Check if we're editing an existing customer
    const urlParams = new URLSearchParams(window.location.search);
    const customerId = urlParams.get('cus_id') || $('#customer_id').val();

    if (customerId && customerId > 0) {
      // We're editing an existing customer
      $('#customer_id').val(customerId);
      $('#editModeBanner').show();
      loadCustomerData(customerId);
    }


    // Go from Personal Info → Business Info
    $('#nextToBusiness').on('click', function() {
      currentStep = 2;
      updateStepDisplay();
    });

    // Go from Business Info → Documents
    $('#nextToDocuments').on('click', function() {
      currentStep = 3;
      updateStepDisplay();
    });

    // Go Back buttons
    $('#backToPersonal').on('click', function() {
      currentStep = 1;
      updateStepDisplay();
    });

    $('#backToBusiness').on('click', function() {
      currentStep = 2;
      updateStepDisplay();
    });


    // Load customer data for editing
    function loadCustomerData(customerId) {
      // Load personal information
      $.get('<?php echo site_url("customers/get_personal_info/"); ?>/' + customerId, function(data) {
        if (data.success) {

          const customer = data.customer;
          $('#title').val(customer.title);
          $('#full_name').val(customer.full_name);
          $('#date_of_birth').val(customer.date_of_birth);
          $('#nic').val(customer.nic);
          $('#nic_issue_date').val(customer.nic_issue_date);
          $('#passport_number').val(customer.passport_number);
          $('#mobile').val(customer.mobile);
          $('#mobile2').val(customer.mobile2);
          $('#email').val(customer.email);
          $('#home_phone').val(customer.home_phone);
          $('#permanent_address').val(customer.permanent_address);
          $('#correspondent_address_personal').val(customer.correspondent_address);
          $('#position_held').val(customer.position_held);
          $('#status_residential_address').val(customer.status_residential_address);
          $('#income').val(customer.income);
          $('#dependents').val(customer.dependents);
          $('#status_residential_address').val(customer.status_residential_address);
          $('#residential_property_value').val(customer.residential_property_value);
          $('#motor_vehicles_value').val(customer.motor_vehicles_value);
          $('#investments').val(customer.investments);
          $('#aoowaev_other').val(customer.aoowaev_other);
          $('#other_connected_activities').val(customer.other_connected_activities);
          // Spouse
          if (customer.spouse) {
            $('#spouse_name').val(customer.spouse.spouse_name);
            $('#spouse_nic').val(customer.spouse.spouse_nic);
            $('#spouse_contact').val(customer.spouse.spouse_contact);
            $('#spouse_occupation').val(customer.spouse.spouse_occupation);
            $('#spouse_em_address').val(customer.spouse.spouse_em_address);
          }

          // Guarantor
          if (customer.guarantor) {
            $('#guarantor_name').val(customer.guarantor.guarantor_name);
            $('#guarantor_nic').val(customer.guarantor.guarantor_nic);
            $('#guarantor_contact').val(customer.guarantor.guarantor_contact);
            $('#guarantor_address').val(customer.guarantor.guarantor_address);
          }

          // Load Banks
          $('#banking-relationship-list').html('');
          bankIndex = 0;
          customer.banks.forEach(function(bank) {
            addBankRow(bank.bank_name, bank.branch, bank.account_number, bank.account_type, bank.relationship_since);
          });

          // Load Loans
          $('#loan-list').html('');
          loanIndex = 0;
          customer.loans.forEach(function(loan) {
            addLoanRow(loan.bank_name, loan.loan_type, loan.loan_amount, loan.outstanding_balance, loan.monthly_installment, loan.loan_start_date, loan.loan_end_date);
          });

          // Move to the appropriate step based on what data is available
          if (data.hasBusinessInfo) {
            currentStep = 2;
            loadBusinessInfo(customerId);
          }

          if (data.hasDocuments) {
            currentStep = 3;
            loadDocuments(customerId);
          }

          updateStepDisplay();
        }
      });
    }

    function loadBusinessInfo(customerId) {
      $.get('<?php echo site_url("customers/get_business_info/"); ?>/' + customerId, function(data) {
        if (data.success) {
          const business = data.business;

          // Basic Info
          $('#business_name').val(business.business_name);
          $('#registered_address').val(business.registered_address);
          $('#correspondent_address').val(business.correspondent_address);
          $('#registration_number').val(business.registration_number);
          $('#business_nature').val(business.nature_of_business);
          $('#incorporation_date').val(business.date_of_incorporation);
          $('#contact_number').val(business.contact_number);
          $('#email_address').val(business.email_address);

          // Assets
          if (business.assets && business.assets.includes('property')) {
            $('#property_asset').prop('checked', true);
            $('#property_value').prop('disabled', false).val(business.property_value);
          }
          if (business.assets && business.assets.includes('vehicles')) {
            $('#vehicles_asset').prop('checked', true);
            $('#vehicles_value').prop('disabled', false).val(business.vehicles_value);
          }
          if (business.assets && business.assets.includes('investments')) {
            $('#investments_asset').prop('checked', true);
            $('#investments_value').prop('disabled', false).val(business.investments_value);
          }

          // Financials
          $('#daily_turnover').val(business.daily_turnover);
          $('#daily_profit').val(business.daily_profit);
          $('#total_liabilities').val(business.total_liabilities);

          // Banking Relationships (dynamic rows)
          $('#bankAccounts').empty();
          if (business.bankAccounts && business.bankAccounts.length > 0) {
            business.bankAccounts.forEach((account, index) => {
              let bankRow = `
            <div class="bank-account">
              <div class="row">
                <div class="col-md-3">
                  <div class="form-group mb-3">
                    <label class="form-label">Bank Name</label>
                    <input type="text" class="form-control" name="bank_name[]" value="${account.bank_name}">
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="form-group mb-3">
                    <label class="form-label">Branch</label>
                    <input type="text" class="form-control" name="bank_branch[]" value="${account.bank_branch}">
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="form-group mb-3">
                    <label class="form-label">Account Number</label>
                    <input type="text" class="form-control" name="account_number[]" value="${account.account_number}">
                  </div>
                </div>
                <div class="col-md-2">
                  <div class="form-group mb-3">
                    <label class="form-label">Account Type</label>
                    <select class="form-control" name="account_type[]">
                      <option value="">Select</option>
                      <option value="Savings" ${account.account_type === 'Savings' ? 'selected' : ''}>Savings</option>
                      <option value="Current" ${account.account_type === 'Current' ? 'selected' : ''}>Current</option>
                      <option value="Business" ${account.account_type === 'Business' ? 'selected' : ''}>Business</option>
                    </select>
                  </div>
                </div>
                <div class="col-md-1 d-flex align-items-end">
                  <button type="button" class="btn btn-danger remove-bank">
                    <i class="fas fa-times"></i>
                  </button>
                </div>
              </div>
            </div>`;
              $('#bankAccounts').append(bankRow);
            });
          }
        }
      });
    }



    // Load documents information
    function loadDocuments(customerId) {
      $.get('<?php echo site_url("customers/get_documents"); ?>/' + customerId, function(data) {
        if (data.success) {
          // Update progress based on uploaded documents
          data.documents.forEach(function(doc) {
            if (!uploadedDocuments[doc.doc_type]) {
              uploadedDocuments[doc.doc_type] = true;
              uploadedCount++;

              // Mark as uploaded in UI
              $(`#${doc.doc_type}_status`).html(`<div class="text-success"><i class="fas fa-check-circle"></i> Uploaded: ${doc.file_name}</div>`);
              $(`#${doc.doc_type}-item`).addClass('document-uploaded');
            }
          });

          updateProgress();
        }
      });
    }

    // Update progress function
    function updateProgress() {
      const percentage = (uploadedCount / totalDocuments) * 100;
      $('.progress-bar').css('width', percentage + '%');
      $('#progress-text').text(`Uploaded ${uploadedCount} of ${totalDocuments} documents`);

      // Enable complete registration button if all required documents are uploaded
      if (uploadedCount >= totalDocuments) {
        $('#completeRegistration').prop('disabled', false);
      }
    }



    // Document upload handling
    $('.upload-btn').click(function() {
      const fileId = $(this).data('file-id');
      const fileInput = $('#' + fileId);
      const docType = fileInput.data('doc-type');
      const statusElement = $('#' + fileId + '_status');
      const progressElement = $('#' + fileId + '_progress .progress-bar');

      // Check if a file is selected
      if (fileInput[0].files.length === 0) {
        statusElement.html('<div class="text-danger"><i class="fas fa-exclamation-circle"></i> Please select a file first</div>');
        return;
      }

      // Create FormData object
      const formData = new FormData();
      formData.append('document', fileInput[0].files[0]);
      formData.append('doc_type', docType);
      formData.append('customer_id', $('#customer_id').val());

      // Update UI for uploading state
      statusElement.html('<div class="text-info"><i class="fas fa-spinner fa-spin"></i> Uploading...</div>');
      $(this).prop('disabled', true);

      // AJAX request for file upload
      $.ajax({
        url: '<?php echo site_url("customers/upload_document"); ?>',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        xhr: function() {
          const xhr = new window.XMLHttpRequest();
          xhr.upload.addEventListener('progress', function(e) {
            if (e.lengthComputable) {
              const percentComplete = (e.loaded / e.total) * 100;
              progressElement.css('width', percentComplete + '%');
            }
          }, false);
          return xhr;
        },
        success: function(response) {
          try {
            const result = JSON.parse(response);
            if (result.success) {
              statusElement.html('<div class="text-success"><i class="fas fa-check-circle"></i> ' + result.message + '</div>');
              $('#' + fileId + '-item').addClass('document-uploaded');

              // Mark as uploaded
              if (!uploadedDocuments[docType]) {
                uploadedDocuments[docType] = true;
                uploadedCount++;
                updateProgress();
              }
            } else {
              statusElement.html('<div class="text-danger"><i class="fas fa-exclamation-circle"></i> ' + result.message + '</div>');
            }
          } catch (e) {
            statusElement.html('<div class="text-danger"><i class="fas fa-exclamation-circle"></i> Error processing response</div>');
          }
        },
        error: function(xhr, status, error) {
          statusElement.html('<div class="text-danger"><i class="fas fa-exclamation-circle"></i> Upload failed: ' + error + '</div>');
        },
        complete: function() {
          $('.upload-btn[data-file-id="' + fileId + '"]').prop('disabled', false);
        }
      });
    });

    // Enable asset value fields when checkbox is checked
    $(document).on('change', '.asset-checkbox', function() {
      const assetType = $(this).val();
      const valueField = $('#' + assetType + '_value');
      valueField.prop('disabled', !$(this).is(':checked'));

      if ($(this).is(':checked')) {
        valueField.focus();
      }
    });

    // Personal Information Form Submission
    $('#personalInfoForm').on('submit', function(e) {
      e.preventDefault();

      let isValid = true;
      $('#personalInfoForm .required-field').each(function() {
        const fieldId = $(this).attr('for');
        const field = $('#' + fieldId);
        if (!field.val()) {
          isValid = false;
          field.addClass('is-invalid');
        } else {
          field.removeClass('is-invalid');
        }
      });

      if (!isValid) {
        // Shake animation for error
        $('.card').css('animation', 'shake 0.5s');
        setTimeout(function() {
          $('.card').css('animation', '');
        }, 500);
        alert('Please fill in all required fields.');
        return;
      }

      // Prepare form data for AJAX submission
      var formData = $(this).serialize();



      // Determine if we're adding or updating
      const customerId = $('#customer_id').val();
      const url = customerId > 0 ?
        '<?php echo site_url("customers/add_customer"); ?>' :
        '<?php echo site_url("customers/add_customer"); ?>';

      if (customerId > 0) {
        // Add additional fields that might not be in the form
        formData += '&cus_type=E&cus_status=1&location_status=0&locaton_update_user_id=0';
      } else {
        // Add additional fields that might not be in the form
        formData += '&cus_type=A&cus_status=1&location_status=0&locaton_update_user_id=0';
      }

      // Send data via AJAX
      $.post(url, formData)
        .done(function(data) {
          try {
            var obj = jQuery.parseJSON(data);
            if (obj.status == 0) {
              // Show validation errors
              $('#error').html('<div class="alert alert-block alert-danger fade in"><button type="button" class="close" data-dismiss="alert">×</button><h4 class="alert-heading"><i class="fa fa-times-circle"></i> Error!</h4>' + obj.validation + '</div>');
            } else {
              $('#customer_id').val(obj.customer_id);

              // Move to next step
              currentStep = 2;
              updateStepDisplay();

              alert('Personal information saved successfully!');
            }
          } catch (e) {
            alert('Error parsing response: ' + e);
          }
        })
        .fail(function() {
          alert('An error occurred while saving personal data.');
        });
    });

    // Business Information Form Submission
    $('#businessInfoForm').on('submit', function(e) {
      e.preventDefault();

      // Validate required fields
      let isValid = true;
      $('#businessInfoForm .required-field').each(function() {
        const fieldId = $(this).attr('for');
        const field = $('#' + fieldId);
        if (!field.val()) {
          isValid = false;
          field.addClass('is-invalid');
        } else {
          field.removeClass('is-invalid');
        }
      });

      if (!isValid) {
        showMessage('Please fill in all required fields.', 'danger');
        return;
      }

      // Enable disabled asset fields temporarily for serialization
      $('#businessInfoForm').find('input:disabled').prop('disabled', false);

      // Prepare form data
      let formData = $(this).serialize();

      // Disable the fields again
      $('.asset-checkbox').each(function() {
        if (!$(this).is(':checked')) {
          const assetType = $(this).val();
          $('#' + assetType + '_value').prop('disabled', true);
        }
      });

      // Show loading indicator
      $('#loading').show();
      $('#businessInfoForm').hide();

      // Determine if we're adding or updating
      const customerId = $('#customer_id').val();
      const url = '<?php echo site_url("customers/save_business_info"); ?>';
      formData += '&customer_id=' + encodeURIComponent($('#customer_id').val());
      // Submit via AJAX
      $.ajax({
        url: url,
        type: 'POST',
        data: formData,
        dataType: 'json',
        success: function(response) {
          $('#loading').hide();
          $('#businessInfoForm').show();

          if (response.status === 'success') {
            showMessage(response.message, 'success');
            // Move to next step after a delay
            setTimeout(function() {
              currentStep = 3;
              $('#error').html('');
              updateStepDisplay();
            }, 1000);
          } else {
            showMessage(response.message, 'danger');
            $('#error').html('<div class="alert alert-block alert-danger fade in"><button type="button" class="close" data-dismiss="alert">×</button><h4 class="alert-heading"><i class="fa fa-times-circle"></i> Error!</h4>' + response.message + '</div>');
          }
        },
        error: function(xhr, status, error) {
          $('#loading').hide();
          $('#businessInfoForm').show();
          showMessage('An error occurred: ' + error, 'danger');
          $('#error').html('<div class="alert alert-block alert-danger fade in"><button type="button" class="close" data-dismiss="alert">×</button><h4 class="alert-heading"><i class="fa fa-times-circle"></i> Error!</h4>' + error + '</div>');
        }
      });
    });

    // Add bank account row
    $('#addBank').on('click', function() {
      const newRow = `
                <div class="bank-account">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group mb-3">
                                <input type="text" class="form-control" name="bank_name[]">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group mb-3">
                                <input type="text" class="form-control" name="bank_branch[]">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group mb-3">
                                <input type="text" class="form-control" name="account_number[]">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group mb-3">
                                <select class="form-control" name="account_type[]">
                                    <option value="">Select</option>
                                    <option value="Savings">Savings</option>
                                    <option value="Current">Current</option>
                                    <option value="Business">Business</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-1 d-flex align-items-end">
                            <button type="button" class="btn btn-danger remove-bank">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                </div>
            `;
      $('#bankAccounts').append(newRow);

      // Show remove buttons if there's more than one bank account
      if ($('.bank-account').length > 1) {
        $('.remove-bank').show();
      }
    });

    // Remove bank account row
    $(document).on('click', '.remove-bank', function() {
      $(this).closest('.bank-account').remove();

      // Hide remove buttons if there's only one bank account left
      if ($('.bank-account').length <= 1) {
        $('.remove-bank').hide();
      }
    });

    // Complete Registration
    $('#completeRegistration').on('click', function() {
      // Show success message
      $('#successMessage').fadeIn();
      $('#documentUploadSection').hide();

      // Update step indicator
      $('#step3-indicator').addClass('completed');
    });

    // Close modal
    $('#closeModal').on('click', function() {
      // This would typically close the modal
      $('button.close').click();
    });

    // Back to Personal Info
    $('#backToPersonal').on('click', function() {
      currentStep = 1;
      updateStepDisplay();
    });

    // Back to Business Info
    $('#backToBusiness').on('click', function() {
      currentStep = 2;
      updateStepDisplay();
    });

    // Update step display
    function updateStepDisplay() {
      $('.form-step').removeClass('active');

      if (currentStep === 1) $('#personalInfoForm').addClass('active');
      else if (currentStep === 2) $('#businessInfoForm').addClass('active');
      else if (currentStep === 3) $('#documentUploadSection').addClass('active');

      // Update step indicators visually if you have them
      $('.step').removeClass('active completed');
      if (currentStep === 1) $('#step1-indicator').addClass('active');
      else if (currentStep === 2) {
        $('#step1-indicator').addClass('completed');
        $('#step2-indicator').addClass('active');
      } else if (currentStep === 3) {
        $('#step1-indicator').addClass('completed');
        $('#step2-indicator').addClass('completed');
        $('#step3-indicator').addClass('active');
      }
    }


    // Show message function
    function showMessage(message, type) {
      const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
      $('#message').html('<div class="alert ' + alertClass + ' alert-dismissible fade show" role="alert">' +
        message +
        '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>');
    }

    // Add animation on focus
    $('.form-control').focus(function() {
      $(this).parent().css('transform', 'translateY(-5px)');
      $(this).parent().css('transition', 'all 0.3s ease');
    }).blur(function() {
      $(this).parent().css('transform', 'translateY(0)');
    });
  });
</script>
</body>

</html>