@extends('layouts.master')

@section('content')
<div class="content-wrapper">
    <div class="d-xl-flex justify-content-between align-items-start">
        <h2 class="text-dark font-weight-bold mb-2"> Overview dashboard </h2>
        <div class="d-sm-flex justify-content-xl-between align-items-center mb-2">
        <div class="btn-group bg-white p-3" role="group" aria-label="Basic example">
            <a href="{{route('home', ['filter' => 'last_year'])}}" type="button" class="btn btn-link {{isset($_GET['filter']) && $_GET['filter'] == 'last_year' ? 'text-dark' : 'text-gray'}} text-gray py-0">Last Year</a>
            <a href="{{route('home', ['filter' => 'last_week'])}}" type="button" class="btn btn-link {{isset($_GET['filter']) && $_GET['filter'] == 'last_week' ? 'text-dark' : 'text-gray'}} py-0 border-right">Last 7 Days</a>
            <a href="{{route('home', ['filter' => 'last_month'])}}" type="button" class="btn btn-link {{!isset($_GET['filter']) || $_GET['filter'] == 'last_month' ? 'text-dark' : 'text-gray'}} py-0 border-right">Last Month</a>
        </div>
        <div class="dropdown ms-0 ml-md-4 mt-2 mt-lg-0">
            <div class="input-group input-daterange d-flex align-items-center">
                <button id="date_picker" class="btn bg-white p-3 d-flex align-items-center" type="button"> <i class="mdi mdi-calendar me-1"></i><span id="date_string">
                    {{-- @if(isset($_GET['filter']) && (($_GET['filter'] == "custom" && isset($_GET['start']) && isset($_GET['end'])) || $_GET['filter'] != "custom"))
                    @switch($_GET['filter'])
                        @case('last_week')
                            {{date('d M, Y', strtotime("-7 days"))." - ".date('d M, Y')}}
                            @break
                        @case('last_month')
                            {{date('d M, Y', strtotime("-30 days"))." - ".date('d M, Y')}}
                            @break
                        @case('last_year')
                            {{date('d M, Y', strtotime("last year"))." - ".date('d M, Y')}}
                            @break
                        @case('custom')
                            {{date('d M, Y', strtotime($_GET['start']))." - ".date('d M, Y', strtotime($_GET['end']))}}
                            @break
                        @default
                            {{date('d M, Y', strtotime("-7 days"))." - ".date('d M, Y')}}
                    @endswitch
                    @else
                        {{date('d M, Y', strtotime("-30 days"))." - ".date('d M, Y')}}
                    @endif --}}
                    {{date('d M, Y', strtotime($start))." - ".date('d M, Y', strtotime(($end)))}}
                </span> </button>
            </div>
        </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="d-sm-flex justify-content-between align-items-center transaparent-tab-border {">
                <ul class="nav nav-tabs tab-transparent" role="tablist">
                <!-- <li class="nav-item">
                    <a class="nav-link" id="home-tab" data-bs-toggle="tab" href="#" role="tab" aria-selected="true">Users</a>
                </li> -->
                <li class="nav-item">
                    <a class="nav-link active" id="business-tab" data-bs-toggle="tab" href="#business-1" role="tab" aria-selected="false">Business</a>
                </li>
                <!-- <li class="nav-item">
                    <a class="nav-link" id="performance-tab" data-bs-toggle="tab" href="#" role="tab" aria-selected="false">Performance</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="conversion-tab" data-bs-toggle="tab" href="#" role="tab" aria-selected="false">Conversion</a>
                </li> -->
                </ul>
                <div class="d-md-block d-none">
                <a href="#" class="text-light p-1"><i class="mdi mdi-view-dashboard"></i></a>
                <a href="#" class="text-light p-1"><i class="mdi mdi-dots-vertical"></i></a>
                </div>
            </div>
            <div class="tab-content tab-transparent-content">
                <div class="tab-pane fade show active" id="business-1" role="tabpanel" aria-labelledby="business-tab">
                    <div class="row">
                        <div class="col-xl-3 col-lg-6 col-sm-6 grid-margin stretch-card">
                        <div class="card">
                            <div class="card-body text-center">
                            <h5 class="mb-2 text-dark font-weight-normal">Total Orders</h5>
                            <h2 class="mb-4 text-dark font-weight-bold">{{$data['total_orders']}}</h2>
                            <div class="dashboard-progress dashboard-progress-1 d-flex align-items-center justify-content-center item-parent"><i class="mdi mdi-lightbulb icon-md absolute-center text-dark"></i></div>
                            <p class="mt-4 mb-0">Completed</p>
                            <h3 class="mb-0 font-weight-bold mt-2 text-dark">{{$data['total_delivered_orders']}}</h3>
                            </div>
                        </div>
                        </div>
                        <div class="col-xl-3 col-lg-6 col-sm-6 grid-margin stretch-card">
                        <div class="card">
                            <div class="card-body text-center">
                            <h5 class="mb-2 text-dark font-weight-normal">Total Customers</h5>
                            <h2 class="mb-4 text-dark font-weight-bold">{{$data['total_customers']}}</h2>
                            <div class="dashboard-progress dashboard-progress-2 d-flex align-items-center justify-content-center item-parent"><i class="mdi mdi-account-circle icon-md absolute-center text-dark"></i></div>
                            <p class="mt-4 mb-0">Increased since yesterday</p>
                            <h3 class="mb-0 font-weight-bold mt-2 text-dark">{{$data['yesterday_customers']}}</h3>
                            </div>
                        </div>
                        </div>
                        <div class="col-xl-3  col-lg-6 col-sm-6 grid-margin stretch-card">
                        <div class="card">
                            <div class="card-body text-center">
                            <h5 class="mb-2 text-dark font-weight-normal">Revenue</h5>
                            <h2 class="mb-4 text-dark font-weight-bold">£{{$data['revenue']}}</h2>
                            <div class="dashboard-progress dashboard-progress-3 d-flex align-items-center justify-content-center item-parent"><i class="mdi mdi-eye icon-md absolute-center text-dark"></i></div>
                            <p class="mt-4 mb-0">Increased since yesterday</p>
                            <h3 class="mb-0 font-weight-bold mt-2 text-dark">£{{$data['yesterday_revenue']}}</h3>
                            </div>
                        </div>
                        </div>
                        <div class="col-xl-3 col-lg-6 col-sm-6 grid-margin stretch-card">
                        <div class="card">
                            <div class="card-body text-center">
                            <h5 class="mb-2 text-dark font-weight-normal">Cancelled Orders</h5>
                            <h2 class="mb-4 text-dark font-weight-bold">{{$data['cancelled_orders']}}</h2>
                            <div class="dashboard-progress dashboard-progress-4 d-flex align-items-center justify-content-center item-parent"><i class="mdi mdi-cube icon-md absolute-center text-dark"></i></div>
                            <p class="mt-4 mb-0">Increased since yesterday</p>
                            <h3 class="mb-0 font-weight-bold mt-2 text-dark">{{$data['yesterday_cancelled_orders']}}</h3>
                            </div>
                        </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 grid-margin">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <!-- <div class="col-sm-12">
                                        <div class="d-flex justify-content-between align-items-center mb-4">
                                            <h4 class="card-title mb-0">Recent Activity</h4>
                                            <div class="dropdown dropdown-arrow-none">
                                            <button class="btn p-0 text-dark dropdown-toggle" type="button" id="dropdownMenuIconButton1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="mdi mdi-dots-vertical"></i>
                                            </button>
                                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuIconButton1">
                                                <h6 class="dropdown-header">Settings</h6>
                                                <a class="dropdown-item" href="#">Action</a>
                                                <a class="dropdown-item" href="#">Another action</a>
                                                <a class="dropdown-item" href="#">Something else here</a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item" href="#">Separated link</a>
                                            </div>
                                            </div>
                                        </div>
                                        </div>
                                        <div class="col-lg-3 col-sm-4 grid-margin  grid-margin-lg-0">
                                        <div class="wrapper pb-5 border-bottom">
                                            <div class="text-wrapper d-flex align-items-center justify-content-between mb-2">
                                            <p class="mb-0 text-dark">Total Profit</p>
                                            <span class="text-success"><i class="mdi mdi-arrow-up"></i>2.95%</span>
                                            </div>
                                            <h3 class="mb-0 text-dark font-weight-bold">$ 92556</h3>
                                            <canvas id="total-profit"></canvas>
                                        </div>
                                        <div class="wrapper pt-5">
                                            <div class="text-wrapper d-flex align-items-center justify-content-between mb-2">
                                            <p class="mb-0 text-dark">Expenses</p>
                                            <span class="text-success"><i class="mdi mdi-arrow-up"></i>52.95%</span>
                                            </div>
                                            <h3 class="mb-4 text-dark font-weight-bold">$ 59565</h3>
                                            <canvas id="total-expences"></canvas>
                                        </div>
                                        </div> -->
                                        <div class="col-lg-6 col-sm-6 grid-margin  grid-margin-lg-0">
                                            <div class="ps-0 ps-lg-4 ">
                                                <!-- <div class="d-xl-flex justify-content-between align-items-center mb-2">
                                                    <div class="d-lg-flex align-items-center mb-lg-2 mb-xl-0">
                                                        <h3 class="text-dark font-weight-bold me-2 mb-0">Sales</h3>
                                                        <h5 class="mb-0">( growth 62% )</h5>
                                                    </div>
                                                    <div class="d-lg-flex">
                                                        <p class="me-2 mb-0">Timezone:</p>
                                                        <p class="text-dark font-weight-bold mb-0">GMT-0400 Eastern Delight Time</p>
                                                    </div>
                                                </div> -->
                                                <div class="graph-custom-legend clearfix" id="device-sales-legend"></div>
                                                <canvas id="device-sales"></canvas>
                                            </div>
                                        </div>
                                        <div class="col-sm-6  grid-margin stretch-card">
                                            <div class="card">
                                                <div class="card-body">
                                                    <div class="d-xl-flex justify-content-between mb-2">
                                                        <h4 class="card-title">Website views analytics</h4>
                                                        <div class="graph-custom-legend primary-dot" id="pageViewAnalyticLengend"></div>
                                                    </div>
                                                    <canvas id="page-view-analytic"></canvas>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <!-- <div class="col-sm-4 grid-margin stretch-card">
                        <div class="card card-danger-gradient">
                            <div class="card-body mb-4">
                            <h4 class="card-title text-white">Account Retention</h4>
                            <canvas id="account-retension"></canvas>
                            </div>
                            <div class="card-body bg-white pt-4">
                            <div class="row pt-4">
                                <div class="col-sm-6">
                                <div class="text-center border-right border-md-0">
                                    <h4>Conversion</h4>
                                    <h1 class="text-dark font-weight-bold mb-md-3">$306</h1>
                                </div>
                                </div>
                                <div class="col-sm-6">
                                <div class="text-center">
                                    <h4>Cancellation</h4>
                                    <h1 class="text-dark font-weight-bold">$1,520</h1>
                                </div>
                                </div>
                            </div>
                            </div>
                        </div>
                        </div>
                        <div class="col-sm-8  grid-margin stretch-card">
                        <div class="card">
                            <div class="card-body">
                            <div class="d-xl-flex justify-content-between mb-2">
                                <h4 class="card-title">Page views analytics</h4>
                                <div class="graph-custom-legend primary-dot" id="pageViewAnalyticLengend"></div>
                            </div>
                            <canvas id="page-view-analytic"></canvas>
                            </div>
                        </div>
                        </div> -->
                    </div>
                    <div class="row">
                        <div class="col-lg-6 grid-margin stretch-card">
                            <div class="card">
                                <div class="card-body">
                                    <h4 class="card-title">Most Valuable Customers</h4>
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>Customer Name</th>
                                                <th>Phone</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($data['vipcustomers'] as $vipcustomer)
                                            <tr>
                                                <td>{{ $vipcustomer->customer_name }}</td>
                                                <td>{{ $vipcustomer->customer_phone }}</td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@stop

