@extends('layouts.app')
@section('page-title')| Dashboard  @endsection

@section('css')
    <link href="{!! env('APP_ASSETS') !!}css/dashboard.css" rel="stylesheet" type="text/css">
    <link href="{!! env('APP_ASSETS') !!}vendor_components/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
    @endsection
@section('content')
    @php

            $resto = \App\Models\Restaurants::find(\App\Helpers\CommonMethods::getRestuarantID());

            $lang = $resto->default_lang;

    app()->setLocale($lang);
    if(session('app_lang') !==null){
    $lang = session('app_lang');
    app()->setLocale($lang);

    }











    @endphp
@php
    $restuarant1 = $resto;
         $resto_metas = \App\Helpers\CommonMethods::getRestoMetas($restuarant1);
            $currency = isset($resto_metas['BUSSINESS_CCY'])?$resto_metas['BUSSINESS_CCY']:"IQD";

            $business_type = isset($resto_metas['BUSSINESS_TYPE'])?$resto_metas['BUSSINESS_TYPE']:"Restaurants";

@endphp
<style type="text/css">

    .tbl_row,.tbl_h4_title{
        padding: 10px;
    }
    .tbl_h4_title
    {
      padding-left: 0;
      margin-left: 0 !important;
    }
    table {
    --bs-table-bg: transparent !important;

    }
    .dashboard-month-select{
        margin-top:8px;
    }
    @media (device-width: 854px) and (device-height: 534px) {
       .count_h3{
           font-size: 18px;
        }

    }
</style>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <div class="container-full">
            <!-- Main content -->

            <section class="content">
                <div class="row ">
                    <div class="col-md-10">
                        <div class="page-top-title">
                            <h3 class="title m-0">{{__('label.dashboard')}}</h3>
                        </div>
                    </div>
                </div>
                <div class="row p-0 m-0">
                    <div class="col-md-6 ">
                        <div class="form-group">
                            <label>Time frame</label>
                            <div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                                <i class="fa fa-calendar"></i>&nbsp;
                                <span></span> <i class="fa fa-caret-down"></i>
                            </div>
                        </div>
                    </div>
                    <!--<div class="col-md-6">
                       <button class="form-control btn  btn-md shadow-none ">Launch marketing activity</button>
                       </div>-->
                </div>
                <div class="row m-0 align-items-center">
                    <div class="col-md-6">
                        <div class="count_div h-100 ">
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="d-flex p-2 bd-highlight bd-highlight-w-50">
                                    <p class="count_title">{{__('label.total_orders')}}</p>
                                </div>
                                <div class="right_text_div right_text_div-w-50">
                                    <a class="d-block text-decoration-none count_atag">
                                        <h3 class="count_h3 text-break"><span rel="completed-orders">0</span></h3>
                                        <small class="text-secondary count_small_tag active">{{__('label.order_completed')}}</small>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="count_div h-100 ">
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="d-flex p-2 bd-highlight bd-highlight-w-50">
                                    <p class="count_title">{{__('label.average_basket_value')}}</p>
                                </div>
                                <div class="right_text_div right_text_div-w-50">
                                    <a class="d-block text-decoration-none count_atag">
                                        <div class="d-flex justify-content-center align-items-center">
                                            <small class="iqd_small">{!! $currency !!}</small>
                                            <h3 class="count_h3 text-break">
                                                <span rel="average_basket_value">0</span>
                                            </h3>
                                        </div>
                                        <small class="text-secondary count_small_tag">{{__('label.average_basket_value')}}</small>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="count_div h-100 ">
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="d-flex p-2 bd-highlight bd-highlight-w-50">
                                    <p class="count_title">{{__('label.total_sale')}}</p>
                                </div>
                                <div class="right_text_div right_text_div-w-50">
                                    <a class="d-block text-decoration-none count_atag">
                                        <div class="d-flex justify-content-center align-items-center">
                                            <small class="iqd_small">{!! $currency !!}</small>
                                            <h3 class="count_h3 text-break"> <span rel="total_sales">0</span></h3>
                                        </div>
                                        <small class="text-secondary count_small_tag">{{__('label.total_sale_revenue')}}</small>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="count_div h-100 ">
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="d-flex p-2 bd-highlight bd-highlight-w-50">
                                    <p class="count_title">{{__('label.average_order_rating')}}</p>
                                </div>
                                <div class="right_text_div right_text_div-w-50">
                                    <a class="d-block text-decoration-none count_atag">
                                        <h3 class="count_h3 text-break">N/A</h3>
                                        <small class="text-secondary count_small_tag">{{__('label.average_order_rating')}}</small>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row m-0">
                    <div class="col-12 mt-25">
                        <div class="tbl_row">
                            <h4 class="m-5 tbl_h4_title">{{__('label.new_customers_x_returning_customers')}}</h4>
                            <div class="table-responsive">
                                <table class="table text-center table-borderless">
                                    <thead>
                                    <tr>
                                        <th scope="col"></th>
                                        <th scope="col">{{__('label.orders')}}</th>
                                        <th scope="col">{{__('label.customers')}}</th>
                                        <th scope="col">{{__('label.customers')}} %</th>
                                        <th scope="col">{{__('label.average_basket_value')}}</th>
                                        <th scope="col">{{__('label.total_sale')}}</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>{{__('label.new')}}</td>

                                        <td><span rel="new_orders">0</span></td>
                                        <td><span rel="nwe_customers">0</span></td>
                                        <td><span rel="new_customer_percentage">0</span></td>
                                        <td><span rel="new_orders_avg_basket">0</span></td>
                                        <td><span rel="new_orders_total_price">0</span></td>
                                    </tr>
                                    <tr class="row_background">
                                        <td>{{__('label.returning')}}</td>
                                        <td><span rel="old_orders">0</span></td>
                                        <td><span rel="old_customers">0</span></td>
                                        <td><span rel="old_customer_percentage">0</span></td>
                                        <td><span rel="old_orders_avg_basket">0</span></td>
                                        <td><span rel="old_orders_total_price">0</span></td>
                                    </tr>
                                    </tbody>
                                    <tfoot>
{{--                                    <tr>--}}
{{--                                        <th>{{__('label.total')}}</th>--}}
{{--                                        <th><span ref="total_orders_new_old"></span></th>--}}
{{--                                        <th><span ref="total_customers_new_old"></span></th>--}}
{{--                                        <th>100%</th>--}}
{{--                                        <th><span ref="total_basket_avg"></span></th>--}}
{{--                                        <th><span ref="total_orders_price"></span></th>--}}
{{--                                    </tr>--}}
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mt-25 mb-25 m-0">
                    <div class="col-md-6">
                        <div class="boxs">
                            <div class="box-header with-border">
                                <h4 class="box-title">{{__('label.total_order_by_source')}}</h4>
                            </div>
                            <div class="box-bodys">
                                <div id="chart" class="h-350">

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="boxs">
                            <div class="box-header with-border2">
                                <h4 class="box-title">{{__('label.total_orders_by_outlets')}}</h4>
                            </div>
                            <div class="box-bodys">
                                <div id="yearly-comparison" class="h-350">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- /.content -->
        </div>
    </div>

    <!-- /.content-wrapper -->
    @endsection

