@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;
}
</style>
@endpush

@section('content') 
<div class="container">
<form action="report-mediator-performance" method="post">
@csrf
<div class="card m-5">
    <div class="card-header bg-dark ">
    Performance Chart of Mediators - 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', $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 ">
    Performance Chart of Mediators 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>Name</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->title }} {{ $val->user_name }}           
       </td>
       <td>
           {{ $val->total }}
       </td>
       <td>
           {{ $val->settled }}
       </td>
       <td>
           {{ $val->unsettled }}
       </td>
       <td>
           {{ $val->not_assigned }}
       </td>       
       <td>
           {{ $val->pending }}
       </td>              
   </tr>
   
   @endforeach

  </tbody>
    </table>
    </div>
</div>

@endif


</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);

});
    </script>
    
    @endpush