@extends('layouts.master')

@section('title', env('APP_NAME'))

@section('content')

    <!--begin::Toolbar-->
    <div class="toolbar mb-n1 pt-3 mb-lg-n3 pt-lg-6" id="kt_toolbar">
        <!--begin::Container-->
        <div
            id="kt_toolbar_container"
            class="container-xxl d-flex flex-stack flex-wrap gap-2"
        >
            <!--begin::Page title-->
            <div
                class="page-title d-flex flex-column align-items-start me-3 py-2 py-lg-0 gap-2"
            >
                <!--begin::Title-->
                <h1 class="d-flex text-dark fw-bold m-0 fs-3">Reports</h1>
                <!--end::Title-->

                <!--begin::Breadcrumb-->
                <ul
                    class="breadcrumb breadcrumb-dot fw-semibold text-gray-600 fs-7"
                >
                    <!--begin::Item-->
                    <li class="breadcrumb-item text-gray-600">
                        <a
                            href="{{url("/")}}"
                            class="text-gray-600 text-hover-primary"
                        >
                            Home
                        </a>
                    </li>
                    <!--end::Item-->
                    <!--begin::Item-->
                    <li class="breadcrumb-item text-gray-600">Dashboard</li>
                    <!--end::Item-->
                    <!--begin::Item-->
                </ul>
                <!--end::Breadcrumb-->
            </div>
            <!--end::Page title-->
            <!--begin::Actions-->
            <div class="d-flex align-items-center">
                <!--begin::Daterange-->

                <a
                    href="#"
                    class="btn btn-flex bg-body h-35px h-lg-40px px-5"
                    id="date"
                    data-bs-toggle="tooltip"
                    data-bs-dismiss="click"
                    data-bs-trigger="hover"
                    title="Select Date"
                >
        <span class="me-4">
          <span
              class="text-muted fw-semibold me-1"
              id="kt_dashboard_daterangepicker_title"
          >Select Date:</span
          >
          <span
              class="text-primary fw-bold"
              id="dateText"
          >
            Apr 23
          </span>
        </span>

                    <i class="ki-duotone ki-down fs-4 m-0"></i>
                </a>
                <!--end::Daterange-->
            </div>
            <!--end::Actions-->
        </div>
        <!--end::Container-->
    </div>
    <!--end::Toolbar-->

    <!--begin::Container-->
    <div id="kt_content_container" class="d-flex flex-column-fluid align-items-start  container-xxl ">
        <!--begin::Post-->
        <div class="content flex-row-fluid" id="kt_content">
            <!--begin::Row-->
            <div class="row g-5 g-xl-10 mb-xl-10">
                <div class="col-xxl-4 col-md-4 mb-xxl-0">
                    <!--begin::Mixed Widget 1-->
                    <div class="card h-md-100">
                        <!--begin::Body-->
                        <div class="card-body p-0">
                            <!--begin::Header-->
                            <div class="px-9 pt-7 card-rounded h-275px w-100 bg-primary">
                                <!--begin::Heading-->
                                <div class="d-flex flex-stack">
                                    <h3 class="m-0 text-white fw-bold fs-3"><span class="thisMonth"></span> Summary</h3>

                                    <div class="ms-1">
                                        <!--begin::Menu-->
                                        <button type="button"
                                                class="btn btn-sm btn-icon btn-color-white btn-active-white border-0 me-n3"
                                                data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                                            <i class="ki-duotone ki-category fs-6"><span class="path1"></span><span
                                                    class="path2"></span><span class="path3"></span><span class="path4"></span></i>
                                        </button>
                                        <!--end::Menu-->
                                    </div>
                                </div>
                                <!--end::Heading-->

                                <!--begin::Balance-->
                                <div class="d-flex text-center flex-column text-white pt-8">
                                    <span class="fw-semibold fs-7">Net Profit</span>
                                    <span class="fw-bold fs-2x pt-1">₦<span class="netProfit">0.00</span></span>
                                </div>
                                <!--end::Balance-->
                            </div>
                            <!--end::Header-->

                            <!--begin::Items-->
                            <div class="bg-body shadow-sm card-rounded mx-9 mb-9 px-6 py-9 position-relative z-index-1"
                                 style="margin-top: -100px">
                                <!--begin::Item-->
                                <div class="d-flex align-items-center mb-6">
                                    <!--begin::Symbol-->
                                    <div class="symbol symbol-45px w-40px me-5">
                                                    <span class="symbol-label bg-lighten">
                                                        <i class="ki-duotone ki-graph-up fs-1"><span class="path1"></span><span
                                                                class="path2"></span><span class="path3"></span><span class="path4"></span><span
                                                                class="path5"></span><span class="path6"></span></i>
                                                    </span>
                                    </div>
                                    <!--end::Symbol-->

                                    <!--begin::Description-->
                                    <div class="d-flex align-items-center flex-wrap w-100">
                                        <!--begin::Title-->
                                        <div class="mb-1 pe-3 flex-grow-1">
                                            <a href="#" class="fs-7 text-gray-800 text-hover-primary fw-bold">Total Sales</a>
                                        </div>
                                        <!--end::Title-->

                                        <!--begin::Label-->
                                        <div class="d-flex align-items-center totalSales">
                                            <div class="fw-bold fs-7 text-gray-800 pe-1">₦0.00</div>

                                            <i class="ki-duotone ki-arrow-right-left fs-5 text-dark ms-1"><span class="path1"></span><span
                                                    class="path2"></span></i>
                                        </div>
                                        <!--end::Label-->
                                    </div>
                                    <!--end::Description-->
                                </div>
                                <!--end::Item-->
                                <!--begin::Item-->
                                <div class="d-flex align-items-center mb-6">
                                    <!--begin::Symbol-->
                                    <div class="symbol symbol-45px w-40px me-5">
                                        <span class="symbol-label bg-lighten">
                                            <i class="ki-duotone ki-graph-up fs-1"><span class="path1"></span><span
                                                    class="path2"></span><span class="path3"></span><span class="path4"></span><span
                                                    class="path5"></span><span class="path6"></span></i>
                                        </span>
                                    </div>
                                    <!--end::Symbol-->

                                    <!--begin::Description-->
                                    <div class="d-flex align-items-center flex-wrap w-100">
                                        <!--begin::Title-->
                                        <div class="mb-1 pe-3 flex-grow-1">
                                            <a href="#" class="fs-7 text-gray-800 text-hover-primary fw-bold">Paid Sales</a>
                                            <div class="text-gray-400 fw-semibold fs-7">Income</div>
                                        </div>
                                        <!--end::Title-->

                                        <!--begin::Label-->
                                        <div class="d-flex align-items-center paidSales">
                                            <div class="fw-bold fs-7 text-gray-800 pe-1">₦0.00</div>

                                            <i class="ki-duotone ki-arrow-right-left fs-5 text-dark ms-1"><span class="path1"></span><span
                                                    class="path2"></span></i>
                                        </div>
                                        <!--end::Label-->
                                    </div>
                                    <!--end::Description-->
                                </div>
                                <!--end::Item-->
                                <!--begin::Item-->
                                <div class="d-flex align-items-center mb-6">
                                    <!--begin::Symbol-->
                                    <div class="symbol symbol-45px w-40px me-5">
                                        <span class="symbol-label bg-lighten">
                                            <i class="ki-duotone ki-graph-up fs-1"><span class="path1"></span><span
                                                    class="path2"></span><span class="path3"></span><span class="path4"></span><span
                                                    class="path5"></span><span class="path6"></span></i>
                                        </span>
                                    </div>
                                    <!--end::Symbol-->

                                    <!--begin::Description-->
                                    <div class="d-flex align-items-center flex-wrap w-100">
                                        <!--begin::Title-->
                                        <div class="mb-1 pe-3 flex-grow-1">
                                            <a href="#" class="fs-7 text-gray-800 text-hover-primary fw-bold">Indebt Sales</a>
                                            <div class="text-gray-400 fw-semibold fs-7">Expense</div>
                                        </div>
                                        <!--end::Title-->

                                        <!--begin::Label-->
                                        <div class="d-flex align-items-center indebtSales">
                                            <div class="fw-bold fs-7 text-gray-800 pe-1">₦0.00</div>

                                            <i class="ki-duotone ki-arrow-right-left fs-5 text-dark ms-1"><span class="path1"></span><span
                                                    class="path2"></span></i>
                                        </div>
                                        <!--end::Label-->
                                    </div>
                                    <!--end::Description-->
                                </div>
                                <!--end::Item-->
                                <!--begin::Item-->
                                <div class="d-flex align-items-center mb-6">
                                    <!--begin::Symbol-->
                                    <div class="symbol symbol-45px w-40px me-5">
                                        <span class="symbol-label bg-lighten">
                                            <i class="ki-duotone ki-graph-up fs-1"><span class="path1"></span><span
                                                    class="path2"></span><span class="path3"></span><span class="path4"></span><span
                                                    class="path5"></span><span class="path6"></span></i>
                                        </span>
                                    </div>
                                    <!--end::Symbol-->

                                    <!--begin::Description-->
                                    <div class="d-flex align-items-center flex-wrap w-100">
                                        <!--begin::Title-->
                                        <div class="mb-1 pe-3 flex-grow-1">
                                            <a href="#" class="fs-7 text-gray-800 text-hover-primary fw-bold">Total Purchases</a>
                                        </div>
                                        <!--end::Title-->

                                        <!--begin::Label-->
                                        <div class="d-flex align-items-center totalPurchases">
                                            <div class="fw-bold fs-7 text-gray-800 pe-1">₦0.00</div>

                                            <i class="ki-duotone ki-arrow-right-left fs-5 text-dark ms-1"><span class="path1"></span><span
                                                    class="path2"></span></i>
                                        </div>
                                        <!--end::Label-->
                                    </div>
                                    <!--end::Description-->
                                </div>
                                <!--end::Item-->
                                <!--begin::Item-->
                                <div class="d-flex align-items-center mb-6">
                                    <!--begin::Symbol-->
                                    <div class="symbol symbol-45px w-40px me-5">
                                        <span class="symbol-label bg-lighten">
                                            <i class="ki-duotone ki-graph-up fs-1"><span class="path1"></span><span
                                                    class="path2"></span><span class="path3"></span><span class="path4"></span><span
                                                    class="path5"></span><span class="path6"></span></i>
                                        </span>
                                    </div>
                                    <!--end::Symbol-->

                                    <!--begin::Description-->
                                    <div class="d-flex align-items-center flex-wrap w-100">
                                        <!--begin::Title-->
                                        <div class="mb-1 pe-3 flex-grow-1">
                                            <a href="#" class="fs-7 text-gray-800 text-hover-primary fw-bold">Paid Purchases</a>
                                            <div class="text-gray-400 fw-semibold fs-7">Expense</div>
                                        </div>
                                        <!--end::Title-->

                                        <!--begin::Label-->
                                        <div class="d-flex align-items-center paidPurchases">
                                            <div class="fw-bold fs-7 text-gray-800 pe-1">₦0.00</div>

                                            <i class="ki-duotone ki-arrow-right-left fs-5 text-dark ms-1"><span class="path1"></span><span
                                                    class="path2"></span></i>
                                        </div>
                                        <!--end::Label-->
                                    </div>
                                    <!--end::Description-->
                                </div>
                                <!--end::Item-->
                                <!--begin::Item-->
                                <div class="d-flex align-items-center mb-6">
                                    <!--begin::Symbol-->
                                    <div class="symbol symbol-45px w-40px me-5">
                                        <span class="symbol-label bg-lighten">
                                            <i class="ki-duotone ki-graph-up fs-1"><span class="path1"></span><span
                                                    class="path2"></span><span class="path3"></span><span class="path4"></span><span
                                                    class="path5"></span><span class="path6"></span></i>
                                        </span>
                                    </div>
                                    <!--end::Symbol-->

                                    <!--begin::Description-->
                                    <div class="d-flex align-items-center flex-wrap w-100">
                                        <!--begin::Title-->
                                        <div class="mb-1 pe-3 flex-grow-1">
                                            <a href="#" class="fs-7 text-gray-800 text-hover-primary fw-bold">Indebt Purchases</a>
                                            <div class="text-gray-400 fw-semibold fs-7">Income</div>
                                        </div>
                                        <!--end::Title-->

                                        <!--begin::Label-->
                                        <div class="d-flex align-items-center indebtPurchases">
                                            <div class="fw-bold fs-7 text-gray-800 pe-1">₦0.00</div>

                                            <i class="ki-duotone ki-arrow-right-left fs-5 text-dark ms-1"><span class="path1"></span><span
                                                    class="path2"></span></i>
                                        </div>
                                        <!--end::Label-->
                                    </div>
                                    <!--end::Description-->
                                </div>
                                <!--end::Item-->
                                <!--begin::Item-->
                                <div class="d-flex align-items-center ">
                                    <!--begin::Symbol-->
                                    <div class="symbol symbol-45px w-40px me-5">
                                        <span class="symbol-label bg-lighten">
                                            <i class="ki-duotone ki-graph-up fs-1"><span class="path1"></span><span
                                                    class="path2"></span><span class="path3"></span><span class="path4"></span><span
                                                    class="path5"></span><span class="path6"></span></i>
                                        </span>
                                    </div>
                                    <!--end::Symbol-->

                                    <!--begin::Description-->
                                    <div class="d-flex align-items-center flex-wrap w-100">
                                        <!--begin::Title-->
                                        <div class="mb-1 pe-3 flex-grow-1">
                                            <a href="#" class="fs-7 text-gray-800 text-hover-primary fw-bold">Total Waste</a>
                                            <div class="text-gray-400 fw-semibold fs-7">Expense</div>
                                        </div>
                                        <!--end::Title-->

                                        <!--begin::Label-->
                                        <div class="d-flex align-items-center totalWastes">
                                            <div class="fw-bold fs-7 text-gray-800 pe-1">₦0.00</div>

                                            <i class="ki-duotone ki-arrow-right-left fs-5 text-dark ms-1"><span class="path1"></span><span
                                                    class="path2"></span></i>
                                        </div>
                                        <!--end::Label-->
                                    </div>
                                    <!--end::Description-->
                                </div>
                                <!--end::Item-->

                            </div>
                            <!--end::Items-->
                        </div>
                        <!--end::Body-->
                    </div>
                    <!--end::Mixed Widget 1-->
                </div>
                <!--begin::Col-->
                <div class="col-lg-12 col-xl-12 col-md-8 col-xxl-8 mb-5 mb-xl-0">
                    <!--begin::Chart widget 3-->
                    <div class="card card-flush overflow-hidden h-md-100">
                        <!--begin::Header-->
                        <div class="card-header py-5">
                            <!--begin::Title-->
                            <h3 class="card-title align-items-start flex-column">
                                <span class="card-label fw-bold text-dark">Sales Summary</span>
                                <span class="text-gray-400 mt-1 fw-semibold fs-6">Total Sales Analysis</span>
                            </h3>
                            <!--end::Title-->

                            <!--begin::Toolbar-->
                            <div class="card-toolbar">
                                <!--begin::Menu-->
                                <button
                                    class="btn btn-icon btn-color-gray-400 btn-active-color-primary justify-content-end"
                                    data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end"
                                    data-kt-menu-overflow="true">

                                    <i class="ki-duotone ki-dots-square fs-1"><span
                                            class="path1"></span><span class="path2"></span><span
                                            class="path3"></span><span class="path4"></span></i>
                                </button>


                                <!--end::Menu-->
                            </div>
                            <!--end::Toolbar-->
                        </div>
                        <!--end::Header-->

                        <!--begin::Card body-->
                        <div class="card-body d-flex justify-content-between flex-column pb-1 px-0">
                            <!--begin::Statistics-->
                            <div class="px-9 mb-2">
                                <!--begin::Statistics-->
                                <div class="d-flex mb-0">
                                    <span class="fs-4 fw-semibold text-gray-400 me-1">₦</span>
                                    <span class="fs-2hx fw-bold text-gray-800 me-2 lh-1 ls-n2 salesAnalysisAmount">0.00</span>
                                </div>
                                <!--end::Statistics-->
                            </div>
                            <!--end::Statistics-->

                            <!--begin::Chart-->
                            <canvas id="salesChart" class="mh-400px px-9 pb-6"></canvas>
                            <!--end::Chart-->
                        </div>
                        <!--end::Card body-->
                    </div>
                    <!--end::Chart widget 3-->
                </div>
                <!--end::Col-->
            </div>
            <!--end::Row-->

            <!--begin::Row-->
            <div class="row gy-5 g-xl-10">
                <div class="col-xl-4 mb-xl-10">
                    <div class="card card-flush h-xl-100">
                        <!--begin::Header-->
                        <div class="card-header pt-7">
                            <!--begin::Title-->
                            <h3 class="card-title align-items-start flex-column">
                                <span class="card-label fw-bold text-gray-800">High Sale Items (QTY)</span>
                                <!-- <span class="text-gray-400 mt-1 fw-semibold fs-6">Quantity </span> -->
                            </h3>
                        </div>
                        <!--end::Header-->
                        <!--begin::Separator-->
                        <div class="separator separator-dashed my-3"></div>
                        <!--end::Separator-->
                        <!--begin::Body-->
                        <div class="card-body pt-2 d-flex align-items-end">
                            <!--begin::Wrapper-->
                            <div class="w-100">

                                <div class="highSaleItemsQty">

                                </div>
                                <div class="card-body saleItemsSummaryLoader">
                                    <div class="mt-0 d-flex flex-column align-items-center justify-content-center">
                                        <button type="button" class="btn btn-dark me-0 ">
                                            <span>
                                                Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                            </span>
                                        </button>
                                    </div>
                                </div>
                                <!--begin::Separator-->
                                <div class="separator separator-dashed my-3"></div>
                                <!--end::Separator-->
                                <div class="text-center pt-3 d-1">
                                    <a href="{{url("sales_report")}}" class="text-primary opacity-75-hover fs-6 fw-bold">
                                        View Sales Report

                                        <i class="ki-duotone ki-arrow-right fs-9 text-primary"><span class="path1"></span><span
                                                class="path2"></span></i>
                                    </a>
                                </div>
                                <!--end::Link-->
                            </div>
                            <!--end::Wrapper-->
                        </div>
                        <!--end::Body-->
                    </div>
                </div>
                <div class="col-xl-4 mb-xl-10">
                    <div class="card card-flush h-xl-100">
                        <!--begin::Header-->
                        <div class="card-header pt-7">
                            <!--begin::Title-->
                            <h3 class="card-title align-items-start flex-column">
                                <span class="card-label fw-bold text-gray-800">Best Sale Items (AMT)</span>
                                <!-- <span class="text-gray-400 mt-1 fw-semibold fs-6">Quantity </span> -->
                            </h3>
                        </div>
                        <!--end::Header-->
                        <!--begin::Separator-->
                        <div class="separator separator-dashed my-3"></div>
                        <!--end::Separator-->
                        <!--begin::Body-->
                        <div class="card-body pt-2 d-flex align-items-end">
                            <!--begin::Wrapper-->
                            <div class="w-100">
                                <div class="bestSaleItemsAmt">

                                </div>
                                <div class="card-body saleItemsSummaryLoader">
                                    <div class="mt-0 d-flex flex-column align-items-center justify-content-center">
                                        <button type="button" class="btn btn-dark me-0 ">
                                            <span>
                                                Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                            </span>
                                        </button>
                                    </div>
                                </div>

                                <!--begin::Separator-->
                                <div class="separator separator-dashed my-3"></div>
                                <!--end::Separator-->
                                <div class="text-center pt-3 d-1">
                                    <a href="{{url("sales_report")}}" class="text-primary opacity-75-hover fs-6 fw-bold">
                                        View Sales Report

                                        <i class="ki-duotone ki-arrow-right fs-9 text-primary"><span class="path1"></span><span
                                                class="path2"></span></i>
                                    </a>
                                </div>
                                <!--end::Link-->
                            </div>
                            <!--end::Wrapper-->
                        </div>
                        <!--end::Body-->
                    </div>
                </div>
                <div class="col-xl-4 mb-xl-10">
                    <div class="card card-flush h-xl-100">
                        <!--begin::Header-->
                        <div class="card-header pt-7">
                            <!--begin::Title-->
                            <h3 class="card-title align-items-start flex-column">
                                <span class="card-label fw-bold text-gray-800">Low Sale Items (AMT)</span>
                                <!-- <span class="text-gray-400 mt-1 fw-semibold fs-6">Quantity </span> -->
                            </h3>
                        </div>
                        <!--end::Header-->
                        <!--begin::Separator-->
                        <div class="separator separator-dashed my-3"></div>
                        <!--end::Separator-->
                        <!--begin::Body-->
                        <div class="card-body pt-2 d-flex align-items-end">
                            <!--begin::Wrapper-->
                            <div class="w-100">
                                <div class="lowSaleItemsAmt">

                                </div>
                                <div class="card-body saleItemsSummaryLoader">
                                    <div class="mt-0 d-flex flex-column align-items-center justify-content-center">
                                        <button type="button" class="btn btn-dark me-0 ">
                                            <span>
                                                Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                            </span>
                                        </button>
                                    </div>
                                </div>
                                <!--begin::Separator-->
                                <div class="separator separator-dashed my-3"></div>
                                <!--end::Separator-->
                                <div class="text-center pt-3 d-1">
                                    <a href="{{url("sales_report")}}" class="text-primary opacity-75-hover fs-6 fw-bold">
                                        View Sales Report

                                        <i class="ki-duotone ki-arrow-right fs-9 text-primary"><span class="path1"></span><span
                                                class="path2"></span></i>
                                    </a>
                                </div>
                                <!--end::Link-->
                            </div>
                            <!--end::Wrapper-->
                        </div>
                        <!--end::Body-->
                    </div>
                </div>
            </div>
            <!--end::Row-->

            <!--begin::Row-->
            <div class="row gy-5 g-xl-10">
                <div class="col-xl-12 mb-xl-10">
                    <div class="card card-flush h-xl-100">
                        <!--begin::Header-->
                        <div class="card-header pt-7">
                            <!--begin::Title-->
                            <h3 class="card-title align-items-start flex-column">
                                <span class="card-label fw-bold text-gray-800">Gross Revenue</span>
                                <!-- <span class="text-gray-400 mt-1 fw-semibold fs-6">Quantity </span> -->
                                <div class="d-flex mt-7 mb-7">
                                    <span class="fs-4 fw-semibold text-gray-400 me-1">₦</span>
                                    <span class="fs-2hx fw-bold text-gray-800 me-2 lh-1 ls-n2 netProfitAnalysis">0.00</span>
                                </div>
                            </h3>
                        </div>
                        <!--end::Header-->

                        <!--begin::Body-->
                        <div class="card-body d-flex align-items-end">
                            <!--begin::Wrapper-->
                            <div class="w-100">
                                <canvas id="netProfitChart" class="mh-400px"></canvas>
                            </div>
                            <!--end::Wrapper-->
                        </div>
                        <!--end::Body-->
                    </div>
                </div>
                <!--end::Col-->
            </div>
            <!--end::Row-->
        </div>
        <!--end::Post-->
    </div>
    <!--end::Container-->

