@extends('layouts.app')
@section('content')

@section('css')
@endsection

<div class="row">
    <div class="col-xs-12">
        <div class="card">
            <div class="card-body">
                <div class="card-block">
                     <div class="row">
                        <div class="col-xl-3 col-lg-6 col-sm-12 border-right-blue-grey border-right-lighten-5">
                            <div class="media px-1">
                                <div class="media-left media-middle">
                                </div>
                                <div class="media-body text-xs-right">
                                    <span class="font-large-2 text-bold-300 info">{{ isset($today_sales_count)?$currency.number_format(round($today_sales_count,2)):$currency.'0' }}</span>
                                </div>
                                <p class="text-muted">Today Sale <span class="info float-xs-right">
                                @if($today_sales_count > $yesterday_sales_count)
                                <i class="icon-arrow-up4 info"></i>
                                @else
                                <i class="icon-arrow-down4 info"></i>
                                @endif
                                </span></p>
                                <progress class="progress progress-sm progress-info" value="100" max="100"></progress>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-6 col-sm-12 border-right-blue-grey border-right-lighten-5">
                            <div class="media px-1">
                                <div class="media-left media-middle">
                                </div>
                                <div class="media-body text-xs-right">
                                    <span class="font-large-2 text-bold-300 deep-orange">{{ isset($last7days_sales_count)?$currency.number_format(round($last7days_sales_count,2)):$currency.'0'}}</span>
                                </div>
                                <p class="text-muted">Last 7 days Sale<span class="deep-orange float-xs-right">
                                @if($last7days_sales_count > $last14days_sales_count)
                                <i class="icon-arrow-up4 deep-orange"></i>
                                @else
                                <i class="icon-arrow-down4 deep-orange"></i>
                                @endif 
                                </span></p>
                                <progress class="progress progress-sm progress-deep-orange" value="100" max="100"></progress>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-6 col-sm-12 border-right-blue-grey border-right-lighten-5">
                            <div class="media px-1">
                                <div class="media-left media-middle">
                                </div>
                                <div class="media-body text-xs-right">
                                    <span class="font-large-2 text-bold-300 danger">{{isset($last30days_sales_count)?$currency.number_format(round($last30days_sales_count,2)):$currency.'0'}}</span>
                                </div>
                                <p class="text-muted">Last 30 days  Sale<span class="danger float-xs-right">
                                @if($last30days_sales_count > $last60days_sales_count)
                                <i class="icon-arrow-up4 danger"></i> 
                                @else
                                <i class="icon-arrow-down4 danger"></i> 
                                @endif
                                </span></p>
                                <progress class="progress progress-sm progress-danger" value="100" max="100"></progress>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-6 col-sm-12">
                            <div class="media px-1">
                                <div class="media-left media-middle">
                                </div>
                                <div class="media-body text-xs-right">
                                    <span class="font-large-2 text-bold-300 success">{{isset($lastyear_sales_count)?$currency.number_format(round($lastyear_sales_count,2)):$currency.'0' }}</span>
                                </div>
                                <p class="text-muted">Last Year Sale<span class="success float-xs-right">
                                @if($lastyear_sales_count > $last2year_sales_count)
                                <i class="icon-arrow-up4 success"></i>
                                @else
                                <i class="icon-arrow-down4 success"></i>
                                @endif
                                </span></p>
                                <progress class="progress progress-sm progress-success" value="100" max="100"></progress>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-xs-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Sales Chart</h4>
                <a class="heading-elements-toggle"><i class="icon-ellipsis font-medium-3"></i></a>
                <div class="heading-elements">
                    <ul class="list-inline text-xs-center m-0">
                        <li>
                            <h6 class="graphchnage" style="cursor:pointer" data-id="7"><i class="icon-circle primary"></i> Last 7 Days</h6>
                        </li>
                        <li class="ml-1">
                            <h6 class="graphchnage" style="cursor:pointer" data-id="30"><i class="icon-circle success"></i> Last 30 Days</h6>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="card-body collapse in">
                <div class="card-block chartjs">
                    <canvas id="sales_line_chart_7" height="500"></canvas>
                    <canvas id="sales_line_chart_30" style="display:none;" height="500"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

