@extends('layouts.admin')
@section('css')

@endsection
@section('content')

<div class="page-header text-uppercase">
    <ul class="list-unstyled space-list m-0">
        <li>
            <p>{{ __('dashboard.title')}}</p>

        </li>
        <li>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">

                    <li class="breadcrumb-item active" aria-current="page">{{ __('dashboard.title')}}</li>
                </ol>
            </nav>
        </li>
    </ul>
</div>
<div class="admin-area-col">
    <div class="full-width dashboard-report-col">
        <div class="col-xs-12 col-sm-5 dashboard-top-selection float-right p-0">
            <div class="round-white-bg box-shadow">
                <ul class="list-inline m-0 d-flex align-items-center font13">
                    <li class="list-inline-item">
                        Make all Report to PDF
                    </li>
                    <li class="list-inline-item">
                        <a href="#" class="btn btn-primary min-width-btn"><img class="auto-img" src="../assets/images/icons/pdf-white.png" alt=""></a>
                    </li>
                    <li class="list-inline-item">
                        <select name="" id="" class="form-control custom-select radius-field field-shadow font13 text-center">
                            <option value="">All</option>
                            <option value="">Option 1</option>
                            <option value="">Option 2</option>
                        </select>
                    </li>
                </ul>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="row dashboard-widgets-main-col mt-4">
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
            <div class="row row-half">
                <div class="col-6 px-2 mb-3">
                    <div class="dashboard-action-card round-white-bg box-shadow">
                        <div class="card-img-col">
                            <img src="{{asset('assets/images/icons/delivered.png')}}" alt="">
                        </div>
                        <div class="card-content-col">
                            <p class="head font-medium">{{ __('dashboard.delivered')}}</p>
                            <p class="count font-semi-bold font14 mb-0"><span class="text-primary">
                               {{ $deliveredOrderItems}}
                            </span> <span class="font11 font-regular d-block text-dark">{{ __('dashboard.orders')}}</span></p>
                        </div>
                    </div>
                </div>
                <div class="col-6 px-2 mb-3">
                    <div class="dashboard-action-card round-white-bg box-shadow">
                        <div class="card-img-col">
                            <img src="{{asset('assets/images/icons/ordered.png')}}" alt="">
                        </div>
                        <div class="card-content-col">
                            <p class="head font-medium">{{__('dashboard.ordered')}}</p>
                            <p class="count font-semi-bold font14 mb-0">
                                <span class="text-primary">
                                    {{ $newOrderedItems }}
                                </span> <span class="font11 font-regular d-block text-dark">{{ __('dashboard.new_orders')}}</span></p>
                        </div>
                    </div>
                </div>
                <div class="col-6 px-2">
                    <div class="dashboard-action-card round-white-bg box-shadow">
                        <div class="card-img-col">
                            <img src="{{asset('assets/images/icons/reject.png')}}" alt="">
                        </div>
                        <div class="card-content-col">
                            <p class="head font-medium">{{ __('dashboard.reject')}}</p>
                            <p class="count font-semi-bold font14 mb-0"><span class="text-primary">
                                {{ $rejectedOrderItems }}
                            </span> <span class="font11 font-regular d-block text-dark">{{ __('dashboard.support')}}</span></p>
                        </div>
                    </div>
                </div>
                <div class="col-6 px-2">
                    <div class="dashboard-action-card round-white-bg box-shadow">
                        <div class="card-img-col">
                            <img src="{{asset('assets/images/icons/reviews.png')}}" alt="">
                        </div>
                        <div class="card-content-col">
                            <p class="head font-medium">{{ __('dashboard.reviews')}}</p>
                            <p class="count font-semi-bold font14 mb-0"><span class="text-primary">N/A</span> <span class="font11 font-regular d-block text-dark">{{ __('dashboard.comment')}}</span></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-4">
                <div class="round-white-bg box-shadow">
                    <div class="d-block">
                        <ul class="list-inline justified-header mb-0 franchise-map">
                            <li>
                                <p class="m-0 font-bold">Franchise</p>
                            </li>
                            <li>
                                <ul class="list-inline">
                                    <li class="list-inline-item m-0">
                                        <a class="btn btn-primary font12" href="#">Region</a>
                                    </li>
                                    <li class="list-inline-item m-0">
                                        <div class="position-relative">
                                            <input type="text" class="form-control custom-field-grey font12 italic-style pr-4" placeholder="Please Search...">
                                            <img class="position-absolute right-center right-10" src="../assets/images/icons/field-search-icon.png" alt="">
                                        </div>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                        <p class="m-0 text-muted font11">Lorem ipsum</p>
                    </div>
                    <div>
                        <div id="vmap" style="width: 100%; height: 220px;"></div>
                    </div>
                </div>
            </div>
            <div class="mt-4">
                <div class="round-white-bg box-shadow">
                    <div class="d-block">
                        <ul class="list-inline justified-header mb-0">
                            <li>
                                <p class="m-0 font-bold">Live Sales</p>
                            </li>
                            {{-- <li>
                                <a href="daily_sales.php" class="btn btn-primary font12">More</a>
                            </li> --}}
                        </ul>
                        {{-- <p class="m-0 text-muted font11">Check out each column for more details</p> --}}
                    </div>
                    <div class="mt-4">
                        <canvas id="myChart4" width="200" height="175"></canvas>
                    </div>
                </div>
            </div>

            <div class="mt-4">
                <div class="round-white-bg box-shadow">
                    <div class="d-block">
                        <ul class="list-inline justified-header mb-0">
                            <li>
                                <p class="m-0 font-bold">Week Sales</p>
                            </li>
                            {{-- <li>
                                <a href="daily_sales.php" class="btn btn-primary font12">More</a>
                            </li> --}}
                        </ul>
                        {{-- <p class="m-0 text-muted font11">Check out each column for more details</p> --}}
                    </div>
                    <div class="mt-4">
                        <canvas id="myChartWeek" width="200" height="175"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
            <div class="round-white-bg box-shadow">
                <div class="d-block">
                    <ul class="list-inline justified-header">
                        <li>
                            <p class="m-0">{{ __('dashboard.live_sales')}}</p>
                        </li>
                        <li>
                            <div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                                <i class="fa fa-calendar"></i>&nbsp;
                                <span></span> <i class="fa fa-caret-down"></i>
                            </div>
                        </li>

                    </ul>
                </div>
                <div class="">
                    <table class="table-small table table-striped table-bordered ">
                        <thead>
                        <tr>
                            <th>{{ __('dashboard.branch')}}</th>
                            {{-- <th>{{ __('dashboard.pos')}}</th>
                            <th>{{ __('dashboard.pos_midnight')}}</th>
                            <th>{{ __('dashboard.online')}}</th>
                            <th>{{ __('dashboard.kiosk')}}</th>
                            <th>{{ __('dashboard.kiosk_midnight')}}</th> --}}
                            <th>{{ __('dashboard.total')}}</th>
                            <th style="width:30%"></th>
                        </tr>
                        </thead>
                        <tbody id="live-sales">
                            <tr><td colspan="6" class="text-center">Loading...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
