
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- Add Payment TAB HTML -->
<div id="addPaymentModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <form id="user_form_billspayment">
        <div class="modal-header">
          <h4 class="modal-title">Add Payment Details</h4>
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-sm-3">
              <label for="id_u">Account#: </label>
              <input type="text" id="id_u" name="id" class="form-control" readonly>
            </div>
            <div class="col-sm-9">
              <label for="txt_acct_holder">Account Holder: </label>
              <input type="text" id="txt_acct_holder" name="acctholder" class="form-control" readonly>
            </div>
          </div>
          <br>
          <div class="card card-primary card-outline card-tabs">
            <div class="card-header p-0 pt-1 border-bottom-0">
              <ul class="nav nav-tabs" id="custom-tabs-three-tab" role="tablist">
              
                <li class="nav-item">
                  <a class="nav-link" id="custom-tabs-three-profile-tab" data-toggle="pill" href="#custom-tabs-three-meterdevice" role="tab" aria-controls="custom-tabs-three-profile" aria-selected="false">Meter Device</a>
                </li>
              </ul>
            </div>
            <div class="card-body">
              <div class="tab-content" id="custom-tabs-three-tabContent">
               
             
             <!-- Meter Device Tab -->
<div class="tab-pane fade" id="custom-tabs-three-meterdevice" role="tabpanel" aria-labelledby="custom-tabs-three-profile-tab">
  <center><b style="color: #e90707;">PAY METER DEVICE</b></center>
  <form id="user_form_meterdevicepayment" method="POST">
  <div class="form-group">
                    <label for="payment_ref_meter">Payment Reference Number:</label>
                    <input type="text" id="payment_ref_meter" name="payment_ref_meter" class="form-control" readonly>
      </div>
    <div class="form-group">
      <label for="meter_payment_date">Payment Date:</label>
      <input readonly type="date" value="<?php echo $thedatetoday; ?>" class="form-control" id="meter_payment_date" name="payment_date" <?php if ($_SESSION['username'] != 'MainAdmin') echo 'readonly'; ?>>
    </div>
    <div class="form-group">
      <label>Enter Amount:</label>
      <input type="text" name="meterdevice_amount" min="0" placeholder="0" class="form-control" style="font-size: 40px; color: #ff0505; padding: 10px; font-weight: bold; text-align: center;" required>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="modeofpay" id="inlineRadio1_meter" value="CASH" checked>
      <label class="form-check-label" for="inlineRadio1_meter"><b>CASH</b></label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="modeofpay" id="inlineRadio2_meter" value="GCASH" >
      <label class="form-check-label" for="inlineRadio2_meter"><b>G-CASH</b></label>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-primary btn-radius btn-block btn-multi text-white" id="btn-meterpayment">Submit Payment</button>
    </div>
  </form>
</div>


              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

  

<script>
    // Function to generate a unique payment reference number
    function generatePaymentReferenceMeter() {
        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
        let refNumber = '';
        for (let i = 0; i < 10; i++) {
            refNumber += chars.charAt(Math.floor(Math.random() * chars.length));
        }
        return refNumber;
    }

    // Display the generated reference number before the amount field
    document.addEventListener('DOMContentLoaded', function() {
        const refNumber = generatePaymentReferenceMeter();
        document.getElementById('payment_ref_meter').value = refNumber;
    });
</script>


<script>
    document.getElementById('btn-meterpayment').addEventListener('click', function() {
        // Serialize form data
        var formData = new FormData(document.getElementById('user_form_meterdevicepayment'));

        // Use AJAX to submit the form
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'submit_meterpayment.php', true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                // Parse the response from PHP
                var response = JSON.parse(xhr.responseText);
                
                if (response.statusCode == 200) {
                    // Success, show SweetAlert
                    Swal.fire({
                        title: 'Payment Successful',
                        text: 'The payment details have been successfully added!',
                        icon: 'success',
                        confirmButtonText: 'OK'
                    }).then(function() {
                        // Reset the form
                        document.getElementById('user_form_meterdevicepayment').reset();
                    });
                } else {
                    // Error, show SweetAlert
                    Swal.fire({
                        title: 'Payment Failed',
                        text: 'There was an error processing your payment. Please try again.',
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                }
            }
        };
        
        xhr.send(formData);
    });
</script>


 