@extends('layouts.main')

@section('head')

<meta charset="utf-8">
<title>Admin & Dashboard</title>
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta content="Store Dashboard" name="description">
<meta content="" name="author">
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- App favicon -->

@endsection

@section('contents')

<div class="container-fluid">
    <!-- Page-Title -->
    <x-bread-crumbs>
        <div class="float-right">
            <ol class="breadcrumb">
                {{-- <li class="breadcrumb-item"><a href="javascript:void(0);">Crovex</a></li> --}}
                {{-- <li class="breadcrumb-item"><a href="javascript:void(0);">Dashboard</a></li> --}}
                <li class="breadcrumb-item active">Dashboard</li>
            </ol>
        </div>
        <h4 class="page-title">Net Agreement Dashboard</h4>
    </x-bread-crumbs>
    <!-- end page title end breadcrumb -->
    
    <div class="row justify-content-center">
        <div class="col-md-6 col-lg-4">
            <div class="card report-card">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="text-dark font-weight-semibold font-14">Total Consumers</p>
                            <h3 class="my-3">{{ $consumersCount->total_consumers }}</h3>
                            <p class="mb-0 text-truncate">
                                Imported as of Now
                            </p>
                        </div>
                        <div class="align-self-center">
                            <i class="dripicons-user-group report-main-icon bg-soft-purple text-purple"></i>
                        </div>
                    </div>
                </div><!--end card-body-->
            </div><!--end card-->
        </div><!--end col-->
        <div class="col-md-6 col-lg-4">
            <div class="card report-card">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="text-dark font-weight-semibold font-14">Total PPA Uploaded</p>
                            <h3 class="my-3">{{ $consumersCount->signed_ppa_count }}</h3>
                            <p class="mb-0 text-truncate">Total Consumers who uploaded PPA</p>
                        </div>
                        <div class="align-self-center"><i class="dripicons-clock report-main-icon bg-soft-danger text-danger"></i>
                        </div>
                    </div>
                </div><!--end card-body-->
            </div><!--end card-->
        </div><!--end col-->
        <div class="col-md-6 col-lg-4">
            <div class="card report-card">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="text-dark font-weight-semibold font-14">Total Approved</p>
                            <h3 class="my-3">{{ $consumersCount->approved_consumers }}</h3>
                            <p class="mb-0 text-truncate">Approved By MSPDCL</p>
                        </div>
                        <div class="align-self-center"><i
                                class="dripicons-meter report-main-icon bg-soft-secondary text-secondary"></i>
                        </div>
                    </div>
                </div><!--end card-body-->
            </div><!--end card-->
        </div><!--end col-->
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-10">
                            <h4 class="header-title mt-0 mb-3">Consumers by Sub Divisions</h4>
                            <div id="barchart" class="apex-charts"></div>
                        </div><!--end col-->
                        <div class="col-lg-2">
                            <h4 class="header-title mt-0 mb-3">Top 10 Sub Divisions</h4>
                            <ul class="list-unstyled url-list mb-0">
                                @foreach($subDivisionNames as $k => $sub)
                                <li>
                                    <i class="mdi mdi-circle-medium text-secondary"></i> <span>{{ $sub }}</span>
                                </li>
                                @endforeach
                            </ul>
                        </div><!--end col-->
                    </div><!--end row-->
                </div><!--end card-body-->
            </div><!--end card-->
        </div>    
    </div><!--end row-->
    {{-- <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-body">
                    <h4 class="header-title mt-0">Audience Overview</h4>
                    <div class="">
                        <div id="liveVisits" class="apex-charts"></div>
                    </div>
                </div><!--end card-body-->
                <div class="card-body bg-light chart-report-card">
                    <div class="row d-flex justify-content-between">
                        <div class="col-lg-4">
                            <div class="media"><i
                                    class="dripicons-user-group report-main-icon bg-card text-dark mr-2"></i>
                                <div class="media-body align-self-center text-truncate">
                                    <h4 class="mt-0 mb-0 font-weight-semibold text-dark font-24">140k <span
                                            class="text-success font-12 font-weight-normal"><i
                                                class="mdi mdi-arrow-up mr-1"></i>21%</span></h4>
                                    <p class="text-dark font-weight-semibold mb-0 font-14">Users</p>
                                </div><!--end media-body-->
                            </div><!--end media-->
                        </div><!--end col-->
                        <div class="col-lg-4">
                            <div class="media"><i
                                    class="dripicons-rocket report-main-icon bg-card text-dark mr-2"></i>
                                <div class="media-body align-self-center text-truncate">
                                    <h4 class="mt-0 mb-0 font-weight-semibold text-dark font-24">2154 <span
                                            class="text-success font-12 font-weight-normal"><i
                                                class="mdi mdi-arrow-up mr-1"></i>21%</span></h4>
                                    <p class="text-dark font-weight-semibold mb-0 font-14">Page views</p>
                                </div><!--end media-body-->
                            </div><!--end media-->
                        </div><!--end col-->
                        <div class="col-lg-4">
                            <div class="media"><i
                                    class="dripicons-preview report-main-icon bg-card text-dark mr-2"></i>
                                <div class="media-body align-self-center text-truncate">
                                    <h4 class="mt-0 mb-0 font-weight-semibold text-dark font-24">183k <span
                                            class="text-success font-12 font-weight-normal"><i
                                                class="mdi mdi-arrow-up mr-1"></i>21%</span></h4>
                                    <p class="text-dark font-weight-semibold mb-0 font-14">Impressions</p>
                                </div><!--end media-body-->
                            </div><!--end media-->
                        </div><!--end col-->
                    </div><!--end row-->
                </div><!--end card-body-->
            </div><!--end card-->
        </div><!--end col-->
        <div class="col-lg-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="header-title mt-0">Sessions Device</h4>
                    <div id="ana_device" class="apex-charts"></div>
                    <div class="table-responsive mt-4">
                        <table class="table mb-0">
                            <thead class="thead-light">
                                <tr>
                                    <th>Device</th>
                                    <th>Sassions</th>
                                    <th>Day</th>
                                    <th>Week</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th scope="row">Dasktops</th>
                                    <td>1843</td>
                                    <td>-3</td>
                                    <td>-12</td>
                                </tr>
                                <tr>
                                    <th scope="row">Tablets</th>
                                    <td>2543</td>
                                    <td>-5</td>
                                    <td>-2</td>
                                </tr>
                                <tr>
                                    <th scope="row">Mobiles</th>
                                    <td>3654</td>
                                    <td>-5</td>
                                    <td>-6</td>
                                </tr>
                            </tbody>
                        </table><!--end /table-->
                    </div>
                </div><!--end card-body-->
            </div><!--end card-->
        </div><!--end col-->
    </div><!--end row--> --}}
