<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">

      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="description" content="">
      <meta name="author" content="ThemeBucket">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
      <link rel="shortcut icon" href="images/cancrete.png">

      <title>Blank page</title>

      <!--Core CSS -->
      <link href="bs3/css/bootstrap.min.css" rel="stylesheet">
      <link href="font-awesome/css/font-awesome.css" rel="stylesheet" />

      <!-- Custom styles for this template -->
      <link href="css/style.css" rel="stylesheet">
      <link href="css/sty le-responsive.css" rel="stylesheet" />
      <style>
         body
         {
            font-family:  "Helvetica Neue",Helvetica,Arial,sans-serif;
            font-size: 14px;
         }
         .radius
         {
            border-radius: 0px;
         }
         h2{
            color: #f84854;
            font-size: 22px;
         }
         .modal-content
         {
            background-color: #F7F7F7;
            border-radius: 0px;
         }
         .navbar-inverse {
            background-color: #fff;
            border-color: #f1f1f1;
         }
         .navbar-nav > li > a
         {
            color:#5aaa83 !important;
         }
         .navbar-nav > .dropdown > a .caret
         {
            border-bottom-color: #333 !important;
            border-top-color: #333 !important;
         }
         .navbar-nav > .active > a
         {
            background-color: #f1f1f1 !important;
         }
         .navbar-inverse .navbar-nav>.open>a
         {
            background-color:#5aaa83 !important;
         }
          .navbar-inverse .navbar-nav>.open>a:hover
         {
            background-color:#5aaa83 !important;
         }
         .dropdown-menu
         {
            border-radius: 0px;
         }
         .navbar-inverse .navbar-nav>li>a
         {
             color: #3c9469 !important;
             font-size: 16px;
         }
         .navbar-inverse .navbar-nav>li>a:hover
         {
             background-color:#5aaa83 !important;
             color: #fff !important;
         }
         .navbar-inverse .navbar-nav>li>a:after
         {
             background-color:#5aaa83 !important;
             color: #fff !important;
         }
         .navbar-inverse .navbar-nav>li>a:focus
         {
             background-color:#5aaa83 !important;
             color: #fff !important;
         }
         .navbar-inverse .navbar-nav>li>a:acitve
         {
             background-color:#5aaa83 !important;
             color: #fff !important;
         }
        .table>tbody>tr>th
        {
           color: #333;
        }
        .table-striped>tbody>tr:nth-child(odd)>th
        {
           background-color: #f7f7f7;
        }
      </style>
   </head>

   <body>

      <nav class="navbar navbar-inverse">
         <div class="container-fluid">
            <div class="navbar-header">
               <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>                        
               </button>
               <a class="navbar-brand" href="#"><img src="images/cancrete.png" width="40" height="40" alt="Logo"></a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
               <ul class="nav navbar-nav">
                  <li class="active"><a href="#"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>
                  <li class="dropdown">
                     <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Orders <span class="caret"></span></a>
                     <ul class="dropdown-menu">
                        <li><a href="new_order.php">Create New Order</a></li>
                        <li><a href="list_job.php">List Orders</a></li>
                        <li><a href="list_jobs_data.php">Completed Orders</a></li>
                     </ul>
                  </li>
                  <li class="dropdown">
                     <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-hdd-o" aria-hidden="true"></i> Drivers <span class="caret"></span></a>
                     <ul class="dropdown-menu">
                        <li><a href="driver.php">Add New</a></li>
                        <li><a href="list_invoice.php">List Drivers</a></li>
                     </ul>
                  </li>
                  <li class="dropdown">
                     <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-car" aria-hidden="true"></i> Cars <span class="caret"></span></a>
                     <ul class="dropdown-menu">
                        <li><a href="add_new_car.php.php">Add New</a></li>
                        <li><a href="update_supplier.php">List Cars</a></li>
                     </ul>
                  </li>
                  <li class="dropdown">
                     <a class="dropdown-toggle" data-toggle="dropdown" href="#"> <i class="fa fa-envelope" aria-hidden="true"></i> Invoices <span class="caret"></span></a>
                     <ul class="dropdown-menu">
                        <li><a href="new_job.php">Add New</a></li>
                        <li><a href="Update_job.php">List Invoices</a></li>
                     </ul>
                  </li>
                  <li class="dropdown">
                     <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-credit-card" aria-hidden="true"></i> Payments <span class="caret"></span></a>
                     <ul class="dropdown-menu">
                        <li><a href="add_incoming.php">Add New</a></li>
                        <li><a href="update_incoming.php">List Payments</a></li>
                     </ul>
                  </li>
                  <li class="dropdown">
                     <a class="dropdown-toggle" data-toggle="dropdown" href="#"> <i class="fa fa-id-card" aria-hidden="true"></i> Reports <span class="caret"></span></a>
                     <ul class="dropdown-menu">
                        <li><a href="add_new_payout.php">List of All Orders</a></li>
                        <li><a href="update.php">List of Invoices</a></li>
                        <li><a href="list_payout.php">List of Companies</a></li>
                        <li><a href="list_payout.php">List of Drivers</a></li>
                     </ul>
                  </li>

               </ul>
               <ul class="nav navbar-nav navbar-right">
                  <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
                  <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
               </ul>
            </div>
         </div>
      </nav>

      <div class="container-fluid">

         <!-- Content Section -->
         <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
               <h1 style="font-size:30px; text-shadow: 5px 5px 10px blue;color:#333; font-weight: 700;font-family: cursive;">List of Employee:</h1>
               <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-xs-12 col-sm-12 col-md-12 col-lg-12">
               <h4>Records:</h4>
               <div class="records_content"></div>
            </div>
         </div>

      </div>
      <!-- To Add New Record -->
      <div class="modal fade" 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">
                  <div class="row">
                     <form method="post" id="full_form">
                        <h2>Employee Detail</h2>
                        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                           <div class="form-group">
                              <label for="first_name">First Name</label>
                              <input type="text" id="first_name" placeholder="First Name" class="form-control radius" />
                           </div>
                           <div class="form-group">
                              <label for="phone">Phone</label>
                              <input type="text" id="phone" placeholder="Phone" class="form-control radius" />
                           </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                           <div class="form-group">
                              <label for="last_name">Last Name</label>
                              <input type="text" id="last_name" placeholder="Last Name" class="form-control radius" />
                           </div>
                           <div class="form-group">
                              <label for="email">Email Address</label>
                              <input type="text" id="email" placeholder="Email Address" class="form-control radius" />
                           </div>
                        </div>
                        <h2>Contact Address Details</h2>
                        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                           <div class="form-group">
                              <label for="address_first">Address</label>
                              <input type="text" id="address_first" placeholder="Address" class="form-control radius" />
                           </div>
                           <div class="form-group">
                              <label for="city">City</label>
                              <input type="text" id="city" placeholder="City" class="form-control radius" />
                           </div>
                           <div class="form-group">
                              <label for="pin_code">Pin Code</label>
                              <input type="text" id="pin_code" placeholder="Pin Code" class="form-control radius" />
                           </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                           <div class="form-group">
                              <label for="address_second">Address</label>
                              <input type="text" id="address_second" placeholder="Address" class="form-control radius" />
                           </div>
                           <div class="form-group">
                              <label for="state">State</label>
                              <input type="text" id="state" placeholder="State" class="form-control radius" />
                           </div>

                        </div>
                        <div class="col-md-12">
                           <h2>Employee Detail</h2>
                           <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                              <div class="form-group">
                                 <label for="emr_contact">Emergency Contact Detail</label>
                                 <input type="text" id="emr_contact" placeholder="First Name" class="form-control radius" />
                              </div>
                              <div class="form-group">
                                 <label for="emr_phone">Emergency Phone</label>
                                 <input type="text" id="emr_phone" placeholder="Phone" class="form-control radius" />
                              </div>
                           </div>
                           <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                              <div class="form-group">
                                 <label for="emr_name">Emergency Contact Name</label>
                                 <input type="text" id="emr_name" placeholder="Last Name" class="form-control radius" />
                              </div>
                           </div>
                        </div>
                     </form>
                  </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="addRecord()">Add Record</button>
               </div>
            </div>
         </div>
      </div>


      <!-- Modal - Update User details -->
      <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="row">
                     <form method="post" id="full_form">
                        <h2>Employee Detail</h2>
                        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                           <div class="form-group">
                              <label for="first_name">First Name</label>
                              <input type="text" id="first_name" placeholder="First Name" class="form-control radius" />
                           </div>
                           <div class="form-group">
                              <label for="phone">Phone</label>
                              <input type="text" id="phone" placeholder="Phone" class="form-control radius" />
                           </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                           <div class="form-group">
                              <label for="last_name">Last Name</label>
                              <input type="text" id="last_name" placeholder="Last Name" class="form-control radius" />
                           </div>
                           <div class="form-group">
                              <label for="email">Email Address</label>
                              <input type="text" id="email" placeholder="Email Address" class="form-control radius" />
                           </div>
                        </div>
                        <h2>Contact Address Details</h2>
                        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                           <div class="form-group">
                              <label for="address_first">Address</label>
                              <input type="text" id="address_first" placeholder="Address" class="form-control radius" />
                           </div>
                           <div class="form-group">
                              <label for="city">City</label>
                              <input type="text" id="city" placeholder="City" class="form-control radius" />
                           </div>
                           <div class="form-group">
                              <label for="pin_code">Pin Code</label>
                              <input type="text" id="pin_code" placeholder="Pin Code" class="form-control radius" />
                           </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                           <div class="form-group">
                              <label for="address_second">Address</label>
                              <input type="text" id="address_second" placeholder="Address" class="form-control radius" />
                           </div>
                           <div class="form-group">
                              <label for="state">State</label>
                              <input type="text" id="state" placeholder="State" class="form-control radius" />
                           </div>

                        </div>
                        <div class="col-md-12">
                           <h2>Employee Detail</h2>
                           <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                              <div class="form-group">
                                 <label for="emr_contact">Emergency Contact Detail</label>
                                 <input type="text" id="emr_contact" placeholder="First Name" class="form-control radius" />
                              </div>
                              <div class="form-group">
                                 <label for="emr_phone">Emergency Phone</label>
                                 <input type="text" id="emr_phone" placeholder="Phone" class="form-control radius" />
                              </div>
                           </div>
                           <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                              <div class="form-group">
                                 <label for="emr_name">Emergency Contact Name</label>
                                 <input type="text" id="emr_name" placeholder="Last Name" class="form-control radius" />
                              </div>
                           </div>
                        </div>
                     </form>
                  </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>
      <!-- Placed js at the end of the document so the pages load faster -->

      <!--Core js-->
    
          <script src="js/jquery-1.9.1.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
 
      <script type="text/javascript">
                                 $(document).ready(function() {
                                    //alert();
                                    // READ recods on page load
                                    readRecords(); // calling function
                                 });

                                 function addRecord() {
                                    // get values
                                    var first_name = $("#first_name").val();
                                    var last_name = $("#last_name").val();
                                    var email = $("#email").val();
                                    var address_first = $("#address_first").val();
                                    var city = $("#city").val();
                                    var pin_code = $("#pin_code").val();
                                    var address_second = $("#address_second").val();
                                    var state = $("#state").val();
                                    var emr_contact = $("#emr_contact").val();
                                    var emr_phone = $("#emr_phone").val();
                                    var emr_name = $("#emr_name").val();

                                    // Add record
                                    $.post("addRecord.php", {
                                       first_name: first_name,
                                       last_name: last_name,
                                       email: email,
                                       address_first: address_first,
                                       city: city,
                                       pin_code: pin_code,
                                       address_second: address_second,
                                       state: state,
                                       emr_contact: emr_contact,
                                       emr_phone: emr_phone,
                                       emr_name: emr_name

                                    }, function(data, status) {
                                       // close the popup
                                       $("#add_new_record_modal").modal("hide");

                                       // read records again
                                       readRecords();

                                       // clear fields from the popup
                                       $("#first_name").val("");
                                       $("#last_name").val("");
                                       $("#email").val("");
                                       $("#address_first").val("");
                                       $("#city").val("");
                                       $("#pin_code").val("");
                                       $("#address_second").val("");
                                       $("#state").val("");
                                       $("#emr_contact").val("");
                                       $("#emr_phone").val("");
                                       $("#emr_name").val("");
                                    });
                                 }

                                 // READ records
                                 function readRecords() {
                                    $.get("readRecord.php", {}, function(data, status) {
                                       $(".records_content").html(data);
                                    });
                                 }
                                 // functon to get the details of selected record

                                 function GetUserDetails(id) {
                                    // Add User ID to the hidden field for furture usage
                                    $("#hidden_user_id").val(id);
                                    $.post("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.first_name);
                                       $("#update_last_name").val(user.last_name);
                                       $("#update_email").val(user.email);
                                       $("#update_address_first").val(user.address_first);
                                       $("#update_city").val(user.city);
                                       $("#update_pin_code").val(user.pin_code);
                                       $("#update_address_second").val(user.address_second);
                                       $("#update_state").val(user.state);
                                       $("#update_emr_contact").val(user.emr_contact);
                                       $("#update_emr_phone").val(user.emr_phone);
                                       $("#update_emr_name").val(user.emr_name);
                                    }
                                    );
                                    // Open modal popup
                                    $("#update_user_modal").modal("show");
                                 }
                                 //Now Update this address


                                 function UpdateUserDetails() {
                                    // get values
                                    var first_name = $("#update_first_name").val();
                                    var last_name = $("#update_last_name").val();
                                    var email = $("#update_email").val();
                                    var address_first = $("#update_address_first").val();
                                    var city = $("#update_city").val();
                                    var pin_code = $("#update_pin_code").val();
                                    var address_second = $("#update_address_second").val();
                                    var state = $("#update_state").val();
                                    var emr_contact = $("#update_emr_contact").val();
                                    var emr_phone = $("#update_emr_phone").val();
                                    var emr_name = $("#update_emr_name").val();

                                    // get hidden field value
                                    var id = $("#hidden_user_id").val();

                                    // Update the details by requesting to the server using ajax
                                    $.post("emp_CRUD/updateUserDetails.php", {
                                       id: id,
                                       first_name: first_name,
                                       last_name: last_name,
                                       email: email,
                                       address_first: address_first,
                                       city: city,
                                       pin_code: pin_code,
                                       address_second: address_second,
                                       state: state,
                                       emr_contact: emr_contact,
                                       emr_phone: emr_phone,
                                       emr_name: emr_name
                                    },
                                    function(data, status) {
                                       // hide modal popup
                                       $("#update_user_modal").modal("hide");
                                       // reload Users by using readRecords();
                                       readRecords();
                                    }
                                    );
                                 }

                                 //Delete the record

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




      </script>
      
   </body>
</html>
