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

<style>
  table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:after {
    display:none;
  }
  
  table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_desc_disabled:before {
      display:none;
  }

  @media only screen and (max-width:680px) {
    .card-body {
        padding: 1.25rem 0.2rem !important;
    }
    .page-content {
        padding: calc(70px + 24px) calc(24px / 2) 30px calc(24px / 2);
    }
  }

  tr th,
  tr td {
    font-size: 14px;
  }
  .nav-notification {
      white-space: nowrap;
      overflow-x: auto;
      flex-wrap: nowrap;
  }
  .n-item {
      flex: 1;
  }
  .n-link {
      text-align: center;
      padding: 0.5rem 3.21rem !important;
      font-weight: 500;
  }
     
  #title{
      display: none;
  }
  .mark-as-read-btn {
      background-color: #f46a6a;
      color: #ffff;
  }
  </style>

<div class="page-content">
    <div class="container-fluid">
        <!-- start page title -->
        <div class="row">
            <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 px-3 waves-effect waves-light btn-sm backToButton" title="backbtn" id="backToButton"><i class="mdi mdi-arrow-left font-size-20"></i></a>&nbsp;&nbsp;&nbsp; {{$data['title']}}
                </h4>
            </div>
        </div>
        <!-- end page title -->


        <div class="card">
                <div class="card-body">
                        <div class="row justify-content-left d-flex navbaar">
                            <ul class="nav nav-tabs mb-2 " id="myTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link waves-effect active" id="all-data" data-bs-toggle="tab" data-bs-target="#all-notification" type="button" role="tab" aria-controls="profile" aria-selected="false">All</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link waves-effect" id="client-support-data" data-bs-toggle="tab" data-bs-target="#client-support" type="button" role="tab" aria-controls="contact" aria-selected="false">Client Support</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link waves-effect" id="renew-data" data-bs-toggle="tab" data-bs-target="#renew" type="button" role="tab" aria-controls="contact" aria-selected="false">Renew</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link waves-effect" id="sub-agent-data" data-bs-toggle="tab" data-bs-target="#sub-agent" type="button" role="tab" aria-controls="intellectual-property-policy-tab" aria-selected="false">Sub Agent</button>
                                </li>
                            
                            </ul>
                        </div>

                            {{-- DATATABLES --}}
                        <div class="tab-content" id="myTabContent">
                            {{-- ALL --}}
                            <div class="tab-pane fade show active" id="all-notification" role="tabpanel" aria-labelledby="all-data">
                                   <p class="mb-0">
                                                   <div class="card">
                                                        <div class="card-body">
                                                            <h4 class="card-title mb-4">You've <span id="allUnreadNotificationcount"></span> unread notifications</h4>
                                                              <div class="table-responsive">
                                                                <table id="datatable-all" class="table align-middle table-nowrap table-striped display nowrap w-100 scrollable-element plan ">
                                                                    <thead class="table-light">
                                                                        
                                                                        <tr>
                                                                        <th>Photo | Policy Holder Name</th>
                                                                        <th>Notification</th>
                                                                        <th>Action</th>
                                                                        </tr>
                                                                        
                                                                    </thead>
                                                                    <tbody>
                                                                    </tbody>
                                                                </table>
                                                                @csrf
                                                              </div>
                                                        </div>
                                                    </div>
                                                </p>
                            </div>

                            {{-- CIENT SUPPORT DATA --}}
                            <div class="tab-pane fade" id="client-support" role="tabpanel" aria-labelledby="client-support-data">
                                        <p class="mb-0">
                                                    <div class="card">
                                                        <div class="card-body">
                                                            <h4 class="card-title mb-4">You've <span id="clientSupportUnreadNotificationcount"></span> unread notifications</h4>
                                                              <div class="table-responsive">
                                                                <table id="datatable-client-support" class="table align-middle table-nowrap table-striped display nowrap w-100 scrollable-element plan ">
                                                                    <thead class="table-light">
                                                                        <tr>
                                                                        <th>Photo</th>
                                                                        <th>Notification</th>
                                                                        <th>Action</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                    </tbody>
                                                                </table>
                                                                @csrf
                                                              </div>
                                                        </div>
                                                    </div>
                                                </p>
                            </div>

                            {{-- RENEW --}}
                            <div class="tab-pane fade" id="renew" role="tabpanel" aria-labelledby="renew-data">
                                  <p class="mb-0">
                                                       <div class="card">
                                                        <div class="card-body">
                                                            <h4 class="card-title mb-4">You've <span id="renewUnreadNotificationcount"></span> unread notifications</h4>
                                                              <div class="table-responsive">
                                                                <table id="datatable-renew" class="table align-middle table-nowrap table-striped display nowrap w-100 scrollable-element plan ">
                                                                    <thead class="table-light">
                                                                        <tr>
                                                                        <th>Photo | Policy Holder Name</th>
                                                                        <th>Sub Agent Name</th>
                                                                        <th>Policy No</th>
                                                                        {{-- <th>Policy</th> --}}
                                                                        <th>Notification</th>
                                                                        <th>Action</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                    </tbody>
                                                                </table>
                                                                @csrf
                                                              </div>
                                                        </div>
                                                    </div>
                                                </p>
                            </div>

                            {{-- SUB-AGENT-DATA --}}
                            <div class="tab-pane fade" id="sub-agent" role="tabpanel" aria-labelledby="sub-agent-data">
                                     <p class="mb-0">
                                                       <div class="card">
                                                        <div class="card-body">
                                                            <h4 class="card-title mb-4">You've <span id="subAgentUnreadNotificationcount"></span> unread notifications</h4>
                                                              <div class="table-responsive">
                                                                <table id="datatable-sub-agent" class="table align-middle table-nowrap table-striped display nowrap w-100 scrollable-element plan ">
                                                                    <thead class="table-light">
                                                                        <tr>
                                                                        <th>Photo | Policy Holder Name</th>
                                                                        <th>Sub Agent Name</th>
                                                                        <th>Policy No</th>
                                                                        {{-- <th>Policy</th> --}}
                                                                        <th>Notification</th>
                                                                        <th>Action</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                    </tbody>
                                                                </table>
                                                                @csrf
                                                              </div>
                                                        </div>
                                                    </div>
                                                </p>
                            </div>
                        </div>
                </div>
        </div>
        <!-- end row -->
    </div>
    <!-- container-fluid -->
