@extends('layouts.app')
@section('content')
<div class="content-wrapper">
   <div class="card">
      <div class="card-header">
         <h4 class="card-title">Callback List</h4>
      </div>
      <div class="card-body">
         <div class="row">
            <div class="col-12 table-responsive">
              <table id="lookup" class="table table-sm table-striped">
                 <thead>
                    <tr>
                       <th>No</th>
                       <th>Callback URL</th>
                       <th>Status</th>
                       <th>Action</th>
                    </tr>
                 </thead>
                 <tbody>

                 </tbody>
              </table>
            </div>
         </div>
      </div>
   </div>
</div>
@endsection
@section('script')
<script>


function deletes(id){
  $.confirm({
      confirmButton: 'Submit',
      cancelButton: 'Cancel',
      title: 'Confirmation',
      content: 'Reject this request ?',
      icon: 'fas fa-exclamation-triangle',
      buttons: {
          confirm: function () {
              location.href="{{url('superadmin/callbackList/reject')}}" + "/" + id;
          },
          cancel: function () {
          }
      }
  });
}

function approve(id){
  $.confirm({
      confirmButton: 'Submit',
      cancelButton: 'Cancel',
      title: 'Confirmation',
      content: 'Approve this request ?',
      icon: 'fas fa-exclamation-triangle',
      buttons: {
          confirm: function () {
              location.href="{{url('superadmin/callbackList/approve')}}" + "/" + id;
          },
          cancel: function () {
          }
      }
  });
}

$(document).ready(function() {

  var table = $("#lookup").dataTable({
    processing: true,
    serverSide: true,
    ajax:{
      url: "{{ url('superadmin/callbackList/getIndex') }}",
      dataType: "json",
      type: "GET",
      error: function(){  // error handling
        $(".lookup-error").html("");
        $("#lookup").append('<tbody class="employee-grid-error"><tr><th class="text-center" colspan="4">No data found in the server</th></tr></tbody>');
        $("#lookup_processing").css("display","none");

      }
    },
    columns: [
      {data: 'id'},
      {data: 'urlDr'},
      {data: 'status'},
      {data: 'id'}
    ],
      createdRow: function ( row, data, index ) {
          $(row).attr('id','table_'+index);
      },
    columnDefs: [
      {
        "targets": [0],
        "createdCell": function (td, cellData, rowData, row, col) {
          $(td).text(row+1);
        },
        orderable: true
      },
      {
        "targets": [2],
        "createdCell": function (td, cellData, rowData, row, col) {
          $(td).empty();
          var status;
          var classnya;
          switch(cellData){
            case 0 : status = 'Pending'; classnya = "warning"; break;
            case 1 : status = 'Approved'; classnya = "success"; break;
            case 2 : status = 'Rejected'; classnya = "danger"; break;
          }
          $(td).append($('<span>')
                      .addClass('badge light badge-'+classnya)
                      .text(status)
                  )
        },
        orderable: false
      },
      {
        "targets": [3],
        "createdCell": function (td, cellData, rowData, row, col) {
          $(td).empty();
          $(td)
            .append($('@include('inc.button.groupApproveAndReject')'));
        },
        orderable: false
      }
    ]
  });

  $('.table').on('click','.btn-approve-record', function(){
      var tr = $(this).closest('tr');

      var id = tr.attr('id').split('_');
      var index = id[1];
      var data = table.fnGetData()

      approve(data[index].id);
  });

    $('.table').on('click','.btn-reject-record', function(){
        var tr = $(this).closest('tr');

        var id = tr.attr('id').split('_');
        var index = id[1];
        var data = table.fnGetData()

        deletes(data[index].id);
    });
});
</script>
@endsection