@extends('layouts.external.app')
@section('content')
<div class="content-wrapper p-5">
    <div class="row">
        <div class="col-md-12 grid-margin">
            <div class="row">
                <div class="col-12 col-xl-8 mb-4 mb-xl-0">
                    <h3 class="fw-bold">Dashboard {{$user->id_encrypt}}</h3>
                    <h6 class="fw-normal mb-0">Penjaminan</h6>
                </div>
                <div class="col-12 col-xl-4">
                    <div class="justify-content-end d-flex">
                        <div class="dropdown flex-md-grow-1 flex-xl-grow-0">
                            <button class="btn btn-sm btn-light bg-white dropdown-toggle" type="button" id="dropdownMenuDate2"
                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                <i class="mdi mdi-calendar"></i> Today (10 Jan 2021)
                            </button>
                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuDate2">
                                <a class="dropdown-item" href="#">January - March</a>
                                <a class="dropdown-item" href="#">March - June</a>
                                <a class="dropdown-item" href="#">June - August</a>
                                <a class="dropdown-item" href="#">August - November</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 grid-margin transparent">
            <div class="row">
                <div class="col-md-3 mb-4 stretch-card transparent">
                    <div class="card card-tale">
                        <p class="mb-2">&nbsp;</p>
                        <div class="card-body" style="
                            display: flex;
                            align-items: center;
                            justify-content: space-evenly;
                        ">
                            <h1 class="mb-0"><i class="fa fa-users text-light"></i></h1>
                            <div>
                                <p class="fs-30 mb-2 text-light">559</p>
                                <p class="card-title mb-0 text-light">Inforce</p>
                            </div>
                        </div>
                        <p class="mb-2">&nbsp;</p>
                    </div>
                </div>
                <div class="col-md-3 mb-4 stretch-card transparent">
                    <div class="card card-dark-blue">
                        <p class="mb-2">&nbsp;</p>
                        <div class="card-body" style="
                            display: flex;
                            align-items: center;
                            justify-content: space-evenly;
                        ">
                            <h1 class="mb-0"><i class="fa fa-user text-light"></i></h1>
                            <div>
                                <p class="fs-30 mb-2 text-light">56</p>
                                <p class="card-title mb-0 text-light">Lapse</p>
                            </div>
                        </div>
                        <p class="mb-2">&nbsp;</p>
                    </div>
                </div>
                <div class="col-md-3 mb-4 stretch-card transparent">
                    <div class="card card-light-blue">
                        <p class="mb-2">&nbsp;</p>
                        <div class="card-body" style="
                            display: flex;
                            align-items: center;
                            justify-content: space-evenly;
                        ">
                            <h1 class="mb-0"><i class="fa fa-user text-light"></i></h1>
                            <div>
                                <p class="fs-30 mb-2 text-light">266</p>
                                <p class="card-title mb-0 text-light">Maturity</p>
                            </div>
                        </div>
                        <p class="mb-2">&nbsp;</p>
                    </div>
                </div>
                <div class="col-md-3 mb-4 stretch-card transparent">
                    <div class="card card-light-danger">
                        <p class="mb-2">&nbsp;</p>
                        <div class="card-body" style="
                            display: flex;
                            align-items: center;
                            justify-content: space-evenly;
                        ">
                            <h1 class="mb-0"><i class="fa fa-database text-light"></i></h1>
                            <div>
                                <p class="fs-30 mb-2 text-light">881</p>
                                <p class="card-title mb-0 text-light">Total</p>
                            </div>
                        </div>
                        <p class="mb-2">&nbsp;</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card position-relative">
                <div class="card-body">
                    <div id="detailedReports" class="carousel slide detailed-report-carousel position-static pt-2" data-bs-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <div class="row">
                                    <div class="col-md-8 d-flex flex-column justify-content-start">
                                        <div class="ml-xl-4 mt-3">
                                            <p class="card-title">Total Data IJP</p>
                                            <canvas id="barChart"></canvas>
                                        </div>
                                    </div>
                                    <div class="col-md-4" style="display: flex;flex-direction: column;flex-wrap: nowrap;align-content: flex-start;justify-content: center;padding: 2em">
                                        <div class="card">
                                            <div class="card-body">
                                                <p class="card-title">Klaim</p>

                                                <!-- Stop Loss -->
                                                <div class="mb-3">
                                                    <div class="text-muted mb-1">Stop Loss</div>
                                                    <div style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
                                                        <div style="flex: 1; max-width: 250px; margin-right: 10px;">
                                                            <div class="progress progress-md">
                                                                <div class="progress-bar bg-primary" role="progressbar"
                                                                    style="width: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </div>
                                                        <h5 class="font-weight-bold mb-0 text-end" style="width: 60px;">80.00%</h5>
                                                    </div>
                                                </div>

                                                <!-- Ratio Claim -->
                                                <div class="mb-3">
                                                    <div class="text-muted mb-1">Ratio Claim saat ini</div>
                                                    <div style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
                                                        <div style="flex: 1; max-width: 250px; margin-right: 10px;">
                                                            <div class="progress progress-md">
                                                                <div class="progress-bar bg-warning" role="progressbar"
                                                                    style="width: 14%;" aria-valuenow="14" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </div>
                                                        <h5 class="font-weight-bold mb-0 text-end" style="width: 60px;">14.39%</h5>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card position-relative">
                <div class="card-body">
                    <div class="ml-xl-4 mt-3">
                        <p class="card-title">Timeline Data Terjamin</p>
                        <canvas id="wesbarChart"></canvas>
                    </div>

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