@if(config('app.mod_cms') == true)
<div class="row">
    <div class="col-xs-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Visitors</h4>
                <a class="heading-elements-toggle"><i class="icon-ellipsis font-medium-3"></i></a>
                <div class="heading-elements">
                    <ul class="list-inline text-xs-center m-0">
                        <li>
                            <h6 class="visitorschnage" style="cursor:pointer" data-id="7"><i class="icon-circle"></i> Last 7 Days</h6>
                        </li>
                        <li class="ml-1">
                            <h6 class="visitorschnage" style="cursor:pointer" data-id="30"><i class="icon-circle"></i> Last 30 Days</h6>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="card-body collapse in">
                <div class="card-block chartjs">
                    <canvas id="visitors_chart_7" height="500"></canvas>
                    <canvas id="visitors_chart_30" style="display:none;" height="500"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
@endif

<div class="row">
    <div class="col-xs-12">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <!-- orders -->
                    <div class="col-xl-3 col-lg-6 col-md-12 border-right-blue-grey border-right-lighten-5">
                        <div class="my-1 text-xs-center">
                            <div class="card-header mb-2 pt-0">
                                <span class="info">Orders</span>
                                <h3 class="font-large-2 text-bold-200">{{$all_orders_count}}</h3>
                            </div>
                            <div class="card-body">
                                <ul class="list-inline clearfix mt-1 mb-0">
                                    <li class="border-right-grey border-right-lighten-2 pr-2">
                                        <h2 class="grey darken-1 text-bold-400">{{$web_orders_count}}</h2>
                                        <span class="success">Web</span>
                                    </li>
                                    <li class="pl-2">
                                        <h2 class="grey darken-1 text-bold-400">{{$app_orders_count}}</h2>
                                        <span class="danger">App</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- pos -->
                    <div class="col-xl-3 col-lg-6 col-md-12 border-right-blue-grey border-right-lighten-5">
                        <div class="my-1 text-xs-center">
                            <div class="card-header mb-2 pt-0">
                                <span class="success">POS</span>
                                <h3 class="font-large-2 text-bold-200">{{$all_pos_count}}</h3>
                            </div>
                            <div class="card-body">
                                <ul class="list-inline clearfix mt-1 mb-0">
                                    <li class="border-right-grey border-right-lighten-2 pr-2">
                                        <h2 class="grey darken-1 text-bold-400">{{$pos_dinein_count}}</h2>
                                        <span class="success">Dinein</span>
                                    </li>
                                    <li class="pl-2">
                                        <h2 class="grey darken-1 text-bold-400">{{$pos_takeaway_count}}</h2>
                                        <span class="danger">Takeaway</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- customers -->
                    <div class="col-xl-3 col-lg-6 col-md-12 border-right-blue-grey border-right-lighten-5">
                        <div class="my-1 text-xs-center">
                            <div class="card-header mb-2 pt-0">
                                <span class="deep-orange">Customers</span>
                                <h3 class="font-large-2 text-bold-200">{{$all_customers_count}}</span></h3>
                            </div>
                            <div class="card-body">
                                <ul class="list-inline clearfix mt-1 mb-0">
                                    <li class="border-right-grey border-right-lighten-2 pr-2">
                                        <h2 class="grey darken-1 text-bold-400">{{$web_customers_count}}</h2>
                                        <span class="success">Web</span>
                                    </li>
                                    <li class="pl-2">
                                        <h2 class="grey darken-1 text-bold-400">{{$app_customers_count}}</h2>
                                        <span class="danger">App</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- reservations -->
                    <div class="col-xl-3 col-lg-6 col-md-12 border-right-blue-grey border-right-lighten-5">
                        <div class="my-1 text-xs-center">
                            <div class="card-header mb-2 pt-0">
                                <span class="success">Reservations</span>
                                <h3 class="font-large-2 text-bold-200">{{$all_reservations_count}}</span></h3>
                            </div>
                            <div class="card-body">
                                <ul class="list-inline clearfix mt-1 mb-0">
                                    <li class="border-right-grey border-right-lighten-2 pr-2">
                                        <h2 class="grey darken-1 text-bold-400">{{$web_reservations_count}}</h2>
                                        <span class="success">Web</span>
                                    </li>
                                    <li class="pl-2">
                                        <h2 class="grey darken-1 text-bold-400">{{$app_reservations_count}}</h2>
                                        <span class="danger">App</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>


