@extends("layouts.admin.app")
@section("page-title")
    {{__("Request Rate Report")}}
@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">
        <div class="tile-title">
            <h3>{{__('Filtering')}}</h3>
        </div>
        <div class="tile-body">
            <div class="row">
                <div class="col-4">
                    <div class="form-group">
                        <label class="control-label">{{__("Period")}}</label>
                        <select class="form-control"  id="Status">
                            <option value="" {{$status == "all" ? "selected": ""}}>{{__('All')}}</option>
                            <option value="Weekly" {{$status == "Weekly" ? "selected": ""}}>{{__('Weekly')}}</option>
                            <option value="Monthly" {{$status == "Monthly" ? "selected": ""}}>{{__('Monthly')}}</option>
                            <option value="Day" {{$status == "Day" ? "selected": ""}}>{{__('Day')}}</option>
                            <option value="Yearly" {{$status == "Yearly" ? "selected": ""}}>{{__('Yearly')}}</option>
                        </select>
                    </div>
                </div>
                <div class="col-4">
                    <div class="form-group" >
                        <label class="control-label">{{__("Date From")}}</label>
                        <input type="date" id="from" class="form-control" value="{{$date_from != "all" ? $date_from : ""}}" name="date_from">
                    </div>
                </div>
                <div class="col-4">
                    <div class="form-group">
                        <label class="control-label">{{__("Date To")}}</label>
                        <input type="date" id="to" class="form-control" value="{{$date_to != "all" ? $date_to : ""}}" name="date_to">
                    </div>
                </div>
            </div>
            <div class="tile-footer">
                <button class="btn btn-primary" id="FilterButton" data-url="{{route("admin.report.Request_rate")}}"><i class="fa fa-fw fa-lg fa-check-circle"></i>{{__("Filter")}}</button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="tile">

                <div class="tile-body">

                    <div class="col-md-6">
                        <div class="tile">
                            <h3 class="tile-title">{{$status == "all" ? "Monthly" : $status}} 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>
        <script>
            $("#FilterButton").on("click", function (){
                let  url = $(this).data("url"),
                    status = $("#Status").val(),
                    from = $("#from").val(),
                    to = $("#to").val()
                url = status ? `${url}/${status}` : url;
                url = from ? `${url}?date_from=${from}` : url;
                url = to ? `${url}&date_to=${to}` : url;
                window.location = url
            });
        </script>
@endsection