@extends('layouts.master')

@section('page_title', 'Province Wise Sale Bar Chart')
@section('title', 'Province Wise Sale Bar Chart')
@section('main_item', ' Reports')
@section('sub_item', 'Province Wise Sale 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 id="filterForm">
                            <div class="row">
                              
                                <div class="col-md-4" @if ($setting->business_location != '1') style="display: none" @endif>
                                    <div class="form-group">
                                        <label class="required" style="font-weight: bold">Business Location</label>
                                        <select class="form-control custom-select" id="business_location_id"
                                            name="location_id"> <!-- Changed 'name' to '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>
                                                    @endif
                                                @endforeach
                                            @else
                                                @foreach ($business_locations as $business_location)
                                                    @if ($business_location->is_active == '1')
                                                        <option value="{{ $business_location->business_location_id }}">
                                                            {{ $business_location->name }}
                                                        </option>
                                                    @endif
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                                <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 type="submit" 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">Province Wise Sale <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() {
            $('#filterForm').on('submit', function(event) {
                event.preventDefault();

                var formData = $(this).serialize();
                // console.log('Selected Date Range:', $('input[name="dates"]').val());

                $.ajax({
                    url: '/reports/get_province_wise_sales',
                    type: 'GET',
                    data: formData,
                    success: function(data) {
                        if (!Array.isArray(data) || data.length === 0) {
                            $('#myfirstchart').empty();
                            return;
                        }

                        $('#myfirstchart').empty();

                        new Morris.Bar({
                            element: 'myfirstchart',
                            data: data,
                            xkey: 'province',
                            ykeys: ['total'],
                            labels: ['QTY Sold'],
                            barColors: ['#0b62a4'],
                            barSizeRatio: 0.4,
                        });
                    },
                });
            });
            $('#filterForm').trigger('submit');
        });
    </script>
@endsection