<div class="row">
    <div class="col-md-6">
            <div class="round-white-bg box-shadow mt-4">
                <div class="d-block">
                    <ul class="list-inline justified-header mb-0">
                        <li>
                            <p class="m-0 font-bold">Item Cost</p>
                        </li>
                    </ul>
                    <p class="m-0 text-muted font11">Lorem ipsum dolor sit</p>
                </div>
                <div class="mt-3 position-relative">
                    <canvas id="myChart5" width="200" height="125"></canvas>
                    <span class="position-absolute center-center chart-amount text-success-dark font-medium">240.00</span>
                </div>
                <table class="pie-chart-details w-100 mt-4 font-14 text-muted middle-table">
                    <tr>
                        <td>
                            <span class="item-cost-status mr-1" style="background-color: #ff8f00;"></span> Payment
                        </td>
                        <td class="text-center">0.8%</td>
                        <td class="text-right">220.000Kr</td>
                    </tr>
                    <tr>
                        <td>
                            <span class="item-cost-status mr-1" style="background-color: #576cd3;"></span> Payment
                        </td>
                        <td class="text-center">0.8%</td>
                        <td class="text-right">220.000Kr</td>
                    </tr>
                    <tr>
                        <td>
                            <span class="item-cost-status mr-1" style="background-color: #77efb7;"></span> Payment
                        </td>
                        <td class="text-center">0.8%</td>
                        <td class="text-right">220.000Kr</td>
                    </tr>
                    <tr>
                        <td>
                            <span class="item-cost-status mr-1" style="background-color: #cc1715;"></span> Payment
                        </td>
                        <td class="text-center">0.8%</td>
                        <td class="text-right">220.000Kr</td>
                    </tr>
                </table>
            </div>
            </div>
            <div class="col-md-6">
                <div class="round-white-bg box-shadow mt-4">
                    <div class="d-block">
                        <ul class="list-inline justified-header bordered-header">
                            <li>
                                <p class="m-0 font-bold">{{ __('dashboard.trend_sales')}}</p>
                            </li>
                            <li class="position-relative">
                                <a href="#" class="btn btn-primary dropdown-primary-btn dropdown-toggle font12" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                                <div class="dropdown-menu dropdown-menu-small font12 right-aligned-dropdown" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="">Action 1</a>
                                    <a class="dropdown-item" href="">Action 2</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="chart-div mb-4">
                        <canvas id="myChart3" width="200" height="125"></canvas>
                    </div>
                    @if(count($trendingCategories)>0)
                    <table class="profits-table font12 full-width middle-table">
                        @foreach($trendingCategories as  $category)
                        <tr>
                            <td>
                                <ul class="list-inline m-0 d-flex align-items-center">
                                    <li class="list-inline-item">
                                        <img class="img-fluid img40" src="{{getImagePath($category->photo,'product')}}" alt="">
                                    </li>
                                    <li class="list-inline-item">
                                        <p class="m-0 font-bold">{{$category->name}}</p>
                                        <p class="text-muted m-0 font11"></p>
                                    </li>
                                </ul>
                            </td>
                            <td class="text-success-dark font-bold text-right">
                                + {{numberFormat($category->total_price)}}
                            </td>
                        </tr>
                        @endforeach
                    </table>
                    @endif
                </div>
            </div>
        </div>
        </div>
        {{-- <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4">

            <div class="article-card mt-3 pb-4">
                <div class="article-card-image">
                    <img class="img-fluid w-100" src="../assets/images/article.jpg" alt="">
                </div>
                <div class="article-card-content">
                    <p class="title font13">Sola senter have problem For micro</p>
                    <p class="content pl-4 font12 text-muted">
                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
                    </p>
                    <div class="text-right mt-4">
                        <a href="#" class="btn btn-primary font12">Read More</a>
                    </div>
                </div>
            </div>
        </div> --}}
    </div>
    <div class="row mt-3">
        <div class="col-12">
            <div class="round-white-bg box-shadow datatable-custom-actions-main-header">
                <div class="d-block">
                    <ul class="list-inline justified-header bordered-header">
                        <li>
                            <p class="m-0 font-bold">{{ __('dashboard.datatable')}}</p>
                        </li>
                        <li>
                            <div class="datatable-custom-actions d-none">
                                <ul class="list-inline">
                                    <li class="list-inline-item">
                                        <div class="d-table-search position-relative">
                                            <input type="text" class="form-control custom-field-grey font12 italic-style" placeholder="Please Search...">
                                            <img class="position-absolute left-center left-10" src="../assets/images/icons/field-search-icon.png" alt="">
                                        </div>
                                    </li>
                                    <li class="list-inline-item">
                                        <a href="#"><img src="../assets/images/icons/pdf-icon.png" alt=""></a>
                                    </li>
                                    <li class="list-inline-item">
                                        <a href="#"><img src="../assets/images/icons/excel-icon.png" alt=""></a>
                                    </li>
                                    <li class="list-inline-item">
                                        <div class="d-table-calendar-picker position-relative">
                                            <input type="text" class="form-control custom-field font12 rangepicker-input" placeholder="From Date to Date">
                                            <img class="position-absolute right-center right-10" src="../assets/images/icons/calender-picker-icon.png" alt="">
                                        </div>
                                    </li>
                                    <li class="list-inline-item justselect-small">
                                        <select class="justselect" name="" id="">
                                            <option value="" selected>All Branch</option>
                                            <option value="">Option 1</option>
                                            <option value="">Option 2</option>
                                            <option value="">Option 3</option>
                                        </select>
                                    </li>
                                    <li class="list-inline-item justselect-small right-aligned">
                                        <select class="justselect" name="" id="">
                                            <option value="" selected>All Items</option>
                                            <option value="">Cancel Items</option>
                                            <option value="">Complete Sale</option>
                                            <option value="">Offline Sale</option>
                                            <option value="">Online Sale</option>
                                        </select>
                                    </li>
                                    <li class="list-inline-item position-relative">
                                        <a href="#" class="btn btn-primary round-btn dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="../assets/images/icons/more-dots.png" alt=""></a>
                                        <div class="dropdown-menu dropdown-menu-small font12 right-aligned-dropdown" aria-labelledby="navbarDropdown">
                                            <a class="dropdown-item" href="">Action 1</a>
                                            <a class="dropdown-item" href="">Action 2</a>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
                <table class="items-table striped-table w-100 custom-datatable table-small">
                    <table id="dTable" data-url="{{route('admin.orders.paginate')}}" class="items-table striped-table w-100 custom-datatable table-small">
                    <thead>
                        <tr>
                            <th>{{ __('dashboard.order_id')}}</th>
                            <th>{{ __('dashboard.name')}}</th>
                            <th>{{ __('dashboard.store_name')}}</th>
                            <th>{{ __('dashboard.total_price')}}</th>
                            <th>{{ __('dashboard.date')}}</th>
                            <th>{{ __('dashboard.status')}}</th>
                            <th>{{ __('dashboard.payment_status')}}</th>
                            <th width="160">{{ __('common.action')}}</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4">
            <div class="round-white-bg box-shadow">
                <div>
                    <div class="d-block">
                        <ul class="list-inline justified-header bordered-header">
                            <li>
                                <p class="m-0 font-bold">Authors Profit</p>
                            </li>
                            <li>
                                <a href="#" class="dropdown-primary-btn font12">More</a>
                            </li>
                        </ul>
                    </div>
                    <table class="profits-table font12 full-width middle-table">
                        <tr>
                            <td>
                                <ul class="list-inline m-0 d-flex align-items-center">
                                    <li class="list-inline-item width50">
                                        <img class="img-fluid img50" src="../assets/images/y-box.png" alt="">
                                    </li>
                                    <li class="list-inline-item">
                                        <p class="m-0 font-bold">Yummy Box</p>
                                        <p class="text-muted m-0 font11">Lorem Ipsum is</p>
                                    </li>
                                </ul>
                            </td>
                            <td class="text-success-dark font-bold text-right">
                                +34,000 Kr
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <ul class="list-inline m-0 d-flex align-items-center">
                                    <li class="list-inline-item width50">
                                        <img class="img-fluid img50" src="../assets/images/y-shake.png" alt="">
                                    </li>
                                    <li class="list-inline-item">
                                        <p class="m-0 font-bold">Yummy Shake</p>
                                        <p class="text-muted m-0 font11">Lorem Ipsum is</p>
                                    </li>
                                </ul>
                            </td>
                            <td class="text-success-dark font-bold text-right">
                                +34,000 Kr
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <ul class="list-inline m-0 d-flex align-items-center">
                                    <li class="list-inline-item width50">
                                        <img class="img-fluid img50" src="../assets/images/y-kids.png" alt="">
                                    </li>
                                    <li class="list-inline-item">
                                        <p class="m-0 font-bold">Yummy Kids</p>
                                        <p class="text-muted m-0 font11">Lorem Ipsum is</p>
                                    </li>
                                </ul>
                            </td>
                            <td class="text-success-dark font-bold text-right">
                                +34,000 Kr
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <ul class="list-inline m-0 d-flex align-items-center">
                                    <li class="list-inline-item width50">
                                        <img class="img-fluid img50" src="../assets/images/y-plates.png" alt="">
                                    </li>
                                    <li class="list-inline-item">
                                        <p class="m-0 font-bold">Yummy Plats</p>
                                        <p class="text-muted m-0 font11">Lorem Ipsum is</p>
                                    </li>
                                </ul>
                            </td>
                            <td class="text-success-dark font-bold text-right">
                                +34,000 Kr
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <ul class="list-inline m-0 d-flex align-items-center">
                                    <li class="list-inline-item width50">
                                        <img class="img-fluid img50" src="../assets/images/y-kryder.png" alt="">
                                    </li>
                                    <li class="list-inline-item">
                                        <p class="m-0 font-bold">Yummy Kryder</p>
                                        <p class="text-muted m-0 font11">Lorem Ipsum is</p>
                                    </li>
                                </ul>
                            </td>
                            <td class="text-success-dark font-bold text-right">
                                +34,000 Kr
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="round-white-bg box-shadow mt-3">
                <div>
                    <div class="d-block">
                        <ul class="list-inline justified-header bordered-header">
                            <li>
                                <p class="m-0 font-bold">Other App's Messages</p>
                            </li>
                            <li>
                                <a href="#" class="btn btn-primary font12">Add <i class="fas fa-plus font9 ml-1"></i></a>
                            </li>
                        </ul>
                    </div>
                    <div class="social-message-notification">
                        <a class="text-black" href="#">
                            <p class="font9 text-muted position-absolute top-right top-5 m-0">Yesterday</p>
                            <ul class="list-inline d-flex align-items-center">
                                <li class="list-inline-item width40">
                                    <img class="img40" src="../assets/images/icons/fb-messenger-icon.png" alt="">
                                </li>
                                <li class="list-inline-item font13 font-semi-bold">
                                    Jim sent a message on Messenger
                                </li>
                            </ul>
                        </a>
                    </div>
                    <div class="social-message-notification">
                        <a class="text-black" href="#">
                            <p class="font9 text-muted position-absolute top-right top-5 m-0">Yesterday</p>
                            <ul class="list-inline d-flex align-items-center">
                                <li class="list-inline-item width40">
                                    <img class="img40" src="../assets/images/icons/whatsapp-icon.png" alt="">
                                </li>
                                <li class="list-inline-item font13 font-semi-bold">
                                    Save sent a message on Whatsapp
                                </li>
                            </ul>
                        </a>
                    </div>
                    <div class="social-message-notification">
                        <a class="text-black" href="#">
                            <p class="font9 text-muted position-absolute top-right top-5 m-0">Yesterday</p>
                            <ul class="list-inline d-flex align-items-center">
                                <li class="list-inline-item width40">
                                    <img class="img40" src="../assets/images/icons/viber-icon.png" alt="">
                                </li>
                                <li class="list-inline-item font13 font-semi-bold">
                                    Adam sent a message on Viber
                                </li>
                            </ul>
                        </a>
                    </div>
                    <div class="social-message-notification">
                        <a class="text-black" href="#">
                            <p class="font9 text-muted position-absolute top-right top-5 m-0">Yesterday</p>
                            <ul class="list-inline d-flex align-items-center">
                                <li class="list-inline-item width40">
                                    <img class="img40" src="../assets/images/icons/fb-messenger-icon.png" alt="">
                                </li>
                                <li class="list-inline-item font13 font-semi-bold">
                                    Hooman sent a message on Messenger
                                </li>
                            </ul>
                        </a>
                    </div>
                    <div class="social-message-notification">
                        <a class="text-black" href="#">
                            <p class="font9 text-muted position-absolute top-right top-5 m-0">Yesterday</p>
                            <ul class="list-inline d-flex align-items-center">
                                <li class="list-inline-item width40">
                                    <img class="img40" src="../assets/images/icons/skype-icon.png" alt="">
                                </li>
                                <li class="list-inline-item font13 font-semi-bold">
                                    Daniel sent a message on Skype
                                </li>
                            </ul>
                        </a>
                    </div>
                    <div class="social-message-notification">
                        <a class="text-black" href="#">
                            <p class="font9 text-muted position-absolute top-right top-5 m-0">Yesterday</p>
                            <ul class="list-inline d-flex align-items-center">
                                <li class="list-inline-item width40">
                                    <img class="img40" src="../assets/images/icons/skype-icon.png" alt="">
                                </li>
                                <li class="list-inline-item font13 font-semi-bold">
                                    Adam sent a message on Messenger
                                </li>
                            </ul>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-8">
            <div class="row">
                <div class="col-xs-12 col-sm-6">
                    <div class="round-white-bg box-shadow">
                        <div class="d-block">
                            <ul class="list-inline justified-header bordered-header">
                                <li>
                                    <p class="m-0 font-bold">Audit Log</p>
                                </li>
                                <li>
                                    <ul class="list-inline tab-btn-list">
                                        <li class="list-inline-item">
                                            <a class="tab-button btn btn-primary font-semi-bold" href="#">Today</a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a class="tab-button btn btn-default font-semi-bold" href="#">Week</a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a class="tab-button btn btn-default font-semi-bold" href="#">Month</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <div class="audit-log-col">
                            <div class="single-audit">
                                <ul class="list-inline d-flex m-0">
                                    <li class="list-inline-item">
                                        <span class="log-dot bg-success-dark"></span>
                                    </li>
                                    <li class="list-inline-item">
                                        <p class="font9 text-muted mb-1">Just now</p>
                                        <p class="font12 m-0">39 new users registered</p>
                                    </li>
                                </ul>
                            </div>
                            <div class="single-audit">
                                <ul class="list-inline d-flex m-0">
                                    <li class="list-inline-item">
                                        <span class="log-dot bg-warning"></span>
                                    </li>
                                    <li class="list-inline-item">
                                        <p class="font9 text-muted mb-1">Just now</p>
                                        <p class="font12 m-0">System shutdown <span class="badge badge-secondary font10 ml-4">Pending</span></p>
                                    </li>
                                </ul>
                            </div>
                            <div class="single-audit">
                                <ul class="list-inline d-flex m-0">
                                    <li class="list-inline-item">
                                        <span class="log-dot bg-success"></span>
                                    </li>
                                    <li class="list-inline-item">
                                        <p class="font9 text-muted mb-1">Just now</p>
                                        <p class="font12 m-0">New order received</p>
                                    </li>
                                </ul>
                            </div>
                            <div class="single-audit">
                                <ul class="list-inline d-flex m-0">
                                    <li class="list-inline-item">
                                        <span class="log-dot bg-secondary"></span>
                                    </li>
                                    <li class="list-inline-item">
                                        <p class="font9 text-muted mb-1">Just now</p>
                                        <p class="font12 m-0">Production server down <span class="badge badge-warning font10 ml-4">Urgent</span></p>
                                    </li>
                                </ul>
                            </div>
                            <div class="single-audit">
                                <ul class="list-inline d-flex m-0">
                                    <li class="list-inline-item">
                                        <span class="log-dot bg-warning"></span>
                                    </li>
                                    <li class="list-inline-item">
                                        <p class="font9 text-muted mb-1">Just now</p>
                                        <p class="font12 m-0">System error</p>
                                    </li>
                                </ul>
                            </div>
                            <div class="single-audit">
                                <ul class="list-inline d-flex m-0">
                                    <li class="list-inline-item">
                                        <span class="log-dot bg-secondary"></span>
                                    </li>
                                    <li class="list-inline-item">
                                        <p class="font9 text-muted mb-1">Just now</p>
                                        <p class="font12 m-0">Production server down</p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6">
                    <div class="round-white-bg box-shadow">
                        <div class="d-block">
                            <ul class="list-inline justified-header bordered-header">
                                <li>
                                    <p class="m-0 font-bold">Bryne Branch</p>
                                </li>
                                <li>
                                    <a href="#" class="btn btn-primary font12">Change</a>
                                </li>
                            </ul>
                        </div>
                        <div class="d-block chart-fit">
                            <canvas id="myChart1" width="200" height="105"></canvas>
                        </div>
                    </div>
                    <div class="round-white-bg box-shadow mt-3">
                        <div class="d-block">
                            <ul class="list-inline justified-header bordered-header">
                                <li>
                                    <p class="m-0 font-bold">Stavanger Branch</p>
                                </li>
                                <li>
                                    <a href="#" class="btn btn-primary font12">Change</a>
                                </li>
                            </ul>
                        </div>
                        <div class="d-block chart-fit">
                            <canvas id="myChart2" width="200" height="105"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-12 mt-3">
                    <div class="round-white-bg box-shadow">
                        <div class="d-block">
                            <ul class="list-inline justified-header bordered-header">
                                <li>
                                    <p class="m-0 font-bold">Best Sellers</p>
                                </li>
                                <li>
                                    <ul class="list-inline tab-btn-list">
                                        <li class="list-inline-item">
                                            <a class="tab-button btn btn-primary font-semi-bold" href="#">Last Month</a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a class="tab-button btn btn-default font-semi-bold" href="#">Last year</a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a class="tab-button btn btn-default font-semi-bold" href="#">All time</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <div class="table-responsive">
                            <table class="sellers-table w-100">
                                <tr>
                                    <td width="115"><img class="img-fluid width100" src="../assets/images/product-image.png" alt=""></td>
                                    <td>
                                        <a class="font13 seller-name text-black" href="#">Stavanger - Kongsgardbakken 3</a>
                                        <p class="font11 text-muted seller-info">Lorem ipsumdolor sit amet constetur sadipscing alitr</p>
                                        <ul class="list-inline">
                                            <li class="list-inline-item">
                                                <span class="text-muted font11">Manager:</span> <span class="font13">David Seam</span>
                                            </li>
                                            <li class="list-inline-item">
                                                <span class="text-muted font11">Staff:</span> <span class="font13">8 Pr</span>
                                            </li>
                                        </ul>
                                    </td>
                                    <td>
                                        <p class="font13 seller-name">12.000.00 kr</p>
                                        <p class="font11 text-muted seller-info">Sales</p>
                                    </td>
                                    <td>
                                        <p class="font13 seller-name">12.000.00 kr</p>
                                        <p class="font11 text-muted seller-info">Sales</p>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="115"><img class="img-fluid width100" src="../assets/images/product-image.png" alt=""></td>
                                    <td>
                                        <a class="font13 seller-name text-black" href="#">Stavanger - Kongsgardbakken 3</a>
                                        <p class="font11 text-muted seller-info">Lorem ipsumdolor sit amet constetur sadipscing alitr</p>
                                        <ul class="list-inline">
                                            <li class="list-inline-item">
                                                <span class="text-muted font11">Manager:</span> <span class="font13">David Seam</span>
                                            </li>
                                            <li class="list-inline-item">
                                                <span class="text-muted font11">Staff:</span> <span class="font13">8 Pr</span>
                                            </li>
                                        </ul>
                                    </td>
                                    <td>
                                        <p class="font13 seller-name">12.000.00 kr</p>
                                        <p class="font11 text-muted seller-info">Sales</p>
                                    </td>
                                    <td>
                                        <p class="font13 seller-name">12.000.00 kr</p>
                                        <p class="font11 text-muted seller-info">Sales</p>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="115"><img class="img-fluid width100" src="../assets/images/product-image.png" alt=""></td>
                                    <td>
                                        <a class="font13 seller-name text-black" href="#">Stavanger - Kongsgardbakken 3</a>
                                        <p class="font11 text-muted seller-info">Lorem ipsumdolor sit amet constetur sadipscing alitr</p>
                                        <ul class="list-inline">
                                            <li class="list-inline-item">
                                                <span class="text-muted font11">Manager:</span> <span class="font13">David Seam</span>
                                            </li>
                                            <li class="list-inline-item">
                                                <span class="text-muted font11">Staff:</span> <span class="font13">8 Pr</span>
                                            </li>
                                        </ul>
                                    </td>
                                    <td>
                                        <p class="font13 seller-name">12.000.00 kr</p>
                                        <p class="font11 text-muted seller-info">Sales</p>
                                    </td>
                                    <td>
                                        <p class="font13 seller-name">12.000.00 kr</p>
                                        <p class="font11 text-muted seller-info">Sales</p>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-xs-12 col-sm-6">
            <div class="round-white-bg box-shadow h-100">
                <div class="d-block">
                    <ul class="list-inline justified-header bordered-header">
                        <li>
                            <p class="m-0 font-bold">Employee Checklist</p>
                        </li>
                        <li>
                            <a href="#" class="dropdown-primary-btn font12">More</a>
                        </li>
                    </ul>
                </div>
                <table class="profits-table font12 full-width middle-table font14">
                    <tr>
                        <td>
                            <ul class="list-inline m-0 d-flex align-items-center">
                                <li class="list-inline-item width60">
                                    <img class="img-fluid img50" src="../assets/images/icons/online-staff.png" alt="">
                                </li>
                                <li class="list-inline-item">
                                    <p class="m-0">Online Staff</p>
                                    <p class="text-muted m-0 font11">Lorem Ipsum is</p>
                                </li>
                            </ul>
                        </td>
                        <td class="text-success-dark font-bold text-right">
                            30 Pr
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <ul class="list-inline m-0 d-flex align-items-center">
                                <li class="list-inline-item width60">
                                    <img class="img-fluid img50" src="../assets/images/icons/offline-staff.png" alt="">
                                </li>
                                <li class="list-inline-item">
                                    <p class="m-0">Offline Staff</p>
                                    <p class="text-muted m-0 font11">Lorem Ipsum is</p>
                                </li>
                            </ul>
                        </td>
                        <td class="text-danger font-bold text-right">
                            12 Pr
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <ul class="list-inline m-0 d-flex align-items-center">
                                <li class="list-inline-item width60">
                                    <img class="img-fluid img50" src="../assets/images/icons/sick-staff.png" alt="">
                                </li>
                                <li class="list-inline-item">
                                    <p class="m-0">Sick Staff</p>
                                    <p class="text-muted m-0 font11">Lorem Ipsum is</p>
                                </li>
                            </ul>
                        </td>
                        <td class="text-dark font-bold text-right">
                            2 Pr
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <ul class="list-inline m-0 d-flex align-items-center">
                                <li class="list-inline-item width60">
                                    <img class="img-fluid img50" src="../assets/images/icons/vocation-staff.png" alt="">
                                </li>
                                <li class="list-inline-item">
                                    <p class="m-0">On Vacation Staff</p>
                                    <p class="text-muted m-0 font11">Lorem Ipsum is</p>
                                </li>
                            </ul>
                        </td>
                        <td class="text-primary font-bold text-right">
                            6 Pr
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6">
            <div class="round-white-bg box-shadow">
                <div class="d-block">
                    <ul class="list-inline justified-header bordered-header">
                        <li>
                            <p class="m-0 font-bold">Messages</p>
                        </li>
                        <li>
                            <ul class="list-inline tab-btn-list">
                                <li class="list-inline-item">
                                    <a class="tab-button btn btn-primary font-semi-bold" href="#">All</a>
                                </li>
                                <li class="list-inline-item">
                                    <a class="tab-button btn btn-default font-semi-bold" href="#">Unread</a>
                                </li>
                                <li class="list-inline-item">
                                    <a class="tab-button btn btn-default font-semi-bold" href="#">Read</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div class="messages-list">
                    <div class="single-message mb-3 unread-message">
                        <a href="#" class="d-flex">
                            <div class="message-image">
                                <img class="img-fluid" src="../assets/images/user1.png" alt="">
                            </div>
                            <div class="message-content">
                                <ul class="list-unstyled space-list m-0">
                                    <li class="username font14 font-bold mb-1">John Smith</li>
                                    <li class="text-muted font13 m-0">11:45 AM</li>
                                </ul>
                                <p class="message-text font11 text-muted m-0">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard</p>
                            </div>
                        </a>
                    </div>
                    <div class="single-message d-flex mb-3">
                        <a class="d-flex" href="#">
                            <div class="message-image">
                                <img class="img-fluid" src="../assets/images/user2.png" alt="">
                            </div>
                            <div class="message-content">
                                <ul class="list-unstyled space-list m-0">
                                    <li class="username font14 font-bold mb-1">John Smith</li>
                                    <li class="text-muted font13 m-0">11:45 AM</li>
                                </ul>
                                <p class="message-text font11 text-muted m-0">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard</p>
                            </div>
                        </a>
                    </div>
                    <div class="single-message d-flex mb-3">
                        <a class="d-flex" href="#">
                            <div class="message-image">
                                <img class="img-fluid" src="../assets/images/user3.png" alt="">
                            </div>
                            <div class="message-content">
                                <ul class="list-unstyled space-list m-0">
                                    <li class="username font14 font-bold mb-1">John Smith</li>
                                    <li class="text-muted font13 m-0">11:45 AM</li>
                                </ul>
                                <p class="message-text font11 text-muted m-0">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-xs-12 col-sm-6">
            <div class="round-white-bg box-shadow">
                <div class="d-block">
                    <ul class="list-inline justified-header bordered-header">
                        <li>
                            <p class="m-0 font-bold">Tasks</p>
                        </li>
                        <li>
                            <ul class="list-inline tab-btn-list">
                                <li class="list-inline-item">
                                    <a class="tab-button btn btn-primary font-semi-bold" href="#">Today</a>
                                </li>
                                <li class="list-inline-item">
                                    <a class="tab-button btn btn-default font-semi-bold" href="#">Week</a>
                                </li>
                                <li class="list-inline-item">
                                    <a class="tab-button btn btn-default font-semi-bold" href="#">Month</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div class="tasks-list">
                    <div class="single-task d-flex mb-3 task-pending-border">
                        <div class="task-field-col">
                            <label class="custom-control">
                                <input type="checkbox">
                                <span class="custom-control-box"><i class="fas fa-check"></i></span>
                            </label>
                        </div>
                        <div class="task-content">
                            <ul class="list-unstyled space-list m-0 position-relative">
                                <li>
                                    <p class="font13 m-0">Lorem Ipsum is simply dummy text of the printing</p>
                                    <p class="task-user text-muted font12 mt-2 mb-0">By <a class="text-primary" href="#">Angel</a></p>
                                </li>
                                <li>
                                    <a class="btn btn-primary round-btn task-action-btn position-absolute top-right" href="#"><img src="../assets/images/icons/more-dots.png" alt=""></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="single-task d-flex mb-3 task-testing-border">
                        <div class="task-field-col">
                            <label class="custom-control">
                                <input type="checkbox">
                                <span class="custom-control-box"><i class="fas fa-check"></i></span>
                            </label>
                        </div>
                        <div class="task-content">
                            <ul class="list-unstyled space-list m-0 position-relative">
                                <li>
                                    <p class="font13 m-0">Lorem Ipsum is simply dummy text of the printing</p>
                                    <p class="task-user text-muted font12 mt-2 mb-0">By <a class="text-primary" href="#">Angel</a></p>
                                </li>
                                <li>
                                    <a class="btn btn-primary round-btn task-action-btn position-absolute top-right" href="#"><img src="../assets/images/icons/more-dots.png" alt=""></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="single-task d-flex mb-3 task-feedback-border">
                        <div class="task-field-col">
                            <label class="custom-control">
                                <input type="checkbox">
                                <span class="custom-control-box"><i class="fas fa-check"></i></span>
                            </label>
                        </div>
                        <div class="task-content">
                            <ul class="list-unstyled space-list m-0 position-relative">
                                <li>
                                    <p class="font13 m-0">Lorem Ipsum is simply dummy text of the printing</p>
                                    <p class="task-user text-muted font12 mt-2 mb-0">By <a class="text-primary" href="#">Angel</a></p>
                                </li>
                                <li>
                                    <a class="btn btn-primary round-btn task-action-btn position-absolute top-right" href="#"><img src="../assets/images/icons/more-dots.png" alt=""></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="single-task d-flex mb-3 task-hold-border">
                        <div class="task-field-col">
                            <label class="custom-control">
                                <input type="checkbox">
                                <span class="custom-control-box"><i class="fas fa-check"></i></span>
                            </label>
                        </div>
                        <div class="task-content">
                            <ul class="list-unstyled space-list m-0 position-relative">
                                <li>
                                    <p class="font13 m-0">Lorem Ipsum is simply dummy text of the printing</p>
                                    <p class="task-user text-muted font12 mt-2 mb-0">By <a class="text-primary" href="#">Angel</a></p>
                                </li>
                                <li>
                                    <a class="btn btn-primary round-btn task-action-btn position-absolute top-right" href="#"><img src="../assets/images/icons/more-dots.png" alt=""></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="single-task d-flex mb-3 task-complete-border">
                        <div class="task-field-col">
                            <label class="custom-control">
                                <input type="checkbox">
                                <span class="custom-control-box"><i class="fas fa-check"></i></span>
                            </label>
                        </div>
                        <div class="task-content">
                            <ul class="list-unstyled space-list m-0 position-relative">
                                <li>
                                    <p class="font13 m-0">Lorem Ipsum is simply dummy text of the printing</p>
                                    <p class="task-user text-muted font12 mt-2 mb-0">By <a class="text-primary" href="#">Angel</a></p>
                                </li>
                                <li>
                                    <a class="btn btn-primary round-btn task-action-btn position-absolute top-right" href="#"><img src="../assets/images/icons/more-dots.png" alt=""></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6">
            <div class="round-white-bg box-shadow h-100">
                <div class="d-block">
                    <ul class="list-inline justified-header bordered-header">
                        <li>
                            <p class="m-0 font-bold">Ads Monitoring & Discount</p>
                        </li>
                        <li>
                            <ul class="list-inline tab-btn-list">
                                <li class="list-inline-item">
                                    <a class="tab-button btn btn-primary font-semi-bold" href="#">Today</a>
                                </li>
                                <li class="list-inline-item">
                                    <a class="tab-button btn btn-default font-semi-bold" href="#">Week</a>
                                </li>
                                <li class="list-inline-item">
                                    <a class="tab-button btn btn-default font-semi-bold" href="#">Month</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div class="ads-list">
                    <div class="single-ad-col mb-3">
                        <a href="#" class="d-flex">
                            <div class="ad-image-col width40 pr-2">
                                <img class="img-fluid width20" src="../assets/images/ad1.png" alt="">
                            </div>
                            <div class="message-content">
                                <ul class="list-unstyled space-list m-0">
                                    <li class="username font14 font-medium mb-1">Kiosk</li>
                                    <li class="text-success-dark font11 m-0">Online</li>
                                </ul>
                                <p class="message-text font11 text-muted m-0">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard</p>
                            </div>
                        </a>
                    </div>
                    <div class="single-ad-col mb-3">
                        <a href="#" class="d-flex">
                            <div class="ad-image-col width40 pr-2">
                                <img class="img-fluid width20" src="../assets/images/ad2.png" alt="">
                            </div>
                            <div class="message-content">
                                <ul class="list-unstyled space-list m-0">
                                    <li class="username font14 font-medium mb-1">Shopping monitor</li>
                                    <li class="text-success-dark font11 m-0">Online</li>
                                </ul>
                                <p class="message-text font11 text-muted m-0">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard</p>
                            </div>
                        </a>
                    </div>
                    <div class="single-ad-col mb-3">
                        <a href="#" class="d-flex">
                            <div class="ad-image-col width40 pr-2">
                                <img class="img-fluid width20" src="../assets/images/ad3.png" alt="">
                            </div>
                            <div class="message-content">
                                <ul class="list-unstyled space-list m-0">
                                    <li class="username font14 font-medium mb-1">Street Kiosk</li>
                                    <li class="text-success-dark font11 m-0">Online</li>
                                </ul>
                                <p class="message-text font11 text-muted m-0">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard</p>
                            </div>
                        </a>
                    </div>
                    <div class="single-ad-col mb-3">
                        <a href="#" class="d-flex">
                            <div class="ad-image-col width40 pr-2">
                                <img class="img-fluid width20" src="../assets/images/ad4.png" alt="">
                            </div>
                            <div class="message-content">
                                <ul class="list-unstyled space-list m-0">
                                    <li class="username font14 font-medium mb-1">Application</li>
                                    <li class="text-success-dark font11 m-0">Online</li>
                                </ul>
                                <p class="message-text font11 text-muted m-0">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@endsection

