@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" />-->
<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>
<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-white">
            <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">Disposed</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>   



@endsection
@push('scripts')

<script>
var esign_ip_port = '{{config("constants.SCLSC_OFFLINE_IP_PORT");}}';
$(document).ready(function () {
    
        $("#dispose_date").datepicker({
    format: "dd-mm-yyyy",
            todayHighlight: true,
            autoclose: true
    });

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

        }
    });

});

$(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: "sclsc-mediation-invoice-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("Invoice No."),
                    $('<th>').text("Invoice Date"),
                    $('<th>').text("Advocate Name"),
                    $('<th>').text("Note"),
                    $('<th>').text("Invoice Amount"),
                    $('<th>').text("Status"),
                    $('<th>').text("Action"),
                    ).appendTo('.tbl_drill thead');
            $.each(userData, function (i, item) {
                if(item.pdf_address)
                {
                    var pdf_link = "<span class='m-5'><a title='View PDF' data-bs-toggle='modal' data-bs-target='#show_pdf_modal' class='pdflink' data-file='"+esign_ip_port+"/"+item.pdf_address.trim()+"' href='#' ><i class='text-light fa fa-file-pdf' style='text-shadow:2px 2px 4px #000000;'></i><a/></span>";
                } 
                else{
                    var pdf_link = "";
                }
                if(item.status == 'P'){
                    var display_view = '<span class="m-5"><a class="open-invoice_details" data-bs-toggle="modal" data-bs-target="#myModal" data-status="'+item.status+'" data-user-name="'+item.title+' '+item.user_name+'" data-id="'+item.id+'" data-order_date="'+item.order_date+'" data-note="'+item.note+'" data-order_amount="'+item.order_amount+'" href="#" title="View & Change Status"> <i class="text-light fa fa-eye" style="text-shadow:2px 2px 4px #000000;"></i><a/></span>';
                }
                else{
                    var display_view = '';
                }
                    $('<tr>').append(
                        $('<td>').text(i + 1),
                        $('<td>').text(item.id),
                        $('<td>').text(item.order_date),
                        $('<td>').text(item.title+' '+item.user_name),
                        $('<td>').text(item.note),
                        $('<td>').text(item.order_amount),
                        
                        $('<td>').html('<span class="badge badge-secondary">'+item.status_name+'</span>'),
                        $('<td>').html(display_view+pdf_link)                        
                
                        ).appendTo('.tbl_drill tbody');
                        //<span class="m-5"><a class="open-print_details" data-bs-toggle="modal" data-bs-target="#my_modal_print" data-status="'+item.status+'" data-user-name="'+item.title+' '+item.user_name+'" data-id="'+item.id+'" data-order_date="'+item.order_date+'" data-note="'+item.note+'" data-order_amount="'+item.order_amount+'" href="#" title="Print"> <i class="text-primary fa fa-print"></i><a/></span>
            });

        }
    });

});

$(document).on("click", ".open-invoice_details", function () {
    var token = $("meta[name='csrf-token']").attr("content");
           var id = $(this).data('id');
           var status = $(this).data('status');
           var order_date = $(this).data('order_date');
           var user_name = $(this).data('user-name');
           var note = $(this).data('note');
           var order_amount = $(this).data('order_amount');
           
           if(status == 'P'){
               $(".dispose_div").removeClass('d-none');
           }
           else{
               $(".dispose_div").addClass('d-none');
           }
          
           
           console.log(id);
           $.ajax({
        type: "POST",
        url: "sclsc-mediation-invoice-dashboard-details",
        data: {"_token": token, "id":id},
        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;
            }
           $("#modal_heading").html("<h4>Invoice Details - Order No. "+id+" Order Date : "+order_date+"</h4>");
           
           var table_content = '<input type="hidden" name="order_id" id="order_id" value="'+id+'">';
          /* table_content += '<div>Advocate Name : '+user_name+'</div>';
           table_content += '<div>Note : '+note+'</div>';
           table_content += '<table class="table">';
           table_content += '<thead><tr><th>Item Name</th><th>Price</th><th>Total</th></tr></thead>';
            $.each(userData, function (i, item) {
           var itemname = item.item_name;
                if(item.document_name){
                     itemname = itemname+' : '+item.total_pages+' pages - '+item.document_name;
                }

                table_content += '<tr><td>'+itemname+'</td><td>'+item.order_item_price+'</td><td>'+item.order_item_amount+'</td></tr>';
            });
            table_content += '<tr><td colspan="2">Invoice Amount</td><td>'+order_amount+'</td></tr>';
            table_content += '</table>';*/
           $("#div_content_show").html(table_content);

        }
    });


});