@section('js')
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>
   <script src="{!! env('APP_ASSETS') !!}vendor_components/apexcharts-bundle/dist/apexcharts.min.js"></script>
   <script src="{!! env('APP_ASSETS') !!}vendor_components/chartist-js-develop/chartist.js"></script>
   <script type="text/javascript" src="{!! env('APP_ASSETS') !!}vendor_components/bootstrap-daterangepicker/daterangepicker.min.js"></script>
    <!-- Chart Js -->
    <!-- Datatable Js -->


    <script>
        var resto_id = 0;
        var start = moment().subtract(29, 'days');
        var end = moment();





        $('#reportrange').daterangepicker({
            startDate: start,
            endDate: end,
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
        }, cb);



        cb(start, end);


        function cb(start, end) {
            $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
            $.ajax({
                url:"{!! env('APP_URL') !!}dashboard/analytics",
                type:"POST",
                data:{
                    start_date:start.format('YYYY-MM-DD') ,
                    end_date:end.format('YYYY-MM-DD'),
                    "_token":"{!! csrf_token() !!}"
                },
                success:function(response){
                    $("span[rel=completed-orders]").html(response.total_orders);
                    $("span[rel=total_sales]").html(response.total_sale);
                    $("span[rel=total_sales]").html(response.total_sale);
                    $("span[rel=average_basket_value]").html(response.average_basket_value);
                    $("span[rel=new_orders]").html(response.orders.new_orders.value);
                    $("span[rel=old_orders]").html(response.orders.old_orders.value);

                    $("span[ref=total_orders_new_old]").html(parseFloat(response.orders.old_orders.value) + parseFloat(response.orders.new_orders.value));


                    $("span[rel=nwe_customers]").html(response.customers.new_customer.value);
                    $("span[rel=old_customers]").html(response.customers.old_customer.value);

                    $("span[ref=total_customers_new_old]").html(parseFloat(response.customers.new_customer.value) + parseFloat(response.customers.old_customer.value));

                    $("span[rel=new_customer_percentage]").html(response.customers.new_customer.percentage);
                    $("span[rel=old_customer_percentage]").html(response.customers.old_customer.percentage);

                    $("span[rel=new_orders_avg_basket]").html(response.average_basket.new);
                    $("span[rel=old_orders_avg_basket]").html(response.average_basket.returning);

                    $("span[ref=total_basket_avg]").html(parseFloat(response.average_basket.total_averge_basket) );

                    $("span[rel=new_orders_total_price]").html(response.total_basket_sale.new);
                    $("span[rel=old_orders_total_price]").html(response.total_basket_sale.returning);

                    $("span[ref=total_orders_price]").html(parseFloat(response.total_basket_sale.total_sale) );





                    var campaign_chart_labels = [];
                    var campaign_chart_data = [];
                    var outlet_chart_labels = [];
                    var outlet_chart_data = [];

                    var campaign_data = response.order_by_source;
                    var outlet_data = response.order_by_outlet;
                    if(campaign_data){
                        $.each(campaign_data,function(i,v) {
                                campaign_chart_labels.push(v.campaign_type);
                            campaign_chart_data.push(v.total_campaign);

                        })
                    }

                    if(outlet_data){
                        $.each(outlet_data,function(i,v) {
                            outlet_chart_labels.push(v.name);
                            outlet_chart_data.push(v.orders);

                        })
                    }


                    chart("#chart",campaign_chart_labels,campaign_chart_data);
                    chart("#yearly-comparison",outlet_chart_labels,outlet_chart_data);

                }
            });
        }
        $(function () {

            chart("#chart");
            chart("#yearly-comparison");
        });

        function chart(chartCantainer,labels,seriesData){

            new Chartist.Bar(chartCantainer,
                {
                    labels:labels,
                    series: [

                        {className: "stroke-green", meta: "OK", data: seriesData},

                    ]
                },
                {
                    seriesBarDistance: 10,
                    reverseData: true,
                    horizontalBars: true,
                    axisY: {
                        offset: 70
                    }
                });
         //   var chart = new ApexCharts(document.querySelector("#chart3"), options);
         //   chart.render();
        }
    </script>
@endsection