<?php
require_once 'header.php';
require_once 'navbar.php';
?>
<style>
  .hdfc {
    display: none;
  }
</style>
<!-- Page content -->
<div class="container-fluid pt-8">
  <div class="page-header mt-0 p-3">
    <h3 class="mb-sm-0">PAYMENT KEYS</h3>
    <button id="addd" title="" class="btn btn-primary pull-right" data-toggle="modal" data-target="#add-key-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="card-header bg-transparent border-0">
                    <h2 class=" mb-0">Cities List</h2>
                  </div> -->
        <div class="card-body">
          <div class="grid-margin">
            <div class="">
              <div class="col-lg-4"></div>
              <div class="table-responsive">
                <table id="example" class="text-center table card-table table-vcenter text-nowrap  align-items-center">
                  <thead>
                    <tr>
                      <th style="width: 80px">S.No</th>
                      <th>Payment Name</th>
                      <th>Secret Key</th>
                      <th>Api Key</th>
                      <th>Client ID</th>
                      <th>Merchant ID</th>
                      <th>UPI ID</th>
                      <th>Status</th>
                      <th style="width: 150px"> &nbsp;&nbsp;&nbsp;&nbsp;Action</th>
                    </tr>
                  </thead>
                  <tbody id="tbody">
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<!--Add Modal-->
<div class="modal fade" id="add-key-modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="card-header">
        <h4 style="text-align: left;">Add Payment Key <span id="alert"></span></h4>
      </div>
      <div class="modal-body">
        <form id="add" enctype="multipart/form-data">
          <div class="row">
            <div class="col-md-12">
              <label>Payment Type</label>
              <select name="payment_name" class="form-control select2" data-placeholder="Select Payment Type" required>
                <option value="Razorpay">Razorpay</option>
                <option value="HDFC">HDFC</option>
              </select>
            </div>
            <div class="col-md-12">
              <label>Api key</label>
              <input type="text" class="form-control" name="api_key" required>
            </div>
            <div class="col-md-12 razorpay">
              <label>Secret key</label>
              <input type="text" class="form-control" name="secret_key">
            </div>
            <div class="col-md-6 hdfc">
              <label>Client ID</label>
              <input type="text" class="form-control" name="client_id">
            </div>
            <div class="col-md-6 hdfc">
              <label>Merchant ID</label>
              <input type="text" class="form-control" name="merchant_id">
            </div>
            <div class="col-md-6 upi_id">
              <label>UPI ID</label>
              <input type="text" class="form-control" name="upi_id" autofocus>
            </div>
            <div class="col-md-6">
              <label>Status</label>
              <select name="status" class="form-control" required>
                <option value="1">Active</option>
                <option value="0">Disabled</option>
              </select>
            </div>
          </div>
          <br />
          <div class="modal-footer">
            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
            <button type="submit" name="add_key_btn" id="add_key_btn" class="btn btn-primary">Add Data</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  <!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
<!--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 Payment Keys <span id="alert1"></span></h4>
      </div>
      <div class="modal-body">
        <form id="edit" enctype="multipart/form-data">
          <input type="hidden" name="save_id" id="save_id">
          <div class="row">
            <div class="col-md-12">
              <label>Payment Type</label>
              <select name="payment_name" class="form-control select2" id="payment_name" required>
                <option value="Razorpay">Razorpay</option>
                <option value="HDFC">HDFC</option>
                <option value="Cashfree">Cashfree</option>
              </select>
            </div>
            <div class="col-md-12">
              <label>Api key</label>
              <input type="text" class="form-control" name="edit_api_key" id="edit_api_key" required>
            </div>
            <div class="col-md-12 razorpay">
              <label>Secret key</label>
              <input type="text" class="form-control" name="edit_secret_key" id="edit_secret_key">
            </div>
            <div class="col-md-6 hdfc">
              <label>Client ID</label>
              <input type="text" class="form-control" name="client_id" id="client_id">
            </div>
            <div class="col-md-6 hdfc">
              <label>Merchant ID</label>
              <input type="text" class="form-control" name="merchant_id" id="merchant_id">
            </div>
            <div class="col-md-6 upi_id">
              <label>UPI ID</label>
              <input type="text" class="form-control" name="upi_id" id="edit_upi_id" autofocus>
            </div>
            <div class="col-md-6">
              <label>Status</label>
              <select class="form-control" name="status" id="status">
                <option value="1">Active</option>
                <option value="0">Disabled</option>
              </select>
            </div>
          </div>
          <br />
          <div class="modal-footer">
            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
            <button type="submit" name="save_key_btn" id="save_key_btn" class="btn btn-primary">save Changes</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  <!-- /.modal-content -->
