@extends('reachassuree_admin/layouts.main')
@section('title', $data['title'])
@section('content')

<style>
  ::-webkit-scrollbar {
    width: 20px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #d6dee1;
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: content-box;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: #a8bbbf;
  }

  ::-webkit-scrollbar-track {
    background-color: transparent;
  }

  .pos-middle {
    vertical-align: middle;
  }

  @media only screen and (max-width: 575px) {
    .page-title-right {
      text-align: center;
    }

    div#datatable_length {
      text-align: right;
    }

    div#datatable_filter {
      text-align: right;
    }

    .mb-3.d-flex {
      width: 200px;
      margin: 0 0 0 auto;
    }
  }

  @media only screen and (max-width: 680px) {
    .page-title-right {
      text-align: center;
    }

    div#datatable_length {
      text-align: right;
    }

    div#datatable_filter {
      text-align: right;
    }

    .mb-3.d-flex {
      width: 200px;
      margin: 0 0 0 auto;
    }
  }
</style>

<div class="page-content client-tr">
  <div class="container-fluid">
    <!-- start page title -->
    <div class="row">
      <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
          <h4 class="mb-sm-0 font-size-18">
            <a href="javascript:void(0);" onclick="history.back();" class="btn btn-primary waves-effect waves-light btn-sm"><i class="mdi mdi-arrow-left ms-1 font-size-20"></i></a>&nbsp;&nbsp;&nbsp; {{$data['title']}}
          </h4>
          <div class="page-title-right">
            <a href="{{ route('prime.demo.add') }}" class="btn btn-primary waves-effect waves-light"> Add Prime Demo </a>
          </div>
        </div>
      </div>
    </div>
    <!-- end page title -->

    <!-- start row -->
    <div class="row">
      <div class="card">
        <div class="card-body">
          <br>
          <div class="table-responsive">
            <table id="datatable" class="table align-middle table-nowrap table-hover table-striped  nowrap w-100">
              <thead class="table-light">
                <tr>
                  <th>Action</th>
                  <th>Sr.No</th>
                  <th>plan Name </th>
                  <th>Email</th>
                  <th>Code </th>
                  <th>Days</th>
                </tr>
              </thead>
              <tbody>
              </tbody>
            </table>
            @csrf
          </div>
        </div>
      </div>
    </div>
    <!-- end row -->
  </div>
  <!-- container-fluid -->
</div>
<!-- End Page-content -->

@endsection

@section('custom-scripts')
<script src="{{ asset('ra-assets/libs/parsleyjs/parsley.min.js') }}"></script>
<script src="{{ asset('ra-assets/js/pages/form-validation.init.js') }}"></script>
<script src="{{ asset('ra-assets/js/pages/jquery.form.js') }}"></script>

<script type="text/javascript">
  var deletePrimeDemo = "{{route('delete.prime.demo')}}";
  var isDeleted = '{{$data["is_deleted"]}}';
  var ajaxURLGetUsers = '{{route("prime.demo.ajax")}}';
  var csrfToken = $("[name=_token]").val();

  var table = $('#datatable').DataTable({
    "aoColumnDefs": [{"bSortable": false,"aTargets": []}],
    "order": [[0, 'desc']],
    "processing": true,
    "serverSide": true,
    "scrollX": true,
    "scrollY": function() {return $(window).height() - 320;},
    "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
    "ajax": {
      "url": ajaxURLGetUsers,
      "type": "POST",
      "data": {"_token": csrfToken,}
    },
    "aoColumns": [
      {"mData": "action", "bSortable" : false},
      {"mData": "id"},
      {"mData": "plan_id"},
      {"mData": "email"},
      {"mData": "code"},
      {"mData": "days"},
    ]
  });

  function primeDemoDelete(id) {
    swal.fire({
      title: "Are you sure want to delete this?",
      text: "You won't be able to revert this!",
      showCancelButton: true,
      confirmButtonColor: "#526BDF",
      cancelButtonColor: "#EC6767",
      confirmButtonText: "Yes, delete it!",
      cancelButtonText: "No, cancel it!",
    }).then((result) => {
      if (result.isConfirmed) {
        remove(id);
      }
    });
  }

  function remove(id) {
    $.ajax({
      type: 'GET',
      url: deletePrimeDemo + "?id=" + id,
      success: function(resultData) {
        if (resultData['status'] == 1) {
          toastr["success"](resultData['msg']);
          $('#datatable').DataTable().ajax.reload(null, false);
        }
      }
    });
  }
</script>

@endsection