<?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">TRANSACTION FEES</h3>

  </div>
  <div id="alert2" class="col-md-12"></div>
  <!-- Table -->
  <div class="row">
    <div class="col-12">
      <div class="card p-4 shadow">
        <div class="">
          <div class="grid-margin">
            <div class="">
              <div class="table-responsive">
                <table id="example" class="table text-center table-striped table-bordered text-nowrap dataTable">
                  <thead>
                    <tr>
                      <th style="width: 80px">S.No</th>
                      <th>Vendor Transaction Fees</th>
                      <th style="width: 150px"> &nbsp;&nbsp;&nbsp;&nbsp;Action</th>
                    </tr>
                  </thead>
                  <tbody>
                    <?php 
                    $show = "SELECT * FROM settings";
                    $result = $conn->query($show);

                    if ($result->num_rows > 0) {
                      $i=1;
                      while ($row = $result->fetch_assoc()) {
                        ?>
                        <tr>
                          <td><?=$i++;?></td>
                          <td><?=$row['vendor_transaction_fee']?></td>
                          <td><button type="button" class="btn btn-success" onclick="edit(<?=$row['id']?>)" data-toggle="modal" data-target="#edit-keys"><i class="fa fa-edit"></i></button></td>
                        </tr>
                      <?php } } ?>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <!--Edit Modal-->
  <div class="modal fade" id="edit-keys">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="card-header">
          <h4 style="text-align: left;">Edit GST Percentage <span id="alert1"></span></h4>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-12">
              <label>Vendor Transaction Fees</label>
              <input type="number" class="form-control" name="transition_fees" id="transition_fees" required="required"
              autofocus>
            </div>


          </div>
          <br/>
          <div class="modal-footer">
            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
            <button type="button" name="save_key_btn" id="save_id_btn" class="btn btn-primary">save Changes</button>
          </div>
        </div>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <?php
  require_once 'footer.php';
  require_once 'jslinks.php';
  ?>
  <script src="assets/js/custom.js"></script>
  <script src="assets/js/datatable.js"></script>
  <script>

            //On click of edit button to show values of database in edit modal
    function edit(e) {
      $.ajax({
        url: "ajax_transaction_fees.php",
        type: "POST",
        dataType: "JSON",
        data: {
          id: e,
        },
        success: function (response) {
          $('#transition_fees').val(response.vendor_transaction_fee)
          $('#save_id_btn').val(response.id)
        },
      })
    }

    // update 
    $('#save_id_btn').click(function () {
      $.ajax({
        url: "ajax_transaction_fees.php",
        type: "POST",
        data: {
          save_id: $('#save_id_btn').val(),
          transition_fees: $('#transition_fees').val(),
        },
        success: function (response) {
          if (response == "Success") {
            $('#alert1').html('<span class="p-1 m-1 alert alert-success">Successfully Updated</span>').show()
            setTimeout(function () {
              $('#alert1').hide();
              location.reload();
            }, 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)
          }
        }
      })
    })

  </script>