<!-- Customers Chart -->
<div class="row">
    <div class="col-sm-9">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Customer Stats</h4>
                <a class="heading-elements-toggle"><i class="icon-ellipsis font-medium-3"></i></a>
                <div class="heading-elements">
                    <ul class="list-inline text-xs-center m-0">
                        <li>
                            <h6 class="customerchange" style="cursor:pointer" data-id="c7"><i class="icon-circle"></i> Weekly</h6>
                        </li>
                        <li class="ml-1">
                            <h6 class="customerchange" style="cursor:pointer" data-id="c30"><i class="icon-circle"></i> Monthly</h6>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="card-body collapse in">
                <div class="card-block">
                    <canvas id="customers_chart_7" height="410"></canvas>
                    <canvas id="customers_chart_30" style="display:none;" height="410"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-lg-12 col-md-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">New Customers</h4>
                <a class="heading-elements-toggle"><i class="icon-ellipsis font-medium-3"></i></a>
                <div class="heading-elements">
                    <ul class="list-inline mb-0">
                        <li><a data-action="reload"><i class="icon-reload"></i></a></li>
                    </ul>
                </div>
            </div>
            <div class="card-body">
                <div id="new_customers" class="list-group height-450 position-relative">
                    @if(isset($new_customers) && !empty($new_customers))
                    @foreach($new_customers as $row)
                    <a href="{{route('customerProfile',['id'=>$row->id])}}" class="list-group-item list-group-item-action media">
                        <div class="media-body">
                            <h5 class="list-group-item-heading">{{ucwords($row->name)}} </h5>
                            <p class="list-group-item-text"><span class="tag tag-danger">{{$row->mobile_number}}</span> <span class="tag tag-primary ml-1">{{date('d-M-Y', strtotime($row->created_at))}}</span></p>
                        </div>
                    </a>
                    @endforeach
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>


@section('js')

<script src="{{asset('assets/admin/vendors/js/charts/chart.min.js')}}" type="text/javascript"></script>
<script>
$("#new_customers").perfectScrollbar({wheelPropagation:!0});
$('.customerchange').on('click', function () {
    var id = $(this).attr("data-id");
    if (id == 'c7') {
        $('#customers_chart_7').show();
        $('#customers_chart_30').hide();
    }
    if (id == 'c30') {
        $('#customers_chart_7').hide();
        $('#customers_chart_30').show();
    }
});

// customers_chart_7
// ------------------------------
$(window).on("load", function(){

    //Get the context of the Chart canvas element we want to select
    var ctx = $("#customers_chart_7");

    // Chart Options
    var chartOptions = {
        elements: {
            rectangle: {
                borderWidth: 2,
                borderColor: 'rgb(0, 255, 0)',
                borderSkipped: 'bottom'
            }
        },
        responsive: true,
        maintainAspectRatio: false,
        responsiveAnimationDuration:500,
        legend: {
            position: 'top',
        },
        scales: {
            xAxes: [{
                display: true,
                gridLines: {
                    color: "#f3f3f3",
                    drawTicks: false,
                },
                scaleLabel: {
                    display: true,
                }
            }],
            yAxes: [{
                display: true,
                gridLines: {
                    color: "#f3f3f3",
                    drawTicks: false,
                },
                scaleLabel: {
                    display: true,
                }
            }]
        },
        title: {
            display: true,
            text: 'Weekly'
        }
    };

    // Chart Data
    var chartData = {
        labels: [
            <?php
            for ($i = 0; $i <= 7; $i++) {
                echo "'" . date('d', strtotime('- ' . $i . ' day')) . "', ";
            }
            ?>
        ],
        datasets: [{
            label: "Web",
            data: [
                <?php
                $customers_weekly_array_w = [];
                foreach ($customers_weekly_w as $key => $value) {
                    $customers_weekly_array_w[$value->date] = $value->count;
                }

                for ($i = 0; $i < 7; $i++) {
                    $date = date('d', strtotime('- ' . $i . ' day'));
                    if (array_key_exists($date, $customers_weekly_array_w)) {
                        echo round($customers_weekly_array_w[$date], 2) . ', ';
                    } else {
                        echo '0.00, ';
                    }
                }

                ?>
            ],
            backgroundColor: "#673AB7",
            hoverBackgroundColor: "rgba(103,58,183,.9)",
            borderColor: "transparent"
        }, {
            label: "App",
            data: [
                <?php
                $customers_weekly_array_a = [];
                foreach ($customers_weekly_a as $key => $value) {
                    $customers_weekly_array_a[$value->date] = $value->count;
                }

                for ($i = 0; $i < 7; $i++) {
                    $date = date('d', strtotime('- ' . $i . ' day'));
                    if (array_key_exists($date, $customers_weekly_array_a)) {
                        echo round($customers_weekly_array_a[$date], 2) . ', ';
                    } else {
                        echo '0.00, ';
                    }
                }

                ?>
            ],
            backgroundColor: "#E91E63",
            hoverBackgroundColor: "rgba(233,30,99,.9)",
            borderColor: "transparent"
        }]
    };

    var config = {
        type: 'bar',

        // Chart Options
        options : chartOptions,

        data : chartData
    };

    // Create the chart
    var lineChart = new Chart(ctx, config);
});

