@extends('layouts.admin')

@section('title')
    Ananas | Admin Dashboard
@endsection

@section('dashboard')
    active {{session('sidebar_color')}}
@endsection

@section('breadcrumb')
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
            <li class="breadcrumb-item text-sm"><a class="opacity-5 text-dark" href="">Pages</a></li>
            <li class="breadcrumb-item text-sm text-dark active" aria-current="page">Dashboard</li>
        </ol>
        <h6 class="font-weight-bolder mb-0">Dashboard</h6>
    </nav>
@endsection

@section('style')
    <style>
        .loader {
            border: 16px solid #f3f3f3;
            border-radius: 50%;
            border-top: 16px solid #3498db;
            width: 120px;
            height: 120px;
            -webkit-animation: spin 2s linear infinite; /* Safari */
            animation: spin 2s linear infinite;
        }

        /* Safari */
        @-webkit-keyframes spin {
            0% { -webkit-transform: rotate(0deg); }
            100% { -webkit-transform: rotate(360deg); }
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
@endsection

@section('content')
    <div class="row">

        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
            <div class="card">
                <div class="card-header p-3 pt-2">
                    <div class="icon icon-lg icon-shape bg-gradient-primary shadow-primary text-center border-radius-xl mt-n4 position-absolute">
                        <i class="material-icons opacity-10">person</i>
                    </div>
                    <div class="text-end pt-1">
                        <p class="text-sm mb-0 text-capitalize">All Users</p>
                        <h4 class="mb-0">{{count($users)}}</h4>
                    </div>
                </div>
                <hr class="dark horizontal my-0">
                <div class="card-footer p-3">
                    <p class="mb-0"><span class="text-success text-sm font-weight-bolder">+3% </span>than last month</p>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
            <div class="card">
                <div class="card-header p-3 pt-2">
                    <div class="icon icon-lg icon-shape bg-gradient-dark shadow-dark text-center border-radius-xl mt-n4 position-absolute">
                        <i class="material-icons opacity-10">weekend</i>
                    </div>
                    <div class="text-end pt-1">
                        <p class="text-sm mb-0 text-capitalize">Today's Money</p>
                        <h4 class="mb-0">$53k</h4>
                    </div>
                </div>
                <hr class="dark horizontal my-0">
                <div class="card-footer p-3">
                    <p class="mb-0"><span class="text-success text-sm font-weight-bolder">+55% </span>than last week</p>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
            <div class="card">
                <div class="card-header p-3 pt-2">
                    <div class="icon icon-lg icon-shape bg-gradient-success shadow-success text-center border-radius-xl mt-n4 position-absolute">
                        <i class="material-icons opacity-10">person</i>
                    </div>
                    <div class="text-end pt-1">
                        <p class="text-sm mb-0 text-capitalize">New Clients</p>
                        <h4 class="mb-0">3,462</h4>
                    </div>
                </div>
                <hr class="dark horizontal my-0">
                <div class="card-footer p-3">
                    <p class="mb-0"><span class="text-danger text-sm font-weight-bolder">-2%</span> than yesterday</p>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-sm-6">
            <div class="card">
                <div class="card-header p-3 pt-2">
                    <div class="icon icon-lg icon-shape bg-gradient-info shadow-info text-center border-radius-xl mt-n4 position-absolute">
                        <i class="material-icons opacity-10">weekend</i>
                    </div>
                    <div class="text-end pt-1">
                        <p class="text-sm mb-0 text-capitalize">Sales</p>
                        <h4 class="mb-0">$103,430</h4>
                    </div>
                </div>
                <hr class="dark horizontal my-0">
                <div class="card-footer p-3">
                    <p class="mb-0"><span class="text-success text-sm font-weight-bolder">+5% </span>than yesterday</p>
                </div>
            </div>
        </div>
    </div>

    <div id="loadingX" class="row mt-8">
        <div class="col-lg-11 m-auto" style="display: flex;justify-content: center;height: 60vh;">
            <div class="loader"></div>
        </div>
    </div>

    <div id="chartX" class="row " style="display: none;margin-top: 50px;">
        <div class="col-lg-11 m-auto ">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div>
                        <h3 class="font-bold no-margins">
                            Periodic chart of User Registration (60 Days)
                        </h3>
                    </div>

                    <div>
                        <canvas id="lineChartJob"  height="70"></canvas>
                    </div>

                    <div class="m-t-md">
                        <small class="pull-left">
                            <i class="fa fa-clock-o"> </i>
                            {{\Carbon\Carbon::now()->toDayDateTimeString()}}
                        </small>
                    </div>

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

@endsection

@section('footer')
    <script type="text/javascript" src="{!! asset('js/plugins/sparkline/jquery.sparkline.min.js') !!}"></script>
    <!-- ChartJS-->
    <script type="text/javascript" src="{!! asset('js/plugins/chartJs/Chart.min.js') !!}"></script>
    <script>
        $(document).ready(function() {

            let width = $(window).width();
            let height = $(window).height();

            if ((width > 425  ) && (height>548)) {
                $("#lineChart").attr("height","70")
                $("#lineChartJob").attr("height","70")
            }
            else {
                $("#lineChart").attr("height","200")
                $("#lineChartJob").attr("height","200")
            }

            let aa = ["1", "2","3", "4","5", "6"]
            let bb = ["1", "1","1", "1","5", "6"]

            $.ajax({
                url: '{{route('admin.getData')}}',
                type: 'get',
                data: '',
                contentType: false,
                processData: false,
                success: function(response){
                    if(response.status ==="success"){
                        console.log(response);
                        bb=response.data;
                        aa=response.data_membership;
                        let data3 = aa.map(function (x) {
                            return parseInt(x, 10);
                        });

                        let data4 = bb.map(function (x) {
                            return parseInt(x, 10);
                        });

                        let lineData2 = {
                            labels: response.data_key,
                            datasets: [
                                {
                                    label: "Example 2",
                                    fillColor: "rgba(220,220,220,0.5)",
                                    strokeColor: "rgba(220,220,220,1)",
                                    pointColor: "rgba(220,220,220,1)",
                                    pointStrokeColor: "#fff",
                                    pointHighlightFill: "#fff",
                                    pointHighlightStroke: "rgba(220,220,220,1)",
                                    data:data3
                                },
                                {
                                    label: "Example 2",
                                    fillColor: "rgba(26,179,148,0.5)",
                                    strokeColor: "rgba(26,179,148,0.7)",
                                    pointColor: "rgba(26,179,148,1)",
                                    pointStrokeColor: "#fff",
                                    pointHighlightFill: "#fff",
                                    pointHighlightStroke: "rgba(26,179,148,1)",
                                    data:data4
                                }
                            ]
                        };

                        let lineOptions2 = {
                            scaleShowGridLines: true,
                            scaleGridLineColor: "rgba(0,0,0,.05)",
                            scaleGridLineWidth: 1,
                            bezierCurve: true,
                            bezierCurveTension: 0.4,
                            pointDot: true,
                            pointDotRadius: 4,
                            pointDotStrokeWidth: 1,
                            pointHitDetectionRadius: 20,
                            datasetStroke: true,
                            datasetStrokeWidth: 2,
                            datasetFill: true,
                            responsive: true,
                        };

                        $("#loadingX").css('display','none');
                        $("#chartX").css('display','block');

                        let chart2 = document.getElementById("lineChartJob").getContext("2d");
                        let myNewChart2 = new Chart(chart2).Line(lineData2, lineOptions2);

                    }
                    else{
                        console.log('erorr');
                    }
                },
            });






        });
    </script>
@endsection