<?php
session_start();
include_once("dbconn.php");
   date_default_timezone_set('Asia/Manila');
/*$_SESSION['laccess'] = $row['access_level_cde'];
      if(isset($_SESSION["username"])){
      
      $username = $_SESSION["username"];
    }else{
        header('Location: index.php');
    }*/

?>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">
    <title>iSOLVE</title>
    <!-- Simple bar CSS -->
    <link rel="stylesheet" href="css/simplebar.css">
    <!-- Fonts CSS -->
    <link href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <!-- Icons CSS -->
    <link rel="stylesheet" href="css/feather.css">
    <link rel="stylesheet" href="css/select2.css">
    <link rel="stylesheet" href="css/dropzone.css">
    <link rel="stylesheet" href="css/uppy.min.css">
    <link rel="stylesheet" href="css/jquery.steps.css">
    <link rel="stylesheet" href="css/jquery.timepicker.css">
    <link rel="stylesheet" href="css/quill.snow.css">
    <!-- Date Range Picker CSS -->
    <link rel="stylesheet" href="css/daterangepicker.css">
    <!-- App CSS -->
    <link rel="stylesheet" href="css/app-light.css" id="lightTheme">
    <link rel="stylesheet" href="css/app-dark.css" id="darkTheme" disabled>
    <link rel="stylesheet" href="css/dataTables.bootstrap4.css">
    <style type="text/css">
      .center-card {
        margin: auto;
        display: flex;
        justify-content: center;
      }
    </style>
  </head>
  <body class="horizontal light  ">
    <div class="wrapper">
      <?php include("nav_bar.php")?>
      <!-- Main---------------------------------------------------- -->
      <main role="main" class="main-content">
        <div class="container-fluid">
          <div class="row justify-content-center">
            <div class="col-12 col-lg-12 col-xl-10">
              <h2 class="h3 mb-4 page-title">List of Users</h2>
              <div class="my-4">
                <div class="card shadow mb-4">
                    
                    <div class="card-body">
                      <table class="table datatables" id="dataTable-1">
                        <thead>
                          <tr>
                            <th>No.</th>
                            <th>Username</th>
                            <th>ID Number</th>
                            <th>Name</th>
                            <th>Position</th>
                            <th>Action</th>
                          </tr>
                        </thead>
                        <tbody>

                          <?php

                          $result_h =$con->prepare("SELECT uname,userempidno,userposition,userfname,userlname,idno from tbl_users ");
                          $result_h->execute();
                          $result_h->bind_result($uname,$userempidno,$userposition,$userfname,$userlname,$idno);


                          $str ='';
                        
                          $ctr = 1;
                          $status = '';
                          while($result_h->fetch()) {
                            $nameofuser = $userfname." ".$userlname;
                            $str .='
                            <tr>
                            <td>'.$ctr.'</td>
                            <td>'.$uname.'</td>
                            <td>'.$userempidno.'</td>
                            <td>'.$nameofuser.'</td>
                            <td>'.$userposition.'</td>

                            <td><button title="Update user" class="btn btn-sm dropdown-toggle more-horizontal" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="text-muted sr-only">Action</span>
                              </button>
                              <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item fe fe-edit" onclick="edituser('.$idno.');"> Edit</a>
                              </div>
                            </td>

                            </tr>

                            ';
                            $ctr++;

                          }


                          echo $str;

                          ?>
                          
                          
                          
                          
                          
                        </tbody>
                      </table>
                      
                    </div> <!-- /.card-body -->
                  </div> <!-- /.card -->
              </div> <!-- /.card-body -->
            </div> <!-- /.col-12 -->
          </div> <!-- .row -->

            <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" id="updateuser">
              <div class="modal-dialog" role="document" style="width:40%;">
                  <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 User</h4>
                      </div>
                      <div class="modal-body">
                          <table class="table">
                              <tr>
                                  <td class="align-middle" width="200">ID No.</td>
                                  <td><input id="idd" class="form-control width-250" style="width:95%;"readonly></td>
                              </tr>
                              <tr>
                                  <td class="align-middle" width="200">First Name</td>
                                  <td><input id="fname" class="form-control width-250" style="width:95%;"></td>
                              </tr>
                              <tr>
                                  <td class="align-middle" width="200">Last Name</td>
                                  <td><input id="lname" class="form-control width-250" style="width:95%;"></td>
                              </tr>
                              <tr>
                                  <td class="align-middle" width="200">Username</td>
                                  <td><input id="username" class="form-control width-250" style="width:95%;"></td>
                              </tr>
                              <tr>
                                  <td class="align-middle" width="200">Password</td>
                                  <td><input type="password" id="password" class="form-control width-250" style="width:95%;"></td>
                              </tr>
                              <tr>
                                  <td class="align-middle" width="200">Position</td>
                                  <td><input id="position" class="form-control width-250" style="width:95%;"></td>
                              </tr>
                              <tr>
                                  <td class="align-middle" width="200">Office</td>
                                  <td><input id="office" class="form-control width-250" style="width:95%;"></td>
                              </tr>
                              <tr>
                                  <td class="align-middle" width="200">Email Address</td>
                                  <td><input id="email" class="form-control width-250" style="width:95%;"></td>
                              </tr>
                          </table>

                          <button type="button" class="btn btn-danger" onclick="updateusers();">Update</button>

                      </div>
                      <div class="modal-footer">
                          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                      </div>
                  </div>
              </div>
          </div>

        </div> <!-- .container-fluid -->
        
      </main> <!-- main -->
      <!-- main ------------------------------------------------------>
    </div> <!-- .wrapper -->
    <script src="js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/moment.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/simplebar.min.js"></script>
    <script src='js/daterangepicker.js'></script>
    <script src='js/jquery.stickOnScroll.js'></script>
    <script src="js/tinycolor-min.js"></script>
    <script src="js/config.js"></script>
    <script src="js/d3.min.js"></script>
    <script src="js/topojson.min.js"></script>
    <script src="js/datamaps.all.min.js"></script>
    <script src="js/datamaps-zoomto.js"></script>
    <script src="js/datamaps.custom.js"></script>
    <script src="js/Chart.min.js"></script>
    <script>
      /* defind global options */
      Chart.defaults.global.defaultFontFamily = base.defaultFontFamily;
      Chart.defaults.global.defaultFontColor = colors.mutedColor;
    </script>
    <script src="js/gauge.min.js"></script>
    <script src="js/jquery.sparkline.min.js"></script>
    <script src="js/apexcharts.min.js"></script>
    <script src="js/apexcharts.custom.js"></script>
    <script src='js/jquery.mask.min.js'></script>
    <script src='js/select2.min.js'></script>
    <script src='js/jquery.steps.min.js'></script>
    <script src='js/jquery.validate.min.js'></script>
    <script src='js/jquery.timepicker.js'></script>
    <script src='js/dropzone.min.js'></script>
    <script src='js/uppy.min.js'></script>
    <script src='js/quill.min.js'></script>
    <script src='js/jquery.dataTables.min.js'></script>
    <script src='js/dataTables.bootstrap4.min.js'></script>
    <script type="text/javascript">
      
      function edituser() {
          $('#updateuser').modal('toggle');
      }

 function getRadioVal(radioName) {
  var rads = document.getElementsByName(radioName);

  for(var rad in rads) {
    if(rads[rad].checked)
      return rads[rad].value;
    }
      return null;
  }
    </script>

   
    <script>
      $('#dataTable-1').DataTable(
      {
        autoWidth: true,
        "lengthMenu": [
          [16, 32, 64, -1],
          [16, 32, 64, "All"]
        ]
      });
    </script>
    <script>
      $('.select2').select2(
      {
        theme: 'bootstrap4',
      });
      $('.select2-multi').select2(
      {
        multiple: true,
        theme: 'bootstrap4',
      });
      $('.drgpicker').daterangepicker(
      {
        singleDatePicker: true,
        timePicker: false,
        showDropdowns: true,
        locale:
        {
          format: 'MM/DD/YYYY'
        }
      });
      $('.time-input').timepicker(
      {
        'scrollDefault': 'now',
        'zindex': '9999' /* fix modal open */
      });
      /** date range picker */
      if ($('.datetimes').length)
      {
        $('.datetimes').daterangepicker(
        {
          timePicker: true,
          startDate: moment().startOf('hour'),
          endDate: moment().startOf('hour').add(32, 'hour'),
          locale:
          {
            format: 'M/DD hh:mm A'
          }
        });
      }
      var start = moment().subtract(29, 'days');
      var end = moment();

      function cb(start, end)
      {
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
      }
      $('#reportrange').daterangepicker(
      {
        startDate: start,
        endDate: end,
        ranges:
        {
          'Today': [moment(), moment()],
          'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
          'Last 7 Days': [moment().subtract(6, 'days'), moment()],
          'Last 30 Days': [moment().subtract(29, 'days'), moment()],
          'This Month': [moment().startOf('month'), moment().endOf('month')],
          'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
      }, cb);
      cb(start, end);
      $('.input-placeholder').mask("00/00/0000",
      {
        placeholder: "__/__/____"
      });
      $('.input-zip').mask('00000-000',
      {
        placeholder: "____-___"
      });
      $('.input-money').mask("#.##0,00",
      {
        reverse: true
      });
      $('.input-phoneus').mask('(000) 000-0000');
      $('.input-mixed').mask('AAA 000-S0S');
      $('.input-ip').mask('0ZZ.0ZZ.0ZZ.0ZZ',
      {
        translation:
        {
          'Z':
          {
            pattern: /[0-9]/,
            optional: true
          }
        },
        placeholder: "___.___.___.___"
      });
      // editor
      var editor = document.getElementById('editor');
      if (editor)
      {
        var toolbarOptions = [
          [
          {
            'font': []
          }],
          [
          {
            'header': [1, 2, 3, 4, 5, 6, false]
          }],
          ['bold', 'italic', 'underline', 'strike'],
          ['blockquote', 'code-block'],
          [
          {
            'header': 1
          },
          {
            'header': 2
          }],
          [
          {
            'list': 'ordered'
          },
          {
            'list': 'bullet'
          }],
          [
          {
            'script': 'sub'
          },
          {
            'script': 'super'
          }],
          [
          {
            'indent': '-1'
          },
          {
            'indent': '+1'
          }], // outdent/indent
          [
          {
            'direction': 'rtl'
          }], // text direction
          [
          {
            'color': []
          },
          {
            'background': []
          }], // dropdown with defaults from theme
          [
          {
            'align': []
          }],
          ['clean'] // remove formatting button
        ];
        var quill = new Quill(editor,
        {
          modules:
          {
            toolbar: toolbarOptions
          },
          theme: 'snow'
        });
      }
      // Example starter JavaScript for disabling form submissions if there are invalid fields
      (function()
      {
        'use strict';
        window.addEventListener('load', function()
        {
          // Fetch all the forms we want to apply custom Bootstrap validation styles to
          var forms = document.getElementsByClassName('needs-validation');
          // Loop over them and prevent submission
          var validation = Array.prototype.filter.call(forms, function(form)
          {
            form.addEventListener('submit', function(event)
            {
              if (form.checkValidity() === false)
              {
                event.preventDefault();
                event.stopPropagation();
              }
              form.classList.add('was-validated');
            }, false);
          });
        }, false);
      })();
    </script>
    <script>
      var uptarg = document.getElementById('drag-drop-area');
      if (uptarg)
      {
        var uppy = Uppy.Core().use(Uppy.Dashboard,
        {
          inline: true,
          target: uptarg,
          proudlyDisplayPoweredByUppy: false,
          theme: 'dark',
          width: 770,
          height: 210,
          plugins: ['Webcam']
        }).use(Uppy.Tus,
        {
          endpoint: 'https://master.tus.io/files/'
        });
        uppy.on('complete', (result) =>
        {
          console.log('Upload complete! We’ve uploaded these files:', result.successful)
        });
      }
    </script>
    <script src="js/apps.js"></script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-56159088-1"></script>
    <script>
      window.dataLayer = window.dataLayer || [];

      function gtag()
      {
        dataLayer.push(arguments);
      }
      gtag('js', new Date());
      gtag('config', 'UA-56159088-1');
    </script>
  </body>
</html>