</div>

<!-- partial:partials/_footer.html -->
@include('partials.external.footer')
<!-- partial -->
</div>
<!-- main-panel ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<!-- plugins:js -->
<script src="{{ url('/') }}/skydash/src/assets/vendors/js/vendor.bundle.base.js"></script>
<!-- endinject -->
<!-- Plugin js for this page -->
<script src="{{ url('/') }}/skydash/src/assets/vendors/chart.js/chart.umd.js"></script>
<script src="assets/vendors/datatables.net/jquery.dataTables.js"></script>
<!-- <script src="assets/vendors/datatables.net-bs4/dataTables.bootstrap4.js"></script> -->
<script src="{{ url('/') }}/skydash/src/assets/vendors/datatables.net-bs5/dataTables.bootstrap5.js"></script>
<script src="{{ url('/') }}/skydash/src/assets/js/dataTables.select.min.js"></script>
<!-- End plugin js for this page -->
<!-- inject:js -->
<script src="{{ url('/') }}/skydash/src/assets/js/off-canvas.js"></script>
<script src="{{ url('/') }}/skydash/src/assets/js/template.js"></script>
<script src="{{ url('/') }}/skydash/src/assets/js/settings.js"></script>
<script src="assets/js/todolist.js"></script>
<!-- endinject -->
<!-- Custom js for this page-->
<script src="{{ url('/') }}/skydash/src/assets/js/jquery.cookie.js" type="text/javascript"></script>
<script src="{{ url('/') }}/skydash/src/assets/js/dashboard.js"></script>
<script>
    $(function() {
        /* ChartJS
         * -------
         * Data and config for chartjs
         */
        'use strict';
        var data = {
            labels: ["Inforce", "Lapse", "Maturity"],
            datasets: [{
                label: '# of Votes',
                data: [1634325720, 170293499, 252980500],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1,
                fill: false
            }]
        };


        var options = {
            scales: {
                y: {
                    ticks: {
                        beginAtZero: true
                    }
                }
            },
            legend: {
                display: false
            },
            elements: {
                line: {
                    tension: 0.5
                },
                point: {
                    radius: 0
                }
            }

        };


        // Get context with jQuery - using jQuery's .get() method.
        if ($("#barChart").length) {
            var barChartCanvas = $("#barChart").get(0).getContext("2d");
            // This will get the first returned node in the jQuery collection.
            var barChart = new Chart(barChartCanvas, {
                type: 'bar',
                data: data,
                options: options
            });
        }
    });
</script>
<!-- <script>
    $(function() {
        /* ChartJS
         * -------
         * Data and config for chartjs
         */
        'use strict';
        var data = {
            labels: ["Inforce", "Lapse", "Maturity"],
            datasets: [{
                label: '# of Votes',
                data: [1634325720, 170293499, 252980500],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1,
                fill: false
            }]
        };


        var options = {
            scales: {
                y: {
                    ticks: {
                        beginAtZero: true
                    }
                }
            },
            legend: {
                display: false
            },
            elements: {
                line: {
                    tension: 0.5
                },
                point: {
                    radius: 0
                }
            }

        };


        // Get context with jQuery - using jQuery's .get() method.
        if ($("#wesbarChart").length) {
            var barChartCanvas = $("#wesbarChart").get(0).getContext("2d");
            // This will get the first returned node in the jQuery collection.
            var barChart = new Chart(barChartCanvas, {
                type: 'bar',
                data: data,
                options: options
            });
        }
    });
</script> -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns"></script>



<!-- End custom js for this page-->
</body>

</html>
@endsection