// customers_chart_30
// ------------------------------
$(window).on("load", function(){

    //Get the context of the Chart canvas element we want to select
    var ctx = $("#customers_chart_30");

    // Chart Options
    var chartOptions = {
        elements: {
            rectangle: {
                borderWidth: 2,
                borderColor: 'rgb(0, 255, 0)',
                borderSkipped: 'bottom'
            }
        },
        responsive: true,
        maintainAspectRatio: false,
        responsiveAnimationDuration:500,
        legend: {
            position: 'top',
        },
        scales: {
            xAxes: [{
                display: true,
                gridLines: {
                    color: "#f3f3f3",
                    drawTicks: false,
                },
                scaleLabel: {
                    display: true,
                }
            }],
            yAxes: [{
                display: true,
                gridLines: {
                    color: "#f3f3f3",
                    drawTicks: false,
                },
                scaleLabel: {
                    display: true,
                }
            }]
        },
        title: {
            display: true,
            text: 'Monthly'
        }
    };

    // Chart Data
    var chartData = {
        labels: [
            <?php
            $mothly = array(date('F', strtotime(' 0 month')), date('F', strtotime(' -1 month')), date('F', strtotime(' -2 month')), date('F', strtotime(' -3 month')), date('F', strtotime(' -4 month')), date('F', strtotime(' -5 month')), date('F', strtotime(' -6 month')), date('F', strtotime(' -7 month')), date('F', strtotime(' -8 month')), date('F', strtotime(' -9 month')), date('F', strtotime(' -10 month')), date('F', strtotime(' -11 month')));
            echo '"' . date('F') . '", ';
            echo '"' . date('F', strtotime(' -1 month')) . '", ';
            echo '"' . date('F', strtotime(' -2 month')) . '", ';
            echo '"' . date('F', strtotime(' -3 month')) . '", ';
            echo '"' . date('F', strtotime(' -4 month')) . '", ';
            echo '"' . date('F', strtotime(' -5 month')) . '", ';
            echo '"' . date('F', strtotime(' -6 month')) . '", ';
            echo '"' . date('F', strtotime(' -7 month')) . '", ';
            echo '"' . date('F', strtotime(' -8 month')) . '", ';
            echo '"' . date('F', strtotime(' -9 month')) . '", ';
            echo '"' . date('F', strtotime(' -10 month')) . '", ';
            echo '"' . date('F', strtotime(' -11 month')) . '", ';
            ?>
        ],
        datasets: [{
            label: "Web",
            data: [
                <?php
                $customers_monthly_array_w = [];
                foreach ($customers_monthly_w as $keym => $valuem) {
                    $customers_monthly_array_w[$valuem->month] = $valuem->count;
                }
                foreach ($mothly as $key => $value) {
                    if (array_key_exists($value, $customers_monthly_array_w)) {
                        echo round($customers_monthly_array_w[$value], 2) . ', ';
                    } else {
                        echo '0.00, ';
                    }
                }
                ?>
            ],
            backgroundColor: "#673AB7",
            hoverBackgroundColor: "rgba(103,58,183,.9)",
            borderColor: "transparent"
        }, {
            label: "App",
            data: [
                <?php
                $customers_monthly_array_a = [];
                foreach ($customers_monthly_a as $keym => $valuem) {
                    $customers_monthly_array_a[$valuem->month] = $valuem->count;
                }
                foreach ($mothly as $key => $value) {
                    if (array_key_exists($value, $customers_monthly_array_a)) {
                        echo round($customers_monthly_array_a[$value], 2) . ', ';
                    } else {
                        echo '0.00, ';
                    }
                }
                ?>
            ],
            backgroundColor: "#E91E63",
            hoverBackgroundColor: "rgba(233,30,99,.9)",
            borderColor: "transparent"
        }]
    };

    var config = {
        type: 'bar',

        // Chart Options
        options : chartOptions,

        data : chartData
    };

    // Create the chart
    var lineChart = new Chart(ctx, config);
});


