@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')

<div class="row">

    {{-- Welcome --}}
    <div class="col-lg-4">
        <div class="card card-transparent card-block card-stretch card-height border-none">
            <div class="card-body p-0 mt-lg-2 mt-0">

                <h3 class="mb-3">
                    <h3 class="mb-3"> Hi {{ auth()->user()->user_name ?? 'User' }}, Good Morning</h3>,
              

                <p class="mb-0 mr-4">
                    Your dashboard gives you views of key performance or business process.
                </p>

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


    {{-- Summary Cards --}}
    <div class="col-lg-8">

        <div class="row">

            {{-- Total Orders --}}
            <div class="col-lg-4 col-md-6">
                <div class="card card-block card-stretch card-height">

                    <div class="card-body">

                        <div class="d-flex align-items-center mb-4 card-total-sale">

                            <div class="icon iq-icon-box-2 bg-info-light">
                                <img
                                    src="{{ asset('assets/images/product/1.png') }}"
                                    class="img-fluid"
                                    alt="Orders"
                                >
                            </div>

                            <div>

                                <p class="mb-2">
                                    Total Orders
                                </p>

                                <h4>
                                    {{ number_format($totalOrders) }}
                                </h4>

                            </div>

                        </div>

                        <div class="iq-progress-bar mt-2">

                            <span
                                class="bg-info iq-progress progress-1"
                                data-percent="{{ $ordersPercentage }}"
                                style="width: {{ $ordersPercentage }}%;">
                            </span>

                        </div>

                        <small class="text-muted">
                            {{ $ordersPercentage }}% of total orders
                        </small>

                    </div>

                </div>
            </div>


            {{-- Total Inventory --}}
            <div class="col-lg-4 col-md-6">
                <div class="card card-block card-stretch card-height">

                    <div class="card-body">

                        <div class="d-flex align-items-center mb-4 card-total-sale">

                            <div class="icon iq-icon-box-2 bg-success-light">
                                <img
                                    src="{{ asset('assets/images/product/3.png') }}"
                                    class="img-fluid"
                                    alt="Inventory"
                                >
                            </div>

                            <div>

                                <p class="mb-2">
                                    Total Inventory
                                </p>

                                <h4>
                                    {{ number_format($totalInventory) }}
                                </h4>

                            </div>

                        </div>

                        <div class="iq-progress-bar mt-2">

                            <span
                                class="bg-success iq-progress progress-1"
                                data-percent="{{ $inventoryPercentage }}"
                                style="width: {{ $inventoryPercentage }}%;">
                            </span>

                        </div>

                        <small class="text-muted">
                            {{ $inventoryPercentage }}% stock available
                        </small>

                    </div>

                </div>
            </div>

        </div>

    </div>


    {{-- Income / Expenses --}}
    <div class="col-lg-4">

        {{-- Income --}}
        <div class="card card-block card-stretch card-height-helf">

            <div class="card-body">

                <div class="d-flex align-items-top justify-content-between">

                    <div>

                        <p class="mb-0">
                            Income
                        </p>

                        <h5>
                            {{ number_format($totalIncome, 2) }} PKR
                        </h5>

                    </div>

                    <div class="card-header-toolbar d-flex align-items-center">

                        <div class="dropdown">

                            <span
                                class="dropdown-toggle dropdown-bg btn"
                                data-toggle="dropdown"
                            >
                                {{ $periodLabel }}

                                <i class="ri-arrow-down-s-line ml-1"></i>
                            </span>

                            <div class="dropdown-menu dropdown-menu-right shadow-none">

                                <a
                                    class="dropdown-item"
                                    href="{{ route('dashboard', ['period' => 'year']) }}"
                                >
                                    This Year
                                </a>

                                <a
                                    class="dropdown-item"
                                    href="{{ route('dashboard', ['period' => 'month']) }}"
                                >
                                    This Month
                                </a>

                                <a
                                    class="dropdown-item"
                                    href="{{ route('dashboard', ['period' => 'week']) }}"
                                >
                                    This Week
                                </a>

                            </div>

                        </div>

                    </div>

                </div>

                <div id="layout1-chart-3" class="layout-chart-1"></div>

            </div>

        </div>


        {{-- Expenses --}}
        <div class="card card-block card-stretch card-height-helf">

            <div class="card-body">

                <div class="d-flex align-items-top justify-content-between">

                    <div>

                        <p class="mb-0">
                            Expenses
                        </p>

                        <h5>
                            {{ number_format($totalExpenses, 2) }} PKR
                        </h5>

                    </div>

                    <div class="card-header-toolbar d-flex align-items-center">

                        <div class="dropdown">

                            <span
                                class="dropdown-toggle dropdown-bg btn"
                                data-toggle="dropdown"
                            >
                                {{ $periodLabel }}

                                <i class="ri-arrow-down-s-line ml-1"></i>
                            </span>

                            <div class="dropdown-menu dropdown-menu-right shadow-none">

                                <a
                                    class="dropdown-item"
                                    href="{{ route('dashboard', ['period' => 'year']) }}"
                                >
                                    This Year
                                </a>

                                <a
                                    class="dropdown-item"
                                    href="{{ route('dashboard', ['period' => 'month']) }}"
                                >
                                    This Month
                                </a>

                                <a
                                    class="dropdown-item"
                                    href="{{ route('dashboard', ['period' => 'week']) }}"
                                >
                                    This Week
                                </a>

                            </div>

                        </div>

                    </div>

                </div>

                <div id="layout1-chart-4" class="layout-chart-2"></div>

            </div>

        </div>

    </div>


    {{-- Order Summary --}}
    <div class="col-lg-8">

        <div class="card card-block card-stretch card-height">

            <div class="card-header d-flex justify-content-between">

                <div class="header-title">

                    <h4 class="card-title">
                        Order Summary
                    </h4>

                </div>


                <div class="card-header-toolbar d-flex align-items-center">

                    <div class="dropdown">

                        <span
                            class="dropdown-toggle dropdown-bg btn"
                            data-toggle="dropdown"
                        >
                            {{ $periodLabel }}

                            <i class="ri-arrow-down-s-line ml-1"></i>
                        </span>

                        <div class="dropdown-menu dropdown-menu-right shadow-none">

                            <a
                                class="dropdown-item"
                                href="{{ route('dashboard', ['period' => 'year']) }}"
                            >
                                This Year
                            </a>

                            <a
                                class="dropdown-item"
                                href="{{ route('dashboard', ['period' => 'month']) }}"
                            >
                                This Month
                            </a>

                            <a
                                class="dropdown-item"
                                href="{{ route('dashboard', ['period' => 'week']) }}"
                            >
                                This Week
                            </a>

                        </div>

                    </div>

                </div>

            </div>


            <div class="card-body">

                <div class="d-flex flex-wrap align-items-center mt-2">

                    {{-- Average Order --}}
                    <div class="d-flex align-items-center progress-order-left">

                        <div
                            class="progress progress-round m-0 orange conversation-bar"
                            data-percent="{{ $averageOrderPercentage }}"
                        >

                            <span class="progress-left">
                                <span class="progress-bar"></span>
                            </span>

                            <span class="progress-right">
                                <span class="progress-bar"></span>
                            </span>

                            <div class="progress-value text-secondary">
                                {{ $averageOrderPercentage }}%
                            </div>

                        </div>


                        <div class="progress-value ml-3 pr-5 border-right">

                            <h5>
                                {{ number_format($averageOrder, 2) }} PKR
                            </h5>

                            <p class="mb-0">
                                Average Orders
                            </p>

                        </div>

                    </div>


                    {{-- Top Order --}}
                    <div class="d-flex align-items-center ml-5 progress-order-right">

                        <div
                            class="progress progress-round m-0 primary conversation-bar"
                            data-percent="{{ $topOrderPercentage }}"
                        >

                            <span class="progress-left">
                                <span class="progress-bar"></span>
                            </span>

                            <span class="progress-right">
                                <span class="progress-bar"></span>
                            </span>

                            <div class="progress-value text-primary">
                                {{ $topOrderPercentage }}%
                            </div>

                        </div>


                        <div class="progress-value ml-3">

                            <h5>
                                {{ number_format($topOrder, 2) }} PKR
                            </h5>

                            <p class="mb-0">
                                Top Order
                            </p>

                        </div>

                    </div>

                </div>

            </div>


            {{-- Income/Expense Chart --}}
            <div class="card-body pt-0">

                <div id="layout1-chart-5"></div>

            </div>

        </div>

    </div>

