@extends('layouts.app') 
 @section('styles')

@endsection

    @section('content')


                    <!-- PAGE-HEADER -->
                    <div class="page-header">
                        <h1 class="page-title">Notifications</h1>
                        <div>
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="javascript:void(0)">Pages</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Notifications</li>
                            </ol>
                        </div>
                    </div>
                    <!-- PAGE-HEADER END -->

                    <input id="csrf_token" type="hidden" value="{{ csrf_token() }}">
                    <input id="order_id" type="hidden" value="">
 <!-- Row -->

                
                
                
                               <div class="row">
                            <div class="col-12 col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h3 class="card-title mb-0">View Notifications</h3>
                                    </div>
                                    <div class="card-body pt-4">
                                        <div class="grid-margin">
                                            <div class="">
                                                <div class="panel panel-primary">
                                                    <div class="tab-menu-heading border-0 p-0">
                                                        <div class="tabs-menu1">

                                                <ul class=" nav panel-tabs product-sale">
                                              

                                                <li class="px-1">
                                                 
                                                <div class="input-group">
                                                <div class="input-group-text custom-btn-info">
                                                    <i class="fa fa-calendar tx-16 lh-0 op-6"></i>
                                                </div>
                                                
                    @php
                    $from_date="";
                    $to_date="";
                    $selected="";
                    if(session('notification_filter_from_date')){
                    $from_date=session('notification_filter_from_date');
                    }
                    if(session('notification_filter_to_date')){
                    $to_date=session('notification_filter_to_date');
                    }
                    @endphp
                
                
                                             <input class="form-control fc-datepicker   " placeholder="From Date" value="{{$from_date}}" id="from_date" type="text">
                                                </div>    
                                                </li>
                                                        
                                                <li class="px-1">
                                                <div class="input-group">
                                                <div class="input-group-text custom-btn-info">
                                                    <i class="fa fa-calendar tx-16 lh-0 op-6"></i>
                                                </div>
                                        
                                                <input class="form-control fc-datepicker " placeholder="To Date" value="{{$to_date}}" id="to_date" type="text">
                                                </div>
                                                </li>
                                            
                                            
                                                <li class="px-1">
                                                    <div class="input-group">
                                                <button id="reset_btn"  class="btn btn-danger"><i class="fa fa-repeat"></i></button>  
                                                    </div>    
                                                </li>

                                                        
                                                         </ul>
                                                        </div>
                                                    </div>
                                                    <div class="panel-body tabs-menu-body border-0 pt-0">
                                                        <div class="tab-content">
                                                            <div class="tab-pane active" id="tab5">
                                                                <div class="table-responsive">
                                                            <table  class="table table-bordered text-nowrap border-bottom dataTable no-footer order_datatable" id="notification_datatable">
                                        <thead style="text-align:center">
                                            <tr>
                                                <th class="wd-15p border-bottom-0">#</th>
                                                <th class="wd-15p border-bottom-0">Date</th>
                                                <th class="wd-15p border-bottom-0">Time</th>
                                                <th class="wd-15p border-bottom-0">Type</th>
                                                <th class="wd-15p border-bottom-0">Narration</th>
                                                <th class="wd-15p border-bottom-0">Description</th>
                                              
                                            </tr>
                                        </thead>
                                     
                                    </table>
                                                                </div>
                                                            </div>
                                                           
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                @endsection


                @section('scripts')


                <script>
                    var base_url="{{url('/admin')}}";
                    var token=$('#csrf_token').val();
                </script>
   {{-- ################################Jquery Datatable########################### --}}
   <script src="{{asset('assets/jquery-datatable/jquery.min.js')}}"></script>
   <link rel="stylesheet" type="text/css" href="{{asset('assets/jquery-datatable/jquery.dataTables.css?v3')}}">
   <script src="{{asset('assets/jquery-datatable/jquery.dataTables.js')}}"></script>

       {{-- ########################################################################## --}}
       <script>
           
           
           $('#notification_datatable').DataTable({
    // "pagingType": "full_numbers",
   "responsive": true,
   "serverSide": true,
   "ordering": false,
   "searching": true,
   "bLengthChange": false,
   "info":     false,

   "columnDefs": [{
           "orderable": true
       },
       {"className": "text-center"}
   ],
   "displayLength":10,
   "ajax": {
       "url":  "/admin/notification_datatable",
       "type": "post",
       "data": function (data) {
            data._token = token;
          
           return data;

       }
   }, "AutoWidth": false,
   "columns": [
              {"data": "notification_id", "name": "notification_id"},
              {"data": "notification_id", "name": "notification_id"},
              {"data": "notification_id", "name": "notification_id"},
              {"data": "notification_id", "name": "notification_id"},
              {"data": "notification_id", "name": "notification_id"},
              {"data": "notification_id", "name": "notification_id"},
               ],
  
  "fnCreatedRow": function (nRow, aData, iDataIndex) {
      var info = this.dataTable().api().page.info();
      var page = info.page;
      var length = info.length;
      var index = (page * length + (iDataIndex + 1));
      aData.notification_type=parseInt(aData.notification_type); 
      switch (aData.notification_type) { 
        case 1: 
            var notification_type="Stock";
            break;
        case 2: 
        var notification_type="Order";
            break;
        case 3: 
        var notification_type="Purchase";
            break;		
        case 4: 
        var notification_type="Customer";
            break;
        case 4: 
        var notification_type="User";
            break;
        default:
        var notification_type="Unknown";
    }
      $('td:eq(0)', nRow).html(index).addClass('text-center');
      $('td:eq(1)', nRow).html(aData.notification_date).addClass('text-center');
      $('td:eq(2)', nRow).html(aData.notification_time).addClass('text-center');
      $('td:eq(3)', nRow).html(notification_type).addClass('text-left');
      $('td:eq(4)', nRow).html(aData.notification_name).addClass('text-left');
      $('td:eq(5)', nRow).html(aData.notification_desc).addClass('text-left');

}
});

$('#to_date').change(function(){
    var to_date=$('#to_date').val();
    $.ajax({
            type: 'POST',
             data: {"_token": token,"to_date": to_date},
             url: '/admin/notification_to_Date',
             success: function () {
                $('#notification_datatable').DataTable().ajax.reload(null, false);
             }
            });
    });
    
    $('#from_date').change(function(){
    var from_date=$('#from_date').val();
    $.ajax({
            type: 'POST',
             data: {"_token": token,"from_date": from_date},
             url: '/admin/notification_from_Date',
             success: function () {
                $('#notification_datatable').DataTable().ajax.reload(null, false);
             }
            });
    });

$('#reset_btn').click(function(){
    $.ajax({
        type: 'POST',
         data: {"_token": token},
         url: '/admin/notification_reset_filter',
         success: function (){
             $('#from_date').val('');
             $('#to_date').val('');
        $('#notification_datatable').DataTable().ajax.reload(null, false);

         }
        });
});







       </script>
       
         <script src="{{asset('assets/js/tooltip&popover.js')}}"></script>
    <!-- INTERNAL Bootstrap-Datepicker js-->
    <script src="{{asset('assets/plugins/bootstrap-daterangepicker/daterangepicker.js')}}"></script>
    <!-- INTERNAL Bootstrap-Datepicker js-->
    <script src="{{asset('assets/plugins/bootstrap-datepicker/bootstrap-datepicker.js')}}"></script>
    <!-- TIMEPICKER JS -->
    <script src="{{asset('assets/plugins/time-picker/jquery.timepicker.js')}}"></script>
    <script src="{{asset('assets/plugins/time-picker/toggles.min.js')}}"></script>
    <!-- INTERNAL jquery transfer js-->
    <script src="{{asset('assets/plugins/jQuerytransfer/jquery.transfer.js')}}"></script>
    <!-- DATEPICKER JS -->
    <script src="{{asset('assets/plugins/date-picker/date-picker.js')}}"></script>
    <script src="{{asset('assets/plugins/date-picker/jquery-ui.js')}}"></script>
    <script src="{{asset('assets/plugins/input-mask/jquery.maskedinput.js')}}"></script>
    <!-- FORMELEMENTS JS -->
    <script src="{{asset('assets/js/formelementadvnced.js')}}"></script>
    <script src="{{asset('assets/js/form-elements.js')}}"></script>

@endsection