<?php
require_once 'header.php';
require_once 'navbar.php';
?>

<!-- Page content -->
<div class="container-fluid pt-8">
  <div class="page-header mt-0 p-3">
    <h3 class="mb-sm-0">APP VERSION</h3>
        <!-- <button id="addd" title="" class="btn btn-primary pull-right" data-toggle="modal" data-target="#add-city-modal">
                <i class="fa fa-plus"></i>
              </button> -->

            </div>
            <div id="alert2" class="col-md-12"></div>
            <!-- Table -->
            <div class="row">
              <div class="col-12">
                <div class="card shadow">

                  <div class="">
                    <div class="grid-margin">
                      <div class="">
                        <div class="table-responsive p-3">
                         <table  id="example" class="text-center table card-table table-vcenter text-nowrap  align-items-center table-bordered">
                          <thead>
                            <tr>
                              <th style="width: 80px">S.No</th>
                              <th>Vendor App Version</th>
                              <th>Driver App Version</th>
                              <th style="width: 150px"> &nbsp;&nbsp;&nbsp;&nbsp;Action</th>
                            </tr>
                          </thead>
                          <?php 
                          $q = "select * from settings";
                          $query = mysqli_query($conn,$q);
                          $i=1;
                          while($row = mysqli_fetch_array($query)) {
                           ?>
                           <tr>
                            <td><?php echo $i ?></td>
                            <td><?php echo $row['version_number']; ?></td>
                            <td><?php echo $row['driver_version'] ?></td>
                            <td><button type="button" id="edit-btn" name="edit" class="btn btn-success" onclick="edit(<?php echo $row['id'] ?>)" data-toggle="modal" data-target="#edit-city" value="<?php echo $row['id'] ?>"><i class="fa fa-edit btn-success"></i></button>

                            </td>
                          </tr>
                          <?php $i++; }  ?>

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

      
        <!--Edit Modal-->
        <div class="modal fade" id="edit-city">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="card-header">
                <h4 style="text-align: left;">Edit Version <span id="alert1"></span></h4>
              </div>
              <form method="post">
                <div class="modal-body">
                  <div class="row">
                    <div class="col-md-12">
                      <label>Vendor App Version</label>
                      <input type="hidden" name="save_id" id="setting_id">
                      <input type="text" class="form-control" name="vendor_app" id="vendor_app" required="required"
                      autofocus>
                    </div>
                    <div class="col-md-12">
                      <label>Driver App Version</label>
                      <input type="text" class="form-control" name="driver_app" id="driver_app" required="required"
                      autofocus>
                    </div>
                  </div>
                  <br/>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                    <input type="submit" name="submit" id="save_btn" class="btn btn-primary" value="save Changes">
                  </div>
                </div>
              </form>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <?php
        require_once 'footer.php';
        require_once 'jslinks.php';
        ?>
        <script>
          $(document).ready(function () {


    // To save changes in edit modal    

            $('#save_btn').click(function () {
              $("#global-loader").show();
              $.ajax({
                url: "ajax_app_version.php",
                type: "POST",
                data: {
                  save_id: $('#setting_id').val(),
                  vendor_app: $('#vendor_app').val(),
                  user_app: $('#user_app').val(),
                  driver_app: $('#driver_app').val(),
                },
                success: function (response) {
                  $("#global-loader").fadeOut(); 
                  if (response == "Success") {
                    $('#alert1').html('<span class="p-1 m-1 alert alert-success">Successfully Updated</span>').show()
                    setTimeout(function () {
                      $('#alert1').hide()
                    }, 2000)
                  } else {
                    $('#alert1').html('<span class="p-1 m-1 alert alert-danger">Something Wrong, can\'t update.</span>').show()
                    setTimeout(function () {
                      $('#alert1').hide()
                    }, 2000)
                  }
                }
              })
            })
          })


  //On click of edit button to show values of database in edit modal

          function edit(e) {
            $("#global-loader").show();
            $.ajax({
              url: "ajax_app_version.php",
              type: "POST",
              dataType: "JSON",
              data: {
                id: e,
              },
              success: function (response) {
                $("#global-loader").fadeOut(); 
                var version = response

                $('#vendor_app').val(version.version_number)
                $('#driver_app').val(version.driver_version)
                $('#setting_id').val(version.id)
              },
            })
          }


        </script>
        <!-- <script src="assets/plugins/jquery/dist/jquery.min.js"></script> -->
        <script src="assets/js/popper.js"></script>
        <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>

        <!-- Optional JS -->
        <script src="assets/plugins/chart.js/dist/Chart.min.js"></script>
        <script src="assets/plugins/chart.js/dist/Chart.extension.js"></script>

        <!-- Data tables -->
        <script src="assets/plugins/datatable/jquery.dataTables.min.js"></script>
        <script src="assets/plugins/datatable/dataTables.bootstrap4.min.js"></script>
        <script src="assets/plugins/datatable/dataTables.responsive.min.js"></script>
        <script src="assets/plugins/datatable/responsive.bootstrap4.min.js"></script>

        <!-- Fullside-menu Js-->
        <!-- <script src="assets/plugins/toggle-sidebar/js/sidemenu.js"></script> -->

        <!-- Custom scroll bar Js-->
        <script src="assets/plugins/customscroll/jquery.mCustomScrollbar.concat.min.js"></script>

        <!-- Adon JS -->
        <script src="assets/js/custom.js"></script>
        <script src="assets/js/datatable.js"></script>