@extends('layouts.default')
@section('content')
@include('layouts.header')
<div class="app-main">
    @include('layouts.sidebar')
    <div class="app-main__outer">
        <div class="app-main__inner">
            <div class="app-page-title app-page-title-simple">
                <div class="page-title-wrapper">
                    <div class="page-title-heading">
                        <div class="page-title-icon">
                            <i class="pe-7s-monitor icon-gradient bg-tempting-azure"></i>
                        </div>
                        <div>{{ $title ?? '' }}
                            <div class="page-title-subheading">{{ $description ?? '' }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div id="card_status_new" class="col-md-1 col-lg-3">

                </div>
                <div class="col-md-1 col-lg-3" id="card_status_pending">
                    <div class="card mb-3 bg-mixed-hopes widget-chart text-white card-border">
                        <div class="icon-wrapper rounded-circle">
                            <div class="icon-wrapper-bg bg-white opacity-2"></div>
                            <i class="fa fa-bookmark text-white"></i>
                        </div>
                        <div id="total_pending_transactions" class="widget-numbers"></div>
                        <div id="pending_status_name" class="widget-subheading">Pending</div>

                    </div>
                </div>
                <div class="col-md-1 col-lg-3" id="card_status_process">
                    <div class="card mb-3 bg-tempting-azure widget-chart text-white card-border">
                        <div class="icon-wrapper rounded-circle">
                            <div class="icon-wrapper-bg bg-white opacity-2"></div>
                            <i class="fa fa-eye text-white"></i>
                        </div>
                        <div id="total_process_transactions" class="widget-numbers"></div>
                        <div id="process_status_name" class="widget-subheading">Process</div>

                    </div>
                </div>
                <div class="col-md-1 col-lg-3" id="card_status_done">
                    <div class="card mb-3 bg-grow-early widget-chart text-white card-border">
                        <div class="icon-wrapper rounded-circle">
                            <div class="icon-wrapper-bg bg-white opacity-2"></div>
                            <i class="fa fa-certificate text-white"></i>
                        </div>
                        <div id="total_done_transactions" class="widget-numbers"></div>
                        <div id="done_status_name" class="widget-subheading">Done</div>

                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12 col-md-7 col-lg-8">
                    <div class="mb-3 card">
                        <div class="card-header-tab card-header">
                            <div class="card-header-title font-size-lg text-capitalize font-weight-normal">Progression Chart</div>
                            <!-- <div class="btn-actions-pane-right text-capitalize">
                                <button class="btn btn-warning">Actions</button>
                            </div> -->
                            <button class="btn btn-primary ml-auto" id="reportrange">
                                <i class="fa fa-calendar pr-1"></i>
                                <span></span>
                                <i class="fa pl-1 fa-caret-down"></i>
                            </button>
                        </div>
                        <div class="pt-0 card-body">
                            <div id="show-apex"></div>
                            {{-- <div id="chart-apex-column"></div> --}}
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-md-5 col-lg-4">
                    <div class="mb-3 card">
                        <div class="card-header-tab card-header">
                            <h6>Latest Number</h6>
                        </div>
                        <div class="card-body card-shadow-primary profile-responsive ">
                            <ul class="list-group list-group-flush">
                                <div id="show_box"></div>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main-card mb-3 card">
                <div class="card-header">
                    <div class="card-header-title font-size-lg text-capitalize font-weight-normal">Detail Reports</div>
                    <!-- <div class="btn-actions-pane-right">
                        <button type="button" class="btn-icon btn-wide btn-outline-2x btn btn-outline-focus btn-sm d-flex">
                            Actions Menu
                            <span class="pl-2 align-middle opacity-7">
                                <i class="fa fa-angle-right"></i>
                            </span>
                        </button>
                    </div> -->
                </div>
                <!-- <div class="main-card mb-3 card"> -->
                <div class="card-body">
                    <table style="width: 100%;" id="tbl_datatable" class="table table-hover table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>In.Number</th>
                                <th>Minuta</th>
                                <th>Debtor</th>
                                <th>Status</th>
                                <th>Created</th>
                                <th><i class="fa fa-cog fa-spin"></i></th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <th>No</th>
                                <th>In.Number</th>
                                <th>Minuta</th>
                                <th>Debtor</th>
                                <th>Status</th>
                                <th>Created</th>
                                <th><i class="fa fa-cog fa-spin"></i></th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
                <!-- </div> -->
            </div>
        </div>
    </div>
</div>
@include('layouts.drawer')
@include('pages.transaction.modal_edit')
@include('pages.minuta.modal_add')
@endsection
@section('scripts')
@include('pages.minuta.modal_detail_minuta')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js"></script>
<script src="https://cdn.tiny.cloud/1/b10i8mb3aniavv7fyjcfcyas158xkao1kgcb65lxmu3cxxkr/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script type="text/javascript">
    tinymce.init({
        selector: 'textarea.tinymce-editor',
        height: 300,
        menubar: false,
        plugins: [
            'advlist autolink lists link image charmap print preview anchor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table paste code help wordcount', 'image'
        ],
        toolbar: 'undo redo | formatselect | ' +
            'bold italic backcolor | alignleft aligncenter ' +
            'alignright alignjustify | bullist numlist outdent indent | ' +
            'removeformat | help',
        content_css: '//www.tiny.cloud/css/codepen.min.css'
    });
</script>
<!--Apex Charts-->
{{-- <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> --}}
<script src="{{url('bestuipro/assets/js/vendors/charts/apexcharts.min.js')}}"></script>

<!-- <script src="{{url('bestuipro/assets/js/scripts-init/charts/apex-charts.js')}}"></script> -->
<!-- <script src="{{url('bestuipro/assets/js/scripts-init/charts/apex-series.js')}}"></script> -->

<!--Sparklines-->
<!-- <script src="{{url('bestuipro/assets/js/vendors/charts/charts-sparklines.js')}}"></script>
<script src="{{url('bestuipro/assets/js/scripts-init/charts/charts-sparklines.js')}}"></script> -->

<!--Chart.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<!-- <script src="{{url('bestuipro/assets/js/scripts-init/charts/chartsjs-utils.js')}}"></script> -->
<!-- <script src="{{url('bestuipro/assets/js/scripts-init/charts/chartjs.js')}}"></script> -->
<script>
    $(document).ready(function() {
        $.blockUI.defaults = {
            timeout: 2000,
            fadeIn: 200,
            fadeOut: 400,
            baseZ: 100000000,
        };
        show_topCard_data();
        show_graph1();
        // show_graph_column();
        show_pie();
        showDataTable();
        show_box_notary();
    })

    function show_topCard_data() {
        $.blockUI({
            message: $('.loading-block')
        });
        const token = '{{$token}}';
        $.ajax({
                url: '