@extends('voyager::master')

@section('css')
    <style>
        .bg-success {
            background-color: #61cf33;
        }

        .bg-gradient-success {
            /*background-image: linear-gradient(195deg, #66BB6A 0%, #43A047 100%);*/
        }

        .shadow-success {
            box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(76, 104, 175, 0.4) !important;
        }

        [tabindex='-1']:focus {
            outline: 0 !important;
        }

        h2,
        h5 {
            margin-top: 0;
            margin-bottom: .5rem;
        }

        p {
            margin-top: 0;
            margin-bottom: 1rem;
        }

        dfn {
            font-style: italic;
        }

        strong {
            font-weight: bolder;
        }

        a {
            text-decoration: none;
            color: #5e72e4;
            background-color: transparent;
            -webkit-text-decoration-skip: objects;
        }

        a:hover {
            text-decoration: none;
            color: #233dd2;
        }

        a:not([href]):not([tabindex]) {
            text-decoration: none;
            color: inherit;
        }

        a:not([href]):not([tabindex]):hover,
        a:not([href]):not([tabindex]):focus {
            text-decoration: none;
            color: inherit;
        }

        a:not([href]):not([tabindex]):focus {
            outline: 0;
        }

        caption {
            padding-top: 1rem;
            padding-bottom: 1rem;
            caption-side: bottom;
            text-align: left;
            color: #8898aa;
        }


        h2,
        h5,
        .h2,
        .h5 {
            font-family: inherit;
            font-weight: 600;
            line-height: 1.5;
            margin-bottom: .5rem;
            color: #32325d;
        }

        h2,
        .h2 {
            font-size: 1.25rem;
        }

        h5,
        .h5 {
            font-size: .8125rem;
        }

        .container-fluid {
            width: 100%;
            margin-right: auto;
            margin-left: auto;
            padding-right: 15px;
            padding-left: 15px;
        }

        .row {
            display: flex;
            margin-right: -15px;
            margin-left: -15px;
            flex-wrap: wrap;
        }

        .col,
        .col-auto,
        .col-lg-6,
        .col-xl-3,
        .col-xl-6 {
            position: relative;
            width: 100%;
            min-height: 1px;
            padding-right: 15px;
            padding-left: 15px;
        }

        .col {
            max-width: 100%;
            flex-basis: 0;
            flex-grow: 1;
        }

        .col-auto {
            width: auto;
            max-width: none;
            flex: 0 0 auto;
        }

        @media (min-width: 992px) {
            .col-lg-6 {
                max-width: 50%;
                flex: 0 0 50%;
            }
        }

        @media (min-width: 1200px) {
            .col-xl-3 {
                max-width: 25%;
                flex: 0 0 25%;
            }

            .col-xl-6 {
                max-width: 50%;
                flex: 0 0 50%;
            }
        }

        .card {
            position: relative;
            display: flex;
            flex-direction: column;
            min-width: 0;
            word-wrap: break-word;
            border: 1px solid rgba(0, 0, 0, .05);
            border-radius: .375rem;
            background-color: #fff;
            background-clip: border-box;
        }

        .card-body {
            padding: 1.5rem;
            flex: 1 1 auto;
        }

        .card-title {
            margin-bottom: 1.25rem;
        }


        .bg-info {
            background-color: #11cdef !important;
        }

        a.bg-info:hover,
        a.bg-info:focus,
        button.bg-info:hover,
        button.bg-info:focus {
            background-color: #0da5c0 !important;
        }

        .bg-warning {
            background-color: #fb6340 !important;
        }

        .bg-danger {
            background-color: #f5365c !important;
        }

        a.bg-danger:hover,
        a.bg-danger:focus,
        button.bg-danger:hover,
        button.bg-danger:focus {
            background-color: #ec0c38 !important;
        }

        .bg-default {
            background-color: #172b4d !important;
        }

        a.bg-default:hover,
        a.bg-default:focus,
        button.bg-default:hover,
        button.bg-default:focus {
            background-color: #0b1526 !important;
        }

        .rounded-circle {
            border-radius: 50% !important;
        }

        .align-items-center {
            align-items: center !important;
        }

        @media (min-width: 1200px) {
            .justify-content-xl-between {
                justify-content: space-between !important;
            }
        }

        .shadow {
            box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15) !important;
        }

        @media (min-width: 768px) {
            .pt-md-8 {
                padding-top: 8rem !important;
            }
        }

        @media (min-width: 1200px) {
            .mb-xl-0 {
                margin-bottom: 0 !important;
            }
        }

        .text-nowrap {
            white-space: nowrap !important;
        }

        .text-center {
            text-align: center !important;
        }

        .text-uppercase {
            text-transform: uppercase !important;
        }

        .font-weight-bold {
            font-weight: 600 !important;
        }

        .text-white {
            color: #fff !important;
        }

        .text-success {
            color: #2dce89 !important;
        }

        a.text-success:hover,
        a.text-success:focus {
            color: #24a46d !important;
        }

        .text-warning {
            color: #fb6340 !important;
        }

        a.text-warning:hover,
        a.text-warning:focus {
            color: #fa3a0e !important;
        }

        .text-danger {
            color: #f5365c !important;
        }

        a.text-danger:hover,
        a.text-danger:focus {
            color: #ec0c38 !important;
        }

        .text-white {
            color: #fff !important;
        }

        a.text-white:hover,
        a.text-white:focus {
            color: #e6e6e6 !important;
        }

        .text-muted {
            color: #8898aa !important;
        }


        figcaption,
        main {
            display: block;
        }

        main {
            overflow: hidden;
        }

        .bg-yellow {
            background-color: #30003d !important;
        }

        a.bg-yellow:hover,
        a.bg-yellow:focus,
        button.bg-yellow:hover,
        button.bg-yellow:focus {
            background-color: #30003d !important;
        }

        .bg-gradient-primary {
            background: linear-gradient(87deg, #550475 0, #30003d 100%) !important;
        }

        .btn.btn-primary{
            background: linear-gradient(87deg, #550475 0, #30003d 100%) !important;
        }

        @keyframes floating-lg {
            0% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(15px);
            }
            100% {
                transform: translateY(0px);
            }
        }

        @keyframes floating {
            0% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(10px);
            }
            100% {
                transform: translateY(0px);
            }
        }

        @keyframes floating-sm {
            0% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(5px);
            }
            100% {
                transform: translateY(0px);
            }
        }

        [class*='shadow'] {
            transition: all .15s ease;
        }

        .text-sm {
            font-size: .875rem !important;
        }

        .text-white {
            color: #fff !important;
        }

        a.text-white:hover,
        a.text-white:focus {
            color: #e6e6e6 !important;
        }

        [class*='btn-outline-'] {
            border-width: 1px;
        }

        .card-stats .card-body {
            padding: 1rem 1.5rem;
        }

        .main-content {
            position: relative;
        }


        .icon {
            width: 3rem;
            height: 3rem;
        }

        .icon i {
            font-size: 2.25rem;
        }

        .icon-shape {
            display: inline-flex;
            padding: 12px;
            text-align: center;
            border-radius: 50%;
            align-items: center;
            justify-content: center;
        }

        .icon-shape i {
            font-size: 1.25rem;
        }

        @media (min-width: 768px) {
            @ keyframes show-navbar-dropdown {
            0% {
                transition: visibility .25s, opacity .25s, transform .25s;
                transform: translate(0, 10px) perspective(200px) rotateX(-2deg);
                opacity: 0;
            }

            100% {
                transform: translate(0, 0);
                opacity: 1;
            }
        }
            @keyframes hide-navbar-dropdown {
                from {
                    opacity: 1;
                }
                to {
                    transform: translate(0, 10px);
                    opacity: 0;
                }
            }
        }

        @keyframes show-navbar-collapse {
            0% {
                transform: scale(.95);
                transform-origin: 100% 0;
                opacity: 0;
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        @keyframes hide-navbar-collapse {
            from {
                transform: scale(1);
                transform-origin: 100% 0;
                opacity: 1;
            }
            to {
                transform: scale(.95);
                opacity: 0;
            }
        }

        p {
            font-size: 1rem;
            font-weight: 300;
            line-height: 1.7;
        }

        }
    </style>
@endsection

@section('content')
    <div class="page-content">
        @include('voyager::alerts')
        @include('voyager::dimmers')

        <div class="page-content browse container-fluid">
            <div class="analytics-container">
                <div class="Dashboard Dashboard--full panel-body">
                    <header class="Dashboard-header">
                        <h1 class="Titles-main" id="view-name">📊 Platform Analytics / Internal Metrics</h1>
                    </header>
                </div>
            </div>

            <div class="clearfix container-fluid row">
                {{--SignUps Analytics--}}
                <div class="col-xs-12 col-sm-4 col-md-4">
                    <div class="">
                        <div class="card card-stats mb-4 mb-xl-0">
                            <div class="card-body analytics-panel-body">
                                <div class="row">
                                    <div class="col">
                                        <h4 class="card-title analytics-card-label text-uppercase text-muted mb-0">
                                            User Signups Today
                                        </h4>
                                        <h3 style="margin: 0; font-weight: bold;">{{ $signupsDaily }}</h3>

                                    </div>
                                    <div class="col-auto">
                                        <div class="icon icon-shape bg-success text-white rounded-circle shadow">
                                            <i class="fa fa-user-plus"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="mt-3 mb-0 text-muted text-sm">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-4 col-md-4">
                    <div class="">
                        <div class="card card-stats mb-4 mb-xl-0">
                            <div class="card-body analytics-panel-body">
                                <div class="row">
                                    <div class="col">
                                        <h4 class="card-title analytics-card-label text-uppercase text-muted mb-0">
                                            User Signups Week
                                        </h4>
                                        <h3 style="margin: 0; font-weight: bold;">{{ $signupsWeekly }}</h3>

                                    </div>
                                    <div class="col-auto">
                                        <div class="icon icon-shape bg-warning text-white rounded-circle shadow">
                                            <i class="fa fa-user-plus"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="mt-3 mb-0 text-muted text-sm">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-4 col-md-4">
                    <div class="">
                        <div class="card card-stats mb-4 mb-xl-0">
                            <div class="card-body analytics-panel-body">
                                <div class="row">
                                    <div class="col">
                                        <h4 class="card-title analytics-card-label text-uppercase text-muted mb-0">
                                            User Signups Month
                                        </h4>
                                        <h3 style="margin: 0; font-weight: bold;">{{ $signupsMonthly }}</h3>

                                    </div>
                                    <div class="col-auto">
                                        <div class="icon icon-shape bg-default text-white rounded-circle shadow">
                                            <i class="fa fa-user-plus"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="mt-3 mb-0 text-muted text-sm">

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

                {{--Active Users Analytics--}}
                <div class="col-xs-12 col-sm-4 col-md-4">
                    <div class="">
                        <div class="card card-stats mb-4 mb-xl-0">
                            <div class="card-body analytics-panel-body">
                                <div class="row">
                                    <div class="col">
                                        <h4 class="card-title analytics-card-label text-uppercase text-muted mb-0">
                                            Active Users DAU
                                        </h4>
                                        <h3 style="margin: 0; font-weight: bold;">{{ $dau }}</h3>

                                    </div>
                                    <div class="col-auto">
                                        <div class="icon icon-shape bg-gradient-primary text-white rounded-circle shadow">
                                            <i class="fa fa-clock-o"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="mt-3 mb-0 text-muted text-sm">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-4 col-md-4">
                    <div class="">
                        <div class="card card-stats mb-4 mb-xl-0">
                            <div class="card-body analytics-panel-body">
                                <div class="row">
                                    <div class="col">
                                        <h4 class="card-title analytics-card-label text-uppercase text-muted mb-0">
                                            Active Users WAU
                                        </h4>
                                        <h3 style="margin: 0; font-weight: bold;">{{ $wau }}</h3>

                                    </div>
                                    <div class="col-auto">
                                        <div class="icon icon-shape bg-danger text-white rounded-circle shadow">
                                            <i class="fa fa-clock-o"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="mt-3 mb-0 text-muted text-sm">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-4 col-md-4">
                    <div class="">
                        <div class="card card-stats mb-4 mb-xl-0">
                            <div class="card-body analytics-panel-body">
                                <div class="row">
                                    <div class="col">
                                        <h4 class="card-title analytics-card-label text-uppercase text-muted mb-0">
                                            Active Users MAU
                                        </h4>
                                        <h3 style="margin: 0; font-weight: bold;">{{ $mau }}</h3>

                                    </div>
                                    <div class="col-auto">
                                        <div class="icon icon-shape bg-primary text-white rounded-circle shadow">
                                            <i class="fa fa-clock-o"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="mt-3 mb-0 text-muted text-sm">

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

                {{--Active Users Analytics--}}
                <div class="col-xs-12 col-sm-4 col-md-4">
                    <div class="">
                        <div class="card card-stats mb-4 mb-xl-0">
                            <div class="card-body analytics-panel-body">
                                <div class="row">
                                    <div class="col">
                                        <h4 class="card-title analytics-card-label text-uppercase text-muted mb-0">
                                            sales Today
                                        </h4>
                                        <h3 style="margin: 0; font-weight: bold;">{{ $salesToday }}</h3>

                                    </div>
                                    <div class="col-auto">
                                        <div class="icon icon-shape bg-success text-white rounded-circle shadow">
                                            <i class="fa fa-usd"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="mt-3 mb-0 text-muted text-sm">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-4 col-md-4">
                    <div class="">
                        <div class="card card-stats mb-4 mb-xl-0">
                            <div class="card-body analytics-panel-body">
                                <div class="row">
                                    <div class="col">
                                        <h4 class="card-title analytics-card-label text-uppercase text-muted mb-0">
                                            sales This Week
                                        </h4>
                                        <h3 style="margin: 0; font-weight: bold;">{{ $salesThisWeek }}</h3>

                                    </div>
                                    <div class="col-auto">
                                        <div class="icon icon-shape bg-success text-white rounded-circle shadow">
                                            <i class="fa fa-usd"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="mt-3 mb-0 text-muted text-sm">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-4 col-md-4">
                    <div class="">
                        <div class="card card-stats mb-4 mb-xl-0">
                            <div class="card-body analytics-panel-body">
                                <div class="row">
                                    <div class="col">
                                        <h4 class="card-title analytics-card-label text-uppercase text-muted mb-0">
                                            sales This Month
                                        </h4>
                                        <h3 style="margin: 0; font-weight: bold;">{{ $salesThisMonth }}</h3>

                                    </div>
                                    <div class="col-auto">
                                        <div class="icon icon-shape bg-success text-white rounded-circle shadow">
                                            <i class="fa fa-usd"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="mt-3 mb-0 text-muted text-sm">

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

            </div>
        </div>

    </div>
@stop

@section('javascript')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>


@stop