@php(
    $headerOption = [
        'title' => 'Welcome to Dashboard',
        'noCardView' => true,
    ]
)
@extends('admin.layouts.layout', $headerOption)

@section('content')
    <div class="row dashbrd">
        <div class="col-xl-12">
            <div class="row">
                <div class="col-lg-3">
                    <div class="card mini-stats-wid" style="background: #fec5bb;">
                        <div class="card-body d-flex align-items-center">
                            <div class="d-flex  w-100">
                                <div class="flex-grow-1">
                                    <p class="text-muted fw-medium font-size-15vw text-success">Total Customer</p>
                                    <h4 class="mb-0 cfw"><a href="{{ route('customers.index') }}">{{ $total_customers }}</a>
                                    </h4>
                                </div>

                                <div class="flex-shrink-0 align-self-center">
                                    <div class="avatar-sm ml-auto">
                                        <div class="avatar-title bg-light rounded-circle text-primary font-size-20">
                                            <i class="bx bx-user font-size-45"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="card mini-stats-wid" style="background: #fbc4ab;">
                        <div class="card-body d-flex align-items-center">
                            <div class="d-flex w-100">
                                <div class="flex-grow-1">
                                    <p class="text-muted fw-medium font-size-15vw text-success">Staff</p>
                                    <h4 class="mb-0 cfw"><a
                                            href="{{ route('users.index') . '?filter=true&role=staff' }}">{{ $total_staff }}</a>
                                    </h4>
                                </div>

                                <div class="flex-shrink-0 align-self-center">
                                    <div class="avatar-sm ml-auto">
                                        <div class="avatar-title bg-light rounded-circle text-primary font-size-20">
                                            <i class="bx bx-calendar-event font-size-45"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3">

                    <div class="card mini-stats-wid" style="background: #ffdab9;">
                        <div class="card-body d-flex align-items-center">
                            <div class="d-flex  w-100">
                                <div class="flex-grow-1">
                                    <p class="text-muted fw-medium font-size-15vw text-success">Floor Manager</p>
                                    <h4 class="mb-0 cfw"><a
                                            href="{{ route('users.index') . '?filter=true&role=floor-manager' }}">{{ $floor_manager }}</a>
                                    </h4>
                                </div>

                                <div class="flex-shrink-0 align-self-center">
                                    <div class="avatar-sm ml-auto">
                                        <div class="avatar-title bg-light rounded-circle text-primary font-size-20">
                                            <i class="bx bx-play-circle font-size-45"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="card mini-stats-wid" style="background: #f8ad9d;">
                        <div class="card-body d-flex align-items-center">
                            <div class="d-flex  w-100">
                                <div class="flex-grow-1">
                                    <p class="text-muted fw-medium font-size-15vw text-success">Today Total Drink Served</p>
                                    <h4 class="mb-0 cfw">{{ $today_drinks_served }}</h4>
                                </div>

                                <div class="flex-shrink-0 align-self-center">
                                    <div class="avatar-sm ml-auto">
                                        <div class="avatar-title bg-light rounded-circle text-primary font-size-20">
                                            <i class="fas fa-glass-cheers font-size-45"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end row -->
            <div class="row">
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title mb-4">Today Casino Statistics</h4>

                            <div id="column-charts" dir="ltr"></div>

                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title mb-4">Last 7 Days Casino Customer Statistics</h4>

                            <div class="row text-center">
                                {{-- <div class="col-4">
                                    <h5 class="mb-0">2541</h5>
                                    <p class="text-muted text-truncate">Customers</p>
                                </div> --}}
                            </div>

                            <canvas id="bar" height="380"></canvas>

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

        </div>
        <!-- end col -->
        <div class="col-xl-6 mx-auto d-none">
            <div class="card">
                <div>
                    <div class="row">
                        <div class="col-lg-6 col-sm-6">
                            <div class="p-4">
                                <h5 class="text-primary">Table Mountain Casino Resort</h5>
                                <p>Enjoy yours drinks</p>

                                <div class="text-muted">
                                    <p class="mb-1"><i class="mdi mdi-circle-medium align-middle text-primary mr-1"></i>
                                        If several languages coalesce</p>
                                    <p class="mb-1"><i class="mdi mdi-circle-medium align-middle text-primary mr-1"></i>
                                        Sed ut perspiciatis unde</p>
                                    <p class="mb-0"><i class="mdi mdi-circle-medium align-middle text-primary mr-1"></i>
                                        It would be necessary</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 col-sm-6 align-self-center">
                            <div>
                                <img src="/assets/images/1200x600wa.png" alt="" class="img-fluid d-block">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    @push('page_script')
        <script>
            var columnChartWidth = $("#column-charts").width(),
                container = document.getElementById("column-charts"),
                /* data = {
                    categories: ["Jun, 2019", "Jul, 2019", "Aug, 2019", "Sep, 2019", "Oct, 2019", "Nov, 2019", "Dec, 2019"],
                    series: [
                        { name: "Drinks", data: [5e3, 3e3, 5e3, 7e3, 6e3, 4e3, 1e3] },
                        { name: "Customers", data: [8e3, 1e3, 7e3, 2e3, 6e3, 3e3, 5e3] }
                    ],
                }, */
                data = @json($column_chart),
                options = {
                    chart: {
                        width: columnChartWidth,
                        height: 380,
                        title: "",
                        format: "20"
                    },
                    yAxis: {
                        title: ""
                    },
                    legend: {
                        align: "top"
                    }
                },
                theme = {
                    chart: {
                        background: {
                            color: "#fff",
                            opacity: 0
                        }
                    },
                    title: {
                        color: "#8791af"
                    },
                    xAxis: {
                        title: {
                            color: "#8791af"
                        },
                        label: {
                            color: "#8791af"
                        }
                    },
                    yAxis: {
                        title: {
                            color: "#8791af"
                        },
                        label: {
                            color: "#8791af"
                        }
                    },
                    plot: {
                        lineColor: "rgba(166, 176, 207, 0.1)"
                    },
                    legend: {
                        label: {
                            color: "#8791af"
                        }
                    },
                    series: {
                        colors: ["#833227", "#f7ba9a"]
                    },
                };
            tui.chart.registerTheme("myTheme", theme), (options.theme = "myTheme");
            var columnChart = tui.chart.columnChart(container, data, options);
            $(window).resize(function() {
                (columnChartWidth = $("#column-charts").width()), columnChart.resize({
                    width: width,
                    height: 350
                });
            });


            ////

            !(function(l) {
                "use strict";

                function r() {}
                (r.prototype.respChart = function(r, o, e, a) {
                    (Chart.defaults.global.defaultFontColor = "#8791af"), (Chart.defaults.scale.gridLines.color =
                        "rgba(166, 176, 207, 0.1)");
                    var t = r.get(0).getContext("2d"),
                        n = l(r).parent();

                    function i() {
                        r.attr("width", l(n).width());
                        switch (o) {
                            case "Bar":
                                new Chart(t, {
                                    type: "bar",
                                    data: e,
                                    options: a
                                });
                                break;
                        }
                    }
                    l(window).resize(i), i();
                }),
                (r.prototype.init = function() {

                    this.respChart(
                        l("#bar"),
                        "Bar", {
                            labels: @json($bar_chart['last_seven_days']),
                            datasets: [{
                                label: "Customers",
                                backgroundColor: "#495057",
                                borderColor: "#52c38f",
                                borderWidth: 1,
                                hoverBackgroundColor: "#f7ba9a",
                                hoverBorderColor: "#f7ba9a",
                                data: @json($bar_chart['customers_count']),
                            }, ],
                        }, {
                            scales: {
                                xAxes: [{
                                    barPercentage: 0.4
                                }]
                            }
                        }
                    );

                }),
                (l.ChartJs = new r()),
                (l.ChartJs.Constructor = r);
            })(window.jQuery),
            (function() {
                "use strict";
                window.jQuery.ChartJs.init();
            })();
        </script>
    @endpush
@endsection