{% extends "layout.html" %}

{% set title = 'Dashboard' %}

{% set type = 'dashboard' %}

{% block content %}

<div class="container">
    <aside class="col-sm-3 d-aside no-padding sticky" id="sidebar-menu">
        <div class="d-aside-c br">

            {% include 'component/aside-dashboard.html' %}

            <nav class="mtxxlg">
                <a href="dashboard.html" class="active">
                    <span class="icon-c text-center d-inline mrxs">
                        <img src="_assets/img/icons/view.svg" alt="">
                    </span>
                    <span>Dashboard</span>
                </a>
                <a href="dishes.html">
                     <span class="icon-c text-center d-inline mrxs">
                        <img src="_assets/img/icons/plate-1.svg" alt="">
                     </span>
                    <span>My Dishes</span>
                </a>
                <a href="weekly-deals.html">
                    <span class="icon-c text-center d-inline mrxs">
                        <img src="_assets/img/icons/calender.svg" alt="">
                    </span>
                    <span>Weekly Deals</span>
                </a>
                <a href="menus.html">
                    <span class="icon-c text-center d-inline mrxs">
                        <img src="_assets/img/icons/fork.svg" alt="">
                    </span>
                    <span>Menus</span>
                </a>
                <a href="orders.html">
                    <span class="icon-c text-center d-inline mrxs">
                        <img src="_assets/img/icons/edit-2.svg" alt="">
                    </span>
                    <span>Orders</span>
                </a>
                <a href="ingredient-calculator.html">
                    <span class="icon-c text-center d-inline mrxs">
                        <img src="_assets/img/icons/calculator.svg" alt="">
                    </span>
                    <span>Ingredient Calculator</span>
                </a>
                <a href="chef-account.html">
                    <span class="icon-c text-center d-inline mrxs">
                        <img src="_assets/img/icons/user-1.svg" alt="">
                    </span>
                    <span>My Account</span>
                </a>
                <a href="wallet.html">
                    <span class="icon-c text-center d-inline mrxs">
                        <img src="_assets/img/icons/wallet.svg" alt="">
                    </span>
                    <span>My Wallet</span>
                </a>
            </nav>
        </div>
    </aside>
    <div class="col-sm-9 d-content">
        <div class="d-content-c plmd">
            <div class="row mbxxlg">
                <div class="col-sm-4">
                    <div class="feature faq-card text-center">
                        <div class="feature-img">
                            <img src="_assets/img/icons/user-2.svg" alt="">
                        </div>
                        <h3>Total Visitors</h3>
                        <h3 class="text-bold mtsm">
                            1039
                        </h3>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="feature faq-card text-center">
                        <div class="feature-img">
                            <img src="_assets/img/icons/visitor.svg" alt="">
                        </div>
                        <h3>Visitors Online</h3>
                        <h3 class="text-bold mtsm">
                            1039
                        </h3>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="feature faq-card text-center">
                        <div class="feature-img">
                            <img src="_assets/img/icons/payment-1.svg" alt="">
                        </div>
                        <h3>Qoot Balance</h3>
                        <h3 class="text-bold mtsm">
                            SAR 0
                        </h3>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-8">
                    <div class="feature faq-card mbxxlg">
                        <div class="tab-g">
                            <ul class="nav nav-tabs text-center" role="tablist">
                                <li role="presentation" class="active"><a class="btn" href="#deals" aria-controls="deals" role="tab" data-toggle="tab" aria-expanded="true">Today’s Menus</a></li>
                                <li role="presentation" class=""><a class="btn" href="#orders" aria-controls="orders" role="tab" data-toggle="tab" aria-expanded="false">Today’s Orders</a></li>
                            </ul>
                            <div class="tab-content">
                                <div role="tabpanel" class="tab-pane active" id="deals">
                                    <div class="table-responsive">
                                        <table  class="table">
                                            <thead>
                                                <tr>
                                                    <th class="text-bold">Dish</th>
                                                    <th class="text-bold">Serves</th>
                                                    <th class="text-bold">Price</th>
                                                    <th class="text-bold">Offer</th>
                                                </tr>
                                            </thead>
                                            <tr>
                                                <td>Burger Breakfast ( breakfast )</td>
                                                <td>5</td>
                                                <td>SAR12</td>
                                                <td>SAR1</td>
                                            </tr>
                                            <tr>
                                                <td>Test Food Indian ( main dish ) </td>
                                                <td>2</td>
                                                <td>SAR120</td>
                                                <td>SAR1</td>
                                            </tr>
                                            <tr>
                                                <td>Zinger Burger Other Offers ( Other Offers ) </td>
                                                <td>3</td>
                                                <td>SAR123</td>
                                                <td>SAR1</td>
                                            </tr>
                                            <tr>
                                                <td>Corny Salads ( salads )</td>
                                                <td>4</td>
                                                <td>SAR122</td>
                                                <td>SAR1</td>
                                            </tr>
                                            <tr>
                                                <td>Burger Breakfast ( breakfast )</td>
                                                <td>5</td>
                                                <td>SAR12</td>
                                                <td>SAR1</td>
                                            </tr>
                                            <tr>
                                                <td>Test Food Indian ( main dish ) </td>
                                                <td>2</td>
                                                <td>SAR120</td>
                                                <td>SAR1</td>
                                            </tr>
                                            <tr>
                                                <td>Zinger Burger Other Offers ( Other Offers ) </td>
                                                <td>3</td>
                                                <td>SAR123</td>
                                                <td>SAR1</td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div class="text-center mtxlg">
                                        <a href="" class="btn btn-green btn-small d-inline mrsm">First</a>
                                        <a href="" class="btn btn-green btn-small d-inline mrsm">Pervious</a>
                                        <a href="" class="btn btn-green btn-small d-inline mrsm">Next</a>
                                        <a href="" class="btn btn-green btn-small d-inline">Last</a>
                                    </div>
                                </div>
                                <div role="tabpanel" class="tab-pane" id="orders">
                                    <div class="table-responsive">
                                        <table class="table">
                                            <thead>
                                            <tr>
                                                <th class="text-bold">Name</th>
                                                <th class="text-bold">Order</th>
                                                <th class="text-bold">Total Amount</th>
                                                <th class="text-bold">Status</th>
                                            </tr>
                                            </thead>
                                            <tr>
                                                <td>Mohammed</td>
                                                <td>Zinger Burger(1)</td>
                                                <td>140 SAR</td>
                                                <td>Delivered</td>
                                            </tr>
                                            <tr>
                                                <td>Aymen</td>
                                                <td>Cheese omelette(3)</td>
                                                <td>240 SAR</td>
                                                <td>Canceled</td>
                                            </tr>
                                            <tr>
                                                <td>Moaaz</td>
                                                <td>Unicorn Milkshake (1)</td>
                                                <td>50 SAR</td>
                                                <td>Delivered</td>
                                            </tr>
                                            <tr>
                                                <td>Mohammed</td>
                                                <td>Zinger Burger(1)</td>
                                                <td>140 SAR</td>
                                                <td>Delivered</td>
                                            </tr>
                                            <tr>
                                                <td>Aymen</td>
                                                <td>Cheese omelette(3)</td>
                                                <td>240 SAR</td>
                                                <td>Canceled</td>
                                            </tr>
                                            <tr>
                                                <td>Moaaz</td>
                                                <td>Unicorn Milkshake (1)</td>
                                                <td>50 SAR</td>
                                                <td>Delivered</td>
                                            </tr>
                                            <tr>
                                                <td>Mohammed</td>
                                                <td>Zinger Burger(1)</td>
                                                <td>140 SAR</td>
                                                <td>Delivered</td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div class="text-center mtxlg">
                                        <a href="" class="btn btn-green btn-small d-inline mrsm">First</a>
                                        <a href="" class="btn btn-green btn-small d-inline mrsm">Pervious</a>
                                        <a href="" class="btn btn-green btn-small d-inline mrsm">Next</a>
                                        <a href="" class="btn btn-green btn-small d-inline">Last</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="feature faq-card text-center mbxxlg">
                        <div class="feature-img">
                            <img src="_assets/img/icons/wallet-1.svg" alt="">
                        </div>
                        <h3 class="text-upper">earned today</h3>
                        <h3 class="text-bold mtsm">
                            1039
                        </h3>
                    </div>
                    <div class="feature faq-card text-center mbxxlg">
                        <div class="feature-img">
                            <img src="_assets/img/icons/money-1.svg" alt="">
                        </div>
                        <h3 class="text-upper">expected turnover</h3>
                        <p class="mtsm">
                            Need 36 orders to
                            acheive 10 % plan
                        </p>
                    </div>
                    <div class="feature faq-card text-center mbxxlg">
                        <div class="feature-img">
                            <img src="_assets/img/icons/user-2.svg" alt="">
                        </div>
                        <h3 class="text-upper"><strong>5 </strong>new customers</h3>
                        <div class="text-center mtlg">
                            <a href="" class="btn btn-green capitalize d-inline">view</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="feature faq-card text-center mbxxlg">
                        <div class="feature-head mbxlg">
                            <div class="row">
                                <div class="col-sm-3">
                                    <h4 class="no-margin text-left">Website Views</h4>
                                    <h4 class="no-margin text-left text-bold">Year Performance</h4>
                                </div>
                                <div class="col-sm-6">
                                    <nav>
                                        <a href="" class="active capitalize">all time</a>
                                        <a href="" class="capitalize">this year</a>
                                        <a href="" class="capitalize">this week</a>
                                        <a href="" class="capitalize">today</a>
                                    </nav>
                                </div>
                                <div class="col-s-3">
                                    <h4 class="no-margin text-right">updated just now</h4>
                                </div>
                            </div>
                        </div>
                        <canvas id="myChart" width="400" height="200"></canvas>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="feature faq-card text-center mbxxlg">
                        <div class="feature-head mbxlg">
                            <div class="row">
                                <div class="col-sm-3">
                                    <h4 class="no-margin text-left">Weekly Sales</h4>
                                    <h4 class="no-margin text-left text-bold">This week sales.</h4>
                                </div>
                                <div class="col-sm-6">
                                    <nav>
                                        <a href="" class="active capitalize">all time</a>
                                        <a href="" class="capitalize">this year</a>
                                        <a href="" class="capitalize">this week</a>
                                        <a href="" class="capitalize">today</a>
                                    </nav>
                                </div>
                                <div class="col-s-3">
                                    <h4 class="no-margin text-right">updated just now</h4>
                                </div>
                            </div>
                        </div>
                        <canvas id="myChart-1" width="400" height="200"></canvas>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="feature faq-card text-center mbxxlg">
                        <div class="feature-head mbxlg">
                            <div class="row">
                                <div class="col-sm-6">
                                    <h4 class="no-margin text-left">Current Month Performance</h4>
                                    <h4 class="no-margin text-left text-bold">This week sales.</h4>
                                </div>
                            </div>
                        </div>
                        <canvas id="myChart-2" width="400" height="200"></canvas>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="feature faq-card text-center mbxxlg">
                        <div class="feature-head mbxlg">
                            <h4 class="no-margin text-left text-bold mbxxlg">Order History</h4>
                            <form action="">
                                <div class="select-container">
                                    <div class="custom-datepicker text-left">
                                        <div class="custom-input">
                                            <input type="text" id="datepicker-from" placeholder="Start Date">
                                        </div>
                                        <div class="custom-input">
                                            <input class="d-inline" type="text" id="datepicker-to" placeholder="End Date">
                                        </div>
                                        <a class="btn btn-green btn-search" href="#">
                                            <i class="fas fa-search"></i>
                                        </a>
                                    </div>
                                </div>
                            </form>
                            <div class="order-status">
                                <div class="row">
                                    <div class="col-sm-3 col-xs-6">
                                        <div class="feature text-center">
                                            <div class="feature-img">
                                                <img src="_assets/img/icons/completed.svg" alt="">
                                            </div>
                                            <h3 class="no-margin mtmd">Completed</h3>
                                            <h3 class="text-bold mtsm">
                                                16
                                            </h3>
                                        </div>
                                    </div>
                                    <div class="col-sm-3 col-xs-6">
                                        <div class="feature text-center">
                                            <div class="feature-img">
                                                <img src="_assets/img/icons/cancel.svg" alt="">
                                            </div>
                                            <h3 class="no-margin mtmd">Cancelled</h3>
                                            <h3 class="text-bold mtsm">
                                                46
                                            </h3>
                                        </div>
                                    </div>
                                    <div class="col-sm-3 col-xs-6">
                                        <div class="feature text-center">
                                            <div class="feature-img">
                                                <img src="_assets/img/icons/rejected-1.svg" alt="">
                                            </div>
                                            <h3 class="no-margin mtmd">Rejected</h3>
                                            <h3 class="text-bold mtsm">
                                                29
                                            </h3>
                                        </div>
                                    </div>
                                    <div class="col-sm-3 col-xs-6">
                                        <div class="feature text-center">
                                            <div class="feature-img">
                                                <img src="_assets/img/icons/rejected.svg" alt="">
                                            </div>
                                            <h3 class="no-margin mtmd">Auto Rejected</h3>
                                            <h3 class="text-bold mtsm">
                                                62
                                            </h3>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="feature faq-card text-center mbxxlg">
                        <div class="feature-head mbxlg">
                            <h4 class="no-margin text-left text-bold mbxxlg">Order Calender</h4>
                            <div class="calender-container">
                                <div id="calender"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="fullCalModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i></button>
                <h4 id="modalTitle" class="modal-title"></h4>
            </div>
            <div id="modalBody" class="modal-body menu-items">
                {% include 'component/order-item.html' %}
            </div>
        </div>
    </div>
