@extends('layouts.master')

@section('page_title', 'Tranding Product Report')
@section('title', 'Tranding Product Reports')
@section('main_item', ' Reports')
@section('sub_item', 'Tranding Report')

@section('content')

    <div class="col-12">
        <div class="card">
            <div id="accordion">
                
                <div class="border-bottom card-header" style="background-color: white; cursor: pointer;" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    <h4 class="mb-0 header-title">
                        Filter
                    </h4>
                </div>
                

            <div id="collapseOne" class="collapse show mt-3" aria-labelledby="headingOne" data-parent="#accordion">
            <div class="card-body">
                <form action="/reports/trending" method="GET">
                    <div class="row">
                         <div class="col-md-3" @if ($setting->business_location != '1') style="display: none" @endif >
                        <div class="form-group">
                            <label class="required" style="font-weight: bold" for="activate_code">business Location</label>
                            <select class="form-control select2" id="location_id" name="location_id">
                                <option value="">All</option>
                                      @if (Auth::user()->role_id == '1')
                                    @foreach ($business_locations as $business_location)
                                        @if ($business_location->is_active == '1')
                                            <option value="{{ $business_location->id }}">
                                                {{ $business_location->name }}
                                            </option>
                                        @else
                                        @endif
                                    @endforeach
                                @else
                                    @foreach ($users_access_location as $business_location)
                                        @if ($business_location->is_active == '1')
                                            <option value="{{ $business_location->business_location_id }}">
                                                {{ $business_location->name }}
                                            </option>
                                        @else
                                        @endif
                                    @endforeach
                                @endif
                            </select>
                        </div>
                    </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label style="font-weight: bold" for="area">Area</label>
                                <select class="form-control select2" id="area" name="area">
                                    <option value="">Select</option>
                                    @foreach ($areas as $area)
                                        <option value="{{ $area->id }}">{{ $area->name_en }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label style="font-weight: bold" for="supplier">Date Range</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" name="dates" id="reportrange" readonly>
                                    <div class="input-group-append">
                                        <span class="input-group-text"><i class="dripicons-calendar"></i></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label style="font-weight: bold" for="area">Report Limit</label>

                                <input type="text" class="form-control" placeholder="" id="report_limit" name="limit"
                                    value="5">

                            </div>
                        </div>
                        <div class="mt-4">
                            <button class="btn btn-primary">Filter Results</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
        </div>
    </div>
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="col-xs-12">
                    <div class="box box-primary">
                        <div class="box-header">

                            <h3 class="box-title">Top Trending Products <i
                                    class="fa fa-info-circle text-info hover-q no-print " aria-hidden="true"
                                    data-container="body" data-toggle="popover" data-placement="auto bottom"
                                    data-content="Top selling products of your shop. <br/><small class='text-muted'>Apply filters to know trending products for specific Category, Brand, Business Location etc.</small>"
                                    data-html="true" data-trigger="hover"></i></h3>
                        </div>
                        <div class="box-body">
                            <div id="myfirstchart" style="height: 400px;"></div>
                        </div>
                        <!-- /.box-body -->
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $("#area").select2();

            var getUrlParameter = function getUrlParameter(sParam) {
                var sPageURL = decodeURIComponent(window.location.search.substring(1)),
                    sURLVariables = sPageURL.split('&'),
                    sParameterName,
                    i;

                for (i = 0; i < sURLVariables.length; i++) {
                    sParameterName = sURLVariables[i].split('=');

                    if (sParameterName[0] === sParam) {
                        return sParameterName[1] === undefined ? true : sParameterName[1];
                    }
                }
            };
            var report_limit = getUrlParameter('limit');
            var report_area = getUrlParameter('area');
            var report_date = getUrlParameter('dates');

            $('#report_limit').val(report_limit);
            $('#area').val(report_area).change();


            myString = report_date.split('+-+').join('/');
            var result = myString.split('/');

            $('#reportrange').daterangepicker({
                startDate: result[0],
                endDate: result[1],
                ranges: {
                    'All Data': ['2020-01-01', moment()],
                    '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')]
                },
                locale: {
                    format: 'Y-M-DD'
                }
            });

        });


        var string = '{{ $sale_items }}';
        console.log(string)
        var newText = string.replace(/&quot;/ig, '"');

        console.log(string)

        new Morris.Bar({
            // ID of the element in which to draw the chart.
            element: 'myfirstchart',
            // Chart data records -- each entry in this array corresponds to a point on
            // the chart.
            data: JSON.parse(newText),
            // The name of the data record attribute that contains x-values.
            xkey: 'product_name',
            // A list of names of data record attributes that contain y-values.
            ykeys: ['sum'],
            // Labels for the ykeys -- will be displayed when you hover over the
            // chart.
            labels: ['QTY Sold']
        });
    </script>
@endsection