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

$sql = "select * from vendor_login,vendor_profile where vendor_profile.vendor_id=vendor_login.id order by vendor_login.contact";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
  while ($row = $result->fetch_assoc()) {
    $vendors[] = $row;
  }
}
?>

<!-- Page content -->
<div class="container-fluid pt-8">
  <div class="page-header mt-0 p-3">
    <h3 class="mb-sm-0 text-uppercase">Payout Request</h3>

  </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 class="table text-center card-table table-vcenter text-nowrap  align-items-center" id="example">
                  <thead>
                    <tr>
                      <th>S.No</th>
                      <th>Vendor Name</th>
                      <th>Vendor Contact</th>
                      <th>Amount</th>
                      <th>Note</th>
                      <th>Request Date/Time</th>
                      <th>Status</th>
                      <th>Admin Note</th>
                      <th>Action</th>
                    </tr>
                  </thead>
                  <tbody id="tbody">
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>



<!--Edit Modal-->
<div class="modal fade" id="edit-category">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="card-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 style="text-align: left">Payout Request <span id="alert1"></span></h4>
      </div>
      <div class="modal-body">
        <form id="edit_cartype" method="POST" enctype="multipart/form-data">
          <div class="row">
            <div class="col-md-12">
              <label>Admin Note</label>
              <input type="hidden" name="save_id" id="save_id">
              <textarea class="form-control" rows="3" name="admin_note" id="admin_note" required></textarea>
            </div>
            <div class="col-md-12 mt-3">
              <label>Status</label>
              <select class="form-control w-100" name="status" id="status" required>
                <option value="Pending">Pending</option>
                <option value="Completed">Completed</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" class="btn btn-primary">Save Changes</button>
          </div>
        </form>
      </div>
    </div>

    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
</div>
<?php
require_once 'footer.php';
require_once 'jslinks.php';
?>

<script>
  $(document).ready(function () {
    output();

    // To save changes in edit modal    
    $('#edit_cartype').submit(function (e) {
      e.preventDefault();
      $("#global-loader").show();
      $.ajax({
        url: "ajax_payout_request.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();

            $("#edit-category").modal('toggle');

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

  // To show all the categories in main menu

  function output() {
    var inHTML = '';
    var i = 1;
    $.getJSON("ajax_payout_request?show=1", function (data) {
      $.each(data, function (key, item) {
        if (item.status == 'Pending') {
          var status = '<span class="badge badge-warning">Pending</span>';
        } else {
          var status = '<span class="badge badge-success">Completed</span>';
        }
        inHTML +=
          `<tr>
        <td>${i}</td>
        <td>${item.full_name}</td> 
        <td>${item.contact}</td> 
        <td>${item.amount} </td> 
        <td>${item.note}</td> 
        <td>${item.created_at}</td> 
        <td>${status}</td> 
        <td>${item.admin_note}</td> 
        <td>
        <button type="button" id="edit-btn" name="edit" class="btn btn-success" onclick="edit(${item.id})" data-toggle="modal" data-target="#edit-category" value="${item.id}"><i class="fa fa-edit btn-success"></i></button>
        <button type="button" id="del" name="del" class="btn btn-danger" onclick="del(${item.id})" value="${item.id}" ><i class="fa fa-trash"></i></button>
        </td>
        </tr>`;
        i++;
      })
      $('#tbody').html(inHTML);
      $('#example').DataTable({
        layout: {
          topStart: {
            buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
          }
        },
        "stateSave": true,
        dom: 'lBfrtip',
        "lengthMenu": [[10, 25, 50, 100, 250, 500, 1000, -1], [10, 25, 50, 100, 250, 500, 1000, 'All']]
      });
    })
  }

  // Deletion of categories

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

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

  function edit(e) {
    $("#global-loader").show();
    $.ajax({
      url: "ajax_payout_request.php",
      type: "POST",
      dataType: "JSON",
      data: {
        request_id: e,
      },
      success: function (response) {
        $('#status').val(response.status);
        $('#admin_note').val(response.admin_note);
        $('#save_id').val(response.id);

      },
    })
  }
</script>