<!DOCTYPE html>
<html lang="en">
<?php 
include "dbconfig.php";
include "head.php";
?>

<body>
<style>
#add_new_record_modal .modal-dialog
{
  width: 70%;
}</style>
 <div class="container-fluid">
   <div class="row">
                              <!-- Content Section -->
                                  <div class="container">
                                  <div class="row">
                                  <div class="col-md-12">
                                  <h2>List of Customers:</h2>
                                  <div class="pull-right">
                                  <button class="btn btn-success" data-toggle="modal" data-target="#add_new_record_modal">Add New Record</button>
                                  </div>
                                  </div>
                                  </div>
                                  <div class="row">
                                  <div class="col-md-12">
                                  <h4>Records:</h4>
                                  <div class="records_content"></div>
                                  </div>
                                  </div>
                                  </div>

                           
                        </div>
   <!-- New Record Modal -->
   <div class="modal fade modal-lg" id="add_new_record_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                              <div class="modal-dialog" role="document">
                              <div class="modal-content">
                              <div class="modal-header">
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                              <h4 class="modal-title" id="myModalLabel">Add New Record</h4>
                              </div>
                              <div class="modal-body">
                              <form id="new_company_form" method="post"> 
                              <legend> <span class="glyphicon glyphicon-th-list">  </span> Company Deatils </legend>
                              <div class="col-md-12">
                        <div class="col-md-4">
                        <label for="full_name">Full Name</label>
                        <div class="input-group">
                          <input type="text" id="company_name" name="company_name" placeholder="Enter Full Name" class="form-control"  tabindex="2" >
                          <span class="input-group-btn">
                  <span class="btn btn-default pull-right"> 
                    <i class="glyphicon glyphicon-user"></i>
                  </span>  
                </span>
                       </div><br>
                       
                        <label for="post_code">Post Code</label>
                  <div class="input-group">
                    <input type="text" id="customer_post_code" name="post_code" placeholder="Enter Post Code" class="form-control"  tabindex="5" >
                    <span class="input-group-btn">
                  <span class="btn btn-default pull-right"> 
                    <i class="glyphicon glyphicon-map-marker"></i>
                  </span>  
                </span>
                  </div><br>
                      
                     </div>
                     <div class="col-md-4">
                        
                        
               <label for="phone">Phone</label>
                  <div class="input-group">
                    <input type="text" id="phone" name="phone" placeholder="Enter Phone Number" class="form-control"  tabindex="3" >
                    <span class="input-group-btn">
                  <span class="btn btn-default pull-right"> 
                    <i class="glyphicon glyphicon-phone"></i>
                  </span>  
                </span>
                  </div><br>
            
                   <label for="city">Town</label>
                       <div class="input-group">
                         <input name="city" type="text" id="customer_city" placeholder="Enter City" class="form-control"  tabindex="6" >
                          <span class="input-group-btn">
                  <span class="btn btn-default pull-right"> 
                    <i class="glyphicon glyphicon-map-marker"></i>
                  </span>  
                </span>
                      </div><br> 
                       
                  </div>
    <div class="col-md-4">
                        
                        
              <label for="address1">Address </label>
                       <div class="input-group">
                         <input type="text" name="customer_address1" placeholder="Enter Address" class="form-control"  tabindex="4" >
                         <span class="input-group-btn">
                  <span class="btn btn-default pull-right"> 
                    <i class="glyphicon glyphicon-map-marker"></i>
                  </span>  
                </span>
                       </div><br>
                       </div>
                    <div class="col-md-4">   
					    <label for="post_code">post_code </label>
                       <div class="input-group">
                         <input name="company_post_code" type="text" id="company_post_code" placeholder="abc@outlook.com" class="form-control"  tabindex="4" >
                         <span class="input-group-btn">
                  <span class="btn btn-default pull-right"> 
                    <i class="glyphicon glyphicon-envelope"></i>
                  </span>  
                </span>
                       </div>
                             
                              </div>
                              </div>
                                     
                           <div class="clearfix"></div>
                         
                              <div class="modal-footer">
                              <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                              <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="addRecord()">Add Record</button>
                              </div>
                              </div>
                              </div>
                              </div>
           </div>
           
           
   
     
     <!-- update Records -->
     <div class="modal fade" id="update_user_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                                        <div class="modal-dialog" role="document">
                                                    <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                    <h4 class="modal-title" id="myModalLabel">Update</h4>
                                                </div>
                                                <div class="modal-body">
                                     
                                                    <div class="form-group">
                                                        <label for="update_first_name">Company Name</label>
                                                        <input type="text" id="update_first_name" placeholder="Company Name" class="form-control"/>
                                                    </div>
                                     
                                                    <div class="form-group">
                                                        <label for="update_phone">Phone</label>
                                                        <input type="text" id="update_phone" placeholder="Last Name" class="form-control"/>
                                                    </div>
                                     
                                                    <div class="form-group">
                                                        <label for="update_post_code">Post Code</label>
                                                        <input type="text" id="update_post_code" placeholder="Place Address" class="form-control"/>
                                                    </div>
                                     
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                                    <button type="button" class="btn btn-primary" onclick="UpdateUserDetails()" >Save Changes</button>
                                                    <input type="hidden" id="hidden_user_id">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

     </div>
     <script>
	 $(document).ready(function() {
         //alert();
         // READ recods on page load
         readRecords(); // calling function
      });
	 
	function readRecords() {
    $.get("cus_CRUD/readRecord.php", {}, function (data, status) {
        $(".records_content").html(data);
    });
   }
	
    function addRecord() {
      var form=$('#new_company_form');
      
                $.ajax({
                    type: "POST",
                    url: "cus_CRUD/create_company.php",
              data: form.serialize(),
                    success: function(data) {
                   if(data=='success')
				   {
				   readRecords();
				   }
		         }
               }); 
	         }
	//Update Custoemr Function
	function UpdateUserDetails() {
    // get values
    var first_name = $("#update_first_name").val();
    var phone = $("#update_phone").val();
    var post_code = $("#update_post_code").val();
 
    // get hidden field value
    var id = $("#hidden_user_id").val();
 
    // Update the details by requesting to the server using ajax
    $.post("cus_CRUD/updateUserDetails.php", {
            id: id,
            first_name: first_name,
            phone: phone,
            post_code: post_code
        },
        function (data, status) {
            // hide modal popup
            $("#update_user_modal").modal("hide");
            // reload Users by using readRecords();
            readRecords();
        }
    );
}

function GetUserDetails(id) {
    // Add User ID to the hidden field for furture usage
    $("#hidden_user_id").val(id);
    $.post("cus_CRUD/readUserDetails.php", {
            id: id
        },
        function (data, status) {
            // PARSE json data
            var user = JSON.parse(data);
			
            // Assing existing values to the modal popup fields
            $("#update_first_name").val(user.name);
            $("#update_phone").val(user.phone);
            $("#update_post_code").val(user.post_code);
	    }
    );
    // Open modal popup
    $("#update_user_modal").modal("show");
}

   // Delete Customer Function
	function DeleteUser(id) {
    var conf = confirm("Are you sure, do you really want to delete User?");
    if (conf == true) {
        $.post("cus_CRUD/deleteRecord.php", {
                id: id
            },
            function (data, status) {
                // reload Users by using readRecords();
                readRecords();
            }
        );
    }
}

</script>

   </body>
</html>