//$(document).on("click", ".open-print_details", function () {
//    var token = $("meta[name='csrf-token']").attr("content");
//           var id = $(this).data('id');
//           var status = $(this).data('status');
//           var order_date = $(this).data('order_date');
//           var user_name = $(this).data('user-name');
//           var note = $(this).data('note');
//           var order_amount = $(this).data('order_amount');
//           
//           if(status == 'P'){
//               $(".dispose_div").removeClass('d-none');
//           }
//           else{
//               $(".dispose_div").addClass('d-none');
//           }
//          
//           $.ajax({
//        type: "POST",
//        url: "sclsc-panel-advocate-invoice-dashboard-open-print-details",
//        data: {"_token": token, "id":id},
//        cache: false,
//        headers: {
//            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
//        },
//        success: function (data) {            
//           save_pdf(data);            
//           $("#div_content_print_show").html(data);
//        }
//    });
//
//
//});

//function save_pdf($html){
//        var token = $("meta[name='csrf-token']").attr("content");
//    $.ajax({
//        type: "POST",
//        url: "sclsc-panel-advocate-invoice-dashboard-save-pdf",
//        data: {"_token": token, "html":$html},
//        cache: false,
//        headers: {
//            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
//        },
//        success: function (data) {
//       
//        }
//    });
//}

$(document).on("click", ".btn_sclsc_save", function () {
    var token = $("meta[name='csrf-token']").attr("content");
           var id = $("#order_id").val();
           var order_date = $("#dispose_date").val();
           var bill_status = $("input[name='status_radio']:checked").val();
           
           
        $.ajax({
        type: "POST",
        url: "sclsc-mediation-invoice-dashboard-dispose",
        data: {"_token": token, "id":id, "bill_status":bill_status, "order_date":order_date},
        cache: false,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
//        dataType: 'json',
        success: function (data) {
            //alert(data);
            if(data == 1){
                    swal({
                        title: "Success!",
                        text: "Disposed Successfully",
                        icon: "success",
                        button: "Go Ahead!"
                    }).then(function () {
                             location.reload();   
                    });
                
            }
            else{
                    swal({
                        title: "Error!",
                        text: "Try Later",
                        icon: "error",
                        button: "Go Ahead!"
                    }).then(function () {

                    });
                
            }
        }
    });


});
$(document).on("click", '.pdflink', function () {
var pdf=$(this).data('file');
var title=$(this).attr('title');
if(pdf.length > 0) {
           $("#modal_heading").html(title);
           $("#div_show_pdf_view").html('<embed id="modal_src" src="'+pdf+'" frameborder="0" width="100%" height="100%">');
          //  $(this).attr("data-bs-target","#myModal");
}
        });
</script>



@endpush
<div class="modal" id="myModal">
    <div class="modal-dialog modal-xl" style="width:95%;max-width:100%;">
        <div class="modal-content" >
            <!-- Modal Header -->
            <div class="modal-header">
                <small class="modal-title" id="modal_heading"></small>
                <button type="button" class="btn-close btn-sm" data-bs-dismiss="modal"></button>
            </div>
            <form class="form-inline" >
                @csrf
            <!-- Modal body -->
            <div class="modal-body" style="overflow-y: auto;">
<!--                            <div class="modal-body" style="height:90vh;overflow-y: auto;">-->
                <div id="div_content_show"></div>
                

              <div class="dispose_div row mb-15px m-2">
                  
                  
                  <form class="form-inline">
                  
                  <div class='col-md-4'>                                        
                  
                      <div class="checkbox">
                        <label class="radio-inline">
                            <input type="radio" name="status_radio" value="5" checked><b>Accept</b>
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="status_radio" value="6"><b>Reject</b>
                        </label>
                      </div>
                      
                      
                     <div class="form-group">
                        <label for="dispose_date_label">Dispose Date*:</label>
                        <div class="input-group">
                                <input type="text" id="dispose_date" aria-label="dispose_date_label" name="dispose_date" class="form-control form-control-sm @error('dispose_date') is-invalid @enderror">
                                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                <button type="button" class="btn_sclsc_save btn btn-danger btn-sm" >Dispose</button>
                            </div>
                      </div>

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


<div class="modal" id="my_modal_print">
    <div class="modal-dialog modal-xl" style="width:95%;max-width:100%;">
        <div class="modal-content" >
            <!-- Modal Header -->
            <div class="modal-header">
                <small class="modal-title" id="modal_heading"></small>
                <button type="button" class="btn-close btn-sm" data-bs-dismiss="modal"></button>
            </div>
            <form class="form-inline" >
                @csrf
            <!-- Modal body -->
            <div class="modal-body" style="overflow-y: auto;">
<!--                            <div class="modal-body" style="height:90vh;overflow-y: auto;">-->
                <div id="div_content_print_show"></div>
              
          
            </div>
            
          </form>
        </div>
    </div>
</div>

<div class="modal" id="show_pdf_modal">
  <div class="modal-dialog modal-xl" style="width:95%;max-width:100%;">
    <div class="modal-content" style="height:90vh;">
      <!-- Modal Header -->
      <div class="modal-header">
      <small class="modal-title" id="modal_heading"></small>
        <button type="button" class="btn-close btn-sm" data-bs-dismiss="modal"></button>
      </div>
      <!-- Modal body -->
      <div class="modal-body"  id="div_show_pdf_view" style="height:90vh;overflow-y: auto;">
      </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>