@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-graph1 icon-gradient bg-strong-bliss"></i>
                        </div>
                        <div>List Transaksi
                            <div class="page-title-subheading">Halaman List Transaksi</div>
                        </div>
                    </div>
                    {{-- <div class="page-title-actions">
                        <div class="d-inline-block pr-3">
                            <select id="custom-inp-top" type="select" class="custom-select">
                                <option>Select period...</option>
                                <option>Last Week</option>
                                <option>Last Month</option>
                                <option>Last Year</option>
                            </select>
                        </div>
                        <button type="button" data-toggle="tooltip" data-placement="left" class="btn btn-dark" title="Show a Toastr Notification!">
                            <i class="fa fa-battery-three-quarters"></i>
                        </button> 
                    </div> --}}
                </div>
            </div>

            {{-- <div class="row">
                <div class="col-md-1 col-lg-4">
                    <div class="card mb-3 bg-warm-flame widget-chart text-white card-border">
                        <div class="icon-wrapper rounded">
                            <div class="icon-wrapper-bg bg-white opacity-2"></div>
                            <i class="pe-7s-note2 text-white"></i>
                        </div>
                        <div id="total_new_transactions" class="widget-numbers"></div>
                        <div id="new_status_name" class="widget-subheading">New</div>

                    </div>
                </div>
                <div class="col-md-1 col-lg-4">
                    <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-4">
                    <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>
            <div class="row">
                <div class="col-md-1 col-lg-4">
                    <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 class="col-md-1 col-lg-4">
                    <div class="card mb-3 bg-asteroid 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-thumbs-up text-white"></i>
                        </div>
                        <div id="total_confirm_transactions" class="widget-numbers"></div>
                        <div id="confirm_status_name" class="widget-subheading">Confirm</div>

                    </div>
                </div>
                <div class="col-md-1 col-lg-4">
                    <div class="card mb-3 bg-vicious-stance 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-check-square text-white"></i>
                        </div>
                        <div id="total_closed_transactions" class="widget-numbers"></div>
                        <div id="confirm_closed_name" class="widget-subheading">Closed</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-combined"></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>Most Hits</h6>
                        </div>
                        <div class="card-body">
                            <canvas id="chart-area"></canvas>
                        </div>
                        <!-- <div class="p-0 card-body">
                            <div id="chart-radial"></div>
                            <div class="widget-content pt-0 w-100">
                                <div class="widget-content-outer">
                                    <div class="widget-content-wrapper">
                                        <div class="widget-content-left pr-2 fsize-1">
                                            <div class="widget-numbers mt-0 fsize-3 text-warning">32%</div>
                                        </div>
                                        <div class="widget-content-right w-100">
                                            <div class="progress-bar-xs progress">
                                                <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="32" aria-valuemin="0" aria-valuemax="100" style="width: 32%;"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="widget-content-left fsize-1">
                                        <div class="text-muted opacity-6">Spendings Target</div>
                                    </div>
                                </div>
                            </div>
                        </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 List Transaksi</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 class="bg-focus text-white">No</th>
                                <th class="bg-focus text-white">Nama Notaris</th>
                                <th class="bg-focus text-white">SK</th>
                                <th class="bg-mixed-hopes text-white">Pending</th>
                                <th class="bg-tempting-azure">Process</th>
                                <th class="bg-grow-early text-white">Done</th>
                                <th class="bg-asteroid text-white">Confirm</th>
                                <th class="bg-vicious-stance text-white">Closed</th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <!-- </div> -->
            </div>

        </div>

    </div>
</div>
@include('layouts.drawer')
@endsection
@section('scripts')
    @include('scripts.header')
    @include('scripts.sidebar')

<!--Apex Charts-->
<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,
        };
    })
</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();
    })

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