@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: 300px;
    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(5) {
    white-space: normal;
    word-wrap: break-word;
    max-width: 300px;
  }

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

  .feedback-mn {
    align-items: center;

  }

  .feedback-mn .select2-container {
    width: 116px !important;
    margin-left: 10px;
  }

  .feedback-mn .select2-selection__rendered {
    line-height: 32px !important;
  }

  .feedback-mn .select2-selection--single {
    height: 33px;
  }

  span.badge.badge-pill.badge-soft-success,
  .badge-soft-danger.font-size-12 {
    width: 62px;
    padding: 6px 3px;
    margin-top: 5px;
  }
</style>

<div class="page-content client-tr">
  <div class="container-fluid">

    <!-- start page title -->
    @include('../reachassuree_admin/comman/header')
    <!-- end page title -->
    <!-- start row -->

    <div class="row">
      <div class="card">
        <div class="card-body">
          <br>
          <div class="row">
            <div class="d-flex justify-content-between mb-3 feedback-mn">
              <div>
                <label for="feedback_status" class="form-label" style="margin:0px 15px 0 0; align-self: center;">Status
                  <select class="form-control" name="feedback_status" id="feedback_status">
                    <option value="-1">All</option>
                    <option value="1">Active</option>
                    <option value="0">Deactive</option>
                  </select>
              </div>
              @php
              $check_privileges = userPrivilegesReturn(60, 62);
              @endphp
              @if (($check_privileges == 1) || (Session::get('admin_type') == 0))
              <div>
                <button type="button" class="form-control btn-danger btm-sm" id="modalSendMail" data-bs-toggle="modal" data-bs-target="#composemodal">Delete</button>
              </div>
              @endif

            </div>
          </div>

          <div class="table-responsive">
            <table id="datatable" class="table align-middle table-striped  w-100 ">
              <thead class="table-light">
                <tr>
                  <th> <INPUT type="checkbox" onchange="checkAll(this)" name="chk[]" id="chk" class="checkAll" /></th>
                  <th>Status</th>
                  <th>Id</th>
                  <th>Client Code</th>
                  <th>Client Name</th>
                  <th>Feedback Date</th>
                  <th>Description</th>
                  <th>Sales Servies</th>
                  <th>Renewal Servies </th>
                  <th>Website Servies </th>
                  <th>RIAP Rating</th>
                  <th>Assistance Behaviour </th>
                  <th>Payment Rating</th>
                </tr>
              </thead>
              <tbody>
              </tbody>
            </table>
            @csrf
          </div>

        </div>
      </div>
    </div>
  </div>

  <!-- end row -->
</div>
<!-- container-fluid -->
</div>
<!-- End Page-content -->
<!-- Modal -->
<div class="modal fade" id="composemodal" tabindex="-1" role="dialog" aria-labelledby="composemodalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content  px-5 py-4">
      <form method="post" id="formSendEmail" action="{{route('delete.feedback')}}" novalidate enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="rows_selected" id="rows_selected" value="" />
        <h2 class="swal2-title text-center" id="swal2-title">Are you sure want to delete this?</h2>
        <div class="text-center pt-3">
          <button type="button" class="swal2-confirm swal2-styled" id="btnsend" aria-label="" style="display: inline-block; background-color: rgb(82, 107, 223);">Yes, delete it! <i class="fab fa-telegram-plane ms-1"></i></button>
          <button type="button" class="swal2-confirm swal2-styled" data-bs-dismiss="modal" aria-label="" style="display: inline-block; background-color: rgb(236, 103, 103);">No, cancel it!</button>
        </div>
      </form>
    </div>
  </div>
</div>
<!-- end modal -->
<div class="modal fade" id="composemodal1" tabindex="-1" role="dialog" aria-labelledby="composemodalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content  px-5 py-4">
      <form method="post" id="formSendEmail" action="{{route('delete.feedback')}}" novalidate enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="rows_selected" id="rows_selected" value="" />
        <h5 class="swal2-title text-center" id="swal2-title">Please select at least one feedback to delete.</h5>
        <div class="text-center pt-3">
          <!-- <button type="button" class="swal2-confirm swal2-styled" id="btnsend" aria-label="" style="display: inline-block; background-color: rgb(82, 107, 223);">Yes, delete it! <i class="fab fa-telegram-plane ms-1"></i></button> -->
          <button type="button" class="swal2-confirm swal2-styled" data-bs-dismiss="modal" id="selectone" aria-label="" style="display: inline-block; background-color: rgb(236, 103, 103);">Ok</button>
        </div>
      </form>
    </div>
  </div>
</div>