</div>

@endsection

@section('otherJs')

    <script src="{{ asset('plugins/apexcharts/apexcharts.min.js') }}"></script>
    <script src="{{ asset('plugins/moment/moment.js') }}"></script>
    {{-- <script src="{{ asset('plugins/jvectormap/jquery-jvectormap-2.0.2.min.js') }}"></script>
    <script src="{{ asset('plugins/jvectormap/jquery-jvectormap-us-aea-en.js') }}"></script> --}}
    <script>
        var chart,
        colors = ["#1ecab8", "#fd3c97", "#6d81f5", "#ffb822", "#0dc8de", "#7b509f", "#e4f02f", "#f02f2f", "#2f8df0", "#f02f8d"];
        (options = {
            chart: {
                height: 300,
                type: "bar",
                events: {
                    click: function (o, e, t) {
                        console.log(o, e, t);
                    },
                },
                toolbar: { show: !1 },
                dropShadow: {
                    enabled: !0,
                    top: 0,
                    left: 5,
                    bottom: 5,
                    right: 0,
                    blur: 5,
                    color: "#45404a2e",
                    opacity: 0.35,
                },
            },
            colors: colors,
            plotOptions: {
                bar: {
                    dataLabels: { position: "top" },
                    columnWidth: "30",
                    distributed: !0,
                },
            },
            dataLabels: {
                enabled: !0,
                formatter: function (o) {
                    return o + " Nos";
                },
                offsetY: -30,
                style: { fontSize: "12px", colors: ["#8997bd"] },
            },
            series: [{ name: "Consumers", data: @json($subDivisionConsumersCount) }],
            xaxis: {
                categories: @json($subDivisionNames),
                position: "top",
                labels: { offsetY: -18, style: { cssClass: "apexcharts-xaxis-label" } },
                axisBorder: { show: !1 },
                axisTicks: { show: !1 },
                crosshairs: {
                    fill: {
                        type: "gradient",
                        gradient: {
                            colorFrom: "#D8E3F0",
                            colorTo: "#BED1E6",
                            stops: [0, 100],
                            opacityFrom: 0.4,
                            opacityTo: 0.5,
                        },
                    },
                },
                tooltip: { enabled: !0, offsetY: -37 },
            },
            fill: {
                gradient: {
                    type: "gradient",
                    gradientToColors: [
                        "#FEB019",
                        "#775DD0",
                        "#FEB019",
                        "#FF4560",
                        "#775DD0",
                        "#7b509f", 
                        "#e4f02f", 
                        "#f02f2f", 
                        "#2f8df0", 
                        "#f02f8d"
                    ],
                },
            },
            yaxis: {
                axisBorder: { show: !1 },
                axisTicks: { show: !1 },
                labels: {
                    show: !1,
                    formatter: function (o) {
                        return o + " Nos";
                    },
                },
            },
        }),
        (chart = new ApexCharts(
            document.querySelector("#barchart"),
            options
        )).render();
    </script>

@endsection