@section('scripts')
<!-- Moment.js (required for date handling) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

<!-- Bootstrap DateRange Picker CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-daterangepicker@3.1.0/daterangepicker.css" rel="stylesheet">

<!-- Bootstrap DateRange Picker JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-daterangepicker@3.1.0/daterangepicker.js"></script>
<script>
    (function($) {
        'use strict';

        $('#date_picker').daterangepicker({});
        $('#date_picker').on('apply.daterangepicker', function(ev, picker) {
            var url = "{{route('home')}}";
            var startDate = picker.startDate.format('YYYY-MM-DD');
            var endDate = picker.endDate.format('YYYY-MM-DD');
            $('#date_string').text(startDate + ' - ' + endDate);
            window.location.href = url+'?filter=custom&start='+startDate+'&end='+endDate;
        });

        if ($("#page-view-analytic").length) {
            var pageiVewAnalyticData = {
                labels: [{!! isset($data['pageviews']) && is_array($data['pageviews']) ? implode(",", array_keys($data['pageviews'])) : "" !!}],
                datasets: [
                    {
                        label: "This week",
                        data: [{!! isset($data['pageviews']) && is_array($data['pageviews']) ? implode(",", array_values($data['pageviews'])) : "" !!}],
                        backgroundColor: ["rgba(216,247,234, 0.19)"],
                        borderColor: ["#3dd597"],
                        borderWidth: 2,
                        fill: true,
                        pointBorderColor: "#fff",
                        pointBackgroundColor: "#3dd597",
                        pointBorderWidth: 2,
                        pointRadius: 4,
                    },
                ],
            };
            var pageiVewAnalyticOptions = {
                scales: {
                yAxes: [
                    {
                    display: true,
                    gridLines: {
                        drawBorder: false,
                        display: true,
                        drawTicks: false,
                        color: "#eef0fa",
                        zeroLineColor: "rgba(90, 113, 208, 0)",
                    },
                    ticks: {
                        beginAtZero: true,
                        stepSize: 10,
                        display: true,
                        padding: 10,
                    },
                    },
                ],
                xAxes: [
                    {
                    display: true,
                    position: "bottom",
                    gridLines: {
                        drawBorder: false,
                        display: false,
                        drawTicks: false,
                    },
                    ticks: {
                        beginAtZero: true,
                        stepSize: 10,
                        fontColor: "#a7afb7",
                        padding: 10,
                    },
                    },
                ],
                },
                legend: {
                display: false,
                },
                legendCallback: function (chart) {
                var text = [];
                text.push('<ul class="' + chart.id + '-legend">');
                for (var i = 0; i < chart.data.datasets.length; i++) {
                    text.push(
                    '<li><span class="legend-box" style="background:' +
                        chart.data.datasets[i].borderColor[i] +
                        ';"></span><span class="legend-label text-dark">'
                    );
                    if (chart.data.datasets[i].label) {
                    text.push(chart.data.datasets[i].label);
                    }
                    text.push("</span></li>");
                }
                text.push("</ul>");
                return text.join("");
                },
                elements: {
                point: {
                    radius: 1,
                },
                line: {
                    tension: 0,
                },
                },
                tooltips: {
                backgroundColor: "rgba(2, 171, 254, 1)",
                },
            };
            var barChartCanvas = $("#page-view-analytic").get(0).getContext("2d");
            // This will get the first returned node in the jQuery collection.
            var barChart = new Chart(barChartCanvas, {
                type: "line",
                data: pageiVewAnalyticData,
                options: pageiVewAnalyticOptions,
            });
            document.getElementById("pageViewAnalyticLengend").innerHTML =
                barChart.generateLegend();
        }
        if ($("#device-sales").length) {
            var deviceSalesData = {
                labels: [{!! isset($data['salesdata']) && is_array($data['salesdata']) ? implode(",", array_keys($data['salesdata'])) : "" !!}],
                datasets: [
                {
                    label: "Sales",
                    data: [{!! isset($data['salesdata']) && is_array($data['salesdata']) ? implode(",", array_values($data['salesdata'])) : "" !!}],
                    backgroundColor: [
                    "#a461d8",
                    "#a461d8",
                    "#a461d8",
                    "#a461d8",
                    "#a461d8",
                    "#a461d8",
                    "#a461d8",
                    "#a461d8",
                    "#a461d8",
                    "#a461d8",
                    "#a461d8",
                    "#a461d8",
                    ],
                    borderColor: [
                    "#a461d8",
                    "#a461d8",
                    "#a461d8",
                    "#a461d8",
                    "#a461d8",
                    "#a461d8",
                    "#a461d8",
                    "#a461d8",
                    "#a461d8",
                    "#a461d8",
                    "#a461d8",
                    "#a461d8",
                    ],
                    borderWidth: 1,
                    fill: false,
                },
                {
                    label: "Total Sales",
                    data: [{!! isset($data['totalsalesdata']) && is_array($data['totalsalesdata']) ? implode(",", array_values($data['totalsalesdata'])) : "" !!}],
                    backgroundColor: [
                    "#fc5a5a",
                    "#fc5a5a",
                    "#fc5a5a",
                    "#fc5a5a",
                    "#fc5a5a",
                    "#fc5a5a",
                    "#fc5a5a",
                    "#fc5a5a",
                    "#fc5a5a",
                    "#fc5a5a",
                    "#fc5a5a",
                    "#fc5a5a",
                    ],
                    borderColor: [
                    "#fc5a5a",
                    "#fc5a5a",
                    "#fc5a5a",
                    "#fc5a5a",
                    "#fc5a5a",
                    "#fc5a5a",
                    "#fc5a5a",
                    "#fc5a5a",
                    "#fc5a5a",
                    "#fc5a5a",
                    "#fc5a5a",
                    "#fc5a5a",
                    ],
                    borderWidth: 1,
                    fill: false,
                }
                ],
            };
            var deviceSalesOptions = {
                scales: {
                xAxes: [
                    {
                    stacked: false,
                    barPercentage: 0.5,
                    categoryPercentage: 0.4,
                    position: "bottom",
                    display: true,
                    gridLines: {
                        display: false,
                        drawBorder: false,
                        drawTicks: false,
                    },
                    ticks: {
                        display: true, //this will remove only the label
                        stepSize: 500,
                        fontColor: "#a7afb7",
                        fontSize: 14,
                        padding: 10,
                    },
                    },
                ],
                yAxes: [
                    {
                    stacked: false,
                    display: true,
                    gridLines: {
                        drawBorder: false,
                        display: true,
                        color: "#eef0fa",
                        drawTicks: false,
                        zeroLineColor: "rgba(90, 113, 208, 0)",
                    },
                    ticks: {
                        display: true,
                        beginAtZero: true,
                        stepSize: 15,
                        fontColor: "#a7afb7",
                        fontSize: 14,
                        callback: function (value, index, values) {
                        return value;
                        },
                    },
                    },
                ],
                },
                legend: {
                display: false,
                },
                legendCallback: function (chart) {
                var text = [];
                text.push('<ul class="' + chart.id + '-legend">');
                for (var i = 0; i < chart.data.datasets.length; i++) {
                    text.push(
                    '<li><span class="legend-box" style="background:' +
                        chart.data.datasets[i].backgroundColor[i] +
                        ';"></span><span class="legend-label text-dark">'
                    );
                    if (chart.data.datasets[i].label) {
                    text.push(chart.data.datasets[i].label);
                    }
                    text.push("</span></li>");
                }
                text.push("</ul>");
                return text.join("");
                },
                tooltips: {
                backgroundColor: "rgba(0, 0, 0, 1)",
                },
                plugins: {
                datalabels: {
                    display: false,
                    align: "center",
                    anchor: "center",
                },
                },
            };
            var barChartCanvas = $("#device-sales").get(0).getContext("2d");
            // This will get the first returned node in the jQuery collection.
            var barChart = new Chart(barChartCanvas, {
                type: "bar",
                data: deviceSalesData,
                options: deviceSalesOptions,
            });
            document.getElementById("device-sales-legend").innerHTML =
                barChart.generateLegend();
        }
    })(jQuery);
</script>
@stop