@extends('layouts.app')

@section('contents')
    <!-- content -->
    <div class="content ">

        <div class="d-flex gap-3 mb-4 d-print-none">
            <button onclick="javascript:window.print()" class="btn btn-outline-secondary d-none d-md-block btn-icon">
                <i class="bi bi-printer"></i> Print
            </button>
            <div class="col-md-3">
                <select class="form-select" id="status_name" name="order_status">
                    @foreach($statuses as $status)
                        <option value="{{$status->order_status_name}}">{{$status->order_status_name}}</option>
                    @endforeach
                </select>

            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <div class="input-group">
                        <input class="form-control" placeholder="Date Range" name="datepicker" type="text" id="datepicker">
                    </div>
                </div>
            </div>

        </div>


        <div class="card">
            <div class="card-body">
                <div class="invoice">
                    <div class="d-md-flex justify-content-between align-items-center">
                        <h4>Average Sale</h4>
                    </div>
                    <hr class="my-4">
                    <div class="table-responsive">
                        <table class="table mb-4 mt-4">
                            <tbody>
                            <tr class="text-end">
                                <td class="text-start"><strong>Number of <div class="t_name"></div></strong></td>

                                <td id="t_number_of"></td>
                            </tr>
                            <tr class="text-end">
                                <td class="text-start"><strong>Sum of <div class="t_name"></div></strong></td>
                                <td id="t_sum"></td>
                                <td><strong>Average <div class="t_name"></div></strong></td>
                                <td id="t_avg"></td>
                            </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- ./ content -->
@endsection
@push('script')
    <script src="https://twitter.github.io/typeahead.js/js/handlebars.js"></script>
    <script>
        $(document).ready(function () {
                    var start = moment().startOf('year');
                    var end = moment().endOf('year');
                    $('#datepicker').daterangepicker({
                        startDate: start,
                        endDate: end,
                        ranges: {
                            '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')],
                            'This Month Last Year': [moment().subtract(1, 'year').startOf('month'), moment().subtract(1, 'year').endOf('month')],
                            'This Year': [moment().startOf('year'), moment().endOf('year')],
                            'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')],
                            'Current Financial Year': [moment().startOf('month'), moment().startOf('month').subtract(1, 'days').add(1, 'year')],
                            'Last Financial Year': [moment().month(3).startOf('month').subtract(1, 'year'), moment().month(3).startOf('month').subtract(1, 'days')]
                        },

                    }, callbackSetDate());

                    function callbackSetDate() {
                        $('#datepicker span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                        // updateExportFilters();
                        $('#export_start_date').val(start.format('YYYY-MM-DD'))
                        $('#export_end_date').val(end.format('YYYY-MM-DD'))
                        $('#export_date_type').val($('#date_type_dropdown').val())
                    }
                    
                });
        $(document).ready(function (){

            $(document).on('change', '#status_name, #datepicker', function (){
                get_status($('#status_name').val())
            });
            get_status($('#status_name').val());
        });

        function get_status(val)
        {
            var start = '';
            var end = '';
            
            if ($('#datepicker').val() != '') {
                start = $('#datepicker').data('daterangepicker').startDate.format('YYYY-MM-DD');
                end = $('#datepicker').data('daterangepicker').endDate.format('YYYY-MM-DD');
            }
           
            $.ajax({
                url: "{{route('average-sale')}}",
                data: {
                    "status_name": val,
                    "start_date" : start,
                    "end_date" : end
                },
                type: 'GET',
                success: function (response) {
                    $('.t_name').text(response.data.name);
                    $('#t_avg').text(response.data.avg);
                    $('#t_number_of').text(response.data.total);
                    $('#t_sum').text(response.data.sum);

                },  error: function (error){

                }
            });
        }
    </script>
@endpush