@extends('layouts.admin-main')
@section('content')
    <div class="col-lg-12" style="position: relative;margin: auto;width: 100%">
        <div class="card-body shadow-1">
                <main id="js-page-content" role="main" class="page-content">
                    <ol class="breadcrumb page-breadcrumb">
                        <li class="breadcrumb-item">{{ __('message.dashboard') }}</li>
                        <li class="breadcrumb-item active">{{ __('message.overview') }}</li>
                        <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
                    </ol>
                    <div class="row" >
                        {{--                    <div class="col-sm-6 col-xl-2">--}}
                        {{--                        <div class="p-3 bg-secondary rounded overflow-hidden position-relative text-white mb-g ">--}}
                        {{--                            <div class="text-center " style="width: 100px">--}}
                        {{--                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 64C28.7 64 0 92.7 0 128V384c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64H64zM272 192H496c8.8 0 16 7.2 16 16s-7.2 16-16 16H272c-8.8 0-16-7.2-16-16s7.2-16 16-16zM256 304c0-8.8 7.2-16 16-16H496c8.8 0 16 7.2 16 16s-7.2 16-16 16H272c-8.8 0-16-7.2-16-16zM164 152v13.9c7.5 1.2 14.6 2.9 21.1 4.7c10.7 2.8 17 13.8 14.2 24.5s-13.8 17-24.5 14.2c-11-2.9-21.6-5-31.2-5.2c-7.9-.1-16 1.8-21.5 5c-4.8 2.8-6.2 5.6-6.2 9.3c0 1.8 .1 3.5 5.3 6.7c6.3 3.8 15.5 6.7 28.3 10.5l.7 .2c11.2 3.4 25.6 7.7 37.1 15c12.9 8.1 24.3 21.3 24.6 41.6c.3 20.9-10.5 36.1-24.8 45c-7.2 4.5-15.2 7.3-23.2 9V360c0 11-9 20-20 20s-20-9-20-20V345.4c-10.3-2.2-20-5.5-28.2-8.4l0 0 0 0c-2.1-.7-4.1-1.4-6.1-2.1c-10.5-3.5-16.1-14.8-12.6-25.3s14.8-16.1 25.3-12.6c2.5 .8 4.9 1.7 7.2 2.4c13.6 4.6 24 8.1 35.1 8.5c8.6 .3 16.5-1.6 21.4-4.7c4.1-2.5 6-5.5 5.9-10.5c0-2.9-.8-5-5.9-8.2c-6.3-4-15.4-6.9-28-10.7l-1.7-.5c-10.9-3.3-24.6-7.4-35.6-14c-12.7-7.7-24.6-20.5-24.7-40.7c-.1-21.1 11.8-35.7 25.8-43.9c6.9-4.1 14.5-6.8 22.2-8.5V152c0-11 9-20 20-20s20 9 20 20z"/></svg>--}}
                        {{--                                    --}}{{-- <small class="m-0 l-h-n">{{ __('message.total deposit') }}</small> --}}
                        {{--                                   <div class="text-center">--}}
                        {{--                                       <h1>Sale</h1>--}}
                        {{--                                   </div>--}}
                        {{--                            </div>--}}

                        {{--                            <i class="fal fa-globe position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4"--}}
                        {{--                               style="font-size: 6rem;"></i>--}}
                        {{--                        </div>--}}
                        {{--                    </div>--}}
                        <div class="col-sm-4 col-xl-4">
                            {{-- setting Fav image --}}
                                <a href="{{route('pointToSale.index')}}" class="">
                                    <div class="p-1 bg-primary bg-gradient bg-opacity-50 rounded overflow-hidden position-relative text-white mb-g btnhover text-center" style="cursor: pointer;">
                                        <label class="pt-3" >
                                            {{-- <span>{{ __('message.upload image') }}</span> --}}

                                            {{--                                    <svg style="width: 100px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 64C28.7 64 0 92.7 0 128V384c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64H64zM272 192H496c8.8 0 16 7.2 16 16s-7.2 16-16 16H272c-8.8 0-16-7.2-16-16s7.2-16 16-16zM256 304c0-8.8 7.2-16 16-16H496c8.8 0 16 7.2 16 16s-7.2 16-16 16H272c-8.8 0-16-7.2-16-16zM164 152v13.9c7.5 1.2 14.6 2.9 21.1 4.7c10.7 2.8 17 13.8 14.2 24.5s-13.8 17-24.5 14.2c-11-2.9-21.6-5-31.2-5.2c-7.9-.1-16 1.8-21.5 5c-4.8 2.8-6.2 5.6-6.2 9.3c0 1.8 .1 3.5 5.3 6.7c6.3 3.8 15.5 6.7 28.3 10.5l.7 .2c11.2 3.4 25.6 7.7 37.1 15c12.9 8.1 24.3 21.3 24.6 41.6c.3 20.9-10.5 36.1-24.8 45c-7.2 4.5-15.2 7.3-23.2 9V360c0 11-9 20-20 20s-20-9-20-20V345.4c-10.3-2.2-20-5.5-28.2-8.4l0 0 0 0c-2.1-.7-4.1-1.4-6.1-2.1c-10.5-3.5-16.1-14.8-12.6-25.3s14.8-16.1 25.3-12.6c2.5 .8 4.9 1.7 7.2 2.4c13.6 4.6 24 8.1 35.1 8.5c8.6 .3 16.5-1.6 21.4-4.7c4.1-2.5 6-5.5 5.9-10.5c0-2.9-.8-5-5.9-8.2c-6.3-4-15.4-6.9-28-10.7l-1.7-.5c-10.9-3.3-24.6-7.4-35.6-14c-12.7-7.7-24.6-20.5-24.7-40.7c-.1-21.1 11.8-35.7 25.8-43.9c6.9-4.1 14.5-6.8 22.2-8.5V152c0-11 9-20 20-20s20 9 20 20z"/></svg>--}}
                                            {{--                                --}}
                                            <svg style="width: 35px;padding-bottom: 20px;cursor: pointer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H384 96zm0 384H352v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16zm16 48H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16s7.2-16 16-16z"/></svg>
                                            {{--                                    <i class="fal fa-book" style="font-size: 40px;padding-bottom: 20px;cursor: pointer"></i>--}}
                                            <div class="text-light" style="font-size: 15px;cursor: pointer;">
                                                <p>កត់ត្រាការលក់</p>
                                                <label>
                                                    {{__('message.point to sale')}}
                                                </label>
                                            </div>
                                        </label>
                                        <i class="fal fa-gem position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4"
                                           style="font-size: 6rem;color: black"></i>
                                    </div>
                                </a>
                        </div>
{{--                        <div class="col-sm-3 col-xl-3">--}}
{{--                            --}}{{-- setting Fav image --}}
{{--                            <a href="#" class="">--}}
{{--                                <div class="p-1 bg-warning rounded overflow-hidden position-relative text-white mb-g btnhover text-center" style="cursor: pointer;">--}}
{{--                                    <label class="pt-3" >--}}
{{--                                        --}}{{-- <span>{{ __('message.upload image') }}</span> --}}

{{--                                        <svg style="width: 30px;padding-bottom: 20px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM80 64h64c8.8 0 16 7.2 16 16s-7.2 16-16 16H80c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64h64c8.8 0 16 7.2 16 16s-7.2 16-16 16H80c-8.8 0-16-7.2-16-16s7.2-16 16-16zm16 96H288c17.7 0 32 14.3 32 32v64c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V256c0-17.7 14.3-32 32-32zm0 32v64H288V256H96zM240 416h64c8.8 0 16 7.2 16 16s-7.2 16-16 16H240c-8.8 0-16-7.2-16-16s7.2-16 16-16z"/></svg>--}}

{{--                                        --}}{{--                                    <i class="fal fa-file-invoice" style="font-size: 40px;padding-bottom: 20px;cursor: pointer"></i>--}}
{{--                                        <div class="text-light" style="font-size: 15px;">--}}
{{--                                            <p>វិក្កយប័ត្ររកចាំ</p>--}}
{{--                                            <label>--}}
{{--                                                {{__('message.pending invoice')}}--}}
{{--                                            </label>--}}
{{--                                        </div>--}}
{{--                                    </label>--}}
{{--                                    --}}{{--                            <i class="fal fa-gem position-absolute pos-right pos-bottom opacity-15  mb-n1 mr-n4"--}}
{{--                                    --}}{{--                               style="font-size: 6rem;"></i>--}}
{{--                                    <svg class="position-absolute pos-right pos-bottom opacity-15  mb-n1 mr-n4" style="font-size: 1rem;width: 70px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 464c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16H224v80c0 17.7 14.3 32 32 32h80V448c0 8.8-7.2 16-16 16H64zM64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V154.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0H64zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24H264c13.3 0 24-10.7 24-24s-10.7-24-24-24H120zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24H264c13.3 0 24-10.7 24-24s-10.7-24-24-24H120z"/></svg>--}}
{{--                                    --}}{{--                                <i class="fal fa-file-invoice-dollar position-absolute pos-right pos-bottom opacity-15" style="font-size: 90px"></i>--}}
{{--                                </div>--}}
{{--                            </a>--}}
{{--                        </div>--}}
                        <div class="col-sm-4 col-xl-4">
                            {{-- setting Fav image --}}
                            <a href="{{route('sales.index')}}" class="">
                                <div class="p-1 bg-danger rounded overflow-hidden position-relative text-white mb-g btnhover text-center" style="cursor: pointer;">
                                    <label class="pt-3" >
                                        {{-- <span>{{ __('message.upload image') }}</span> --}}

                                        <svg style="width: 44px;padding-bottom: 20px;cursor: pointer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M24 0C10.7 0 0 10.7 0 24S10.7 48 24 48H69.5c3.8 0 7.1 2.7 7.9 6.5l51.6 271c6.5 34 36.2 58.5 70.7 58.5H488c13.3 0 24-10.7 24-24s-10.7-24-24-24H199.7c-11.5 0-21.4-8.2-23.6-19.5L170.7 288H459.2c32.6 0 61.1-21.8 69.5-53.3l41-152.3C576.6 57 557.4 32 531.1 32H360V134.1l23-23c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-64 64c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l23 23V32H120.1C111 12.8 91.6 0 69.5 0H24zM176 512a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm336-48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z"/></svg>
                                        <div class="text-light" style="font-size: 15px;cursor: pointer">
                                            <p>ទិន្នន័យលក់</p>
                                            <label>
                                                {{__('message.sale data')}}
                                            </label>
                                        </div>
                                    </label>
                                    {{--                            <i class="fal fa-gem position-absolute pos-right pos-bottom opacity-15  mb-n1 mr-n4"--}}
                                    {{--                               style="font-size: 6rem;"></i>--}}
                                    <svg class="position-absolute pos-right pos-bottom opacity-15  mb-n1 mr-n4" style="font-size: 1rem;width: 60px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M160 0c17.7 0 32 14.3 32 32V67.7c1.6 .2 3.1 .4 4.7 .7c.4 .1 .7 .1 1.1 .2l48 8.8c17.4 3.2 28.9 19.9 25.7 37.2s-19.9 28.9-37.2 25.7l-47.5-8.7c-31.3-4.6-58.9-1.5-78.3 6.2s-27.2 18.3-29 28.1c-2 10.7-.5 16.7 1.2 20.4c1.8 3.9 5.5 8.3 12.8 13.2c16.3 10.7 41.3 17.7 73.7 26.3l2.9 .8c28.6 7.6 63.6 16.8 89.6 33.8c14.2 9.3 27.6 21.9 35.9 39.5c8.5 17.9 10.3 37.9 6.4 59.2c-6.9 38-33.1 63.4-65.6 76.7c-13.7 5.6-28.6 9.2-44.4 11V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V445.1c-.4-.1-.9-.1-1.3-.2l-.2 0 0 0c-24.4-3.8-64.5-14.3-91.5-26.3c-16.1-7.2-23.4-26.1-16.2-42.2s26.1-23.4 42.2-16.2c20.9 9.3 55.3 18.5 75.2 21.6c31.9 4.7 58.2 2 76-5.3c16.9-6.9 24.6-16.9 26.8-28.9c1.9-10.6 .4-16.7-1.3-20.4c-1.9-4-5.6-8.4-13-13.3c-16.4-10.7-41.5-17.7-74-26.3l-2.8-.7 0 0C119.4 279.3 84.4 270 58.4 253c-14.2-9.3-27.5-22-35.8-39.6c-8.4-17.9-10.1-37.9-6.1-59.2C23.7 116 52.3 91.2 84.8 78.3c13.3-5.3 27.9-8.9 43.2-11V32c0-17.7 14.3-32 32-32z"/></svg>
                                </div>
                            </a>
                        </div>
                        <div class="col-sm-4 col-xl-4">
                            {{-- setting Fav image --}}
                            <a href="{{route('warehouse-product.category-show')}}" class="">
                                <div class="p-1 bg-info rounded overflow-hidden position-relative text-white mb-g btnhover text-center" style="cursor: pointer;">
                                    <label class="pt-3" >
                                        {{-- <span>{{ __('message.upload image') }}</span> --}}

                                        <svg style="width: 38px;padding-bottom: 20px;cursor: pointer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M470.7 9.4c3 3.1 5.3 6.6 6.9 10.3s2.4 7.8 2.4 12.2l0 .1v0 96c0 17.7-14.3 32-32 32s-32-14.3-32-32V109.3L310.6 214.6c-11.8 11.8-30.8 12.6-43.5 1.7L176 138.1 84.8 216.3c-13.4 11.5-33.6 9.9-45.1-3.5s-9.9-33.6 3.5-45.1l112-96c12-10.3 29.7-10.3 41.7 0l89.5 76.7L370.7 64H352c-17.7 0-32-14.3-32-32s14.3-32 32-32h96 0c8.8 0 16.8 3.6 22.6 9.3l.1 .1zM0 304c0-26.5 21.5-48 48-48H464c26.5 0 48 21.5 48 48V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V304zM48 416v48H96c0-26.5-21.5-48-48-48zM96 304H48v48c26.5 0 48-21.5 48-48zM464 416c-26.5 0-48 21.5-48 48h48V416zM416 304c0 26.5 21.5 48 48 48V304H416zm-96 80a64 64 0 1 0 -128 0 64 64 0 1 0 128 0z"/></svg>
                                        <div class="text-light" style="font-size: 15px;cursor: pointer">
                                            <p>ទិន្នន័័យស្ដុក</p>
                                            <label>
                                                {{__('message.warehouse balance')}}
                                            </label>
                                        </div>
                                    </label>
                                    {{--                            <i class="fal fa-gem position-absolute pos-right pos-bottom opacity-15  mb-n1 mr-n4"--}}
                                    {{--                               style="font-size: 6rem;"></i>--}}
                                    <svg class="position-absolute pos-right pos-bottom opacity-15  mb-n1 mr-n4" style="font-size: 1rem;width: 80px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M448 80v48c0 44.2-100.3 80-224 80S0 172.2 0 128V80C0 35.8 100.3 0 224 0S448 35.8 448 80zM393.2 214.7c20.8-7.4 39.9-16.9 54.8-28.6V288c0 44.2-100.3 80-224 80S0 332.2 0 288V186.1c14.9 11.8 34 21.2 54.8 28.6C99.7 230.7 159.5 240 224 240s124.3-9.3 169.2-25.3zM0 346.1c14.9 11.8 34 21.2 54.8 28.6C99.7 390.7 159.5 400 224 400s124.3-9.3 169.2-25.3c20.8-7.4 39.9-16.9 54.8-28.6V432c0 44.2-100.3 80-224 80S0 476.2 0 432V346.1z"/></svg>
                                </div>
                            </a>
                        </div>
                    </div>
                    {{--                <div class="row">--}}
                    {{--                    <div class="col-sm-6 col-xl-3">--}}
                    {{--                        <div class="p-3 bg-primary-300 rounded overflow-hidden position-relative text-white mb-g">--}}
                    {{--                            <div class="">--}}
                    {{--                                <h3 class="display-4 d-block l-h-n m-0 fw-500">--}}
                    {{--                                    {{ number_format($totalDeposit, 2) }}--}}
                    {{--                                     <small class="m-0 l-h-n">{{ __('message.total deposit') }}</small>--}}
                    {{--                                </h3>--}}
                    {{--                            </div>--}}
                    {{--                            <i class="fal fa-globe position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4"--}}
                    {{--                               style="font-size: 6rem;"></i>--}}
                    {{--                        </div>--}}
                    {{--                    </div>--}}
                    {{--                    <div class="col-sm-6 col-xl-3">--}}
                    {{--                        <div class="p-3 bg-warning-400 rounded overflow-hidden position-relative text-white mb-g">--}}
                    {{--                            <div class="">--}}
                    {{--                                <h3 class="display-4 d-block l-h-n m-0 fw-500">--}}
                    {{--                                    {{ number_format($totalWithdraw, 2) }}--}}
                    {{--                                     <small class="m-0 l-h-n">{{ __('message.total withdraw') }}</small>--}}
                    {{--                                </h3>--}}
                    {{--                            </div>--}}
                    {{--                            <i class="fal fa-gem position-absolute pos-right pos-bottom opacity-15  mb-n1 mr-n4"--}}
                    {{--                               style="font-size: 6rem;"></i>--}}
                    {{--                        </div>--}}
                    {{--                    </div>--}}
                    {{--                    <div class="col-sm-6 col-xl-3">--}}
                    {{--                        <div class="p-3 bg-success-200 rounded overflow-hidden position-relative text-white mb-g">--}}
                    {{--                            <div class="">--}}
                    {{--                                <h3 class="display-4 d-block l-h-n m-0 fw-500">--}}
                    {{--                                    {{ number_format($totalRebate, 2) }}--}}
                    {{--                                     <small class="m-0 l-h-n">{{ __('message.total rebate') }}</small>--}}
                    {{--                                </h3>--}}
                    {{--                            </div>--}}
                    {{--                            <i class="fal fa-lightbulb position-absolute pos-right pos-bottom opacity-15 mb-n5 mr-n6"--}}
                    {{--                               style="font-size: 8rem;"></i>--}}
                    {{--                        </div>--}}
                    {{--                    </div>--}}
                    {{--                    <div class="col-sm-6 col-xl-3">--}}
                    {{--                        <div class="p-3 bg-info-200 rounded overflow-hidden position-relative text-white mb-g">--}}
                    {{--                            <div class="">--}}
                    {{--                                <h3 class="display-4 d-block l-h-n m-0 fw-500">--}}
                    {{--                                    {{ number_format($totalMember, 0) }}--}}
                    {{--                                     <small class="m-0 l-h-n">{{ __('message.total new account') }}</small>--}}
                    {{--                                </h3>--}}
                    {{--                            </div>--}}
                    {{--                            <i class="fal fa-user position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1"--}}
                    {{--                               style="font-size:6rem"></i>--}}
                    {{--                        </div>--}}
                    {{--                    </div>--}}
                    {{--                </div>--}}
                </main>
        </div>
        <div class="row">
            <div class="col-12">
                <div id="panel-12" class="panel panel-icon">
                    <div class="panel-hdr">
                        <h2> Sales Column Chart <span class="fw-light"><i>Data</i> ( Last Month )</span>
                        </h2>
                    </div>
                    <div class="panel-container">
                        <div class="panel-content">
                            <div id="distributed-column-chart"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="positions" style="width: 100%;position:absolute;bottom: 0">
            <div class="row">
                {{-- <div class="col-sm-4 col-xl-4">
                    <a href="#" class="" >
                        <div class="p-1 bg-primary-900 rounded overflow-hidden position-relative text-white mb-g text-center btn-primary" style="cursor: pointer;">
                            <label class="pt-3" style="cursor: pointer">
                                <div class="text-light" style="font-size: 13px;">
                                    <p>ដក/ដាក់ប្រាក់</p>
                                    <label style="cursor: pointer">
                                        {{__('message.cash in/out')}}
                                    </label>
                                </div>
                            </label>
                        </div>
                    </a>
                </div> --}}
                <div class="col-sm-6 col-xl-6">
                    <a href="{{route('settings.index')}}" class="">
                        <div class="p-1 bg-primary-900 rounded overflow-hidden position-relative text-white mb-g text-center btn-primary" style="cursor: pointer;">
                            <label class="pt-3"  style="cursor: pointer">
                                <div class="text-light" style="font-size: 13px;">
                                    <p>ការកំណត់</p>
                                    <label  style="cursor: pointer">
                                        {{__('message.setting')}}
                                    </label>
                                </div>
                            </label>
                        </div>
                    </a>
                </div>
                <div class="col-sm-6 col-xl-6">
                    <a href="{{ route('logout') }}" title="{{ __('message.logout') }}" data-filter-tags=""
                       onclick="return confirm('{{ __('message.do you want to logout?') }}')" class="text-white fw-bold">
                        <div class="p-1 bg-primary-900 rounded overflow-hidden position-relative text-white mb-g text-center btn-primary" style="cursor: pointer;">
                            <label class="pt-3"  style="cursor: pointer">
                                <div class="text-light text-white fw-bold" style="font-size: 13px;">
                                    <p>ចាក់ចេញ</p>
                                    <label  style="cursor: pointer">
                                        {{__('message.log out')}}
                                    </label>
                                </div>
                            </label>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    {{-- @include('app.modal') --}}

@endsection

@section('scripts')
    @include('app.datepicker-js-config')
    <script>
        function myFunction(x) {
            var positions = document.getElementById('positions');
            if (x.matches) { // If media query matches
                positions.style.position = "relative";
            } else {
                positions.style.position = "absolute";
            }
        }

        // Create a MediaQueryList object
        var x = window.matchMedia("(max-width: 600px)");

        // Call listener function at run time
        myFunction(x);

        // Attach listener function on state changes
        x.addEventListener("change", function() {
            myFunction(x);
        });
    </script>
    <script>
        // date earchform  strt_date to EndDate
        $(document).ready(function() {
            $(".ranges > ul > li").click(function() {
                setTimeout(function() {
                    $('#search-form').submit();
                }, 100);

            });
        });
        // date
        var runDatePicker = function() {
            // enable clear button
            $('#datepicker-3').datepicker({
                todayBtn: "linked",
                clearBtn: true,
                todayHighlight: true,
                templates: controls
            });
        }
        // end date
        $(document).ready(function() {
            $("#js-nav-menu").removeClass('active');
            $("#js-nav-menu li ul li").removeClass('active');
            $("#menu_dashboard").addClass('active open');
            $("#menu_dashboard").addClass('collapse in')
            $("#menu_dashboard").addClass('active')
        })


        function renderChart(data) {
            var options = {
                chart: {
                    type: 'bar',
                    height: 400
                },
                plotOptions: {
                    bar: {
                        distributed: false,
                        horizontal: false,
                        columnWidth: '55%',
                        endingShape: 'rounded'
                    }
                },
                dataLabels: {
                    enabled: true,
                    position: 'top',
                    style: {
                        fontSize: '10px',
                        colors: ["#000"],
                    },
                },
                series: [{
                    name: 'Your Data',
                    data: data.series
                }],
                xaxis: {
                    categories: data.categories,
                }
            };

            return new ApexCharts(document.querySelector("#distributed-column-chart"), options);
        }
        let chart;
        function fetchAndUpdateChart() {
            fetch('/api/sale-chart')
                .then(response => response.json())
                .then(data => {
                    if (!chart) {
                        chart = renderChart(data);
                        chart.render();
                    } else {
                        chart.updateOptions({
                            series: [{
                                data: data.series
                            }],
                            xaxis: {
                                categories: data.categories
                            }
                        });
                    }
                });
        }

        document.addEventListener("DOMContentLoaded", function () {
            fetchAndUpdateChart();

            setInterval(fetchAndUpdateChart, 20000);
        });
    </script>
@endsection
@section('meta')
    <title>{{$settings_->shop_name}}</title>
@endsection