<?php 
  /*include("auth.php"); //include auth.php file on all secure pages*/
  include("add_employee.php");
?>

<?php
$conn = mysqli_connect("localhost", "root", "", "p2");

if (isset($_POST["import"])) {
    
    $fileName = $_FILES["file"]["tmp_name"];
    
    if ($_FILES["file"]["size"] > 0) {
        
        
        $file = fopen($fileName, "r");
        
        while (($column = fgetcsv($file, 10000, ",")) !== FALSE) {

            $sqlInsert = "INSERT into records(emp_id,lname,fname,gender,contact,email,dob,jdate,address,city,zip,country,emp_type,division,basic_pay,bu,ee_level,position,username,password)
                   values ('" . $column[0] . "','" . $column[1] . " ','" . $column[2] . "','" . $column[3] . "','" . $column[4] . "','" . $column[5] . "','" . $column[6] . "','" . $column[7] . "','" . $column[8] . "','" . $column[9] . "','" . $column[10] . "','" . $column[11] . "','" . $column[12] . "','" . $column[13] . "','" . $column[14] . "','" . $column[15] . "','" . $column[16] . "','" . $column[17] . "','" . $column[18] . "','" . $column[19] . "')";

            $result = mysqli_query($conn, $sqlInsert);
            
            if (! empty($result)) {
                $type = "success";
                $message = "CSV Data Imported into the Database";

            } else {
                $type = "error";
                $message = "Problem in Importing CSV Data";
            }

        }
    }

}

?>

<!DOCTYPE html>
<html lang="en">
  <head>

    <!-- Meta, title, CSS, favicons, etc. -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.">
        <meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development">
        <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
     

        <title></title>

    <script>
      <!--
        var ScrollMsg= "Payroll - "
        var CharacterPosition=0;
        function StartScrolling() {
        document.title=ScrollMsg.substring(CharacterPosition,ScrollMsg.length)+
        ScrollMsg.substring(0, CharacterPosition);
        CharacterPosition++;
        if(CharacterPosition > ScrollMsg.length) CharacterPosition=0;
        window.setTimeout("StartScrolling()",150); }
        StartScrolling();
      // -->
    </script>
  <script>
    
        function formValidation()  
        {  
          var zip=document.form.zip.value; 
          var contact=document.form.contact.value; 
          var city=document.form.city.value;
          var country=document.form.country.value;
          var address=document.form.address.value;
          var x=document.form.email.value;  
          var atposition=x.indexOf("@");  
          var dotposition=x.lastIndexOf("."); 
            
          if (isNaN(zip) || zip.length!=6)
          {  
            alert("Enter valid zip");  
            return false;  
          }
          if (isNaN(contact) || contact.length!=10)
          {  
            alert("Enter valid contact number");  
            return false;  
          }
          if (atposition<1 || dotposition<atposition+2 || dotposition+2>=x.length)
          {  
            alert("Please enter a valid e-mail address");  
            return false;  
                    }
          if (!isNaN(city))
          {  
            alert("City should be letters only");  
            return false;  
          }
          if (!isNaN(country))
          {  
            alert("Country should be letters only");  
            return false;  
          }
          if (!alphanumeric(address))
          {  
            alert("Address must be alphanumeric");  
            return false;  
          }
          
          return true;
        }
          
        

  </script>
  
    <link href="assets/must.png" rel="shortcut icon">
    <link href="assets/css/justified-nav.css" rel="stylesheet">


    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <!-- <link href="data:text/css;charset=utf-8," data-href="assets/css/bootstrap-theme.min.css" rel="stylesheet" id="bs-theme-stylesheet"> -->
    <!-- <link href="assets/css/docs.min.css" rel="stylesheet"> -->
    <link href="assets/css/search.css" rel="stylesheet">
    <!-- <link rel="stylesheet" href="assets/css/styles.css" /> -->
    <link rel="stylesheet" type="text/css" href="assets/css/dataTables.min.css">

     <link href="assets/must.png" rel="shortcut icon">
    <link href="assets/css/justified-nav.css" rel="stylesheet">


    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <!-- <link href="data:text/css;charset=utf-8," data-href="assets/css/bootstrap-theme.min.css" rel="stylesheet" id="bs-theme-stylesheet"> -->
    <!-- <link href="assets/css/docs.min.css" rel="stylesheet"> -->
    <link href="assets/css/search.css" rel="stylesheet">
    <!-- <link rel="stylesheet" href="assets/css/styles.css" /> -->
    <link rel="stylesheet" type="text/css" href="assets/css/dataTables.min.css">

  </head>
  <body>

    <div class="container">
      <div class="masthead">
        <h3>
          <b><a href="index.php">Employee Payroll Management System</a></b>
            <a data-toggle="modal" href="#colins" class="pull-right"><b>Admin</b></a>
        </h3>
        <nav>
          <ul class="nav nav-justified">
            <li class="active">
              <a href="">Employee</a>
            </li>
            <li>
              <a href="home_deductions.php">Deduction/s</a>
            </li>
            <li>
              <a href="home_salary.php">Payroll</a>
            </li>
      <li>
              <a href="employee_dtr.php">DTR</a>
            </li>
         
            </li>
          </ul>
        </nav>
      </div>
  
  <!-- Start: My Profile -->

  <?php


  $connection = mysqli_connect("localhost","root","","p2");

