@extends('layouts.master')

@section('page_title', 'Province Wise Sales Bar Chart')
@section('title', 'Province Wise Sales Bar Chart')
@section('main_item', ' Reports')
@section('sub_item', 'Province Wise Sales Bar Chart')

@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/get_province_wise_sales" method="GET">
                            <div class="row">

                                <div class="col-md-4">
                                    <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="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>
                       
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script>
        var string = '{{ $sales }}';
        
        var newText = string.replace(/&quot;/ig, '"');

      

        new Morris.Bar({
         
            element: 'myfirstchart',
         
            data: JSON.parse(newText),
          
            xkey: 'province',
          
            ykeys: ['total'],
           
            labels: ['QTY Sold']
        });
    </script>
@endsection