@extends('layouts.default')
@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/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" />
<script src="../assets/js/jquery-3.3.1.min.js"></script>

<link href="/assets/plugins/jquery-ui-dist/jquery-ui.min.css" rel="stylesheet" />


<script src="../assets/plugins/datatables.net/js/jquery.dataTables.min.js" defer></script>
<script src="../assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js" defer></script>
<script src="../assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js" defer></script>
<script src="../assets/plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js" defer></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" defer></script>
<script src="/assets/plugins/sweetalert/dist/sweetalert.min.js"></script>



<!--<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/ckeditor/ckeditor.js"></script>

<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 md-drill cursor-pointer" data-pa="Total">
<div class="widget widget-stat bg-blue text-white">
<div class="widget-stat-number md-total">Loading...</div>
<div class="widget-stat-text">Total</div>
</div>
</div>

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


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

<div class="col-lg-2 col-4 md-drill cursor-pointer" data-pa="Listed">
<div class="widget widget-stat bg-indigo text-white">
<div class="widget-stat-number md-listed">Loading...</div>
<div class="widget-stat-text">Listed</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>   


    



<!-- Trigger the modal with a button -->
<!--<button type="button" class="btn btn-info btn-lg" data-bs-toggle="modal" data-bs-target="#myModal" >Update</button>-->

<div class="modal" id="myModalMd">
  <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">Update</h4>
        <button type="button" class="btn-close btn-sm" data-bs-dismiss="modal"></button>
      </div>

      <!-- Modal body -->
      <div class="modal-body" style="overflow-y: auto;">
      <form id="myForm_update" name="myForm_update" class="form-inline" enctype="multipart/form-data">      
            
          <div class="row party-details"></div>
      </form>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger btn-sm" data-bs-dismiss="modal">Close</button>
        <button type="button" data-set-anr-id="" class="btn btn-info btn-sm btn-save-modal-data" >Save</button>
      </div>

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



<!--<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jodit/3.18.9/jodit.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jodit/3.18.9/jodit.min.js"></script>-->

<div class="modal" id="editorModal">
  <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">Prepare Hearing Notes</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;">

          
          
          <form id="myForm" name="myForm" class="form-inline" enctype="multipart/form-data">

              <div class="row mb-15px m-2">
                    <div class='col-md-4'>                                        
                        <label for="hearing_dates_label" class="form-label col-form-label col-md-4">Hearing Dates*</label>
                        <div class="col-md-8">
                            <select name="hearing_dates" id="hearing_dates" class="form-select form-select-sm" aria-label="hearing_dates_label">
                                <option value="">Choose...</option>                                
                            </select>
                        </div>
                    </div>
                
                    <div class='col-md-4'>                                        
                        <label for="case_status_label" class="form-label col-form-label col-md-4">Status</label>
                        <div class="col-md-8">
                            <select name="case_status" id="case_status" class="form-select form-select-sm" aria-label="case_status_label">
                                <option value="">Choose...</option>
                                <option value="S">Settled</option>                                
                                <option value="U">Un-settled</option>                             
<!--                                <option value="P">Party Not Present</option>                                
                                <option value="H">Not Held</option>                                
                                <option value="C">File Closed</option>-->
                                <option value="T">Non Starter</option>
                                <option value="R">Refused</option>
                                <option value="I">Interim Report</option>
                                <option value="F">Infructuous</option>
                                <option value="A">Administrative Order</option>                                                                                                
                                
                            </select>
                        </div>
                    </div>
                  
                    <div class='col-md-4'>                                                                    
                            <div class="form-group ">
                                    <label for="upload_document" class="form-label col-form-label">Report Upload <small>(Max 20 MB)</small></label>                                     
                                    <div class="custom-file">
                                        <input type="file" class="form-control fomr-control-sm @error('upload_document') is-invalid @enderror" name="upload_document" accept="application/pdf" id="upload_document">                                    
                                        @error('upload_document')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                 </div>
                        <div class="display-pdf-file"></div>
                            
                    </div>
                </div>
              
              
          </form>
              
                            