@endsection('content')
@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("reachassuree.admin.feedback.ajax")}}';
  var ajaxDeactiveUser = '{{route("deactive.feedback")}}';
  var ajaxActiveUser = '{{route("active.feedback")}}';
  var ajaxdelete = "{{route('delete.feedback')}}";

  $("#selectone").click(function() {
    $('#composemodal').modal('hide');
  });

  $("#btnsend").click(function() {
    if (rows_selected.length === 0) {
      $("#composemodal1").modal('show');
    } else {
      $("#btnsend").prop("disabled", true);
      $("#btnsend").html(
        '<i class="ri-arrow-right-s-line"></i> Processing...'
      );
      $.ajax({
        type: 'POST',
        data: $("#formSendEmail").serialize(),
        url: ajaxdelete,
        success: function(resultData) {

          if (resultData['status'] == 1) {
            $("#btnsend").prop("disabled", false);
            $("#btnsend").html(
              '<i class="ri-arrow-right-s-line"></i>   Yes, delete it!'
            );
            toastr['success'](resultData['msg']);
            $("#composemodal").modal('hide');
            $('#datatable').DataTable().ajax.reload(null, false);
            $('input:checkbox').prop('checked', false);
          } else {
            toastr['error'](resultData['msg']);
          }
        }
      });
      // }
    }

  });

  var csrfToken = $("[name=_token").val();
  var table = $('#datatable').DataTable({
    "aoColumnDefs": [{"bSortable": false,"aTargets": [0]}],
    "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,
        "feedback_status": function() {return $("#feedback_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": "checkbox","bSortable": false, },
      { "mData": "status", "bSortable": false, },
      { "mData": "id" },
      { "mData": "client_code" },
      { "mData": "agent_name" },
      { "mData": "feedback_date" },
      { "mData": "description" },
      { "mData": "our_sales_servies","bSortable": false, },
      { "mData": "our_renewal_servies","bSortable": false, },
      { "mData": "our_website_servies","bSortable": false, },
      { "mData": "RIAprating","bSortable": false, },
      { "mData": "assistancebehaviour","bSortable": false, },
      { "mData": "pymentrating","bSortable": false,},
    ],
    "drawCallback": function() {

      for (var i = 0; i < rows_selected.length; i++) {
        var ids = rows_selected[i];
        $("#" + ids).attr("checked", "checked");
      }

    }
  });
  //- deactivate user
  function deactiveCustomerFeedback(feedback_id) {
    swal.fire({
      title: "Do you really want to activate reviews on RA-WEB?",
      showCancelButton: true,
      confirmButtonColor: "#526BDF",
      cancelButtonColor: "#EC6767",
      confirmButtonText: "Yes, Activate it!",
      cancelButtonText: "No, cancel it!",
    }).then((result) => {
      if (result.isConfirmed) {
        deactive(feedback_id);
      }
    });
  }

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

  //- activate user
  function activeCustomerFeedback(feedback_id) {
    swal.fire({
      title: "Do you really want to deactivate reviews on RA-WEB?",
      showCancelButton: true,
      confirmButtonColor: "#526BDF",
      cancelButtonColor: "#EC6767",
      confirmButtonText: "Yes, Deactivate it!",
      cancelButtonText: "No, cancel it!",
    }).then((result) => {
      if (result.isConfirmed) {
        active(feedback_id);
      }
    });
  }

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

  //- toggle datatable columns
  $(document).ready(function() {
    $('input.toggle-vis').on('click', function(e) {

      var unHiddenValues = [2, 3, 4, 5];
      if ($(this).attr('data-column') == -1) {
        for (let index = 0; index <= 37; index++) {
          if (unHiddenValues.indexOf(index) == -1) {
            var column = table.column(index);
            column.visible(!column.visible());
          }
        }
      }
      // Get the column API object
      var column = table.column($(this).attr('data-column'));
      // Toggle the visibility
      column.visible(!column.visible());
    });
  });

  //- hide alert
  setTimeout(function() {
    $('.alert').hide();
  }, 3000);

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

  var rows_selected = [];
  var arraycheck = [];
  //-multiple delete 
  function isCheckedFeedback(feedback_id) {
    if (feedback_id == -1) {
      $('.checkBoxFeedback').each(function() {

        rows_selected.push(this.id);
        $('#rows_selected').val(rows_selected);
      });
      $('#chk').change(function() {
        $('.checkBoxFeedback').prop('checked', this.checked);

        $('#rows_selected').val(rows_selected);
      });
      $('.checkBoxFeedback').change(function() {
        if ($('.checkBoxFeedback:checked').length == $('.checkBoxFeedback').length) {
          $('#chk').prop('checked', true);

          $('#rows_selected').val(rows_selected);
        } else {
          $('#chk').prop('checked', false);


          let checkbox = document.getElementById(this.id);

          arraycheck.push(this.id);
          for (var i = 0; i < rows_selected.length; i++) {
            if (rows_selected[i] === this.id) {
              var spliced = rows_selected.splice(i, 1);
            }
          }
          $('#rows_selected').val(rows_selected);

        }
      });


    } else if (feedback_id == -2) {
      rows_selected = [];
      $('#rows_selected').val(rows_selected);
    } else {
      var checkBox = document.getElementById(feedback_id);
      if (checkBox.checked) {
        rows_selected.push(feedback_id);
      } else {
        for (var i = 0; i < rows_selected.length; i++) {
          if (rows_selected[i] === feedback_id) {
            var spliced = rows_selected.splice(i, 1);
          }
        }
      }
      $('#rows_selected').val(rows_selected);
    }
  }

  function checkAll(ele) {

    var checkboxes = document.getElementsByTagName('input');

    if (ele.checked) {

      for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].type == 'checkbox') {
          checkboxes[i].checked = true;
        }
      }
      isCheckedFeedback(-1);
    } else {
      for (var i = 0; i < checkboxes.length; i++) {

        if (checkboxes[i].type == 'checkbox') {
          checkboxes[i].checked = false;

        }
      }
      isCheckedFeedback(-2);
    }
  }
</script>

@endsection