</div>
{% endblock content %}


{% block JS %}

    <script>
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'roundedBar',
            data: {
                labels: [ "2015", "2016", "2017", "2018", "2019"],
                datasets: [{
                    label: 'Number of view',
                    backgroundColor: "rgba(143, 176, 23, 1)",
                    data: [100, 200, 300, 400, 350, 400, 500, 600]
                }, {
                    label: 'Number of view',
                    backgroundColor: "rgba(143, 176, 23, 1)",
                    data: [100, 200, 300, 400, 350, 400, 500, 600]
                }, {
                    label: 'Number of view',
                    backgroundColor: "rgba(143, 176, 23, 1)",
                    data: [100, 200, 300, 400, 350, 400, 500, 600]
                }, {
                    label: 'Number of view',
                    backgroundColor: "rgba(143, 176, 23, 1)",
                    data: [100, 200, 300, 400, 350, 400, 500, 600]
                }]
            },
            options: {
                legend: {
                    display: false
                },
                barRoundness: 0.7,
                responsive: true,
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                            stepSize: 100,
                            // Return an empty string to draw the tick line but hide the tick label
                            // Return `null` or `undefined` to hide the tick line entirely
                            userCallback: function (value, index, values) {
                                // Convert the number to a string and splite the string every 3 charaters from the end
                                value = value.toString();
                                value = value.split(/(?=(?:...)*$)/);

                                // Convert the array to a string and format the output
                                value = value.join('.');
                                return '$' + value;
                            }
                        }
                    }],
                    xAxes: [{
                        barPercentage: 0.5,

                        ticks: {
                            display: false
                        }
                    }]
                }
            }
        });


        var ctx = document.getElementById('myChart-1').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'roundedBar',
            data: {
                labels: [ "2015", "2016", "2017", "2018", "2019"],
                datasets: [{
                    label: 'Number of view',
                    backgroundColor: "rgba(143, 176, 23, 1)",
                    data: [100, 200, 300, 400, 350, 400, 500, 600]
                }, {
                    label: 'Number of view',
                    backgroundColor: "rgba(143, 176, 23, 1)",
                    data: [100, 200, 300, 400, 350, 400, 500, 600]
                }, {
                    label: 'Number of view',
                    backgroundColor: "rgba(143, 176, 23, 1)",
                    data: [100, 200, 300, 400, 350, 400, 500, 600]
                }, {
                    label: 'Number of view',
                    backgroundColor: "rgba(143, 176, 23, 1)",
                    data: [100, 200, 300, 400, 350, 400, 500, 600]
                }]
            },
            options: {
                legend: {
                    display: false
                },
                barRoundness: 0.7,
                responsive: true,
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                            stepSize: 100,
                            // Return an empty string to draw the tick line but hide the tick label
                            // Return `null` or `undefined` to hide the tick line entirely
                            userCallback: function (value, index, values) {
                                // Convert the number to a string and splite the string every 3 charaters from the end
                                value = value.toString();
                                value = value.split(/(?=(?:...)*$)/);

                                // Convert the array to a string and format the output
                                value = value.join('.');
                                return '$' + value;
                            }
                        }
                    }],
                    xAxes: [{
                        barPercentage: 0.5,

                        ticks: {
                            display: false
                        }
                    }]
                }
            }
        });


        var ctx = document.getElementById('myChart-2').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: ["Completed Orders", "Cancelled Orders", "Rejected Orders", "Auto Rejected Orders"],
                datasets: [{
                    label: '',
                    data: [316, 85, 500,5],
                    backgroundColor: [
                        '#7FB017',
                        '#D0021B',
                        '#444444',
                        '#B5B5B5'
                    ]
                }]
            },
            options: {
                legend: {
                    display: true,
                    position: 'bottom',
                    labels: {
                        usePointStyle: true,
                    }
                },
                tooltips: {
                    enabled: true,
                    mode: 'single',
                },
            }
        });


        var e = moment().startOf("day"),
            t = e.format("YYYY-MM"),
            i = e.clone().subtract(1, "day").format("YYYY-MM-DD"),
            n = e.format("YYYY-MM-DD"),
            r = e.clone().add(1, "day").format("YYYY-MM-DD");

        $("#calender").fullCalendar({
            // isRTL: isRTL(),
            // isRTL: mUtil.isRTL(),
            header: {left: "prev,next today", center: "title", right: "month,agendaWeek,agendaDay,listWeek"},
            editable: false,
            eventLimit: !0,
            navLinks: !0,
            events: [{
                title: "All Day Event",
                start: t + "-01",
                description: "Lorem ipsum dolor sit incid idunt ut",
                className: "m-fc-event--light m-fc-event--solid-primary"
            }, {
                title: "Reporting",
                start: t + "-14T13:30:00",
                description: "Lorem ipsum dolor incid idunt ut labore",
                end: t + "-14",
                className: "m-fc-event--light m-fc-event--solid-primary"
            }, {
                title: "Company Trip",
                start: t + "-02",
                description: "Lorem ipsum dolor sit tempor incid",
                end: t + "-03",
                className: "m-fc-event--light m-fc-event--solid-primary"
            }, {
                title: "ICT Expo 2017 - Product Release",
                start: t + "-03",
                description: "Lorem ipsum dolor sit tempor inci",
                end: t + "-05",
                className: "m-fc-event--light m-fc-event--solid-primary"
            }, {
                title: "Dinner",
                start: t + "-12",
                description: "Lorem ipsum dolor sit amet, conse ctetur",
                end: t + "-10",
                className: "m-fc-event--light m-fc-event--solid-primary"
            }, {
                id: 999,
                title: "Repeating Event",
                start: t + "-09T16:00:00",
                description: "Lorem ipsum dolor sit ncididunt ut labore",
                className: "m-fc-event--light m-fc-event--solid-primary"
            }, {
                id: 1e3,
                title: "Repeating Event",
                description: "Lorem ipsum dolor sit amet, labore",
                start: t + "-16T16:00:00",
                className: "m-fc-event--light m-fc-event--solid-primary"
            }, {
                title: "Conference",
                start: i,
                end: r,
                description: "Lorem ipsum dolor eius mod tempor labore",
                className: "m-fc-event--light m-fc-event--solid-primary"
            }, {
                title: "Meeting",
                start: n + "T10:30:00",
                end: n + "T12:30:00",
                description: "Lorem ipsum dolor eiu idunt ut labore",
                className: "m-fc-event--light m-fc-event--solid-primary"
            }, {
                title: "Lunch",
                start: n + "T12:00:00",
                className: "m-fc-event--light m-fc-event--solid-primary",
                description: "Lorem ipsum dolor sit amet, ut labore",
            }, {
                title: "Meeting",
                start: n + "T14:30:00",
                className: "m-fc-event--light m-fc-event--solid-primary",
                description: "Lorem ipsum conse ctetur adipi scing"
            }, {
                title: "Happy Hour",
                start: n + "T17:30:00",
                className: "m-fc-event--light m-fc-event--solid-primary",
                description: "Lorem ipsum dolor sit amet, conse ctetur"
            }, {
                title: "Dinner",
                start: n + "T20:00:00",
                className: "m-fc-event--light m-fc-event--solid-primary",
                description: "Lorem ipsum dolor sit ctetur adipi scing"
            }, {
                title: "Birthday Party",
                start: r + "T07:00:00",
                className: "m-fc-event--light m-fc-event--solid-primary",
                description: "Lorem ipsum dolor sit amet, scing"
            }, {
                title: "Click for Google",
                // url: "http://google.com/",
                start: t + "-28",
                className: "m-fc-event--light m-fc-event--solid-primary",
                description: "Lorem ipsum dolor sit amet, labore"
            }],
            eventRender: function (e, t) {
                // t.hasClass("fc-day-grid-event") ? (t.data("content", e.description), t.data("placement", "top"),
                //     mApp.initPopover(t)) : t.hasClass("fc-time-grid-event") ?
                //     t.find(".fc-title").append('<div class="fc-description">' + e.description + "</div>") : 0 !== t.find(".fc-list-item-title").lenght &&
                //     t.find(".fc-list-item-title").append('<div class="fc-description">' + e.description + "</div>")
            },
            dayClick: function(date) {
                // alert('clicked ' + date.format());
                // alert('Clicked on: ' + date.format());
            },
            eventClick:  function(event, jsEvent, view) {
                $('#fullCalModal').modal();
            }
        });

    </script>


{% endblock %}