@extends('layouts.default', ['appTopMenu' => true])
    @section('title', 'Case Diary')
    @push('scripts')
    <!--<script src="{{ asset('js/typeahead.js') }}"></script>
    <script src="{{ asset('js/bootstrap3-typeahead.min.js') }}"></script

    <script src="{{ asset('js/autocomplete.js') }}"></script>-->
    <link rel="stylesheet" href="{{ asset('css/jquery-ui.css')}}" />
    <script src="{{ asset('js/jquery-ui.js') }}"></script>
    <script src="{{ asset('js/bootstrap-datetimepicker.js')}}"></script>
    <link href="../assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.css" rel="stylesheet" />
    <script src="../assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"></script>
    <link href="../assets/plugins/datatables.net-scroller-bs5/css/scroller.bootstrap5.min.css" rel="stylesheet" />
    <link href="/assets/plugins/select2/dist/css/select2.min.css" rel="stylesheet" />
    <script src="/assets/plugins/select2/dist/js/select2.min.js"></script>

    <script src="/assets/plugins/sweetalert/dist/sweetalert.min.js"></script>
    <!-- Copy from SCLSC -->

    <link href="/assets/plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
    <link href="/assets/plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css" rel="stylesheet" />
    <link href="/assets/plugins/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css" rel="stylesheet" />
    <link href="/assets/plugins/datatables.net-colreorder-bs5/css/colReorder.bootstrap5.min.css" rel="stylesheet" />
    <link href="/assets/plugins/datatables.net-keytable-bs5/css/keyTable.bootstrap5.min.css" rel="stylesheet" />
    <link href="/assets/plugins/datatables.net-rowreorder-bs5/css/rowReorder.bootstrap5.min.css" rel="stylesheet" />
    <link href="/assets/plugins/datatables.net-select-bs5/css/select.bootstrap5.min.css" rel="stylesheet" />

    <script src="/assets/plugins/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="/assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js"></script>
    <script src="/assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
    <script src="/assets/plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script>
    <script src="/assets/plugins/datatables.net-colreorder/js/dataTables.colReorder.min.js"></script>
    <script src="/assets/plugins/datatables.net-colreorder-bs5/js/colReorder.bootstrap5.min.js"></script>
    <script src="/assets/plugins/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
    <script src="/assets/plugins/datatables.net-keytable-bs5/js/keyTable.bootstrap5.min.js"></script>
    <script src="/assets/plugins/datatables.net-rowreorder/js/dataTables.rowReorder.min.js"></script>
    <script src="/assets/plugins/datatables.net-rowreorder-bs5/js/rowReorder.bootstrap5.min.js"></script>
    <script src="/assets/plugins/datatables.net-select/js/dataTables.select.min.js"></script>
    <script src="../assets/plugins/datatables.net-scroller/js/dataTables.scroller.min.js"></script>
    <script src="../assets/plugins/datatables.net-scroller-bs5/js/scroller.bootstrap5.min.js"></script>
    <script src="/assets/plugins/datatables.net-select-bs5/js/select.bootstrap5.min.js"></script>
    <script src="/assets/plugins/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
    <script src="/assets/plugins/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js"></script>
    <script src="/assets/plugins/datatables.net-buttons/js/buttons.colVis.min.js"></script>
    <script src="/assets/plugins/datatables.net-buttons/js/buttons.flash.min.js"></script>
    <script src="/assets/plugins/datatables.net-buttons/js/buttons.html5.min.js"></script>
    <script src="/assets/plugins/datatables.net-buttons/js/buttons.print.min.js"></script>
    <script src="/assets/plugins/pdfmake/build/pdfmake.min.js"></script>
    <script src="/assets/plugins/pdfmake/build/vfs_fonts.js"></script>
    <script src="/assets/plugins/jszip/dist/jszip.min.js"></script>
    <script src="{{ asset('js/task/pending_report.js') }}"></script>


    <!-- Copy from SCLSC -->

    <!--<script src="{{ asset('js/bootstrap-datetimepicker.fr.js') }}"></script>-->
    @endpush
    @push('head')

    <style>
        /*Custom CSS*/
        span {
            transition: color 0.5s ease-in;
        }

        label:focus-within span {
            color: blue;
        }

        input {
            display: block;
            width: 100%;
        }

        label,
        select {

            display: block;
            width: 100%;
            max-width: 100%;
        }
        /*Profile Pic Start*/
        .picture-container{
            position: relative;
            cursor: pointer;
            text-align: center;
        }
        .picture{
            width: 106px;
            height: 106px;
            background-color: #999999;
            border: 4px solid #CCCCCC;
            color: #FFFFFF;
            border-radius: 50%;
            margin: 0px auto;
            overflow: hidden;
            transition: all 0.2s;
            -webkit-transition: all 0.2s;
        }
        .picture:hover{
            border-color: #2ca8ff;
        }
        .picture input[type="file"] {
            cursor: pointer;
            display: block;
            height: 100%;
            left: 0;
            opacity: 0 !important;
            position: absolute;
            top: 0;
            width: 100%;
        }

        .picture-src{
            width: 100%;

        }
        /*Profile Pic End*/
        .form-control:focus, .form-select:focus, .form-check-input:focus, .select2:focus-within{
            border-color: #6265e4 !important;
            box-shadow: 0 0 5px rgba(98, 101, 228, 1) !important;
        }
        .select2.select2-container .selection .select2-selection.select2-selection--single .select2-selection__rendered,
        .select2.select2-container .selection .select2-selection.select2-selection--multiple .select2-selection__rendered{
            font-weight:100;
        }
    </style>
    @endpush
    @section('content')
    <script>
    @if (Session::has('success'))

    swal("{{Session::get('success')}}").then(function() {
    //window.location = "/project/" + loc;
    });
            @endif



    </script>
   
   
    <section>
   
        <div class="panel" data-sortable-id="form-stuff-3">
                    <div class="panel-heading card-bg-color">
                        <h4 class="panel-title">My Pending Cases</h4>
                        <div class="panel-heading-btn">
                            <a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
                            <a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
                            <a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
                            <a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
                        </div>
                    </div>
                    <div class="panel-body">
                    <div class="row">
                        <div class="form-group col-sm-4 mt-2" ></div>
                                    <div class="form-group col-sm-4 mt-2" >
                                    <div class="form-check form-check-inline">  
                                                <input type="radio" name="mainhead" id="mainhead" value="A" class="form-check-input" checked>All                                         
                                        </div>
                                        <div class="form-check form-check-inline">   
                                                <input type="radio" name="mainhead" id="mainhead" value="M" class="form-check-input" >Motion
                                        </div>
                                        <div class="form-check form-check-inline">          
                                                <input type="radio" name="mainhead" id="mainhead" value="F" class="form-check-input">Final
                                        </div>
                                        
                                        <small id="sp_bench_err" class="text-danger d-block"></small>
                                    </div>
                                    <div class="form-group col-sm-4 mt-2" ></div>
                    </div>
        
                        <table id="data-table-scroller" class="table table-striped table-bordered align-middle">
                            <thead>
                                <tr>
                                    <th>Srno</th>
                                    <th>Case No</th>
                                    <th>Party</th>
                                    <th>Mainhead</th>
                                    <th>Tentative Date</th>
                                    
                                </tr>
                            </thead>

                            <tbody id="bodytable">
                                @php 
                                        $sn = 1;
                                        foreach($results as $res){
                                    @endphp
                                    <tr>
                                        <td>{{$sn}}</td>
                                        <td>{{$res->case_no}}</td>
                                        <td>{{$res->pet_name}} VS {{$res->res_name}}</td>
                                        <td>{{$res->mainhead}}</td>
                                        <td>{{date("d-m-Y", strtotime($res->tentative_cl_dt))}}</td>
                                       
                                    </tr>   
                            @php $sn++; } @endphp
                            </tbody>
                        </table>                           
                    </div>
                </div>
    </section>

    @endsection
    @push('scripts')
    <script>
   var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');  



  $('input[type=radio][name=mainhead]').change(function() {
   // $('#data-table-default').DataTable().ajax.reload();
   if ( $.fn.DataTable.isDataTable('#data-table-scroller') ) {
  $('#data-table-scroller').DataTable().destroy().clear();
}
$('#data-table-scroller tbody').empty(); // Empty <tbody>
   //$('#data-table-scroller').DataTable().destroy();
    $.ajax({
                url: 'get_adv_pending_by_mainhead',
                type: 'GET',
                dataType: 'json',
                data: {
                    _token: CSRF_TOKEN,
                    mainhead: this.value
                },
                beforeSend: function(){
          // Here, manually add the loading message.
          $('#data-table-scroller > tbody').html(
            '<tr class="odd">' +
              '<td valign="top" colspan="6" class="dataTables_empty">Loading&hellip;</td>' +
            '</tr>'
          );
        },
                success: function(response) {
                   
                    createRows(response);
                    
                }
            });
});
function createRows(response) {
      //  alert(response);
            var len = 0;
            $('#data-table-scroller tbody').empty(); // Empty <tbody>
            
           // exit;
                if (response['data'] != null) {
                len = response['data'].length;
            }
            if (len > 0) {
                //alert(len);
                var count=1;var tr_str='';
                for (var i = 0; i < len; i++) {               
                var dateAr = response['data'][i].tentative_cl_dt.split('-');
                var newDate = dateAr[2] + '-' + dateAr[1] + '-' + dateAr[0];  
                    tr_str +='<tr>';
                    tr_str +='<td>' + count +'</td>';
                    tr_str +='<td>' + response['data'][i].case_no + '</td>';
                    tr_str +='<td>' + response['data'][i].pet_name + ' Vs ' + response['data'][i].res_name +'</td>';
                    tr_str +='<td>' + response['data'][i].mainhead + '</td>';
                    tr_str +='<td>' + newDate + '</td>';
                    tr_str +='</tr>';
                      
                   


                    count++;
                }
              //  alert(tr_str);
                
              $("#data-table-scroller tbody").append(tr_str);
              $('#data-table-scroller').DataTable({
                "processing": true,
        "language": {
            processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span> '},
       
      "autoWidth":false, 
      "info":false, 
      "JQueryUI":true, 
      "ordering":true, 
      "paging":false, 
      "scrollY":"500px", 
      "scrollCollapse":true,
      "searching": true
});
              
            } else {
                var tr_str = "<tr>" +
                    "<td align='center' colspan='4'>No record found.</td>" +
                    "</tr>";

                $("#bodytable").append(tr_str);
                
            }

          
        }


        $('#data-table-scroller').DataTable({
            "autoWidth":false, 
      "info":false, 
      "JQueryUI":true, 
      "ordering":true, 
      "paging":false, 
      "scrollY":"500px", 
      "scrollCollapse":true,
      "searching": true
   
  });


    </script>


    @endpush