@extends('layouts.default', ['appTopMenu' => true])
@section('title', $module_title)
@push('head')
<meta name="csrf-token" content="{{ csrf_token() }}">

<link href="https://fonts.googleapis.com/css?family=Nunito:400,300,700" rel="stylesheet" id="fontFamilySrc" />
<link href="/assets/plugins/jquery-ui-dist/jquery-ui.min.css" rel="stylesheet" />
<!--<link href="assets/plugins/bootstrap/bootstrap-4.1.1/css/bootstrap.min.css" rel="stylesheet" />-->
<!--<link href="/assets/plugins/font-awesome/5.1/css/all.css" rel="stylesheet" />-->
<link href="https://seantheme.com/source-admin/admin/assets/css/animate.min.css" rel="stylesheet" />
<link href="https://seantheme.com/source-admin/admin/assets/css/style.min.css" rel="stylesheet" />
<!--
<link href="/assets/plugins/bootstrap-calendar/css/bootstrap_calendar.css" rel="stylesheet" />-->


<script src="/assets/plugins/pace/pace.min.js" type="77e68501226878a669fdcbd3-text/javascript"></script>
@endpush
@section('content')


<h1 class="page-header">{{$module_title}}<small></small></h1>

<!--.widget-loader{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1020;background:url(../img/transparent/white-0.9.png);background:rgba(255,255,255,.95);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;color:#30373e}-->
<div class="row">




<div class="col-lg-2 col-4 pa-drill" data-pa="Pending">
<div class="widget widget-stat bg-inverse ">
<div class="widget-stat-number pa-pending">Loading...</div>
<div class="widget-stat-text">Pending</div>
</div>
</div>


<div class="col-lg-2 col-4 pa-drill" data-pa="Disposed">
<div class="widget widget-stat bg-secondary ">
<div class="widget-stat-number pa-disposed">Loading...</div>
<div class="widget-stat-text">Closed</div>
</div>
</div>

<div class="col-lg-2 col-4 pa-drill" data-pa="Listed">
<div class="widget widget-stat bg-warning ">
<div class="widget-stat-number pa-listed">Loading...</div>
<div class="widget-stat-text">Listed</div>
</div>
</div>
    
<div class="col-lg-2 col-4 pa-drill" data-pa="Refused">
<div class="widget widget-stat bg-danger ">
<div class="widget-stat-number pa-refused">Loading...</div>
<div class="widget-stat-text">Refused</div>
</div>
</div>

<div class="col-lg-2 col-4 pa-drill" data-pa="PBM">
<div class="widget widget-stat bg-success ">
<div class="widget-stat-number pa-pbm">Loading...</div>
<div class="widget-stat-text">Pending before<br>Mediation User</div>
</div>
</div>    

<div class="col-lg-2 col-4 pa-drill" data-pa="MS">
<div class="widget widget-stat bg-primary ">
<div class="widget-stat-number pa-ms">Loading...</div>
<div class="widget-stat-text">Pending before<br>Member Secretary</div>
</div>
</div>    
    
    
    
</div>
<div class="panel panel-inverse row dril-down-result d-none">
            <div class="panel-heading">
                <h4 class="panel-title"></h4>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-12">
                          <div class="table-responsive">
                            <table class="tbl_drill table table-striped mb-0 align-middle">
                                <thead>
                                    
                                </thead>
                                <tbody>
                                    
                                </tbody>
                            </table>
                        </div>



                    </div>
                </div>



            </div>


        </div>   


<div class="modal" id="historyModal">
  <div class="modal-dialog modal-fullscreen" style='width:95%; max-width: 95%; height: 90%; max-height: 90%;'>
    <div class="modal-content" >

      <!-- Modal Header -->
      <div class="modal-header">
      <h4 class="modal-title" id="modal_heading">History of ANR</h4>
        <button type="button" class="btn-close btn-sm" data-bs-dismiss="modal"></button>
      </div>

      <!-- Modal body -->
      <div class="modal-body" style="height:90vh;overflow-y: auto;">
<div class="table-responsive">
                            <table class="table-display-history table table-striped mb-0 align-middle">
                                <thead>
                                    
                                </thead>
                                <tbody>
                                    
                                </tbody>
                            </table>
                        </div>
            
          
      </div>

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

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

    
@endsection
@push('scripts')
 
<script> 
$(document).ready(function(){
        var token = $("meta[name='csrf-token']").attr("content");
$.ajax({
            type: "POST",
            url: "mediation-dashboard-get",
            data: {"_token": token},
            cache: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            dataType: 'json', 
            success: function (data) {
                
                let userData = null;
try {
    // Parse a JSON
    userData = JSON.parse(data); 
} catch (e) {
    // You can read e for more info
    // Let's assume the error is that we already have parsed the payload
    // So just return that
    userData = data;
}


$(".pa-pending").html(userData['pending']);
$(".pa-disposed").html(userData['disposed']);
$(".pa-listed").html(userData['listed']);
$(".pa-refused").html(userData['refused']);
$(".pa-ms").html(userData['pending_before_ms']);
$(".pa-pbm").html(userData['pending_before_md']);

            }
        });
        
        
 
 $(document).on("click", ".pa-drill", function () {
        var token = $("meta[name='csrf-token']").attr("content");
        var flag = $(this).attr("data-pa");
        console.log(flag);
        $.ajax({
            type: "POST",
            url: "mediation-dashboard-drill",
            data: {"_token": token,"flag":flag},
            cache: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            dataType: 'json', 
            success: function (data) {
                
            $(".dril-down-result").removeClass("d-none");
            console.log(data);                
                
  
            $('.tbl_drill tbody').empty();
              let userData = null;
try {
    // Parse a JSON
    userData = JSON.parse(data); 
} catch (e) {
    // You can read e for more info
    // Let's assume the error is that we already have parsed the payload
    // So just return that
    userData = data;
}

        $(".panel-title").html(flag+" Report");
        $('thead').empty(); $('tbody').empty();
            
            
        $('<tr>').append(
                    $('<th>').text("#"),
                    $('<th>').text("ANR No."),
                    $('<th>').text("Receipt No."),
                    $('<th>').text("Diary No."),
                    $('<th>').text("Applicant"),
                    $('<th>').text("Mobile"),                    
                    $('<th>').text("Mediation Date"),
                    $('<th>').text("Mediator Name"),
                    $('<th>').text("View"),
                 ).appendTo('.tbl_drill thead');
        
        
        $.each(userData, function(i, item) {
            var action_str2 = '<a data-bs-toggle="modal" data-bs-target="#historyModal" data-anr-id="'+item.anr_id+'" href="#" class="btn btn-sm btn-primary btn-open-modal w-60px me-1">View</a>';

            $('<tr>').append(
                    $('<td>').text(i+1),
                    $('<td>').text(item.anr_no+'/'+item.anr_year),
                    $('<td>').text(item.receipt_no+'/'+item.receipt_year),
                    $('<td>').text(item.diary_number+'/'+item.diary_year),
                    $('<td>').text(item.applicant),
                    $('<td>').text(item.mobile_no),
                    $('<td>').text(item.mediation_date),
                    $('<td>').text(item.title+' '+item.user_name),                    
                    $('<td>').html(action_str2),        

                ).appendTo('.tbl_drill tbody');
                });
    
  
            }
        });
    });



});
    
  $(document).on("click", '.btn-open-modal', function(e) {
    e.preventDefault();
    var anr_id = $(this).data("anr-id");
    $.ajax({
            type: "POST",
            url: "mediation-anr-history",
            data: {anr_id:anr_id},
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            cache: false,
            dataType: "json",
            success: function (data) {
                console.log(data);
               // return false;
             //     $('thead').empty(); $('tbody').empty();
            
             $('.table-display-history thead').empty(); $('.table-display-history tbody').empty();
       
        $('<tr>').append(
                    $('<th>').text("#"),
                    $('<th>').text("Hearing Date"),
                    $('<th>').text("Hearing Time"),
                    $('<th>').text("Date Given By"),
                    $('<th>').text("Hearing Mode"),
                    $('<th>').text("Hearing Remark"),
                    $('<th>').text("Status"),
                    $('<th>').text("Documents"), 
                    $('<th>').text("Last Updated"), 
                 ).appendTo('.table-display-history thead');
      
                
                
            $.each(data, function(i, item) {
                
                const update_at = new Date(item.update_at);
                var update_at_ddmmyyyy = update_at.getDate()+'-'+update_at.getMonth()+'-'+update_at.getFullYear()+' '+update_at.getHours()+':'+update_at.getMinutes()+':'+update_at.getSeconds();
                
                const hearing_date = new Date(item.mediation_date);
                var mediation_date = hearing_date.getDate()+'-'+hearing_date.getMonth()+'-'+hearing_date.getFullYear();
                
                //console.log(item.documents_uploaded.length);
                var action_str2= '';
                if(item.documents_uploaded === null){
                    var action_str2 = '';      
                }
                else{
                    var action_str2 = '<a href="/'+item.documents_uploaded+'" target="_blank">View</a>';
                }
                
                var action_str2 = '<a href="/'+item.documents_uploaded+'" target="_blank">View</a>';
                var status_var =  ''; var date_given_by = '';

            if(item.date_given_by == 'S'){
                date_given_by = 'SCLSC';
            }
            else if(item.date_given_by == 'C'){
                date_given_by = 'Court';
            }
            
            if(item.status == 'S'){
                status_var = 'Settled';
            }
            else if(item.status == 'U'){
                status_var = 'Un-Settled';
            }
            else if(item.status == 'P'){
                status_var = 'Party Not Present';
            }
            else if(item.status == 'H'){
                status_var = 'Not Held';
            }
            else if(item.status == 'C'){
                status_var = 'File Closed';
            }
            else if(item.status == 'T'){
                status_var = 'Non Starter';
            }
            else if(item.status == 'R'){
                status_var = 'Refused';
            }
            else if(item.status == 'I'){
                status_var = 'Interim Report';
            }
            else if(item.status == 'F'){
                status_var = 'Infructuous';
            }
            else if(item.status == 'A'){
                status_var = 'Administrative Order';
            }                        
                
            
                $('<tr>').append(
                    $('<td>').text(i+1),
                    $('<td>').text(mediation_date),
                    $('<td>').text(item.hearing_time),
                    $('<td>').text(date_given_by),
                    $('<td>').text(item.hearing_mode),                    
                    $('<td>').html(item.hearing_remark),
                    $('<td>').text(status_var),                    
                    $('<td>').html(action_str2),
                    $('<td>').text(update_at_ddmmyyyy+' '+item.name),

                ).appendTo('.table-display-history tbody');
             });
    
            }       
    }); 
    
});  

</script>

  

@endpush