$('.graphchnage').on('click', function () {
    var id = $(this).attr("data-id");
    if (id == 7) {
        $('#sales_line_chart_7').show();
        $('#sales_line_chart_30').hide();
    }
    if (id == 30) {
        $('#sales_line_chart_7').hide();
        $('#sales_line_chart_30').show();
    }
});

$('.visitorschnage').on('click', function () {
    var id = $(this).attr("data-id");
    if (id == 7) {
        $('#visitors_chart_7').show();
        $('#visitors_chart_30').hide();
    }
    if (id == 30) {
        $('#visitors_chart_7').hide();
        $('#visitors_chart_30').show();
    }
});

$(window).on("load", function(){

    var ctx = $("#sales_line_chart_7");
    var chartOptions = {
        responsive: true,
        maintainAspectRatio: false,
        legend: {
            position: 'bottom',
        },
        hover: {
            mode: 'label'
        },
        scales: {
            xAxes: [{
                display: true,
                gridLines: {
                    color: "#f3f3f3",
                    drawTicks: false,
                },
                scaleLabel: {
                    display: true,
                    labelString: 'Month'
                }
            }],
            yAxes: [{
                display: true,
                gridLines: {
                    color: "#f3f3f3",
                    drawTicks: false,
                },
                scaleLabel: {
                    display: true,
                    labelString: 'Sales'
                }
            }]
        },
        title: {
            display: true,
            text: 'Last 7 Day Sales'
        }
    };
    var chartData = {
        labels: 
        [
            <?php
            $day_name = array(date('l', strtotime(' 0 day')), date('l', strtotime(' -1 day')), date('l', strtotime(' -2 day')), date('l', strtotime(' -3 day')), date('l', strtotime(' -4 day')), date('l', strtotime(' -5 day')), date('l', strtotime(' -6 day')));
            echo '"' . date('l', strtotime(' 0 day')) . '", ';
            echo '"' . date('l', strtotime(' -1 day')) . '", ';
            echo '"' . date('l', strtotime(' -2 day')) . '", ';
            echo '"' . date('l', strtotime(' -3 day')) . '", ';
            echo '"' . date('l', strtotime(' -4 day')) . '", ';
            echo '"' . date('l', strtotime(' -5 day')) . '", ';
            echo '"' . date('l', strtotime(' -6 day')) . '", ';
            ?>
        ],
        datasets: [
        {
            label: "Sale",
            data: [
                <?php
                $array_7 = [];
                foreach ($sales_graph_7 as $k => $v){
                    $array_7[$v->day] = $v->sale;
                }

                foreach ($day_name as $key => $value){
                    if (array_key_exists($value, $array_7)){
                        echo round($array_7[$value], 2) . ', ';
                    }
                    else{
                        echo '0.00,';
                    }
                }
                ?>

            ],
            lineTension: 0,
            fill: true,
            borderColor: "#967ADC",
            pointBorderColor: "#967ADC",
            pointBackgroundColor: "#FFF",
            pointBorderWidth: 2,
            pointHoverBorderWidth: 2,
            pointRadius: 4,
        }]
    };
    var config = {
        type: 'line',
        // Chart Options
        options : chartOptions,
        data : chartData
    };

    var lineChart = new Chart(ctx, config);

    var ctx30 = $("#sales_line_chart_30");
    var chartOptions30 = {
        responsive: true,
        maintainAspectRatio: false,
        legend: {
            position: 'bottom',
        },
        hover: {
            mode: 'label'
        },
        scales: {
            xAxes: [{
                display: true,
                gridLines: {
                    color: "#f3f3f3",
                    drawTicks: false,
                },
                scaleLabel: {
                    display: true,
                    labelString: 'Month'
                }
            }],
            yAxes: [{
                display: true,
                gridLines: {
                    color: "#f3f3f3",
                    drawTicks: false,
                },
                scaleLabel: {
                    display: true,
                    labelString: 'Sales'
                }
            }]
        },
        title: {
            display: true,
            text: 'Last 30 Day Sales'
        }
    };
    var chartData30 = {
        labels: 
        [
            <?php
            for ($i = 0; $i <= 30; $i++) {
                echo "'" . date('d', strtotime('- ' . $i . ' day')) . "', ";
            }
            ?>
        ],
        datasets: [
        {
            label: "Sale",
            data: [
                <?php
                $array_30 = [];
                foreach ($sales_graph_30 as $key => $value) {
                    $array_30[$value->date] = $value->sale;
                }

                for ($i = 0; $i < 30; $i++) {
                    $date = date('d', strtotime('- ' . $i . ' day'));
                    if (array_key_exists($date, $array_30)) {
                        echo round($array_30[$date], 2) . ', ';
                    } else {
                        echo '0.00, ';
                    }
                }
                ?>

            ],
            lineTension: 0,
            fill: true,
            borderColor: "#37BC9B",
            pointBorderColor: "#37BC9B",
            pointBackgroundColor: "#FFF",
            pointBorderWidth: 2,
            pointHoverBorderWidth: 2,
            pointRadius: 4,
        }]
    };
    var config30 = {
        type: 'line',
        // Chart Options
        options : chartOptions30,
        data : chartData30
    };

    var lineChart = new Chart(ctx30, config30);


    //Get the context of the Chart canvas element we want to select
    var ctx_v_7 = $("#visitors_chart_7");

    // Chart Options
    var chartOptions_v_7 = {
        responsive: true,
        maintainAspectRatio: false,
        legend: {
            position: 'bottom',
        },
        hover: {
            mode: 'label'
        },
        scales: {
            xAxes: [{
                display: true,
                gridLines: {
                    color: "#f3f3f3",
                    drawTicks: false,
                },
                scaleLabel: {
                    display: true,
                    labelString: 'Month'
                }
            }],
            yAxes: [{
                display: true,
                gridLines: {
                    color: "#f3f3f3",
                    drawTicks: false,
                },
                scaleLabel: {
                    display: true,
                    labelString: 'Value'
                }
            }]
        },
        title: {
            display: true,
            text: 'Last 7 days Visitors'
        }
    };

    // Chart Data
    var chartData_v_7 = {
        labels: [
            <?php
            $day_name = array(date('l', strtotime(' 0 day')), date('l', strtotime(' -1 day')), date('l', strtotime(' -2 day')), date('l', strtotime(' -3 day')), date('l', strtotime(' -4 day')), date('l', strtotime(' -5 day')), date('l', strtotime(' -6 day')));
            echo '"' . date('l', strtotime(' 0 day')) . '", ';
            echo '"' . date('l', strtotime(' -1 day')) . '", ';
            echo '"' . date('l', strtotime(' -2 day')) . '", ';
            echo '"' . date('l', strtotime(' -3 day')) . '", ';
            echo '"' . date('l', strtotime(' -4 day')) . '", ';
            echo '"' . date('l', strtotime(' -5 day')) . '", ';
            echo '"' . date('l', strtotime(' -6 day')) . '", ';
            ?>
        ],
        datasets: [{
            label: "Web",
            data: [
                <?php
                $array_v_w_7 = [];
                foreach ($visitors_graph_7 as $k => $v){
                    $array_v_w_7[$v->day] = $v->web_count;
                }

                foreach ($day_name as $key => $value){
                    if (array_key_exists($value, $array_v_w_7)){
                        echo round($array_v_w_7[$value], 2) . ', ';
                    }
                    else{
                        echo '0.00,';
                    }
                }
                ?>
            ],
            lineTension: 0,
            fill: false,
            borderColor: "#FF5722",
            pointBorderColor: "#FF5722",
            pointBackgroundColor: "#FFF",
            pointBorderWidth: 2,
            pointHoverBorderWidth: 2,
            pointRadius: 4,
        }, {
            label: "App",
            data: [
                <?php
                $array_v_a_7 = [];
                foreach ($visitors_graph_7 as $k => $v){
                    $array_v_a_7[$v->day] = $v->web_count;
                }

                foreach ($day_name as $key => $value){
                    if (array_key_exists($value, $array_v_a_7)){
                        echo round($array_v_a_7[$value], 2) . ', ';
                    }
                    else{
                        echo '0.00,';
                    }
                }
                ?>
            ],
            lineTension: 0,
            fill: false,
            borderColor: "#00BCD4",
            pointBorderColor: "#00BCD4",
            pointBackgroundColor: "#FFF",
            pointBorderWidth: 2,
            pointHoverBorderWidth: 2,
            pointRadius: 4,
        }]
    };

    var config_v_7 = {
        type: 'line',

        // Chart Options
        options : chartOptions_v_7,

        data : chartData_v_7
    };

    // Create the chart
    var lineChart = new Chart(ctx_v_7, config_v_7);

    



    //Get the context of the Chart canvas element we want to select
    var ctx_v_30 = $("#visitors_chart_30");

    // Chart Options
    var chartOptions_v_30 = {
        responsive: true,
        maintainAspectRatio: false,
        legend: {
            position: 'bottom',
        },
        hover: {
            mode: 'label'
        },
        scales: {
            xAxes: [{
                display: true,
                gridLines: {
                    color: "#f3f3f3",
                    drawTicks: false,
                },
                scaleLabel: {
                    display: true,
                    labelString: 'Month'
                }
            }],
            yAxes: [{
                display: true,
                gridLines: {
                    color: "#f3f3f3",
                    drawTicks: false,
                },
                scaleLabel: {
                    display: true,
                    labelString: 'Value'
                }
            }]
        },
        title: {
            display: true,
            text: 'Last 30 days Visitors'
        }
    };

    // Chart Data
    var chartData_v_30 = {
        labels: [
            <?php
            for ($i = 0; $i <= 30; $i++) {
                echo "'" . date('d', strtotime('- ' . $i . ' day')) . "', ";
            }
            ?>
        ],
        datasets: [{
            label: "Web",
            data: [
                <?php
                $array_v_w_30 = [];
                foreach ($visitors_graph_30 as $k => $v){
                    $array_v_w_30[$v->date] = $v->web_count;
                }

                for ($i = 0; $i < 30; $i++) {
                    $date = date('d', strtotime('- ' . $i . ' day'));
                    if (array_key_exists($date, $array_v_w_30)) {
                        echo round($array_v_w_30[$date], 2) . ', ';
                    } else {
                        echo '0.00, ';
                    }
                }
                ?>
            ],
            lineTension: 0,
            fill: false,
            borderColor: "#FF5722",
            pointBorderColor: "#FF5722",
            pointBackgroundColor: "#FFF",
            pointBorderWidth: 2,
            pointHoverBorderWidth: 2,
            pointRadius: 4,
        }, {
            label: "App",
            data: [
                <?php
                $array_v_a_30 = [];
                foreach ($visitors_graph_30 as $k => $v){
                    $array_v_a_30[$v->day] = $v->web_count;
                }

                for ($i = 0; $i < 30; $i++) {
                    $date = date('d', strtotime('- ' . $i . ' day'));
                    if (array_key_exists($date, $array_v_a_30)) {
                        echo round($array_v_a_30[$date], 2) . ', ';
                    } else {
                        echo '0.00, ';
                    }
                }

                ?>
            ],
            lineTension: 0,
            fill: false,
            borderColor: "#00BCD4",
            pointBorderColor: "#00BCD4",
            pointBackgroundColor: "#FFF",
            pointBorderWidth: 2,
            pointHoverBorderWidth: 2,
            pointRadius: 4,
        }]
    };

    var config_v_30 = {
        type: 'line',

        // Chart Options
        options : chartOptions_v_30,

        data : chartData_v_30
    };

    // Create the chart
    var lineChart = new Chart(ctx_v_30, config_v_30);


});

</script> 

@endsection
@endsection