@extends('layouts.app')

@section('content')
    <!---Header--->
    <header class="navbar navbar-expand-md navbar-light d-none d-lg-flex d-print-none">
        <div class="container-xl">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="navbar-nav flex-row order-md-last">

                <div class="d-none d-md-flex">
                    <div class="nav-item dropdown d-none d-md-flex me-3">
                        <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications" aria-expanded="false">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6"></path><path d="M9 17v1a3 3 0 0 0 6 0v-1"></path></svg>
                            <span class="badge bg-red total-notifications">{{$notifications->where('status',0)->count()}}</span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end mark-as-read-notifications dropdown-menu-card notification-dropdown-list-rendered">
                            @include('order-notification',['notifications',$notifications])
                        </div>
                    </div>
                </div>

                <div class="nav-item dropdown">
                    <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
                        <span class="avatar avatar-sm" style="background-image: url(/dist/img/default-user.jpg)"></span>
                        <div class="d-none d-xl-block ps-2">
                            <div>{{ Auth::user()->name }}</div>
                        </div>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                        <a href="{{ route('user.edit', auth()->user()->id) }}" class="dropdown-item">Edit Profile</a>
                        <a href="#" class="dropdown-item" href="{{ route('admin.logout') }}"
                           onclick="event.preventDefault();
                         document.getElementById('logout-form').submit();">
                            {{ __('Logout') }}
                        </a>
                    </div>
                </div>
            </div>
            <div class="collapse navbar-collapse" id="navbar-menu">
                <div class="col">
                    <!-- Page pre-title -->
                    <div class="page-pretitle">
                        Overview
                    </div>
                    <h2 class="page-title">
                        Dashboard
                    </h2>
                </div>
            </div>
        </div>
    </header>
    <div class="page">
        <div class="page-wrapper">
            <!-- Page body -->
            <div class="page-body">
                <div class="container-xl">
                    <div class="row row-deck row-cards">
                        <div class="col-12">
                            <div class="row row-cards">
                                <div class="col-sm-6 col-lg-3">
                                    <div class="card bg-c-green order-card">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col">
                                                    <h5 class="card-title mb-0 subheader progress-description" style="color: #ffffff">TODAY'S SALES
                                                    </h5>
                                                    <span class="h2 font-weight-bold mb-0">{{ number_format($todaySales, 2) }}</span>
                                                </div>
                                            </div>
{{--                                            <div id="chart-today-sales" class="chart-sm"></div>--}}
                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-6 col-lg-3">
                                    <div class="card bg-c-blue order-card">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col">
                                                    <h5 class="card-title mb-0 subheader progress-description" style="color: #ffffff">DELIVERED ORDER TODAY'S
                                                    </h5>
                                                    <span class="h2 font-weight-bold">{{ $todayOrderDelivered }}</span>
                                                </div>
                                            </div>
{{--                                            <div id="chart-deliver-orders" class="chart-sm"></div>--}}
                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-6 col-lg-3">
                                    <div class="card bg-c-red order-card">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col">
                                                    <h5 class="card-title progress-description subheader mb-0" style="color: #ffffff">CANCELED ORDER TODAY'S
                                                    </h5>
                                                    <span class="h2 font-weight-bold">{{ $todayOrderCanceled }}</span>
                                                </div>
                                            </div>
{{--                                            <div id="chart-cancel-orders" class="chart-sm"></div>--}}
                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-6 col-lg-3">
                                    <div class="card bg-c-yellow order-card">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col">
                                                    <h5 class="card-title subheader progress-description mb-0" style="color: #ffffff">TODAY'S DELIVERY CHARGES
                                                    </h5>
                                                    <span class="h2 font-weight-bold">{{ number_format($todayDeliveryCharges, 2) }}</span>
                                                </div>
                                            </div>
{{--                                            <div id="chart-delivery-charges" class="chart-sm"></div>--}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row row-deck row-cards">
                        <div class="col-12">
                            <div class="row row-cards">
                                <div class="col-md-6 col-lg-3">
                                    <div class="card bg-primary text-primary-fg">
                                        <div class="card-stamp">
                                            <div class="card-stamp-icon bg-white text-primary">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-wash-dry-p" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                    <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
                                                    <path d="M10 16v-8h2.5a2.5 2.5 0 1 1 0 5h-2.5"></path>
                                                </svg>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <h5 class="card-title subheader progress-description mb-0" style="color: #ffffff">TOTAL ACTIVE PRODUCTS
                                            </h5>
                                            <span class="h2 font-weight-bold">{{ count($products) }}</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 col-lg-3">
                                    <div class="card bg-primary text-primary-fg">
                                        <div class="card-stamp">
                                            <div class="card-stamp-icon bg-white text-primary">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-square-rounded-letter-c" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                    <path d="M14 10a2 2 0 1 0 -4 0v4a2 2 0 1 0 4 0"></path>
                                                    <path d="M12 3c7.2 0 9 1.8 9 9s-1.8 9 -9 9s-9 -1.8 -9 -9s1.8 -9 9 -9z"></path>
                                                </svg>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <h5 class="card-title subheader progress-description mb-0" style="color: #ffffff">TOTAL ACTIVE CATEGORIES
                                            </h5>
                                            <span class="h2 font-weight-bold">{{ count($categories) }}</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 col-lg-3">
                                    <div class="card bg-primary text-primary-fg">
                                        <div class="card-stamp">
                                            <div class="card-stamp-icon bg-white text-primary">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-square-rounded-letter-d" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                    <path d="M10 8v8h2a2 2 0 0 0 2 -2v-4a2 2 0 0 0 -2 -2h-2z"></path>
                                                    <path d="M12 3c7.2 0 9 1.8 9 9s-1.8 9 -9 9s-9 -1.8 -9 -9s1.8 -9 9 -9z"></path>
                                                </svg>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <h5 class="card-title subheader progress-description mb-0" style="color: #ffffff">TOTAL ACTIVE DEALS
                                            </h5>
                                            <span class="h2 font-weight-bold">{{ count($deals) }}</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 col-lg-3">
                                    <div class="card bg-primary text-primary-fg">
                                        <div class="card-stamp">
                                            <div class="card-stamp-icon bg-white text-primary">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-square-rounded-letter-u" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                    <path d="M10 8v6a2 2 0 1 0 4 0v-6"></path>
                                                    <path d="M12 3c7.2 0 9 1.8 9 9s-1.8 9 -9 9s-9 -1.8 -9 -9s1.8 -9 9 -9z"></path>
                                                </svg>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <h5 class="card-title subheader progress-description mb-0" style="color: #ffffff">TOTAL ACTIVE USERS
                                            </h5>
                                            <span class="h2 font-weight-bold">{{ count($users) }}</span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-body">
                                    <h3 class="card-title">Sale Report For</h3>
                                    <a href="#" class="btn btn-primary report-graph" type="day" interval="7 day">Last 7 Days</a>
                                    <a href="#" class="btn btn-primary report-graph" type="day" interval="30 day">Last 30 Days</a>
                                    <a href="#" class="btn btn-primary report-graph" type="month" interval="12 month">Last 12 Months</a>
                                    <a href="#" class="btn btn-primary report-graph" type="week" interval="4 week">Last 4 Weeks</a>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="chart" id="graph-chart">
                                                <canvas id="salesChart" style="height: 200px;"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>
@endsection

@push("javascript")
<script src="{{ url('/dist/js/chart.js')}}"></script>
<script src="{{ url('/dist/js/dashboard2.js')}}"></script>
    <script>

        $(document).off('click', '.report-graph').on('click', '.report-graph', function (event) {
            event.preventDefault();

            var interval = $(this).attr('interval');
            var type = $(this).attr('type');


            getGraphData(interval,type)

        });

        getGraphData("4 week", "week")


        function getGraphData(interval,type){

            var requestData = {report_interval: interval, type: type};
            var url = "{{ route('dashboard.graph') }}";
            $.ajax({
                url: url,
                type: 'GET',
                data: requestData,
                success: function (response) {
                    renderGraph(response.report.dates, response.report.values);
                }
            })
        }
    </script>


@endpush