<!--          <textarea id="editor"></textarea>                        -->
          <div class="row">
              
              <div class="col-6">
              <label class="form-label col-form-label">Public Notes</label>    
              <textarea class="ckeditor" name="public_editor" id="public_editor"></textarea>                        
              </div>
                            
              <div class="col-6">
              <label class="form-label col-form-label">Private Notes</label>                                        
              <textarea class="ckeditor" name="private_editor" id="private_editor"></textarea>
                            </div>
          </div>
          
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        

                       
          
          
          <button type="button" class="btn btn-danger btn-sm" data-bs-dismiss="modal">Close</button>
        <button type="button" data-editor-anr-id="" class="btn btn-info btn-sm btn-save-editor-modal-data" >Save</button>
      </div>

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

@endsection
@push('scripts')
 
<script> 
var e_sign_ip_port = '{{ config("constants.ESIGN_IP_PORT")}}';

    $(document).ready(function(){
     
      CKEDITOR.on('instanceLoaded', function(e) {e.editor.resize(CKEDITOR.instances.public_editor.width, 350);
         e.editor.setData('');      
      });   
      CKEDITOR.on('instanceLoaded', function(e) {e.editor.resize(CKEDITOR.instances.private_editor.width, 350);
         e.editor.setData('');      
      });   
      
//        
//var editor = Jodit.make('#editor', {
//	toolbarButtonSize: 'small',
//        "lineHeight":1,
//        "disablePlugins": "placeholder,about,class-span,media,mobile,powered-by-jodit,symbols,speech-recognize,video",
//        "buttons": "bold,italic,underline,strikethrough,ul,ol,font,fontsize,paragraph,lineHeight,superscript,subscript,image,spellcheck,cut,copy,paste,selectall,copyformat",
//});

//var private_editor = Jodit.make('#private_editor', {
//	toolbarButtonSize: 'small',
//        "lineHeight":1,
//        "disablePlugins": "placeholder,about,class-span,media,mobile,powered-by-jodit,symbols,speech-recognize,video",
//        "buttons": "bold,italic,underline,strikethrough,ul,ol,font,fontsize,paragraph,lineHeight,superscript,subscript,image,spellcheck,cut,copy,paste,selectall,copyformat",
//});

    
    $("#next_dt").datepicker({
    format: "dd-mm-yyyy",
            todayHighlight: true,
            autoclose: true
    });

   var token = $("meta[name='csrf-token']").attr("content");                
        
$.ajax({
            type: "POST",
            url: "dashboard-mediator-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;
}


$(".md-total").html(userData['total']);
$(".md-pending").html(userData['pending']);
$(".md-disposed").html(userData['disposed']);
$(".md-listed").html(userData['listed']);

            }
        });
        