if ($connection->connect_error)
{
  die("Connection failed: " . $connection->connect_error);
} 

  $thisid = 47002;

 $sql       = 'select * from records where emp_id ='.$thisid;

    $results   = mysqli_query($connection, $sql);


    $row_count = mysqli_num_rows($results);
    $id = 0;
  
    while ($row = mysqli_fetch_array($results)) {
      /*  echo '<tr><td><a href="OBApprove.php?id='.$row['obid'].'">'.$row['emp_number'].'</a></td></tr>';
        echo '<td>'.$row['emp_id'].'</td>';
        echo '<td>'.$row['dept_from'].'</td>';
        echo '<td>'.$row['dept_to'].'</td>';
        echo '<td>'.$row['purpose'].'</td>';
        echo '<td>'.$row['dept_time'].'</td>';
        echo '<td>'.$row['return_time'].'</td>';
        echo '<td>'.$row['status'].'</td>';*/

        $lname = $row['lname'];
        $contact_no = $row['contact'];
        $address = $row['address'];
        $city = $row['city'];
        $zip = $row['zip'];
        $dob = $row['dob'];
        $fname = $row['fname'];
        $emp_id = $row['emp_id'];
        $gender = $row['gender'];
        $joined_date = $row['jdate'];
        $department = $row['division'];
        $jobtitle = $row['position'];
        $emp_status = $row['emp_type'];
        $sub_unit = $row['bu'];
        $joined_date = $row['jdate'];
        // /$job_title_code = $row['job_title_code'];



}
?>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.min.css">
    <link
      rel="stylesheet"
      href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85807/font-awesome.css"
    />
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
  </head>
  <body>
    <div class="main">
      <div class="info">
        <div class="row">
          <div class="col-sm-12">
            <h2>My Info</h2>
            <div class="myborder" style="margin-bottom: 30px;"></div>
            <div class="tab-container">
              <ul
                class="nav nav-tabs nav-tabs-left nav-centered"
                role="tablist"
              >
                <li role="presentation" class="active">
                  <a href="#web-dev" data-toggle="tab" role="tab">
                    Personal Info
                  </a>
                </li>
                <li role="presentation">
                  <a href="#graphic" data-toggle="tab" role="tab">
                    Contact Details
                  </a>
                </li>
                <li role="presentation">
                  <a href="#marketing" data-toggle="tab" role="tab">
                    Job &amp; Salary
                  </a>
                </li>
                <li role="presentation">
                  <a href="#business" data-toggle="tab" role="tab">
                    Report-to &amp; Qualifications
                  </a>
                </li>
              </ul>
              <div
                id="my_side_tabs"
                class="tab-content side-tabs side-tabs-left"
              >
                <div
                  class="tab-pane fade in active"
                  id="web-dev"
                  role="tabpanel"
                >
                  <div class="col-sm-6">
                    <ul class="flex-outer" id="personal-details">
                      <li>
                        <label for="">Employee ID</label>
                        <input type="text"  value =<?php echo $thisid?> disabled />
                      </li>
                      <div class="myborder"></div>
                      <li>
                        <label for="">First Name</label>
                        <input type="text" class="editable" value =<?php echo $fname?> disabled />
                      </li>
                      <li>
                        <label for="">Middle Name</label>
                        <input type="text" class="editable" disabled />
                      </li>
                      <li>
                        <label for="">Last Name</label>
                        <input type="text" class="editable" value =<?php echo $lname?> disabled />
                      </li>
                      <div class="myborder"></div>
                      <li>
                        <label for="">Gender</label>
                        <select class="form-control editable" id="exampleFormControlSelect1" disabled>
                                 
                                 <option selected="selected"><?php echo $gender?></option>
                                <option>Male</option>
                                <option>Female</option>
                                <option>LGBT</option>
                        </select>
                      </li>
                      <li>
                        <label for="">Marital Status</label>
                        <select class="form-control editable" id="exampleFormControlSelect1" disabled>
                                <option>Single</option>
                                <option>Married</option>
                                <option>Widowed</option>
                                <option>Divorced</option>
                                
                        </select>
                      </li>
                      <li>
                        <label for="">Date of Birth</label>
                        <div class="input-group date editable" data-date-format="mm-dd-yyyy">
                                <input type="text" class="form-control editable" placeholder="mm-dd-yyyy" value= <?php echo $dob ?> disabled>
                                <div class="input-group-addon" >
                                  <span class="glyphicon glyphicon-calendar"></span>
                                </div>
                              </div>
                      </li>
                      <li><input type="submit" value="Edit" class="btnEdit" id="button" /></li>
                      <li><input type="submit" value="Save" class="btnSave" id="button" /></li>
                    </ul>
                  </div>
                  <div class="col-sm-6">
                      <div class="my-photo">
                            <div class="photo-cont">
                                <img src="avatar.png" alt="" srcset="">
                            </div>
                            
                            <div class="photo-upload">
                                    
                                    <label for="avatar">Choose a profile picture:</label>
                                    <input type="file" class="form-control"
                                        id="avatar" name="avatar"
                                        accept="image/png, image/jpeg">
                            </div>
                      </div>
                  </div>
                  <div class="col-sm-6"></div>
                </div>
                <div class="tab-pane fade" id="graphic" role="tabpanel">
                  <div class="col-sm-6">
                    <ul class="flex-outer" id="contact-details">
                      <li>
                        <label for="">Permanent Address</label>
                        <input type="text" class="editable" value=<?php echo $address ?> disabled />
                      </li>
    
                      <li>
                        <label for="">Current Address</label>
                        <input type="text" class="editable" value=<?php echo $address ?> disabled />
                      </li>
                      <li>
                        <label for="">City</label>
                        <input type="text" class="editable" value=<?php echo $city ?> disabled />
                      </li>
                      <li>
                        <label for="">State/Province</label>
                        <input type="text" class="editable" value=<?php echo $city ?> disabled />
                      </li>
                     
                      <li>
                        <label for="">Zip/Postal Code</label>
                        <input type="text" class="editable" value=<?php echo $zip ?> disabled />
                      </li>
                      <div class="myborder"></div>
                      <li>
                        <label for="">Home Telephone</label>
                        <input type="text" class="editable" disabled />
                      </li>
                      <li>
                        <label for="">Mobile Number</label>
                        <input type="text" class="editable" value=<?php echo $contact_no ?> disabled />
                      </li>
                      <li>
                        <label for="">Work Number</label>
                        <input type="text" class="editable" value=<?php echo $contact_no ?> disabled />
                      </li>
                      <div class="myborder"></div>
                      <li>
                        <label for="">Work Email</label>
                        <input type="text" class="editable" disabled />
                      </li>
                      <li>
                        <label for="">Personal Email</label>
                        <input type="text" class="editable" disabled />
                      </li>
                      <li><input type="submit" value="Edit" class="btnEdit" id="button" /></li>
                      <li><input type="submit" value="Save" class="btnSave" id="button" /></li>
                    </ul>
                  </div>
                  <div class="col-sm-6">
                    <ul class="flex-outer" id="emergency-details">
                      <h4>Emergency Contacts</h4>
                      <table class="table hover" id="resultTable">
                            <thead>
                              <tr>
                                <th rowspan="1" style="width:24%">
                                  <span class="headerCell">Name</span>
                                </th>
                                <th rowspan="1" style="width:18%">
                                  <span class="headerCell">Relationship</span>
                                </th>
                                <th rowspan="1" style="width:10%">
                                  <span class="headerCell">Home Telephone</span>
                                </th>
                                <th rowspan="1" style="width:12%">
                                  <span class="headerCell">Mobile Number</span>
                                </th>
                                <th rowspan="1" style="width:9%">
                                  <span class="headerCell">Work Telephone</span>
                                </th>
                              </tr>
                            </thead>
                  
                            <tbody>
                              <tr>
                                
                              </tr>
                            </tbody>
                          </table>
                      <li>
                          <a href="#" data-toggle="modal" data-target="#emergencyModal"><input type="submit" value="Add" id="button" /></a>
                          
                        <div class="modal fade" id="emergencyModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title" id="myModalLabel">Add Emergency Contact</h4>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                                </button>
                            </div>

                            <!-- Emergency Contact Details -->
                            <div class="modal-body">
                                    <ul class="flex-outer" id="contact-details">
                                            <li>
                                              <label for="">Name</label>
                                              <input type="text" />
                                            </li>
                          
                                            <li>
                                              <label for="">Relationsip</label>
                                              <input type="text"  />
                                            </li>
                                            <li>
                                              <label for="">Home Telephone</label>
                                              <input type="text" />
                                            </li>
                                            <li>
                                              <label for="">Mobile Number</label>
                                              <input type="text"  />
                                            </li>
                                           
                                            <li>
                                              <label for="">Work Telephone</label>
                                              <input type="text" />
                                            </li>
                                            
                                          </ul>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Save changes</button>
                            </div>
                            </div>
                        </div>
                        </div>
                      </li>
                      <li>
                            <input type="submit" value="Remove" id="button" />
                      </li>
                      
                      
                    </ul>
                  </div>
                </div>
                <div class="tab-pane fade" id="marketing" role="tabpanel">
                  <div class="col-sm-6">
                        <ul class="flex-outer" id="personal-details">
                                <li>
                                  <label for="">Job Title</label>
                                  <input type="text"  value=<?php echo $jobtitle; ?> disabled />
                                </li>
                                <li>
                                  <label for="">Job Specification</label>
                                  <input type="text" disabled />
                                </li>
                                <li>
                                  <label for="">Employment Status</label>
                                  <input type="text" value=<?php echo $emp_status; ?> disabled />
                                </li>
                                <li>
                                  <label for="">Job Category</label>
                                  <input type="text" disabled />
                                </li>
                                <li>
                                  <label for="">Joined Date</label>
                                  <input type="text" value=<?php echo $joined_date  ; ?> disabled />
                                </li>
                                <li>
                                  <label for="">Sub Unit</label>
                                  <input type="text" value=<?php echo $sub_unit; ?> disabled />
                                </li>
                                <li>
                                  <label for="">Location</label>
                                  <input type="text" disabled />
                                </li>
                                <div class="myborder"></div>
                                <h4>Employment Contract</h4>
                                <li>
                                  <label for="">Start Date</label>
                                  <div class="input-group date" data-date-format="mm-dd-yyyy">
                                        <input  type="text" class="form-control" placeholder="mm-dd-yyyy" value=<?php echo $joined_date; ?> disabled>
                                        <div class="input-group-addon" >
                                          <span class="glyphicon glyphicon-calendar"></span>
                                        </div>
                                      </div>
                                </li>
                                <li>
                                  <label for="">End Date</label>
                                  <div class="input-group date" data-date-format="mm-dd-yyyy">
                                        <input  type="text" class="form-control" placeholder="mm-dd-yyyy" disabled>
                                        <div class="input-group-addon" >
                                          <span class="glyphicon glyphicon-calendar"></span>
                                        </div>
                                      </div>
                                </li>
                                <li>
                                  <label for="">Contract Details</label>
                                  <input type="text" disabled />
                                </li>
                              </ul>
                  </div>
                  <div class="col-sm-6">
                        <h4>Assigned Salary Components</h4>
                        <table class="table hover" id="resultTable">
                              <thead>
                                <tr>
                                  <th rowspan="1" style="width:24%">
                                    <span class="headerCell">Salary Component</span>
                                  </th>
                                  <th rowspan="1" style="width:18%">
                                    <span class="headerCell">Pay Frequency</span>
                                  </th>
                                  <th rowspan="1" style="width:10%">
                                    <span class="headerCell">Currency</span>
                                  </th>
                                  <th rowspan="1" style="width:12%">
                                    <span class="headerCell">Amount</span>
                                  </th>
                                  <th rowspan="1" style="width:9%">
                                    <span class="headerCell">Comments</span>
                                  </th>
                                  <th rowspan="1" style="width:9%">
                                    <span class="headerCell">Show Direct Deposit Details</span>
                                  </th>
                                </tr>
                              </thead>
                    
                              <tbody>
                                <tr>
                                  
                                </tr>
                              </tbody>
                            </table>
                  </div>
                </div>
                <div class="tab-pane fade" id="business" role="tabpanel">
                  <div class="col-sm-6">
                        <h4>Assigned Supervisors</h4>
                        <table class="table hover" id="resultTable">
                              <thead>
                                <tr>
                                  <th rowspan="1" style="width:24%">
                                    <span class="headerCell">Name</span>
                                  </th>
                                  <th rowspan="1" style="width:18%">
                                    <span class="headerCell">Reporting Method</span>
                                  </th>
                                </tr>
                              </thead>
                    
                              <tbody>
                                <tr>
                                  
                                </tr>
                              </tbody>
                            </table>
                        <h4>Assigned Subordinates</h4>
                        <table class="table hover" id="resultTable">
                              <thead>
                                <tr>
                                  <th rowspan="1" style="width:24%">
                                    <span class="headerCell">Name</span>
                                  </th>
                                  <th rowspan="1" style="width:18%">
                                    <span class="headerCell">Reporting Method</span>
                                  </th>
                                </tr>
                              </thead>
                    
                              <tbody>
                                <tr>
                                  
                                </tr>
                              </tbody>
                            </table>
                  </div>
                  <div class="col-sm-6">
                    <h4>Work Experience</h4>
                        <table class="table hover" id="resultTable">
                              <thead>
                                <tr>
                                  <th rowspan="1" style="width:24%">
                                    <span class="headerCell">Company</span>
                                  </th>
                                  <th rowspan="1" style="width:18%">
                                    <span class="headerCell">Job Title</span>
                                  </th>
                                  <th rowspan="1" style="width:18%">
                                    <span class="headerCell">From</span>
                                  </th>
                                  <th rowspan="1" style="width:18%">
                                    <span class="headerCell">To</span>
                                  </th>
                                  <th rowspan="1" style="width:18%">
                                    <span class="headerCell">Comment</span>
                                  </th>
                                </tr>
                              </thead>
                    
                              <tbody>
                                <tr>
                                  
                                </tr>
                              </tbody>
                            </table>
                            <a href="#" data-toggle="modal" data-target="#workModal"><input type="submit" value="Add" id="button" /></a>
                          
                            <div class="modal fade" id="workModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title" id="myModalLabel">Work Experience</h4>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                        <ul class="flex-outer" id="contact-details">
                                                <li>
                                                  <label for="">Company</label>
                                                  <input type="text" />
                                                </li>
                              
                                                <li>
                                                  <label for="">Job Title</label>
                                                  <input type="text"  />
                                                </li>
                                                <li>
                                                  <label for="">From</label>
                                                  <div class="input-group date editable" data-date-format="mm-dd-yyyy">
                                                        <input type="text" class="form-control" placeholder="mm-dd-yyyy" >
                                                        <div class="input-group-addon" >
                                                          <span class="glyphicon glyphicon-calendar"></span>
                                                        </div>
                                                      </div>
                                                </li>
                                                <li>
                                                  <label for="">To</label>
                                                  <div class="input-group date editable" data-date-format="mm-dd-yyyy">
                                                        <input type="text" class="form-control" placeholder="mm-dd-yyyy" >
                                                        <div class="input-group-addon" >
                                                          <span class="glyphicon glyphicon-calendar"></span>
                                                        </div>
                                                      </div>
                                                </li>
                                               
                                                <li>
                                                  <label for="">Comment</label>
                                                  <input type="text" />
                                                </li>
                                                
                                              </ul>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    <button type="button" class="btn btn-primary">Save changes</button>
                                </div>
                                </div>
                            </div>
                            </div>



                    <!--work exp end-->
                    <h4>Education</h4>
                        <table class="table hover" id="resultTable">
                              <thead>
                                <tr>
                                  <th rowspan="1" style="width:24%">
                                    <span class="headerCell">Level</span>
                                  </th>
                                  <th rowspan="1" style="width:18%">
                                    <span class="headerCell">Year</span>
                                  </th>
                                  <th rowspan="1" style="width:18%">
                                    <span class="headerCell">Honors</span>
                                  </th>
                                </tr>
                              </thead>
                    
                              <tbody>
                                <tr>
                                  
                                </tr>
                              </tbody>
                            </table>
                            <a href="#" data-toggle="modal" data-target="#educationModal"><input type="submit" value="Add" id="button" /></a>
                          
                            <div class="modal fade" id="educationModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title" id="myModalLabel">Education</h4>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                        <ul class="flex-outer" id="contact-details">
                                                <li>
                                                  <label for="">Level</label>
                                                  <input type="text" />
                                                </li>
                              
                                                <li>
                                                  <label for="">Year</label>
                                                  <input type="text"  />
                                                </li>
                                                
                                               
                                                <li>
                                                  <label for="">Honors</label>
                                                  <input type="text" />
                                                </li>
                                                
                                              </ul>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    <button type="button" class="btn btn-primary">Save changes</button>
                                </div>
                                </div>
                            </div>
                            </div>
                    <h4>Skills</h4>
                        <table class="table hover" id="resultTable">
                              <thead>
                                <tr>
                                  <th rowspan="1" style="width:24%">
                                    <span class="headerCell">Skill</span>
                                  </th>
                                  <th rowspan="1" style="width:18%">
                                    <span class="headerCell">Years of Experience</span>
                                  </th>
                                </tr>
                              </thead>
                    
                              <tbody>
                                <tr>
                                  
                                </tr>
                              </tbody>
                            </table>
                            <a href="#" data-toggle="modal" data-target="#skillsModal"><input type="submit" value="Add" id="button" /></a>
                          
                            <div class="modal fade" id="skillsModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title" id="myModalLabel">Skills</h4>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                        <ul class="flex-outer" id="contact-details">
                                                <li>
                                                  <label for="">Skill</label>
                                                  <input type="text" />
                                                </li>
                              
                                                <li>
                                                  <label for="">Years of Experience</label>
                                                  <input type="text"  />
                                                </li>
                                            
                                                
                                              </ul>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    <button type="button" class="btn btn-primary">Save changes</button>
                                </div>
                                </div>
                            </div>
                            </div>
                    <h4>Languages</h4>
                        <table class="table hover" id="resultTable">
                              <thead>
                                <tr>
                                  <th rowspan="1" style="width:24%">
                                    <span class="headerCell">Language</span>
                                  </th>
                                  <th rowspan="1" style="width:18%">
                                    <span class="headerCell">Fluency</span>
                                  </th>
                                  <th rowspan="1" style="width:18%">
                                    <span class="headerCell">Competency</span>
                                  </th>
                                  <th rowspan="1" style="width:18%">
                                    <span class="headerCell">Comments</span>
                                  </th>
                                </tr>
                              </thead>
                    
                              <tbody>
                                <tr>
                                  
                                </tr>
                              </tbody>
                            </table>
                            <a href="#" data-toggle="modal" data-target="#languagesModal"><input type="submit" value="Add" id="button" /></a>
                          
                            <div class="modal fade" id="languagesModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title" id="myModalLabel">Languages</h4>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                        <ul class="flex-outer" id="contact-details">
                                                <li>
                                                  <label for="">Language</label>
                                                  <input type="text" />
                                                </li>
                              
                                                <li>
                                                  <label for="">Fluency</label>
                                                  <input type="text"  />
                                                </li>
                                                
                                               
                                                <li>
                                                  <label for="">Competency</label>
                                                  <input type="text" />
                                                </li>
                                                <li>
                                                    <label for="">Comments</label>
                                                    <input type="text">
                                                </li>
                                                
                                              </ul>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    <button type="button" class="btn btn-primary">Save changes</button>
                                </div>
                                </div>
                            </div>
                            </div>
                    <h4>License</h4>
                        <table class="table hover" id="resultTable">
                              <thead>
                                <tr>
                                  <th rowspan="1" style="width:24%">
                                    <span class="headerCell">Name</span>
                                  </th>
                                  <th rowspan="1" style="width:18%">
                                    <span class="headerCell">Reporting Method</span>
                                  </th>
                                </tr>
                              </thead>

                              <?php

                              


                              ?>
                    
                              <tbody>
                                <tr>
                                  
                                </tr>
                              </tbody>
                            </table>
                            <a href="#" data-toggle="modal" data-target="#licenseModal"><input type="submit" value="Add" id="button" /></a>
                          
                            <div class="modal fade" id="licenseModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title" id="myModalLabel">Licenses</h4>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                        <ul class="flex-outer" id="contact-details">
                                                <li>
                                                  <label for="">Name</label>
                                                  <input type="text" />
                                                </li>
                              
                                                <li>
                                                  <label for="">Reporting Method</label>
                                                  <input type="text"  />
                                                </li>
    
                                                
                                              </ul>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    <button type="button" class="btn btn-primary">Save changes</button>
                                </div>
                                </div>
                            </div>
                            </div>
                        
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="left">
          <div class="header">
              <h2>My Attendance</h2>
          </div>
          <div class="myborder" style="margin-bottom: 30px;"></div>
            <canvas id="buyers" width="800" height="400"></canvas>
      </div>
      <div class="right">
        <table class="table hover" id="resultTable">
          <thead>
            <tr>

              <!-- Leave Request -->
              <h2>My Requests</h2>
              <div class="myborder" style="margin-bottom: 30px;"></div>
              <th rowspan="1" style="width:24%">
                <span class="headerCell">Leave Id</span>
              </th>
              <th rowspan="1" style="width:18%">
                <span class="headerCell">Employee ID</span>
              </th>
              <th rowspan="1" style="width:10%">
                <span class="headerCell">Purpose</span>
              </th>
              <th rowspan="1" style="width:12%">
                <span class="headerCell">Reason</span>
              </th>
              <th rowspan="1" style="width:9%">
                <span class="headerCell">From Date</span>
              </th>
              <th rowspan="1" style="width:12%">
                <span class="headerCell">To Date</span>
              </th>
              <th rowspan="1" style="width:17%">
                <span class="headerCell">Duration</span>
              </th>
              <th rowspan="1" style="width:17%">
                <span class="headerCell">Leave Credit Balance</span>
              </th>
              <th rowspan="1" style="width:17%">
                <span class="headerCell">Leave Balance</span>
              </th>
             
              <th rowspan="1" style="width:10%">
                <span class="headerCell">Status</span>
              </th>
            </tr>
          </thead>

          <tbody>
            <tr>


