@extends('templates.structure')
@section('custom_css')
<link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datepicker/datepicker3.css')}}">
<link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/select2/select2.min.css')}}">
@endsection
@section('content')

<div class="row">
    <div class="col-12">

        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Sales Reports</h3>
            </div>

            <form role="form" id="form">
                <div class="card-body">
                    <div class="row">  
                        <div class="col-12 col-md-4">
                                <div class="form-group">
                                    <label>Country: </label>
                                    <select name="country" class="form-control">
                                        <option>Choose Country</option>
                                        <option value="IDR">Indonesia</option>
                                        <option value="THB">Thailand</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-12 col-md-4">
                                <div class="form-group">
                                    <label>Period From: </label>
                                    <input type="text" name="from_period" placeholder="{{\Carbon\Carbon::parse('first day of this month')->toDateString()}}" class="form-control datepick">
                                </div>
                            </div>
                            <div class="col-12 col-md-4">
                                <div class="form-group">
                                    <label>Period To: </label>
                                    <input type="text" name="to_period" placeholder="{{\Carbon\Carbon::now()->endOfMonth()->toDateString()}}" class="form-control datepick">
                                </div>
                            </div>
                    </div>
                </div>

                <div class="card-footer">
                    <button type="submit" class="btn btn-info float-right">Save</button>
                    {{-- <button class="btn btn-default float-right">Cancel</button> --}}
                </div>
            </form>
        </div>

    </div>
</div>

<div class="row">
    <div id="locationChart" class="col-12 d-none">
        <!-- DONUT CHART -->
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">Revenue Per-Location Chart</h3>

                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                  </button>
                </div>
              </div>
              <div class="card-body">
                <canvas id="locationCanvas" style="height:250px"></canvas>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
    </div>

    <div id="categoryChart" class="col-6 d-none">
        <!-- DONUT CHART -->
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">Revenue Earned Based on Product Category</h3>

                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                  </button>
                </div>
              </div>
              <div class="card-body">
                <canvas id="categoryCanvas" style="height:250px"></canvas>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
    </div>
</div>
@endsection


@section('custom_js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.30.0/dist/sweetalert2.all.min.js"></script>
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datepicker/bootstrap-datepicker.js')}}"></script>
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/select2/select2.full.min.js')}}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<!-- ChartJS 1.0.1 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
<!-- FastClick -->
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/fastclick/fastclick.js')}}"></script>
<!-- AdminLTE App -->
<script src="{{asset('AdminLTE-3.0.0-alpha.2/dist/js/adminlte.min.js')}}"></script>

<script>
    $('document').ready(() => {
        // runPie('xx');
    });
var country = $('[name="country"]');
var from_period = $('[name="from_period"]');
var to_period = $('[name="to_period"]');

country.select2({
    placeholder: ' Choose Location',
    width: '100%',
    allowClear: true
});

$('.datepick').datepicker({
    autoclose: true,
    format: "yyyy-mm-dd",
    onSelect: function(selectedDate) { alert(selectedDate) }
});
    
</script>

{{-- Script for chart --}}
<script>
var frm = $('#form');

frm.submit((e) => {
    e.preventDefault();
    // if($('[name="location_id"]').val() != ''){
        $("body").addClass("loading");

        var input = '?';
        input += 'country=' + $('[name="country"]').val();
        if(from_period.val() != null && to_period.val() != null){
            input += '&from_period=' + $('[name="from_period"]').val();
            input += '&to_period=' + $('[name="to_period"]').val();
        }

        axios.get('{{route("reporting.sales.datatable")}}'+input, config) .then(function (data) {
            console.log(data)
            runLocationChart(data.data.location_based);
            runCategoryChart(data.data.category_based);
            $("body").removeClass("loading");
        });
    // }else{
    //     Swal({
    //         type: 'error',
    //         title: 'Oops...',
    //         text: 'Please choose the location first!',
    //         // footer: '<a href>Why do I have this issue?</a>'
    //     });
    // }

    
});

// function setupChart(data)
// {
//     var facility_id = [];

//     $.each(data, (key, val) => {
//         var currentColor = getRandomColor();

//         facility_id.push({
//             x    : val.slots_report.total_slots,
//             y    : val.slots_report.facility_name,
//             color    : currentColor,
//             highlight: currentColor
//         });
//     })

//     runPie(facility_id);
//     // $.each(data, (key, val) => {
        
//     // })

//     // location_id.m
// }

function runLocationChart(datax)
{
    var backgroundColorData = [];

    for (let i = 0; i < Object.keys(datax.label).length; i++) {
        backgroundColorData.push(getRandomColor(0.5));       
    }

    var ctx = document.getElementById('locationCanvas').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: datax.label,
            datasets: [{
                label: ' Revenue Total',
                data: datax.dataset,
                backgroundColor: backgroundColorData,
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            },
            tooltips: {
                callbacks: {
                    label: function(tooltipItem, data) {
                          return $('select[name="country"]').val()+' '+numeral(data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]).format('0,0')+' of Revenue Earned';
                     }
               }
          }
        }
    });

    myChart.clear();
    myChart.update();

    $('#locationChart').removeClass('d-none').addClass('d-block');
}

function runCategoryChart(datax)
{
    var backgroundColorData = [];

    for (let i = 0; i < Object.keys(datax.label).length; i++) {
        backgroundColorData.push(getRandomColor(0.5)); 
    }

    var ctx = document.getElementById('categoryCanvas').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: datax.label,
            datasets: [{
                label: ' Revenue Total',
                data: datax.dataset,
                backgroundColor: backgroundColorData,
                borderWidth: 1
            }]
        },
        options: {
            tooltips: {
                callbacks: {
                    label: function(tooltipItem, data) {
                          return $('select[name="country"]').val()+' '+numeral(data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]).format('0,0')+' of Revenue Earned';
                     }
               }
          }
        }
    });

    myChart.clear();
    myChart.update();

    $('#categoryChart').removeClass('d-none').addClass('d-block');
}
</script>
@endsection