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

@endsection
@section('content')

<div class="page-header text-uppercase">
    <ul class="list-unstyled space-list m-0">
        <li>
            <p>Dashboard</p>
        </li>
        <li>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('seller.dashboard', getStoreSlug()) }}">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
                </ol>
            </nav>
        </li>
    </ul>
</div>
<div class="admin-area-col">
    <div class="row">
        <div class="col-12">
            <div class="round-white-bg box-shadow">
                <div class="d-block">
                    <ul class="list-inline justified-header">
                        <li>
                            <p class="m-0 font-medium"><a href="varekost.php">Sales</a></p>
                        </li>
                        <li>
                            <div class="datatable-custom-actions">
                                <ul class="list-inline">
                                    <li class="list-inline-item">
                                        <a href="#"><img src="{!! asset('assets/images/icons/pdf-icon.png') !!}" alt=""></a>
                                    </li>
                                    <li class="list-inline-item">
                                        <a href="#"><img src="{!! asset('assets/images/icons/excel-icon.png') !!}" alt=""></a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                    <p class="text-muted font12">Check out each column for more details</p>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-9">
                        <div class="row">
                            <div class="col-xs-12 col-sm-5">
                                <canvas id="myChart4" width="200" height="175"></canvas>
                                <table class="basic-table table-small font12 mt-4">
                                    @foreach($plateforms as $key => $name)
                                        <tr>
                                            <td class="text-muted">{{ $name }}</td>
                                            <td class="font-semi-bold text-right">{{ numberFormat($plateformsSales[$key]); }}</td>
                                        </tr>
                                    @endforeach
                                </table>
                            </div>
                            <div class="col-xs-12 col-sm-7">
                                <canvas id="myChart6" width="200" height="137"></canvas>
                                <table class="basic-table table-small font12 mt-4">
                                    <tr>
                                        <td class="text-muted">Giga Roll</td>
                                        <td class="font-semi-bold text-center">7626</td>
                                        <td class="font-semi-bold text-right">06230 Kr</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">Pizza BAB</td>
                                        <td class="font-semi-bold text-center">6666</td>
                                        <td class="font-semi-bold text-right">15244 Kr</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">Pizza Munchy</td>
                                        <td class="font-semi-bold text-center">6207</td>
                                        <td class="font-semi-bold text-right">63463 Kr</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">Classic Roll</td>
                                        <td class="font-semi-bold text-center">0720</td>
                                        <td class="font-semi-bold text-right">71724 Kr</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">Pizza Yummy</td>
                                        <td class="font-semi-bold text-center">6818</td>
                                        <td class="font-semi-bold text-right">58703 Kr</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 pl-0">
                        <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 font20">240.00</span>
                        </div>
                        <table class="pie-chart-details w-100 mt-4 font12 text-muted middle-table">
                            <tr>
                                <td>
                                    <span class="item-cost-status mr-1" style="background-color: #ff8f00;"></span> Salary
                                </td>
                                <td class="">0.8%</td>
                                <td class="font-semi-bold text-right text-black">220.00Kr</td>
                            </tr>
                            <tr>
                                <td>
                                    <span class="item-cost-status mr-1" style="background-color: #576cd3;"></span> Item Cost
                                </td>
                                <td class="">26.6%</td>
                                <td class="font-semi-bold text-right text-black">220.00Kr</td>
                            </tr>
                            <tr>
                                <td>
                                    <span class="item-cost-status mr-1" style="background-color: #77efb7;"></span> Operation Cost
                                </td>
                                <td class="">10%</td>
                                <td class="font-semi-bold text-right text-black">220.00Kr</td>
                            </tr>
                            <tr>
                                <td>
                                    <span class="item-cost-status mr-1" style="background-color: #cc1715;"></span> Results
                                </td>
                                <td class="">25%</td>
                                <td class="font-semi-bold text-right text-black">220.00Kr</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-12">
            <div class="round-white-bg box-shadow">
                <div class="table-responsive">
                    <div class="d-block">
                        <ul class="list-inline justified-header">
                            <li>
                                <p class="m-0 font-medium">Sale Report</p>
                            </li>
                            <li>
                                <div class="datatable-custom-actions">
                                    <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="{!! asset('assets/images/icons/field-search-icon.png') !!}" alt="">
                                            </div>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="#"><img src="{!! asset('assets/images/icons/pdf-icon.png') !!}" alt=""></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="#"><img src="{!! asset('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="{!! asset('assets/images/icons/calender-picker-icon.png') !!}" alt="">
                                            </div>
                                        </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="{!! asset('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="striped-table w-100 table-small">
                        <thead>
                            <tr>
                                <th class="font12">No</th>
                                <th class="font12">Serial</th>
                                <th class="font12">Portal</th>
                                <th class="font12">Date</th>
                                <th class="font12">Time</th>
                                <th class="font12">Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>224144</td>
                                <td>POS</td>
                                <td>22.04.2021</td>
                                <td>19:09</td>
                                <td>125</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>224144</td>
                                <td>POS</td>
                                <td>22.04.2021</td>
                                <td>19:09</td>
                                <td>125</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>224144</td>
                                <td>POS</td>
                                <td>22.04.2021</td>
                                <td>19:09</td>
                                <td>125</td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>224144</td>
                                <td>POS</td>
                                <td>22.04.2021</td>
                                <td>19:09</td>
                                <td>125</td>
                            </tr>
                            <tr>
                                <td>5</td>
                                <td>224144</td>
                                <td>POS</td>
                                <td>22.04.2021</td>
                                <td>19:09</td>
                                <td>125</td>
                            </tr>
                            <tr>
                                <td>6</td>
                                <td>224144</td>
                                <td>POS</td>
                                <td>22.04.2021</td>
                                <td>19:09</td>
                                <td>125</td>
                            </tr>
                            <tr>
                                <td>7</td>
                                <td>224144</td>
                                <td>POS</td>
                                <td>22.04.2021</td>
                                <td>19:09</td>
                                <td>125</td>
                            </tr>
                            <tr>
                                <td>8</td>
                                <td>224144</td>
                                <td>POS</td>
                                <td>22.04.2021</td>
                                <td>19:09</td>
                                <td>125</td>
                            </tr>
                            <tr>
                                <td>9</td>
                                <td>224144</td>
                                <td>POS</td>
                                <td>22.04.2021</td>
                                <td>19:09</td>
                                <td>125</td>
                            </tr>
                            <tr>
                                <td>10</td>
                                <td>224144</td>
                                <td>POS</td>
                                <td>22.04.2021</td>
                                <td>19:09</td>
                                <td>125</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 pr-0">
            <div class="round-white-bg box-shadow h-100">
                <div class="d-block">
                    <p class="font-medium">Employees</p>
                </div>
                <div class="table-responsive">
                    <table class="w-100 table-small colored-rows">
                        <tr>
                            <th></th>
                            <th class="font-medium">Name</th>
                            <th class="font-medium">Phone</th>
                            <th class="font-medium">Status</th>
                            <th class="font-medium">Start</th>
                            <th class="font-medium">End</th>
                            <th class="font-medium">Work Time</th>
                        </tr>
                        <tr>
                            <td>
                                <img class="img-fluid image-circle-40" src="{!! asset('assets/images/user1.png') !!}" alt="">
                            </td>
                            <td>John Slime</td>
                            <td>482 12 325</td>
                            <td class="text-success-dark">Online</td>
                            <td>09:00</td>
                            <td>In Work</td>
                            <td>43 Hr</td>
                        </tr>
                        <tr>
                            <td>
                                <img class="img-fluid image-circle-40" src="{!! asset('assets/images/user1.png') !!}" alt="">
                            </td>
                            <td>Stiv Adams</td>
                            <td>482 12 325</td>
                            <td class="text-danger">Offline</td>
                            <td>- - : - -</td>
                            <td>- - : - -</td>
                            <td>43 Hr</td>
                        </tr>
                        <tr>
                            <td>
                                <img class="img-fluid image-circle-40" src="{!! asset('assets/images/user1.png') !!}" alt="">
                            </td>
                            <td>Rim Lars</td>
                            <td>482 12 325</td>
                            <td class="text-success-dark">Online</td>
                            <td>09:00</td>
                            <td>In Work</td>
                            <td>43 Hr</td>
                        </tr>
                        <tr>
                            <td>
                                <img class="img-fluid image-circle-40" src="{!! asset('assets/images/user1.png') !!}" alt="">
                            </td>
                            <td>Larens Hov</td>
                            <td>482 12 325</td>
                            <td class="text-success-dark">Online</td>
                            <td>09:00</td>
                            <td>In Work</td>
                            <td>43 Hr</td>
                        </tr>
                        <tr>
                            <td>
                                <img class="img-fluid image-circle-40" src="{!! asset('assets/images/user1.png') !!}" alt="">
                            </td>
                            <td>Smitt Rev</td>
                            <td>482 12 325</td>
                            <td class="text-success-dark">Online</td>
                            <td>09:00</td>
                            <td>In Work</td>
                            <td>43 Hr</td>
                        </tr>
                        <tr>
                            <td>
                                <img class="img-fluid image-circle-40" src="{!! asset('assets/images/user1.png') !!}" alt="">
                            </td>
                            <td>Karl Anderson</td>
                            <td>482 12 325</td>
                            <td class="text-success-dark">Online</td>
                            <td>09:00</td>
                            <td>In Work</td>
                            <td>43 Hr</td>
                        </tr>
                        <tr>
                            <td>
                                <img class="img-fluid image-circle-40" src="{!! asset('assets/images/user1.png') !!}" alt="">
                            </td>
                            <td>Sara Blinder</td>
                            <td>482 12 325</td>
                            <td class="text-success-dark">Online</td>
                            <td>09:00</td>
                            <td>In Work</td>
                            <td>43 Hr</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
            <div class="row">
                <div class="col-xs-12 col-sm-8">
                    <div class="round-white-bg box-shadow h-100">
                        <div class="d-block">
                            <ul class="list-unstyled space-list m-0">
                                <li>
                                    <p class="font-medium">Check List</p>
                                </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="{!! asset('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="">Add</a>
                                        <a class="dropdown-item" href="">Remove</a>
                                        <a class="dropdown-item" href="">De/Active</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="row mt-3 font12">
                            <div class="col-xs-12 col-sm-6">
                                <ul class="list-unstyled space-list align-items-center">
                                    <li>Cleaning</li>
                                    <li><img src="{!! asset('assets/images/icons/icon-check.png') !!}" class="img-fluid width25" alt=""></li>
                                </ul>
                                <ul class="list-unstyled space-list align-items-center">
                                    <li>Check Oven</li>
                                    <li><img src="{!! asset('assets/images/icons/icon-check.png') !!}" class="img-fluid width25" alt=""></li>
                                </ul>
                                <ul class="list-unstyled space-list align-items-center">
                                    <li>Bay Drink</li>
                                    <li><img src="{!! asset('assets/images/icons/icon-check.png') !!}" class="img-fluid width25" alt=""></li>
                                </ul>
                                <ul class="list-unstyled space-list align-items-center">
                                    <li>Boxes</li>
                                    <li><img src="{!! asset('assets/images/icons/icon-check.png') !!}" class="img-fluid width25" alt=""></li>
                                </ul>
                                <ul class="list-unstyled space-list align-items-center">
                                    <li>Cleaning</li>
                                    <li><img src="{!! asset('assets/images/icons/icon-check.png') !!}" class="img-fluid width25" alt=""></li>
                                </ul>
                                <ul class="list-unstyled space-list align-items-center">
                                    <li>Cleaning</li>
                                    <li><img src="{!! asset('assets/images/icons/icon-check.png') !!}" class="img-fluid width25" alt=""></li>
                                </ul>
                                <ul class="list-unstyled space-list align-items-center">
                                    <li>Cleaning</li>
                                    <li><img src="{!! asset('assets/images/icons/icon-check.png') !!}" class="img-fluid width25" alt=""></li>
                                </ul>
                                <ul class="list-unstyled space-list align-items-center">
                                    <li>Cleaning</li>
                                    <li><img src="{!! asset('assets/images/icons/icon-cross.png') !!}" class="img-fluid width25" alt=""></li>
                                </ul>
                                <ul class="list-unstyled space-list align-items-center">
                                    <li>Cleaning</li>
                                    <li><img src="{!! asset('assets/images/icons/icon-cross.png') !!}" class="img-fluid width25" alt=""></li>
                                </ul>
                            </div>
                            <div class="col-xs-12 col-sm-6">
                                <ul class="list-unstyled space-list align-items-center">
                                    <li>Cleaning</li>
                                    <li><img src="{!! asset('assets/images/icons/icon-check.png') !!}" class="img-fluid width25" alt=""></li>
                                </ul>
                                <ul class="list-unstyled space-list align-items-center">
                                    <li>Check Oven</li>
                                    <li><img src="{!! asset('assets/images/icons/icon-check.png') !!}" class="img-fluid width25" alt=""></li>
                                </ul>
                                <ul class="list-unstyled space-list align-items-center">
                                    <li>Bay Drink</li>
                                    <li><img src="{!! asset('assets/images/icons/icon-check.png') !!}" class="img-fluid width25" alt=""></li>
                                </ul>
                                <ul class="list-unstyled space-list align-items-center">
                                    <li>Boxes</li>
                                    <li><img src="{!! asset('assets/images/icons/icon-check.png') !!}" class="img-fluid width25" alt=""></li>
                                </ul>
                                <ul class="list-unstyled space-list align-items-center">
                                    <li>Cleaning</li>
                                    <li><img src="{!! asset('assets/images/icons/icon-check.png') !!}" class="img-fluid width25" alt=""></li>
                                </ul>
                                <ul class="list-unstyled space-list align-items-center">
                                    <li>Cleaning</li>
                                    <li><img src="{!! asset('assets/images/icons/icon-check.png') !!}" class="img-fluid width25" alt=""></li>
                                </ul>
                                <ul class="list-unstyled space-list align-items-center">
                                    <li>Cleaning</li>
                                    <li><img src="{!! asset('assets/images/icons/icon-check.png') !!}" class="img-fluid width25" alt=""></li>
                                </ul>
                                <ul class="list-unstyled space-list align-items-center">
                                    <li>Cleaning</li>
                                    <li><img src="{!! asset('assets/images/icons/icon-cross.png') !!}" class="img-fluid width25" alt=""></li>
                                </ul>
                                <ul class="list-unstyled space-list align-items-center">
                                    <li>Cleaning</li>
                                    <li><img src="{!! asset('assets/images/icons/icon-cross.png') !!}" class="img-fluid width25" alt=""></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-4 pl-0">
                    <div class="round-white-bg box-shadow">
                        <div class="d-block">
                            <ul class="list-unstyled space-list m-0">
                                <li>
                                    <p class="font-bold">News</p>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <div class="single-news font11">
                                <ul class="list-unstyled space-list m-0">
                                    <li>
                                        <a href="#" class="font-bold">Lorem ipsum dolor sit</a>
                                    </li>
                                </ul>
                                <p class="text-muted font10 text-right mb-1">07/07/2020</p>
                                <p class="text-9">
                                    But I must explain to you how all this mistaken idea of denouncing pleasure
                                </p>
                            </div>
                            <div class="single-news font11">
                                <ul class="list-unstyled space-list m-0">
                                    <li>
                                        <a href="#" class="font-bold">Lorem ipsum dolor sit</a>
                                    </li>
                                </ul>
                                <p class="text-muted font10 text-right mb-1">07/07/2020</p>
                                <p class="text-9">
                                    But I must explain to you how all this mistaken idea of denouncing pleasure
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="round-white-bg box-shadow mt-3">
                        <div class="d-block">
                            <ul class="list-unstyled space-list align-items-center m-0">
                                <li>
                                    <p class="font-medium">Delivery</p>
                                    <div>
                                        <img src="{!! asset('assets/images/icons/del-truck.png') !!}" class="inmg-fluid width50" alt="">
                                    </div>
                                </li>
                                <li class="font11 text-right">
                                    <p class="text-primary m-0">07.24.2022 Tue</p>
                                    <p class="m-0">14 : 23</p>
                                    <p class="m-0">Delivered</p>
                                    <p class="m-0"><span class="text-primary font-semi-bold">48</span> item</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="round-white-bg box-shadow mt-3">
                        <p class="font-medium mb-2">Customers Rating</p>
                        <ul class="list-inline star-rating-list mt-3 rating-small mb-2">
                            <li class="list-inline-item star-filled"><i class="fas fa-star"></i></li>
                            <li class="list-inline-item star-filled"><i class="fas fa-star"></i></li>
                            <li class="list-inline-item star-filled"><i class="fas fa-star"></i></li>
                            <li class="list-inline-item star-filled"><i class="fas fa-star"></i></li>
                            <li class="list-inline-item"><i class="fas fa-star"></i></li>
                        </ul>
                        <p class="text-right font12">12,600 Votes</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-12">
            <div class="round-white-bg box-shadow">
                <div class="d-block">
                    <p class="font-medium">Daily Order</p>
                </div>
                <div class="chart-div">
                    <canvas id="dailyOrders" width="200" height="45"></canvas>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-12">
            <div class="round-white-bg box-shadow">
                <div class="d-block">
                    <ul class="list-unstyled space-list m-0">
                        <li>
                            <p class="font-medium">Materials Orders</p>
                        </li>
                        <li class="list-inline-item position-relative">
                            <a href="#" class="btn btn-primary width80">Bestill</a>
                            <a href="#" class="btn btn-primary width80">Add <i class="fas fa-plus font9 ml-1"></i></a>
                        </li>
                    </ul>
                </div>
                <div class="chart-div mt-2">
                    <canvas id="materialOrders" width="200" height="75"></canvas>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-12">
            <div class="round-white-bg box-shadow">
                <div class="d-block">
                    <ul class="list-inline justified-header">
                        <li>
                            <p class="m-0 font-medium">Transaction History</p>
                        </li>
                        <li>
                            <div class="datatable-custom-actions">
                                <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="{!! asset('assets/images/icons/field-search-icon.png') !!}" alt="">
                                        </div>
                                    </li>
                                    <li class="list-inline-item">
                                        <a href="#"><img src="{!! asset('assets/images/icons/pdf-icon.png') !!}" alt=""></a>
                                    </li>
                                    <li class="list-inline-item">
                                        <a href="#"><img src="{!! asset('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="{!! asset('assets/images/icons/calender-picker-icon.png') !!}" alt="">
                                        </div>
                                    </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="{!! asset('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>
                <div class="table-responsive">
                    <table class="w-100 table-small circle-striped-table">
                        <thead>
                            <tr>
                                <th>Payment Number</th>
                                <th>Date & Time</th>
                                <th>Amount</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Payment From #10325</td>
                                <td>Mar 21, 2022. 03:30 Pm</td>
                                <td>780,00 Kr</td>
                                <td><a href="" class="btn btn-success-dark font12 font-bold square-btn no-shadow">Complete</a></td>
                            </tr>
                            <tr>
                                <td>Payment From #10325</td>
                                <td>Mar 21, 2022. 03:30 Pm</td>
                                <td>780,00 Kr</td>
                                <td><a href="" class="btn btn-success-dark font12 font-bold square-btn no-shadow">Complete</a></td>
                            </tr>
                            <tr>
                                <td>Payment From #10325</td>
                                <td>Mar 21, 2022. 03:30 Pm</td>
                                <td>780,00 Kr</td>
                                <td><a href="" class="btn btn-danger font12 font-bold square-btn no-shadow">Declined</a></td>
                            </tr>
                            <tr>
                                <td>Payment From #10325</td>
                                <td>Mar 21, 2022. 03:30 Pm</td>
                                <td>780,00 Kr</td>
                                <td><a href="" class="btn btn-success-dark font12 font-bold square-btn no-shadow">Complete</a></td>
                            </tr>
                            <tr>
                                <td>Payment From #10325</td>
                                <td>Mar 21, 2022. 03:30 Pm</td>
                                <td>780,00 Kr</td>
                                <td><a href="" class="btn btn-warning font12 font-bold square-btn no-shadow">Pending</a></td>
                            </tr>
                            <tr>
                                <td>Payment From #10325</td>
                                <td>Mar 21, 2022. 03:30 Pm</td>
                                <td>780,00 Kr</td>
                                <td><a href="" class="btn btn-success-dark font12 font-bold square-btn no-shadow">Complete</a></td>
                            </tr>
                        </tbody>
                    </table>
                </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-unstyled space-list m-0">
                        <li>
                            <p class="font-medium m-0">Top Yummy</p>
                            <p class="font-medium">Week 23</p>
                        </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="{!! asset('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="">Option 1</a>
                                <a class="dropdown-item" href="">Option 2</a>
                            </div>
                        </li>
                    </ul>
                </div>
                <table class="w-100 table-small colored-rows large-rows">
                    <tr>
                        <th class="font-regular">Name</th>
                        <th class="font-regular">Take Away</th>
                        <th class="font-regular">Delivery</th>
                        <th class="font-regular">In</th>
                        <th class="font-regular">Total</th>
                    </tr>
                    <tr class="font-semi-bold">
                        <td>Bryne</td>
                        <td>154</td>
                        <td>100</td>
                        <td>200</td>
                        <td>354</td>
                    </tr>
                    <tr class="font-semi-bold">
                        <td>Bryne</td>
                        <td>154</td>
                        <td>100</td>
                        <td>200</td>
                        <td>354</td>
                    </tr>
                    <tr class="font-semi-bold">
                        <td>Bryne</td>
                        <td>154</td>
                        <td>100</td>
                        <td>200</td>
                        <td>354</td>
                    </tr>
                    <tr class="font-semi-bold">
                        <td>Bryne</td>
                        <td>154</td>
                        <td>100</td>
                        <td>200</td>
                        <td>354</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 pl-1">
            <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">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 square-btn font13" href="#">All</a>
                                </li>
                                <li class="list-inline-item">
                                    <a class="tab-button btn btn-default font-semi-bold square-btn font13" href="#">Unread</a>
                                </li>
                                <li class="list-inline-item">
                                    <a class="tab-button btn btn-default font-semi-bold square-btn font13" 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="{!! asset('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</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="{!! asset('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</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="{!! asset('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</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@endsection

@section('script')

    <script>
        $(document).ready(function() {
            var ctx5 = document.getElementById('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
                        }
                    }
                }
            });
            var ctx4 = document.getElementById('myChart4');
            let plateforms='{!! json_encode($plateforms) !!}';
            let plateformsSales='{!! json_encode($plateformsSales) !!}';
            new Chart(ctx4, {
                type: 'bar',
                data: {
                    labels:JSON.parse(plateforms),
                    datasets: [{
                        label: 'Total Sales',
                        backgroundColor: "#2f7ffc",
                        stack: 'Stack 0',
                        data: JSON.parse(plateformsSales),
                        borderRadius: 70,
                        barThickness: 10,
                        maxBarThickness: 10
                    }]
                },
                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: '#eff2f7',
                                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('myChart6');
            new Chart(ctx5, {
                type: 'bar',
                data: {
                    labels: ['Last Week', 'Last Week Last Year', 'This Week', 'This Week Last Year', 'Next Week Last Year'],
                    datasets: [{
                        label: 'Item 1',
                        backgroundColor: "#2f7ffc",
                        stack: 'Stack 0',
                        data: [166, 130, 171, 166, 130],
                        borderRadius: 70,
                        barThickness: 10,
                        maxBarThickness: 10
                    }, {
                        label: 'Item 2',
                        backgroundColor: "#eff2f7",
                        stack: 'Stack 0',
                        data: [176, 140, 141, 166, 130],
                        borderRadius: 70,
                        barThickness: 10,
                        maxBarThickness: 10
                    }]
                },
                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: '#eff2f7',
                                borderRadius: 10
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            usePointStyle: true,
                            backgroundColor: 'white',
                            titleColor: '#333',
                            footerColor: '#333',
                            bodyColor: '#333',
                            borderColor: 'lightgrey',
                            borderWidth: 1
                        }
                    }
                }
            });
            var dailyOrders = document.getElementById('dailyOrders');
            new Chart(dailyOrders, {
                type: 'line',
                data: {
                    labels: ['10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00'],
                    datasets: [{
                        label: '',
                        data: [20, 40, 30, 30, 40, 30, 25, 22, 15, 45, 30],
                        backgroundColor: "transparent",
                        borderWidth: 6,
                        borderColor: "#a450be",
                        lineTension: 0.4,
                        fill: false,
                        pointRadius: 0,
                        pointBackgroundColor: '#a450be',
                        pointBorderColor: '#fff',
                        order: 0,
                        pointHoverRadius: 7,
                        pointBorderWidth: 3,
                    }, {
                        label: '',
                        data: [30, 50, 40, 40, 60, 40, 35, 32, 25, 50, 40],
                        backgroundColor: "transparent",
                        borderWidth: 6,
                        borderColor: "#00aec1",
                        lineTension: 0.4,
                        fill: false,
                        pointRadius: 0,
                        pointBackgroundColor: '#00aec1',
                        pointBorderColor: '#fff',
                        order: 1,
                        pointHoverRadius: 7
                    }]
                },
                options: {
                    interaction: {
                        intersect: false,
                        mode: 'index',
                    },
                    scales: {
                        y: {
                            beginAtZero: true
                        },
                        x: {
                            grid: {
                                display: false
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            usePointStyle: true,
                            backgroundColor: 'white',
                            titleColor: '#333',
                            footerColor: '#333',
                            bodyColor: '#333',
                            borderColor: 'lightgrey',
                            borderWidth: 1
                        }
                    }
                }
            });
            var materialOrders = document.getElementById('materialOrders');
            new Chart(materialOrders, {
                type: 'bar',
                data: {
                    labels: ['Meat', 'Coca', 'Tomat', 'Cheese', 'Salat', 'Chicken', 'Sus', 'Broad', 'Burger', 'Felafel', 'Box', 'Mainz', 'Meat', 'Coca', 'Tomat', 'Cheese', 'Salat', 'Chicken', 'Sus', 'Broad', 'Burger', 'Felafel', 'Box', 'Mainz'],
                    datasets: [{
                        label: '',
                        data: [500, 900, 950, 700, 500, 600, 920, 700, 500, 950, 900, 700, 500, 450, 1000, 700, 500, 888, 1000, 700, 920, 700, 500, 950],
                        backgroundColor: "#d30502",
                        borderWidth: 1,
                        borderColor: "#d30502",
                        fill: false,
                        pointBackgroundColor: '#2f7ffc',
                        pointBorderColor: '#fff',
                        pointHoverRadius: 6,
                        barThickness: 20,
                        maxBarThickness: 20,
                        stack: 'Stack 0',
                    },{
                        label: '',
                        data: [500, 900, 950, 700, 500, 600, 920, 700, 500, 950, 900, 700, 500, 450, 1000, 700, 500, 888, 1000, 700, 920, 700, 500, 950],
                        backgroundColor: "#c8ad0a",
                        borderWidth: 1,
                        borderColor: "#c8ad0a",
                        fill: false,
                        pointBackgroundColor: '#2f7ffc',
                        pointBorderColor: '#fff',
                        pointHoverRadius: 6,
                        barThickness: 20,
                        maxBarThickness: 20,
                        stack: 'Stack 0',
                    },{
                        label: '',
                        data: [500, 900, 950, 700, 500, 600, 920, 700, 500, 950, 900, 700, 500, 450, 1000, 700, 500, 888, 1000, 700, 920, 700, 500, 950],
                        backgroundColor: "#149b41",
                        borderWidth: 1,
                        borderColor: "#149b41",
                        fill: false,
                        pointBackgroundColor: '#2f7ffc',
                        pointBorderColor: '#fff',
                        pointHoverRadius: 6,
                        barThickness: 20,
                        maxBarThickness: 20,
                        stack: 'Stack 0',
                    }]
                },
                options: {
                    responsive: true,
                    interaction: {
                        intersect: false,
                        mode: 'index',
                    },
                    scales: {
                        y: {
                            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
                        },
                        afterLayout: chart => {
                            let ctx = chart.chart.ctx;
                            ctx.save();
                            let yAxis = chart.scales["y-axis-0"];
                            let yBottom = yAxis.getPixelForValue(0);
                            let yTop = yAxis.getPixelForValue(5);
                            let gradient = ctx.createLinearGradient(0, yBottom, 0, yTop);
                            gradient.addColorStop(0, '#FF5722');
                            gradient.addColorStop(0.5, '#FFC107');
                            gradient.addColorStop(1, '#8BC34A');
                            chart.data.datasets[0].backgroundColor = gradient;
                            ctx.restore();
                        }
                    }
                }
            });
        });
    </script>

@endsection