@endsection

@section("footer-links")

    <script>
        $(document).ready(function() {

            function onlineSync() {
                $.ajax({
                    url: 'sync_all',
                    method: 'GET',
                    success: function (response) {
                    },
                    error: function () {
                    }
                })
            }

            //setInterval(onlineSync, 60000);

            var start = moment("{!! $startDate !!}", "YYYY-MM-DD");
            var end = moment("{!! $endDate !!}", "YYYY-MM-DD");

            var from = "{!! $startDate !!}";
            var to = "{!! $endDate !!}";

            "use strict";

            var salesChart = document.getElementById('salesChart');
            var netProfitChart = document.getElementById('netProfitChart');

            var fontFamily = KTUtil.getCssVariableValue('--bs-font-sans-serif');

            const salesData = {
                labels: [],
                datasets: [{
                    label: 'Total Sales',
                    data: [],
                    backgroundColor: 'rgba(109,255,99,0.2)',
                    borderColor: 'rgb(109,255,99)',
                    borderWidth: 1
                }]
            };

            const netProfitsData = {
                labels: [],
                datasets: [{
                    label: 'Gross Revenue',
                    data: [],
                    backgroundColor: 'rgba(99,107,255,0.2)',
                    borderColor: 'rgb(99,107,255)',
                    borderWidth: 1
                }]
            };

            const salesConfig = {
                type: 'line',
                data: salesData,
                options: {
                    plugins: {
                        title: {
                            display: false,
                        }
                    },
                    responsive: true,
                },
                defaults:{
                    global: {
                        defaultFont: fontFamily
                    }
                }
            };

            const netProfitsConfig = {
                type: 'line',
                data: netProfitsData,
                options: {
                    plugins: {
                        title: {
                            display: false,
                        }
                    },
                    responsive: true,
                },
                defaults:{
                    global: {
                        defaultFont: fontFamily
                    }
                }
            };

            var salesGraph = new Chart(salesChart, salesConfig);
            var netProfitGraph = new Chart(netProfitChart, netProfitsConfig);

            function getSalesChart() {
                $.ajax({
                    url: 'sales_chart',
                    method: 'GET',
                    data: {startDate: from, endDate: to},
                    success: function(response) {
                        $(".salesAnalysisAmount").text(response.totalSaleAmount);
                        salesConfig.data.labels = response.labels;
                        salesConfig.data.datasets[0].data = response.data;
                        salesGraph.update();
                    },
                    error: function(error) {
                        console.error('Error fetching data:', error);
                    }
                });
            }

            function getNetProfitsChart() {
                $.ajax({
                    url: 'net_profits_chart',
                    method: 'GET',
                    data: {startDate: from, endDate: to},
                    success: function(response) {
                        $(".netProfitAnalysis").text(response.totalNetProfit);
                        netProfitsConfig.data.labels = response.labels;
                        netProfitsConfig.data.datasets[0].data = response.data;
                        netProfitGraph.update();
                    },
                    error: function(error) {
                        getNetProfitsChart();
                        console.error('Error fetching data:', error);
                    }
                });
            }


            var datatable = $("#orderDatesTable").DataTable({
                "info": false,
                'order': [],
                'pageLength': 10,
                "ajax": {
                    "url": "ajax_order_dates",
                    "type": "GET",
                    "data": function ( d ) {
                        return $.extend(+ {}, d, {
                        } );
                    },
                    "dataSrc": function (response){
                        var data = [];
                        for ( var i=0; i < response.returned_data.length; i++ ) {
                            data.push(response.returned_data[i]);
                        }
                        return data;
                    }
                },
                "deferRender": true,
                "createdRow": function ( row, data, index ) {
                    $("td:last", row).attr("class", "text-end");
                },
                fnDrawCallback: function(){
                    KTMenu.createInstances();
                }
            });

            function cb(start, end) {
                from = start.format('YYYY-MM-DD')
                to = end.format('YYYY-MM-DD')
                $("#dateText").html(start.format("ddd, MMM D, YYYY") + " - " + end.format("ddd, MMM D, YYYY"));
                $(".thisMonth").html(start.format("MMMM, YYYY"));
                monthSummary();
                saleItemsSummary();
                getSalesChart();
                getNetProfitsChart();
            }

            cb(start, end);

            function monthSummary(){
                $.ajax({
                    url: 'month_summary',
                    method: 'GET',
                    data: {startDate: from, endDate: to},
                    success: function(response) {
                        $(".netProfit").text(response.netProfit);
                        $(".totalSales").html(response.totalSales);
                        $(".totalWastes").html(response.totalWastes);
                        $(".indebtSales").html(response.indebtSales);
                        $(".paidSales").html(response.paidSales);
                        $(".totalPurchases").html(response.totalPurchases);
                        $(".indebtPurchases").html(response.indebtPurchases);
                        $(".paidPurchases").html(response.paidPurchases);
                    },
                    error: function() {
                        monthSummary();
                    }
                });
            }

            function saleItemsSummary(){
                $.ajax({
                    url: 'dashboard_sale_items_summary',
                    method: 'GET',
                    data: {startDate: from, endDate: to},
                    success: function(response) {
                        $(".saleItemsSummaryLoader").hide();
                        $(".highSaleItemsQty").html(response.highSaleItemsQty);
                        $(".bestSaleItemsAmt").html(response.bestSaleItemsAmt);
                        $(".lowSaleItemsAmt").html(response.lowSaleItemsAmt);
                    },
                    error: function() {
                        saleItemsSummary();
                    }
                });
            }

            $("#date").daterangepicker({
                startDate: moment().startOf('year').startOf('month'),
                endDate: moment().endOf('year').endOf('month'),
                //showDropdowns: false,
                //alwaysShowCalendars: false,
                //showCalendars: false,
                opens: 'left',
                ranges: {
                    "January": [moment().startOf("year").startOf("month"), moment().startOf("year").endOf("month")],
                    "February": [moment().startOf("year").add(1, "month").startOf("month"), moment().startOf("year").add(1, "month").endOf("month")],
                    "March": [moment().startOf("year").add(2, "month").startOf("month"), moment().startOf("year").add(2, "month").endOf("month")],
                    "April": [moment().startOf("year").add(3, "month").startOf("month"), moment().startOf("year").add(3, "month").endOf("month")],
                    "May": [moment().startOf("year").add(4, "month").startOf("month"), moment().startOf("year").add(4, "month").endOf("month")],
                    "June": [moment().startOf("year").add(5, "month").startOf("month"), moment().startOf("year").add(5, "month").endOf("month")],
                    "July": [moment().startOf("year").add(6, "month").startOf("month"), moment().startOf("year").add(6, "month").endOf("month")],
                    "August": [moment().startOf("year").add(7, "month").startOf("month"), moment().startOf("year").add(7, "month").endOf("month")],
                    "September": [moment().startOf("year").add(8, "month").startOf("month"), moment().startOf("year").add(8, "month").endOf("month")],
                    "October": [moment().startOf("year").add(9, "month").startOf("month"), moment().startOf("year").add(9, "month").endOf("month")],
                    "November": [moment().startOf("year").add(10, "month").startOf("month"), moment().startOf("year").add(10, "month").endOf("month")],
                    "December": [moment().startOf("year").add(11, "month").startOf("month"), moment().startOf("year").add(11, "month").endOf("month")]
                }
            }, function(start, end) {
                cb(start, end);
            });

            //$('.daterangepicker').find('li[data-range-key="Custom Range"]').hide();
            //$('.daterangepicker').find('div.drp-calendar').hide();

            $(document).on("click", ".editOrderDate", function (e){
                e.preventDefault();
                var order_date_id = $(this).data("id");
                emptyModalOpen();
                $.ajax({
                    type: "GET",
                    url: "edit_order_date_form",
                    dataType: "json",
                    data:{
                        orderDateId: order_date_id,
                    },
                    success: function (response) {
                        if (response.status === "success") {
                            emptyModalFill(response)
                        } else {
                            Swal.fire("Cancelled!", response.message, "error");
                        }
                        Swal.hideLoading();
                    },
                    error: function (response) {
                        Swal.fire("Error!", response.responseJSON.message, "error");
                        Swal.hideLoading();
                        emptyModalClose();
                    }
                });

            });

            $(document).on("click", ".deleteOrderDate", function (e){
                e.preventDefault();
                var order_date_id = $(this).data("id");
                var error = false;
                var tr = $(this).parents("tr");

                if (!error) {
                    Swal.fire({
                        title: 'Are you sure?',
                        html: "Order Date will be deleted!",
                        icon: 'info',
                        buttonsStyling: false,
                        showCancelButton: true,
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        allowEnterKey: false,
                        showLoaderOnConfirm: true,
                        confirmButtonText: 'Yes, submit it!',
                        cancelButtonText: 'No, cancel it',
                        customClass: {
                            confirmButton: 'btn btn-primary',
                            cancelButton: 'btn btn-danger'
                        },
                        preConfirm: () => {
                            return new Promise(() => {
                                $.ajax({
                                    type: "DELETE",
                                    url: "delete_order_date",
                                    dataType: "json",
                                    data:{
                                        orderDateId: order_date_id,
                                    },
                                    success: function (response) {
                                        if (response.status === "success") {
                                            datatable.row(tr).remove().draw(false);
                                            Swal.fire("Done!", "Order Date Deleted", "success");
                                        } else {
                                            Swal.fire("Cancelled!", response.message, "error");
                                        }
                                        Swal.hideLoading();
                                    },
                                    error: function (response) {
                                        Swal.fire("Error!", response.responseJSON.message, "error");
                                        Swal.hideLoading();
                                    }
                                });
                            });
                        },
                    })
                }
            });

            $(document).on('keyup', '[data-kt-customer-table-filter="search"]', function (e) {
                datatable.search(e.target.value).draw();
            });

            $("#addOrderDateForm").submit(function(e) {
                e.preventDefault();
                var error = false;

                if (!error) {

                    Swal.fire({
                        title: 'Are you sure?',
                        html: "Order Date will be created!",
                        icon: 'info',
                        buttonsStyling: false,
                        showCancelButton: true,
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        allowEnterKey: false,
                        showLoaderOnConfirm: true,
                        confirmButtonText: 'Yes, submit it!',
                        cancelButtonText: 'No, cancel it',
                        customClass: {
                            confirmButton: 'btn btn-primary',
                            cancelButton: 'btn btn-danger'
                        },
                        preConfirm: () => {
                            return new Promise(() => {
                                $("#addOrderDateForm").ajaxSubmit({
                                    type: "POST",
                                    url: "create_order_date",
                                    dataType: "json",
                                    success: function (response) {
                                        if (response.status === "success") {
                                            datatable.ajax.reload();
                                            $("#addOrderDateForm").resetForm();
                                            close_modal();
                                            Swal.fire("Done!", "Order Date Created", "success");
                                        } else {
                                            Swal.fire("Cancelled!", response.message, "error");
                                        }
                                        Swal.hideLoading();
                                    },
                                    error: function (response) {
                                        Swal.fire("Error!", response.responseJSON.message, "error");
                                        Swal.hideLoading();
                                    }

                                });
                            });
                        },
                    })
                }
            });

            $(document).on("submit", "#editOrderDateForm", function(e) {
                e.preventDefault();
                var error = false;

                if (!error) {

                    Swal.fire({
                        title: 'Are you sure?',
                        html: "Order Date will be updated!",
                        icon: 'info',
                        buttonsStyling: false,
                        showCancelButton: true,
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        allowEnterKey: false,
                        showLoaderOnConfirm: true,
                        confirmButtonText: 'Yes, submit it!',
                        cancelButtonText: 'No, cancel it',
                        customClass: {
                            confirmButton: 'btn btn-primary',
                            cancelButton: 'btn btn-danger'
                        },
                        preConfirm: () => {
                            return new Promise(() => {
                                $("#editOrderDateForm").ajaxSubmit({
                                    type: "PUT",
                                    url: "edit_order_date",
                                    dataType: "json",
                                    success: function (response) {
                                        if (response.status === "success") {
                                            datatable.ajax.reload();
                                            close_modal()
                                            Swal.fire("Done!", "Order Date Updated", "success");
                                        } else {
                                            Swal.fire("Cancelled!", response.message, "error");
                                        }
                                        Swal.hideLoading();
                                    },
                                    error: function (response) {
                                        Swal.fire("Error!", response.responseJSON.message, "error");
                                        Swal.hideLoading();
                                    }
                                });
                            });
                        },
                    })
                }
            });

            $(document).on("click", ".endOrderDate", function(e) {
                var order_date_id = $(this).data("id");
                e.preventDefault();
                var error = false;

                if (!error) {

                    Swal.fire({
                        title: 'Are you sure?',
                        html: "Order Date will be updated!",
                        icon: 'info',
                        buttonsStyling: false,
                        showCancelButton: true,
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        allowEnterKey: false,
                        showLoaderOnConfirm: true,
                        confirmButtonText: 'Yes, submit it!',
                        cancelButtonText: 'No, cancel it',
                        customClass: {
                            confirmButton: 'btn btn-primary',
                            cancelButton: 'btn btn-danger'
                        },
                        preConfirm: () => {
                            return new Promise(() => {
                                $.ajax({
                                    type: "PUT",
                                    url: "end_order_date",
                                    dataType: "json",
                                    data: {
                                        orderDateId: order_date_id,
                                    },
                                    success: function (response) {
                                        if (response.status === "success") {
                                            datatable.ajax.reload();
                                            close_modal()
                                            Swal.fire("Done!", "Order Date Updated", "success");
                                        } else {
                                            Swal.fire("Cancelled!", response.message, "error");
                                        }
                                        Swal.hideLoading();
                                    },
                                    error: function (response) {
                                        Swal.fire("Error!", response.responseJSON.message, "error");
                                        Swal.hideLoading();
                                    }
                                });
                            });
                        },
                    })
                }
            });

        });
    </script>

@endsection