@extends('layouts.default', ['appTopMenu' => true])

@push('scripts')
<style type="text/css">
.cl_appication
{
  color: blue;
}
.cl_appication:hover
{
  cursor: pointer;
}

</style>
<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-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>
<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>
    <script src="{{ asset('js/bootstrap-datetimepicker.fr.js') }}"></script>
    <script src="/assets/plugins/sweetalert/dist/sweetalert.min.js"></script>
<style type="text/css">
  .ui-front {
    z-index: 9999;
}

       .sp_total
       {
           color: blue;
       }
       .sp_total:hover
       {
           cursor: pointer;
       }
    </style>
@endpush

@section('content') 
<div class="container">
<form action="report-mediator-year-wise-statements" method="post">
@csrf
<div class="card m-5">
    <div class="card-header bg-dark ">
    Mediation Year wise Statement - Between Dates
    </div>
    <div class="card-body">

        
        
    <div class="row" id="dv_heading">
        <div class="col-sm-3 mb-3 offset-sm-2">
        <label class="control-label" for="txt_frmdate"><b>From Date</b><span class="cl_red"> *</span></label>
        <input type="text" name="txt_frmdate" id="txt_frmdate" value="{{old('txt_frmdate',$txt_frmdate)}}" class="form-control form-control-sm dtp" placeholder="Date" autocomplete="off">
        <small class="text-danger" id="txt_frmdate_e">
        </small>
        </div>
        <div class="col-sm-3 mb-3">
        <label class="control-label" for="txt_todate"><b>To Date</b><span class="cl_red"> *</span></label>
        <input type="text" name="txt_todate" id="txt_todate" value="{{old('txt_todate')}}" class="form-control form-control-sm dtp" placeholder="Date" autocomplete="off">
        <small class="text-danger" id="txt_todate_e">
        </small>
        </div>
        <div class="col-sm-3 mb-3 mt-3">
        
        <input type="submit" name="btn_submit" id="btn_submit" value="Submit" class="btn btn-primary btn-sm"/>
        </div>

</div>

</div>
</div>

</form>


@if(isset($list))

<div class="card mb-5" >
    <div class="title_print card-header bg-dark ">
    Mediation Year wise Statement From {{$txt_frmdate}} to {{$txt_todate}}
    </div>
    <div class="card-body">

    
        <div class=''></div>    
<table id="data-table-combine" class="table table-striped table-bordered align-middle">
  <thead>
    <tr>
     <th data-orderable="false">S.No.</th>
     <th>Year</th>
     <th>No. of Cases Received/Assigned</th>
      <th>No. of Cases Settled</th>
      <th>No. of Cases Not Settled</th>
      <th>No. of Cases in which mediation not held / party not present / File Closed / Not Assigned</th>
      <th>No. of Cases Pending</th>
    </tr>
  </thead>
  <tbody>
         @foreach($list as $val)
      <tr>
       <td>
           {{ $sno++ }}
       </td>
       <td>
           {{ $val->year }}
       </td>
       <td>
       <span class="sp_total" data-year="{{ $val->year }}" data-type="case_received">{{ $val->total }}</span>
       </td>
       <td>
       <span class="sp_total" data-year="{{ $val->year }}" data-type="case_settled">{{ $val->settled }}</span>
       </td>
       <td>
       <span class="sp_total" data-year="{{ $val->year }}" data-type="case_unsettled">{{ $val->unsettled }}</span>
       </td>
       <td>
       <span class="sp_total" data-year="{{ $val->year }}" data-type="case_not_assigned">{{ $val->not_assigned }}</span>
       </td>       
       <td>
       <span class="sp_total" data-year="{{ $val->year }}" data-type="case_pending">{{ $val->pending }}</span>
       </td>              
   </tr>
   
   @endforeach
   <tr style='font-weight: bold;'><td>{{ $sno++ }}</td><td>Total</td><td>{{$total}}</td><td>{{$settled}}</td><td>{{$unsettled}}</td><td>{{$not_assigned}}</td><td>{{$pending}}</td></tr>
  </tbody>
    </table>
    </div>
</div>

@endif


</div>

<div class="modal" id="myModal">
  <div class="modal-dialog modal-xl modal-dialog-scrollable">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
      <b><small class="modal-title" id="modal_heading">Mediation Year wise Statement</small></b>
      <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <!-- Modal body -->
      <div class="modal-body" id="dv_shw_pdf">
      
        
</div>
     

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
      </div>

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

@endsection


@push('scripts')
<script>
  
    $(document).ready(function(){
  
    $(".dtp").datetimepicker({
        format:'dd-mm-yyyy',
        minView: 2, 
        pickTime: false, 
        language: 'pt-BR',
        autoclose: true, 
       
    });

    var title = function () {
                        return $('.title_print').html(); };                   
var options = {
    dom: '<"dataTables_wrapper dt-bootstrap"<"row"<"col-xl-7 d-block d-sm-flex d-xl-block justify-content-center"<"d-block d-lg-inline-flex me-0 me-md-3"l><"d-block d-lg-inline-flex"B>><"col-xl-5 d-flex d-xl-block justify-content-center"fr>>t<"row"<"col-md-5"i><"col-md-7"p>>>',
    buttons: [
      { title: title, extend: 'copy', className: 'btn-sm' },
      { title: title, extend: 'csv', className: 'btn-sm' },
      { title: title, extend: 'excel', className: 'btn-sm' },
      { title: title, extend: 'pdf', className: 'btn-sm' },
      { title: title, extend: 'print', className: 'btn-sm' }
    ],

    responsive: true,
    colReorder: true,
    keys: true,
    rowReorder: true,
    select: true
  };

  if ($(window).width() <= 767) {
    options.rowReorder = false;
    options.colReorder = false;
  }
  $('#data-table-combine').DataTable(options);

//   $('#data-table-combine1').DataTable(options);
   
   $(document).on('click','.sp_total',function(){
       
     
    var year=$(this).data('year');
    var type=$(this).data('type');
    var txt_frmdate=$('#txt_frmdate').val();
    var txt_todate=$('#txt_todate').val();
     
         $('#myModal').modal('show');
       //   $("#dv_shw_pdf").html('Loading..');
       $.ajax({
           url: "/get_mediator_year_wise_statement",
           type: 'POST',
           cache: false,
           async: true, 
           data: {year: year,type:type,txt_frmdate:txt_frmdate,txt_todate:txt_todate},
           headers: {
               'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
           },
           beforeSend:function(){
               // $('#myModal').modal('show');
               $('#dv_shw_pdf').html("<div class='text-center'><div class='spinner-border'></div></div>");
           },
           success: function (data, status)
           {
            // $('#modal_heading').html(heading_data);
               $("#dv_shw_pdf").html(data);
               $('#data-table-combine1').DataTable(options);
           },
           error: function (xhr) {
               alert("Error:" + xhr.status + ' ' + xhr.statusText);
           }
       });
   });

});
    </script>
    
    @endpush