</div>
<!-- End Page-content -->

@endsection

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

var csrfToken = $("[name=_token").val();
var ajaxURLGetClientSupportNotification= '{{route("client.support.notification.ajax")}}';
var ajaxURLGetSubAgentNotification= '{{route("sub.agent.notification.ajax")}}';
var ajaxURLGetRenewNotification= '{{route("renew.notification.ajax")}}';
var ajaxURLGettableAll='{{route("all.notification.ajax")}}';



$(document).ready(function() {
    $('button[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
        reloadActiveTab();
    });

    setInterval(reloadActiveTab, 5000);

    function reloadActiveTab() {
        var activeTabButton = $('button[data-bs-toggle="tab"][aria-selected="true"]');
        var activeTab = activeTabButton.data('bs-target');
        if (activeTab === '#all-notification') {
            tableAll.ajax.reload(function() { $('#allProcessingBtn').hide(); }, false);
        } else if (activeTab === '#client-support') {
            tableClientSupport.ajax.reload(function() { $('#processingBtn').hide(); }, false);
        } else if (activeTab === '#renew') {
            tableRenew.ajax.reload(function() { $('#renewProcessingBtn').hide(); }, false);
        } else if (activeTab === '#sub-agent') {
            tableSubAgent.ajax.reload(function() { $('#subAgentProcessingBtn').hide(); }, false);
        }
    }
});

var tableClientSupport = $('#datatable-client-support').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" id="processingBtn"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
    "ajax": {
      "url": ajaxURLGetClientSupportNotification,
      "type": "POST",
      "data": {
        "_token": csrfToken,
      }
    },
    "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": "photo","bSortable": false},
      {"mData": "description","bSortable": false},
      {"mData":"action", "bSortable": false},
    ]
  });
  tableClientSupport.on('xhr', function() {
      var responseData = tableClientSupport.ajax.json();
      $("#clientSupportUnreadNotificationcount").html(responseData['clientSupportUnreadNotificationcount']);

 });

var tableSubAgent = $('#datatable-sub-agent').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" id="subAgentProcessingBtn"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
    "ajax": {
      "url": ajaxURLGetSubAgentNotification,
      "type": "POST",
      "data": {
        "_token": csrfToken,
      }
    },
    "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": "photo","bSortable": false},
      {"mData": "sub_agent_name","bSortable": false},
        {"mData": "policy_number","bSortable": false},
       // {"mData": "policy","bSortable": false},
      {"mData": "description","bSortable": false},
      {"mData":"action", "bSortable": false},
    ]
  });
   tableSubAgent.on('xhr', function() {
        
            var responseData = tableSubAgent.ajax.json();
            $("#subAgentUnreadNotificationcount").html(responseData['subAgentUnreadNotificationcount']);
         
    });
 var tableRenew = $('#datatable-renew').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" id="renewProcessingBtn"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
    "ajax": {
      "url": ajaxURLGetRenewNotification,
      "type": "POST",
      "data": {
        "_token": csrfToken,
      }
    },
    "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": "photo","bSortable": false},
      {"mData": "sub_agent_name","bSortable": false},
        {"mData": "policy_number","bSortable": false},
        //{"mData": "policy","bSortable": false},
      {"mData": "description","bSortable": false},
      {"mData":"action", "bSortable": false},
    ]
  });
   tableRenew.on('xhr', function() {
        
        var responseData = tableRenew.ajax.json();
        $("#renewUnreadNotificationcount").html(responseData['renewUnreadNotificationcount']);
       
    });

  var tableAll = $('#datatable-all').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" id="allProcessingBtn"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
    "ajax": {
      "url": ajaxURLGettableAll,
      "type": "POST",
      "data": {
        "_token": csrfToken,
      }
    },
    "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": "photo","bSortable": false},
      {"mData": "description","bSortable": false},
      {"mData":"action", "bSortable": false},
    ]
  });
  tableAll.on('xhr', function() {
         
            var responseData = tableAll.ajax.json();
            $("#allUnreadNotificationcount").html(responseData['allUnreadNotificationcount']);
           
  });


    





</script>
@endsection