EVOLUTION-NINJA

Edit File: customer_register.php

<?php echo view('includes/headerSidebar'); ?>

<style>

/* Table container */
.dataTables_wrapper {
    font-family: Arial, sans-serif;
    font-size: 14px;
    margin: 20px 0;
}

/* Table headers */
.dataTable thead th {
    background-color: #1B344F;
    color: white;
    font-weight: bold;
    text-align: center;
    border: 1px solid #dddddd;
}

/* Table rows */
.dataTable tbody tr {
    background-color: #f9f9f9;
}

.dataTable tbody tr:nth-child(even) {
    background-color: #f1f1f1;
}

.dataTable tbody tr:hover {
    background-color: #eaf3fc;
    cursor: pointer;
}

/* Table cells */
.userTable tbody td {
    text-align: center;
    padding: 10px;
    border: 1px solid #dddddd;
}

/* Table footer */
.userTable tfoot th {
    background-color: #f2f2f2;
    color: #333;
    text-align: center;
    padding: 8px;
}

/* Pagination controls */
.dataTables_wrapper .dataTables_paginate {
    margin: 10px 0;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 6px 12px;
    margin-left: 2px;
    border: 1px solid #dddddd;
    background-color: #ffffff;
    color:#1B344F;
    border-radius: 4px;
    cursor: pointer;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color:#1B344F;
    color: white;
}

/* Active pagination button */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color:#1B344F;
    color: white;
    border: 1px solid:#1B344F;
}

/* Search box */
.dataTables_wrapper .dataTables_filter input {
    margin-left: 8px;
    padding: 6px 10px;
    border: 1px solid #cccccc;
    border-radius: 4px;
}

/* Length dropdown */
.dataTables_wrapper .dataTables_length select {
    margin-left: 8px;
    padding: 6px 10px;
    border: 1px solid #cccccc;
    border-radius: 4px;
}

/* Information text */
.dataTables_wrapper .dataTables_info {
    margin: 10px 0;
    font-size: 12px;
    color: #555;
}
.approve-btn{
    padding:5px;
    border-radius: 4px;
    color:white;
    background-color:#198754;
    margin-left:40px;
    border-color:grey;
}
.delete-btn{
    padding:5px 10px;
    border-radius: 4px;
    color:white;
    background-color:maroon;
    margin-left:70px;
    border-color:grey;
}

/* Responsive Table */
    @media screen and (max-width: 768px) {
        .container {
            padding: 10px;
        }

#datatable {
            font-size: 14px;
        }
    }
</style>

<br><br>
    <div class="row m-0">
        <div class="col-sm-12">
            <h1 class="crt-pjt">Customer Registration</h1>
        </div>
    </div>

<br><br>
<div class="container">
     <form id="CustRegForm">
           
          
           
           
           
           
           
         
         <br>
         <div class="row">
            <div class="col-sm-4">
                  <label for="">SCHEME</label>
                  
                  <select class="form-control" id="scheme" name="scheme"  required>
                      <option value=""></option>
                  </select>
               </div>
              
                  <div class="col-sm-4">
                 <label for="">NAME</label>
                    <input type="text" class="form-control" placeholder="Enter Customer  Name"  name="name"  required>
               </div>
                            
                   <div class="col-sm-4">
                 <label for="">EMAIL</label>
                    
<input type="email" 
placeholder="Enter Customer Email " 
class="form-control"
name="email"
 id="email" 
  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" 
  title="Example: abc@example.com" 
  required="required" 
  aria-required="true"
  oninput="this.value = this.value.replace(/[A-Z]/g, '')">
               </div>
            </div>
   
             <br>
   
         <div class="row">
                  
             <div class="col-sm-4">
                  <label for="">MOBILE</label>
                  
                  <input type="tel"  class="form-control" placeholder="Mobile Number" name="mobile" pattern="[0-9]{10}" maxlength="10"  required>

</div>
                  <div class="col-sm-4">
                 <label for="">STATE</label>
                    <input type="text" class="form-control" placeholder=" "  name="state">
               </div>
                   <div class="col-sm-4">
                 <label for="">CITY</label>
                    <input type="text" class="form-control" placeholder="City"  name="city">
               </div>
            </div>
              <br>
   
              <div class="row">
                 
                   <div class="col-sm-4">
                  <label for="">PIN CODE</label>
                  <input type="number" class="form-control" placeholder="PIN CODE" name="pincode">
               </div>
                  <div class="col-sm-4">
                 <label for="">ADDRESS</label>
                    <input type="text" class="form-control" placeholder=""  name="address">
               </div>
                   <div class="col-sm-4">
                 <label for="">CARD NO</label>
                    
                    <input type="text" class="form-control" placeholder="Card No"  name="card_no"  maxlength="12" required>

</div>
               </div>
               <br><br>
                     <button type="submit" class="btn btn-primary">Submit</button>
                     <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
            </div>
          
            </form>

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

</section>

</div>
</body>

<script>
       $(document).ready(function () {
  
    $('#CustRegForm').submit(function (e) {
        e.preventDefault();

var formData = new FormData(this);

// Send AJAX request
        $.ajax({
            url: '<?php echo base_url("create-customer"); ?>', 
            method: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function (response) {
                // Handle success response
                if (response.result === 1) {
                    Swal.fire({
                        title: 'Success!',
                        text: response.message,
                        icon: 'success',
                        confirmButtonText: 'OK'
                    });
                    $('#CustRegForm')[0].reset();
                } else {
                    Swal.fire({
                        title: 'Error!',
                        text: response.message,
                        icon: 'error',
                        confirmButtonText: 'Try Again'
                    });
                }
            },
            error: function (xhr, status, error) {
                // Handle AJAX error
                Swal.fire({
                    title: 'Error!',
                    text: 'Registration failed. Please try again.',
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            }
        });
    });
});

</script>

$(document).ready(function () {
    $.ajax({
        url: '<?php echo base_url("fetch-scheme"); ?>', 
        method: 'GET',
        success: function (response) {
          
            if (response.length > 0) {
                var options = '<option value="">Select Scheme</option>'; 
               
                $.each(response, function (key, value) {
                    options += `<option value="${value.id}">${value.scheme}</option>`;
                });
                $('#scheme').html(options); 
            } else {
                // alert('No funds found');
            }
        },
        error: function (xhr, status, error) {
            console.error("Error fetching scheme:", error);
        }
    });
});
</script>

</html>