@extends('layouts.master')

@section('page_title', 'Trending Product Report')
@section('title', 'Trending Product Report')
@section('main_item', 'Product Report')
@section('sub_item', 'Trending Product 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">
                                    <div class="form-group">
                                        <label style="font-weight: bold" for="area">Area</label>
                                        <select class="form-control select2" id="area" name="area">
                                            <option value="">All</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="supplier">Agent Users </label>
                                        <select class="form-control select2" id="user_id" name="user_id">
                                            <option value="">All</option>
                                            @foreach ($woocommerce_users as $user)
                                                <option value="{{ $user->id }}">{{ $user->username }}</option>
                                            @endforeach
                                        </select>
                                    </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="d-flex mt-4 gap-2">
                                    <button class="btn btn-primary mr-2">Filter Results</button>
                                    <a href="{{ url('reports/trending') }}" class="btn btn-danger px-5 py-2">Reset</a>
                                </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>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        $(document).ready(function() {
            $("#area").select2();
            $("#user_id").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_user_id = getUrlParameter('user_id');
            var report_date = getUrlParameter('dates');
            $('#report_limit').val(report_limit);
            $('#area').val(report_area).change();
            $('#user_id').val(report_user_id).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({
        
            element: 'myfirstchart',
         
            data: JSON.parse(newText),
          
            xkey: 'product_name',
  
            ykeys: ['sum'],
        
            labels: ['QTY Sold']
        });
    </script>
@endsection