@section('script')

    <script>
        $(document).ready(function() {
            var ctx = document.getElementById('myChart1');
            var myChart1 = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
                    datasets: [{
                        label: '',
                        data: [12, 19, 3, 5, 2, 3],
                        backgroundColor: "#e1d9fd",
                        borderWidth: 2,
                        borderColor: "#9b80f7",
                        lineTension: 0.4,
                        fill: true,
                        pointRadius: 0,
                        pointBackgroundColor: '#2f7ffc',
                        pointBorderColor: '#fff',
                        pointHoverRadius: 6
                    }]
                },
                options: {
                    interaction: {
                        intersect: false,
                        mode: 'index',
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                display: false
                            },
                            ticks: {
                                display: false
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            },
                            ticks: {
                                display: false
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            usePointStyle: true,
                            backgroundColor: 'white',
                            titleColor: '#333',
                            footerColor: '#333',
                            bodyColor: '#333',
                            borderColor: 'lightgrey',
                            borderWidth: 1
                        }
                    }
                }
            });

            var ctx2 = document.getElementById('myChart2');
            var myChart2 = new Chart(ctx2, {
                type: 'line',
                data: {
                    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                    datasets: [{
                        label: '',
                        data: [2, 1, 3, 2, 2, 3],
                        backgroundColor: "#caf6ec",
                        borderWidth: 2,
                        borderColor: "#50e2c1",
                        lineTension: 0.4,
                        fill: true,
                        pointRadius: 0,
                        pointBackgroundColor: '#2f7ffc',
                        pointBorderColor: '#fff',
                        pointHoverRadius: 6
                    }]
                },
                options: {
                    interaction: {
                        intersect: false,
                        mode: 'index',
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                display: false
                            },
                            ticks: {
                                display: false
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            },
                            ticks: {
                                display: false
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            usePointStyle: true,
                            backgroundColor: 'white',
                            titleColor: '#333',
                            footerColor: '#333',
                            bodyColor: '#333',
                            borderColor: 'lightgrey',
                            borderWidth: 1
                        }
                    }
                }
            });


            var ctx3 = document.getElementById('myChart3');
            var myChart3 = new Chart(ctx3, {
                type: 'line',
                data: {
                   // labels: [10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21],
                    labels: {{json_encode(array_column($trendSales,'hour'))}},
                    datasets: [{
                        label: '',
                        data:  {{json_encode(array_column($trendSales,'total_price'))}},
                        backgroundColor: "transparent",
                        borderWidth: 2,
                        borderColor: "#42e0fc",
                        lineTension: 0.4,
                        fill: false,
                        pointRadius: 0,
                        pointBackgroundColor: '#2f7ffc',
                        pointBorderColor: '#fff',
                        pointHoverRadius: 6
                    }]
                },
                options: {
                    interaction: {
                        intersect: false,
                        mode: 'index',
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                display: false
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            usePointStyle: true,
                            backgroundColor: 'white',
                            titleColor: '#333',
                            footerColor: '#333',
                            bodyColor: '#333',
                            borderColor: 'lightgrey',
                            borderWidth: 1
                        }
                    }
                }
            });

            var ctx4 = document.getElementById('myChart4');
            var myChart4 = new Chart(ctx4, {
                type: 'bar',
                data: {
                    labels: ['{!! implode("','", array_keys($liveSalesGraph)) !!}'],
                    //labels: ['Today', 'Today Last Year', 'All Day Last Year'],
                    datasets: [{
                        backgroundColor: "#42e0fc",
                        stack: 'Stack 0',
                        // data: [166, 130, 171],
                        data: ['{!! implode("','", array_values($liveSalesGraph)) !!}'],
                        borderRadius: 70,
                        barThickness: 18,
                        maxBarThickness: 18
                    }]
                },
                options: {
                    interaction: {
                        intersect: false,
                        mode: 'index',
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                display: false,
                                drawBorder: false,
                            },
                            ticks: {
                                display: false
                            },
                            barPercentage: 0.4
                        },
                        x: {
                            grid: {
                                display: false,
                                borderWidth: 7,
                                borderColor: '#707070',
                                borderRadius: 10
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            usePointStyle: true,
                            backgroundColor: 'white',
                            titleColor: '#333',
                            footerColor: '#333',
                            bodyColor: '#333',
                            borderColor: 'lightgrey',
                            borderWidth: 1
                        }
                    }
                }
            });

            var ctxWeek = document.getElementById('myChartWeek');
            var myChartWeek = new Chart(ctxWeek, {
                type: 'bar',
                data: {
                    labels: ['{!! implode("','", array_keys($weekSalesGraph)) !!}'],
                    //labels: ['Today', 'Today Last Year', 'All Day Last Year'],
                    datasets: [{
                        backgroundColor: "#42e0fc",
                        stack: 'Stack 0',
                        // data: [166, 130, 171],
                        data: ['{!! implode("','", array_values($weekSalesGraph)) !!}'],
                        borderRadius: 70,
                        barThickness: 18,
                        maxBarThickness: 18
                    }]
                },
                options: {
                    interaction: {
                        intersect: false,
                        mode: 'index',
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                display: false,
                                drawBorder: false,
                            },
                            ticks: {
                                display: false
                            },
                            barPercentage: 0.4
                        },
                        x: {
                            grid: {
                                display: false,
                                borderWidth: 7,
                                borderColor: '#707070',
                                borderRadius: 10
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            usePointStyle: true,
                            backgroundColor: 'white',
                            titleColor: '#333',
                            footerColor: '#333',
                            bodyColor: '#333',
                            borderColor: 'lightgrey',
                            borderWidth: 1
                        }
                    }
                }
            });

            var ctx5 = document.getElementById('myChart5');
            var myChart5 = new Chart(ctx5, {
                type: 'doughnut',
                data: {
                    labels: ["Market ", "J1", "J2", "Market", "J Share"],
                    datasets: [{
                        data: [61, 11, 27],
                        backgroundColor: ['#576cd3', '#ff8f00', '#D9D9D9'],
                        labels: ['Market Share', 'J1', 'J2']
                    }, {
                        data: [61, 39],
                        backgroundColor: ['#77efb7', '#cc1414', ],
                        labels: ['Market Share', 'J Share'],
                    }, ]
                },
                options: {
                    interaction: {
                        intersect: false,
                        mode: 'index',
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                display: false,
                                drawBorder: false,
                            },
                            ticks: {
                                display: false
                            }
                        },
                        x: {
                            grid: {
                                display: false,
                                drawBorder: false,
                            },
                            ticks: {
                                display: false
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            usePointStyle: true,
                            backgroundColor: 'white',
                            titleColor: '#333',
                            footerColor: '#333',
                            bodyColor: '#333',
                            borderColor: 'lightgrey',
                            borderWidth: 1
                        }
                    }
                }
            });
            $('#vmap').vectorMap({
                map: 'world_en',
                backgroundColor: '#fff',
                color: '#ffffff',
                hoverOpacity: 0.7,
                selectedColor: '#666666',
                enableZoom: false,
                showTooltip: true,
                values: sample_data,
                scaleColors: ['#C8EEFF', '#006491'],
                normalizeFunction: 'polynomial'
            });


        });

          //var start = moment().subtract(29, 'days');
        let start = moment();
        let end = moment();
        $(function() {
            function cb(start, end) {
                $('#reportrange span').html(start.format('DD-MM-YYYY') + ' - ' + end.format('DD-MM-YYYY'));
            }

            $('#reportrange').daterangepicker({
                startDate: start,
                endDate: end,
                autoApply:true,
                //showCustomRangeLabel:false,
                ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last Week': [moment().startOf('week').subtract(7,'days'), moment().endOf('week').subtract(7, 'days')]
                }
            }, cb);

            cb(start, end);

        });

        let startDate = start.format('DD-MM-YYYY');
        let endDate =   end.format('DD-MM-YYYY');

        function loadLiveStore(startDate,endDate) {
            $.ajax({
            type: "POST",
            url: '{!! route('admin.dashboard.live-sales') !!}',
            beforeSend: function() {
                $('#live-sales').html('<tr><td colspan="5" class="text-center">Loading...</td></tr>');
            },
            data: { startDate: startDate,endDate:endDate, _token: token},
            success: function (data) {
                //let result = jQuery.parseJSON(data);
                    $('#live-sales').html(data);
            }
        });
        }

        loadLiveStore(startDate,endDate);

        $('#reportrange').on('apply.daterangepicker', function(ev, picker) {
                startDate = picker.startDate.format('DD-MM-YYYY');
                endDate = picker.endDate.format('DD-MM-YYYY');
                loadLiveStore(startDate,endDate);
        });

</script>

@endsection