@extends("layouts.admin.app")
@section("page-title")
    {{__("Dashboard")}}
@endSection
@section("page-nav-title")
    <div class="app-title">
        <div>
            <h1><i class="fa fa-dashboard"></i>{{__("Order rate report")}}</h1>
            <p>{{__("Order rate report")}}</p>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="#">{{__("Dashboard")}}</a></li>
            <li class="breadcrumb-item"><a href="#">{{__("Order rate report")}}</a></li>
        </ul>
    </div>
@endsection
@section("css-links")
    <link rel="stylesheet" href="{{asset("assets/css/" . app()->getLocale() . "/pages/orders.css")}}">
@endsection

@section("content")
    <div class="tile-body">
        <div class="row">
            <div class="col-12">
                <div class="form-group">
                    <label class="control-label">{{__("Period")}}</label>
                    <select class="form-control"  id="Status">
                        <option value="">{{__('Weekly')}}</option>
                        <option value="">{{__('Monthly')}}</option>
                        <option value="">{{__('Yearly')}}</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="tile-body">
                <div class="row">
                    <div class="col-12">
                        <div class="tile">
                            <form action="{{route('admin.report.Request_rate')}}" method="post"  id="form-excel">
                                @csrf
                                <input type="hidden" name="status" value="0">
                                <input type="hidden" name="status" value="0"id="">
                                <span  class="download-excel btn btn-success" style="float: right;"><i class="far fa-fw fa-lg  fa-file-excel"></i> {{__("Export As Excel")}}</span>
                            </form>
                            <div class="tile-body">

                                <div class="col-md-6">
                                    <div class="tile">
                                        <h3 class="tile-title">{{__("Monthly Orders")}}</h3>
                                        <div class="embed-responsive embed-responsive-16by9">
                                            <canvas class="embed-responsive-item" id="barChartDemo"></canvas>
                                        </div>
                                    </div>
                                </div>

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

            @endsection
                @section("scripts")
                    <script type="text/javascript" src="{{asset('assets/js/plugins/chart.js') }}"></script>
                    <script type="text/javascript">
                        let months = [],
                            totalOrders = [];
                        @foreach( $orders as $month => $order)
                        months.push("{{ $month }}");
                        totalOrders.push("{{ $order['total_orders'] }}");

                        @endforeach

                        var ordersData = {
                            labels: months,
                            datasets: [
                                {
                                    label: "Orders",
                                    fillColor: "rgba(151,187,205,0.2)",
                                    strokeColor: "rgba(151,187,205,1)",
                                    pointColor: "rgba(151,187,205,1)",
                                    pointStrokeColor: "#fff",
                                    pointHighlightFill: "#fff",
                                    pointHighlightStroke: "rgba(151,187,205,1)",
                                    data: totalOrders
                                }
                            ]
                        };

                        var pdata = [
                            {
                                value: 300,
                                color: "#46BFBD",
                                highlight: "#5AD3D1",
                                label: "Complete"
                            },
                            {
                                value: 50,
                                color:"#F7464A",
                                highlight: "#FF5A5E",
                                label: "In-Progress"
                            }
                        ]


                        // var ctxp = $("#pieChartDemo").get(0).getContext("2d");
                        // var pieChart = new Chart(ctxp).Pie(pdata);

                        var ctxb = $("#barChartDemo").get(0).getContext("2d");
                        var barChart = new Chart(ctxb).Bar(ordersData);

                    </script>

                <!-- Data table plugin-->
                    <script type="text/javascript" src="{{asset("assets/js/plugins/jquery.dataTables.min.js")}}"></script>
                    <script type="text/javascript" src="{{asset("assets/js/plugins/dataTables.bootstrap.min.js")}}"></script>
                    <script type="text/javascript">$('#sampleTable').DataTable({
                            "pageLength" : 25,
                            "order": [[ 0, "desc" ]]
                        });</script>

                    <script type="text/javascript">
                        $(".download-excel").click(function (e){
                            e.preventDefault();

                            let status = $("#status-filter option:selected").data("value");


                            $(this).siblings("input[name='status']").val(status);


                            $("#form-excel").submit();

                        });
                    </script>
                    <!-- Google analytics script-->
                    <script type="text/javascript">
                        if(document.location.hostname == 'pratikborsadiya.in') {
                            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                                (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                                m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
                            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
                            ga('create', 'UA-72504830-1', 'auto');
                            ga('send', 'pageview');
                        }
                    </script>
@endsection