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

<style>
  .row{
      align-items: center;
  }
 .dataTables_scrollBody {
        position: relative;
        overflow: auto;
        width: 100%;
        max-height: 496px;
        height: 413px !important;
    }
  .scrollable-menu {
    height: auto;
    max-height: 600px;
    overflow-x: hidden;
  }

  .dropdown-checklist {
    padding: 0px 12px;
    line-height: 0px;
  }

  .dropdown-checklist input {
    margin-left: 3px;
  }

  ::-webkit-scrollbar {
    width: 16px;
  }

  ::-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;
  }

  #datatable tbody tr td:nth-child(17) {
    white-space: normal;
    word-wrap: break-word;
    max-width: 250px;
  }

  #datatable tbody ul {
    display: flex;
  }

  .plan tr td {
    padding: 7px 10px;
  }

  .plan .btn-primary {
    color: #2762e4 !important;
    background-color: #bcd4ff !important;
    border-color: #bcd4ff !important;
    padding-top: 3px;
    padding-bottom: 3px;
    font-weight: 500;
    font-size: 10px;
    width: 62px;
  }

  span.badge.badge-pill.badge-soft-success,
  .badge-soft-danger.font-size-11 {
    width: 62px;
    padding: 6px 8px;
    margin-top: 5px;
  }
  
</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>
          
          @php
            $check_privileges = userPrivilegesReturn(43,45);
          @endphp
            
          @if (($check_privileges == 1) || (Session::get('admin_type') == 0))
            <div class="page-title-right">
              <a href="{{ route('subscription.plan.form') }}" class="btn btn-primary waves-effect waves-light" style="color:white"> Add Plan</a>
            </div>
          @endif
        </div>
      </div>
    </div>
    <!-- end page title -->
    
    <!-- start row -->
    <div class="row">
      <div class="card">
        <div class="card-body">
          <div class="row">
            <div class="d-flex justify-content-between mb-3 complain-mn">
              <div>
                <label for="plan_status" class="form-label" style="margin:0px 15px 0 0; align-self: center;">Status
                  <select class="form-control" name="plan_status" id="plan_status">
                    <option value="-1">All</option>
                    <option value="1">Active</option>
                    <option value="0">Deactive</option>
                  </select>
              </div>
            </div>
          </div>
          <div class="table-responsive">
            <table id="datatable" class="table align-middle table-nowrap table-striped display nowrap w-100 scrollable-element plan ">
              <thead class="table-light">
                <tr>
                  <th>Action</th>
                  <th>Status</th>
                  <th>Tr.Date </th>
                  <th>Sr.No</th>
                  <th>Product Name</th>
                  <th>Plan Name</th>
                  <th>Year Price</th>
                  <th>Half Price</th>
                  <th>Quarterly Price</th>
                  <th>Month Price</th>
                  <th>HSN/SAC</th>
                  <th>SGST</th>
                  <th>CGST</th>
                  <th>IGST</th>
                  <th>Is Public</th>
                  <th>Is Demo</th>
                  <th>plan Description</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 ajaxURLGetUsers = '{{route("subscription.plan.ajax")}}';
  var ajaxDeactivePlan = '{{route("deactive.plan")}}';
  var ajaxActivePlan = '{{route("active.plan")}}';
  var deleteSubscriptionPlan = "{{route('delete.subscription.plan')}}";
  var isDeleted = '{{$data["is_deleted"]}}';
  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;},    
    "lengthMenu": [[10, 50, 100, 150],[10, 50, 100, 150]],
    "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,
        "plan_status": function() {return $("#plan_status").val();},
      }
    },
    "drawCallback": function() {
      var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
      var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
      });
    },
    "aoColumns": [
      {"mData":"action", "bSortable": false,},
      {"mData":"status", "bSortable": false,},
      {"mData":"tr_date","bSortable": false,},
      {"mData":"id"},
      {"mData": "product_id"},
      {"mData": "name"},
      {"mData": "product_year_price"},
      {"mData": "product_half_price"},
      {"mData": "product_quarterly_price"},
      {"mData": "product_month_price"},
      {"mData": "hsn_code"},
      {"mData": "sgst"},
      {"mData": "igst"},
      {"mData": "cgst"},
      {"mData": "is_public","bSortable": false,},
      {"mData": "is_demo","bSortable": false,},
      {"mData": "description"},
    ]
  });

  //- soft delete record
  function subscriptionPlanDelete(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: deleteSubscriptionPlan + "?id=" + id,
      success: function(resultData) {
        if (resultData['status'] == 1) {
          toastr["success"](resultData['msg']);
          $('#datatable').DataTable().ajax.reload(null, false);
        }
      }
    });
  }

  deactivePlan
  //- deactivate user
  function deactivePlan(plan_id) {
    swal.fire({
      title: "Are you sure want to views plan in RA - WEB ?",
      showCancelButton: true,
      confirmButtonColor: "#526BDF",
      cancelButtonColor: "#EC6767",
      confirmButtonText: "Yes, active it!",
      cancelButtonText: "No, cancel it!",
    }).then((result) => {
      if (result.isConfirmed) {
        deactive(plan_id);
      }
    });
  }

  function deactive(plan_id) {
    $.ajax({
      type: 'GET',
      url: ajaxDeactivePlan + "?id=" + plan_id,
      success: function(resultData) {
        if (resultData['status'] == 1) {
          toastr["success"](resultData['msg']);
          $('#datatable').DataTable().ajax.reload(null, false);
        }
      }
    });
  }

  //- activate user
  function activePlan(plan_id) {
    swal.fire({
      title: "Are you sure want to Deactive Plan in RA-WEB?",
      showCancelButton: true,
      confirmButtonColor: "#526BDF",
      cancelButtonColor: "#EC6767",
      confirmButtonText: "Yes, Deactive it!",
      cancelButtonText: "No, cancel it!",
    }).then((result) => {
      if (result.isConfirmed) {
        active(plan_id);
      }
    });
  }

  function active(plan_id) {
    $.ajax({
      type: 'GET',
      url: ajaxActivePlan + "?id=" + plan_id,
      success: function(resultData) {
        if (resultData['status'] == 1) {
          toastr["success"](resultData['msg']);
          $('#datatable').DataTable().ajax.reload(null, false);
        }
      }
    });
  }

  //- show data according to policy status
  $("#plan_status").select2();
  $("#plan_status").change(function() {
    $('#datatable').DataTable().ajax.reload(null, false);
    $('#datatable').DataTable().draw();
  });
</script>

@endsection