</div>


{{-- Chart Data --}}
<script>

    window.dashboardChartLabels = @json($chartLabels);

    window.dashboardIncome = @json($incomeChart);

    window.dashboardExpenses = @json($expenseChart);

</script>


{{-- Dashboard Charts --}}
<script>

document.addEventListener('DOMContentLoaded', function () {

    /*
    |--------------------------------------------------------------------------
    | Income Chart
    |--------------------------------------------------------------------------
    */

    if (typeof ApexCharts !== 'undefined') {

        var incomeChartElement = document.querySelector('#layout1-chart-3');

        if (incomeChartElement) {

            new ApexCharts(incomeChartElement, {

                chart: {
                    type: 'area',
                    height: 120,
                    sparkline: {
                        enabled: true
                    }
                },

                series: [{
                    name: 'Income',
                    data: window.dashboardIncome
                }],

                stroke: {
                    curve: 'smooth',
                    width: 2
                },

                tooltip: {
                    y: {
                        formatter: function (value) {
                            return value.toLocaleString() + ' PKR';
                        }
                    }
                }

            }).render();

        }


        /*
        |--------------------------------------------------------------------------
        | Expense Chart
        |--------------------------------------------------------------------------
        */

        var expenseChartElement = document.querySelector('#layout1-chart-4');

        if (expenseChartElement) {

            new ApexCharts(expenseChartElement, {

                chart: {
                    type: 'area',
                    height: 120,
                    sparkline: {
                        enabled: true
                    }
                },

                series: [{
                    name: 'Expenses',
                    data: window.dashboardExpenses
                }],

                stroke: {
                    curve: 'smooth',
                    width: 2
                },

                tooltip: {
                    y: {
                        formatter: function (value) {
                            return value.toLocaleString() + ' PKR';
                        }
                    }
                }

            }).render();

        }


        /*
        |--------------------------------------------------------------------------
        | Order Summary Chart
        |--------------------------------------------------------------------------
        */

        var orderChartElement = document.querySelector('#layout1-chart-5');

        if (orderChartElement) {

            new ApexCharts(orderChartElement, {

                chart: {
                    type: 'line',
                    height: 180,
                    toolbar: {
                        show: false
                    }
                },

                series: [
                    {
                        name: 'Income',
                        data: window.dashboardIncome
                    },
                    {
                        name: 'Expenses',
                        data: window.dashboardExpenses
                    }
                ],

                xaxis: {
                    categories: window.dashboardChartLabels
                },

                stroke: {
                    curve: 'smooth',
                    width: 2
                },

                tooltip: {
                    y: {
                        formatter: function (value) {
                            return value.toLocaleString() + ' PKR';
                        }
                    }
                }

            }).render();

        }

    }

});

</script>

@endsection