$(document).on("click", ".md-drill", function () {
        var token = $("meta[name='csrf-token']").attr("content");
        var flag = $(this).attr("data-pa");
        console.log(flag);
        $.ajax({
            type: "POST",
            url: "dashboard-mediator-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("Case No."),                    
                    $('<th>').text("Applicant"),
                    $('<th>').text("Mobile"),                    
                    $('<th>').text("Mediation Date"),
                    $('<th>').text("Action"),                    
                 ).appendTo('.tbl_drill thead');
        
        
        $.each(userData, function(i, item) {
            var mediation_date_ddmmyyyy = ''; var hearing_time = ''; var action_str1 = ''; var action_str2 ='';
            if(item.mediation_date === null){
                mediation_date_ddmmyyyy = ''; 
                action_str1 = 'Updation';
                action_str2 = ' Awaited';
            }
            else{
                var action_str1 = '<a data-bs-toggle="modal" data-bs-target="#myModalMd" data-room_no="'+item.room_no+'" data-room_slot="'+item.room_slot+'" data-anr-id="'+item.anr_id+'" data-hearing-time="'+item.hearing_time+'" data-next_dt="'+item.mediation_date.split("-").reverse().join("-")+'" href="#" class="btn btn-sm btn-primary btn-open-modal w-60px me-1">Update</a>';
                var action_str2 = '<a data-bs-toggle="modal" data-bs-target="#editorModal" data-mh-id="'+item.mh_id+'" data-anr-id="'+item.anr_id+'" href="#" class="btn btn-sm btn-primary btn-open-editor-modal w-60px me-1">Editor</a>';

                mediation_date_ddmmyyyy = item.mediation_date.split("-").reverse().join("-")+' ('+item.hearing_time+')';
                
            }
           
            if((item.status == 'S' || item.status == 'U') && item.documents_uploaded.trim() != null){
                console.log(item.status);
            }
            
            var case_no = '';
                        if(item.sc_skey == 32){
                            	case_no = '-';
                        }
                        else{
				case_no = item.sc_skey+' '+item.case_number+'/'+item.case_year;
                        }
            
            $('<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(case_no),                    
                    $('<td>').text(item.applicant),
                    $('<td>').text(item.mobile_no),
                    $('<td>').text(mediation_date_ddmmyyyy),
                    $('<td>').html(action_str1+' '+action_str2),                    
                            

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



});
    
  
  
  
 
$(document).on("click", '.btn-open-modal', function(e) {
    e.preventDefault();
    var next_dt = $(this).data("next_dt");
    var hearing_time = $(this).data("hearing-time");
    var anr_id = $(this).data("anr-id");    
    var room_no = $(this).data("room_no");
    var room_slot = $(this).data("room_slot");
    //$("#next_dt").val(next_dt);
    //$("#hearing_time").val(hearing_time);
    $('.btn-save-modal-data').attr('data-set-anr-id', anr_id);
    
    $.ajax({
            type: "POST",
            url: "mediation-get-party-details",
            data: {next_dt: next_dt, hearing_time:hearing_time, anr_id:anr_id, room_no: room_no, room_slot:room_slot},
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            cache: false,
//            dataType:"json",
            success: function (data) {
                $(".party-details").html(data);                
            }
        });
    
});    

$(document).on("click", '.btn-save-modal-data', function(e) {
    e.preventDefault();
    var next_dt = $("#next_dt").val();
    var hearing_time = $("#hearing_time").val();
    var anr_id = $(this).data("set-anr-id");    

    $.ajax({
            type: "POST",
            url: "mediation-mycase-update",
            //data: {next_dt: next_dt, hearing_time:hearing_time, anr_id:anr_id},
            data: $('#myForm_update').serialize()+ "&anr_id="+anr_id,
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            cache: false,
            success: function (data) {
                console.log(data);
                if(data == 'success'){
                    swal({
        title: "Success!",
        text: "Successfully Updated",
        icon: "success",
        button: "Go Ahead!"
    }).then(function () {
            location.reload();   
    });
                    
                    
                }
                else if(data == 'max'){
                   swal({
                    title: " Oops!",  
                    text: " Max limit of mediation of the day reached, Try Any Other Date!",  
                    icon: "error",  
                    button: "Go Ahead!"
                    }).then(function () {
                        //location.reload();   
                    });
    
                }
                else{
                   swal({
                    title: " Oops!",  
                    text: "Something went wrong!",  
                    icon: "error",  
                    button: "Try Again!"
                    }).then(function () {
                        //location.reload();   
                    }); 
                }
            }
        });
});    


$(document).on("click", '.btn-open-editor-modal', function(e) {
    e.preventDefault();
    var anr_id = $(this).data("anr-id");
    $('.btn-save-editor-modal-data').attr('data-editor-anr-id', anr_id);    
    //$('#hearing_dates').attr('data-editor-anr-id', anr_id);    
    $.ajax({
            type: "POST",
            url: "mediation-hearing-dates",
            data: {anr_id:anr_id},
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            cache: false,
            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;
}
var html = '<option>--Select Date--</option>';
$.each(userData, function(i, item) {
//console.log(i+'  '+item.mediation_date);
        html += '<option value="'+item.mediation_date+'|'+item.anr_details_id+'|'+item.id+'|'+item.documents_uploaded+'">'+item.mediation_date+'</option>';
});
    $('#hearing_dates').html(html);
 
    //            console.log(html);
            }       
    }); 
    
});  


$(document).on("change", '#hearing_dates', function(e) {
    e.preventDefault();
    //var anr_id = $(this).data("data-editor-anr-id");
    var hearing_str = $("#hearing_dates").val();
    //var anr_id = $('.btn-save-editor-modal-data').attr('data-editor-anr-id', anr_id); 
    const hearing_str_array = hearing_str.split('|');
    
        if (hearing_str_array[3] === undefined || hearing_str_array[3] === null)
           $(".display-pdf-file").html('No Document Found');
        else
            $(".display-pdf-file").html('<a href="/'+hearing_str_array[3]+'" target="_blank">View Uploaded File</a>');
    
        $.ajax({
            type: "POST",
            url: "mediation-hearing-remarks-based-on-date",
            data: {anr_id:hearing_str_array[1], hearing_dates:hearing_str_array[0]},
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            cache: false,
            success: function (data) {
            let userData = null;
try {
    userData = JSON.parse(data); 
} catch (e) {
    userData = data;
}
              //  console.log(data);                
//                $('.jodit-wysiwyg').html(userData.hearing_remark);
                CKEDITOR.instances.public_editor.setData( (userData.hearing_remark) );
                CKEDITOR.instances.private_editor.setData( (userData.private_remark) );
                //$("#public_editor").html(userData.hearing_remark);
                //public_editor.setEditorValue(userData.hearing_remark);
                //public_editor.value = userData.hearing_remark;
                //$('.jodit-wysiwyg').html(userData.hearing_remark);
               // console.log('pub'+public_editor.value);
        if(userData.status){
//                    console.log("A "+userData.status);        
                    if(userData.status == 'S'){
                        $('#case_status  option[value="S"]').prop("selected", true);
                    }
                    else if(userData.status == 'U'){
                        $('#case_status  option[value="U"]').prop("selected", true);
                    }
                    else if(userData.status == 'P'){
                        $('#case_status  option[value="P"]').prop("selected", true);
                    }
                    else if(userData.status == 'H'){
                        $('#case_status  option[value="H"]').prop("selected", true);
                    }
                    else if(userData.status == 'C'){
                        $('#case_status  option[value="C"]').prop("selected", true);
                    }
                    else if(userData.status == 'T'){
                        $('#case_status  option[value="T"]').prop("selected", true);
                    }
                    else if(userData.status == 'R'){
                        $('#case_status  option[value="R"]').prop("selected", true);
                    }
                    else if(userData.status == 'I'){
                        $('#case_status  option[value="I"]').prop("selected", true);
                    }
		    else if(userData.status == 'F'){
                        $('#case_status  option[value="F"]').prop("selected", true);
                    }
                    else if(userData.status == 'A'){
                        $('#case_status  option[value="A"]').prop("selected", true);
                    }                    
                }
                    
 
    }       
    }); 
    
});  


$(document).on("click", '.btn-save-editor-modal-data', function(e) {
    e.preventDefault();
    
    //var form = $("#myForm");

    // you can't pass Jquery form it has to be javascript form object
    //var fd = new FormData($("#myForm"));
    //var hearing_str = $("#hearing_dates").val();
    //var anr_id = $('.btn-save-editor-modal-data').attr('data-editor-anr-id', anr_id); 
    //const hearing_str_array = hearing_str.split('|');
    //var editor = $(".jodit-wysiwyg").html();
     var public_editor= CKEDITOR.instances.public_editor.getData();
     var private_editor= CKEDITOR.instances.private_editor.getData();
     public_editor= encodeURIComponent(public_editor); 
     private_editor= encodeURIComponent(private_editor); 
    //var case_status = $("#case_status").val();

        var formData = new FormData(document.getElementById("myForm"));
        formData.append('public_editor', public_editor);
        formData.append('private_editor', private_editor);

        console.log(formData);

        
        //console.log(editor);
    
    $.ajax({
            type: "POST",
            url: "mediation-update-hearing_notes",
            //data: {case_status:case_status,editor:editor, anr_id:hearing_str_array[1], hearing_dates:hearing_str_array[0]},
            data:formData,
            processData: false,
            contentType: false,
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            cache: false,
            dataType: "json",
            success: function (data) {
                console.log(data);
                
                 if(data.status == 'success'){
                    swal({
                        title: "Success!",
                        text: "Successfully Updated",
                        icon: "success",
                        button: "Go Ahead!"
                    }).then(function () {
                            location.reload();   
                    });                                        
                }                
                else if(data.status == 'error'){
                   swal({
                    title: " Oops!",  
                    text: "Something went wrong!",  
                    icon: "error",  
                    button: "Try Again!"
                    }).then(function () {
                        //location.reload();   
                    }); 
                }
//                else if(data.status == 'for_esign'){
//                       swal({
//                            title: "Success!",
//                            text: "Data Stored Successfully",
//                            icon: "success",
//                            button: "Click To Sign"
//                        }).then(function () {
//                              //window.location.href = e_sign_ip_port+"esignature/request_receiver.php?a="+data.msg;
//                         });
//
//                }
                
            }       
    });
});    

$(document).on("click", '.itemRow', function() {
//    e.preventDefault();
                if($(this).is(':checked')){
                    $(this).val('1'); 
                    $(this).attr('checked',false);
                }
                else{
                    $(this).val('0');                    
                    $(this).attr('checked',true);
                }
});
 
</script>

  

@endpush