</div>
<?php
require_once 'footer.php';
require_once 'jslinks.php';
?>
<script>
  $(document).ready(function () {
    output();

    $('#add').submit(function (e) {
      e.preventDefault();
      $("#global-loader").show();
      $.ajax({
        url: "ajax_payment_key.php",
        type: "POST",
        data: new FormData(this),
        contentType: false,
        cache: false,
        processData: false,
        success: function (response) {
          $("#global-loader").fadeOut();
          if (response == "Success") {
            $('#alert').html('<span class="p-1 m-1 alert alert-success">Successfully Added.</span>').show()
            setTimeout(function () {
              location.reload()
            }, 2000)


          } else {
            $('#alert').html('<span class="p-1 m-1 alert alert-danger">Something Wrong, can\'t add.</span>').show()
            setTimeout(function () {
              $('#alert').show()
            }, 1000)
          }

        }
      })
    })


    // To save changes in edit modal    

    $('#edit').submit(function (e) {
      e.preventDefault();
      $("#global-loader").show();
      $.ajax({
        url: "ajax_payment_key.php",
        type: "POST",
        data: new FormData(this),
        contentType: false,
        cache: false,
        processData: false,
        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 () {
              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').show()
            }, 2000)
          }
        }
      })
    })
  })

  // To show all the cities in main menu

  function output() {
    var inHTML = '';
    var i = 1;
    $.getJSON("ajax_payment_key?show_keys=1", function (data) {
      $.each(data, function (key, item) {
        inHTML +=
          `<tr><td>${i}</td>
                  <td id="key${i}">${item.payment_name}</td>
                  <td id="key${i}">${item.secret_key}</td>
                  <td id="key${i}">${item.api_key}</td>
                  <td id="key${i}">${item.client_id}</td>
                  <td id="key${i}">${item.merchant_id}</td>
                  <td id="key${i}">${item.upi_id}</td>`;
        if (item.status == 1) {
          inHTML += `<td><label class="badge badge-success">Active</label></td>`;
        } else {
          inHTML += `<td><label class="badge badge-danger">Disabled</label></td>`;
        }
        inHTML += `<td><button type="button" id="edit-btn" name="edit" class="btn btn-success" onclick="edit(${item.id})" data-toggle="modal" data-target="#edit-keys" value="${item.id}"><i class="fa fa-edit btn-success"></i></button></td></tr>`;
        i++;
      })
      $('#tbody').html(inHTML);
      $('#example').DataTable({
        layout: {
          topStart: {
            buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
          }
        },
        dom: 'lBfrtip',
        "lengthMenu": [[10, 25, 50, 100, 250, 500, 1000, -1], [10, 25, 50, 100, 250, 500, 1000, 'All']]
      });
    })
  }

  // Deletion of cities

  function del(e) {
    var verify = confirm("Do you really want to delete!!!");
    if (verify) {
      $("#global-loader").show();
      $.ajax({
        url: "ajax_payment_key.php",
        type: "POST",
        data: {
          delete_id: e,
        },
        success: function (response) {
          $("#global-loader").fadeOut();
          if (response == "Success") {
            $('#alert2').html('<span class="p-1 m-1 alert alert-success">Successfully Deleted</span><br/>').show()
            setTimeout(function () {
              location.reload()
            }, 2000)
          } else {
            $('#alert2').html('<span class="p-1 m-1 alert alert-danger">Something Wrong, can\'t delete.</span><br/>').show()
            setTimeout(function () {
              $('#alert2').hide()
            }, 2000)
          }
        },
      })
    }
  }

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

  function edit(e) {
    $("#global-loader").show();
    $.ajax({
      url: "ajax_payment_key.php",
      type: "POST",
      dataType: "JSON",
      data: {
        key_id: e,
      },
      success: function (response) {
        $("#global-loader").fadeOut();
        var keys = response
        $('#edit_secret_key').val(keys.secret_key)
        $('#edit_api_key').val(keys.api_key)
        $('#payment_name').val(keys.payment_name).trigger('change');
        $('#client_id').val(keys.client_id)
        $('#merchant_id').val(keys.merchant_id)
        $('#status').val(keys.status)
        $('#edit_upi_id').val(keys.upi_id)
        $('#save_id').val(keys.id)
      },
    })
  }

  $(document).ready(function () {
    $("select[name='payment_name']").on("change", function () {
      var selectedValue = $(this).val(); // Get selected value
      if (selectedValue == 'HDFC') {
        $('.razorpay').hide();
        $('.hdfc').show();
      } else {
        $('.razorpay').show();
        $('.hdfc').hide();
      }
    });
  });
</script>