<?php
$connection = mysqli_connect("localhost","root","","db");

if ($connection->connect_error)
{
  die("Connection failed: " . $connection->connect_error);
} 

$sql       = 'select * from leaveform where status = "pending"';
$results   = mysqli_query($connection, $sql);
$row_count = mysqli_num_rows($results);
$id = 0;

while ($row = mysqli_fetch_array($results)) {
    echo '<tr><td><a href="LeaveApprove.php?id='.$row['leaveid'].'">'.$row['leaveid'].'</a></td>';
    echo '<td>'.$row['emp_id'].'</td>';
    echo '<td>'.$row['purpose'].'</td>';
    echo '<td>'.$row['reason'].'</td>';
    echo '<td>'.$row['from_date'].'</td>';
    echo '<td>'.$row['to_date'].'</td>';
    echo '<td>'.$row['duration'].'</td>';
    echo '<td>'.$row['leave_credit_balance'].'</td>';
      echo '<td>'.$row['leave_balance'].'</td>';
        echo '<td>'.$row['Status'].'</td></tr>';
}
?>



              
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js'></script>
    <script src="buttonfunc.js"></script>
    <script src="main.js"></script>
    <script>
         $('.input-group.date').datepicker({format: "mm-dd-yyyy"}); 
    </script>
  </body>
</html>



    




    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/css/lux_boot.css"></script>
    <script src="assets/js/lux_boot.min.js"></script>
    <!-- <script src="assets/js/docs.min.js"></script> -->
    <script src="assets/js/search.js"></script>
    <script type="text/javascript" charset="utf-8" language="javascript" src="assets/js/dataTables.min.js"></script>

    <!-- FOR DataTable -->
    <script>
      {
        $(document).ready(function()
        {
          $('#myTable').DataTable();
        });
      }
    </script>

    <!-- this function is for modal -->
    <script>
      $(document).ready(function()
      {
        $("#myBtn").click(function()
        {
          $("#myModal").modal();
        });
      });
    </script>

  </body>
</html>