@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">Meeting Room 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>Location: </label>
                                    <select name="location_id" class="form-control">
                                        <option value=""></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-12 col-md-4">
                                <div class="form-group">
                                    <label>Facility: </label>
                                    <select name="facility_id" class="form-control">
                                        <option value=""></option>
                                    </select>
                                </div>
                            </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Date: </label>
                                <input type="text" name="booking_date" value="{{\Carbon\Carbon::now()->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 class="col-12">
        <!-- DONUT CHART -->
            <div class="card card-danger">
              <div class="card-header">
                <h3 class="card-title">Donut Chart</h3>

                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                  </button>
                  <button type="button" class="btn btn-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                </div>
              </div>
              <div class="card-body">
                <canvas id="pieChart" 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>
<!-- ChartJS 1.0.1 -->
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/chartjs-old/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 location_name = $('[name="location_id"]');
var facility_name = $('[name="facility_id"]');

location_name.select2({
        placeholder: 'Choose location ...',
        width: '100%',
        allowClear: true,
        ajax: {            
            url: '{{route("locations.datatable")}}',
            dataType: 'json',
            data: function(params) {                
                return {                    
                    start: params.page == NaN ? 0 : (params.page-1) * 25,
                    length: 25,
                    columns: {
                        0:{
                        name: 'op.location_name',
                        orderable: true,
                        searchable: true
                        }
                    },
                    search: {value: params.term},
                    order: {0:{dir:'asc'}}
                }
            },
            processResults: function (data, params) {
                params.page = params.page || 1;                
                var newData = []
                $.each(data.data, function(key, val){
                    newData[key] = {'id' : val.id, 'text' : val.location_name};                    
                })

                data.results = newData;
            
                return {
                    results: data.results,
                    pagination: {
                        more: (params.page * 25) < data.recordsFiltered
                    }
                }

            },
            cache: true
        }
    });

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

location_name.on('select2:select', function (e) {
    var locationid = e.params.data.id;
    facility_name.select2('val', '');
    facility_name.find('option').remove();

    facility_name.select2({        
        placeholder: 'Choose facility ...',
        width: '100%',
        allowClear: true,
        ajax: {            
            url: '{{route("facilities.datatable")}}',
            dataType: 'json',
            data: function(params) {                
                return {                    
                    start: params.page == NaN ? 0 : (params.page-1) * 25,
                    length: 25,
                    columns: {
                        0:{
                        name: 'op.name',
                        // data: 'name',
                        orderable: true,
                        searchable: true,
                        search:{
                            value:params.term
                            }
                        },                        
                        1:{
                        name: 'op.location_id',
                        // data: 'location_id',
                        // orderable: true,
                        searchable: true,
                        search:{
                            value:locationid
                            }
                        },                        
                        2:{
                        name: 'op.status',                            
                        search:{
                            value:'1'
                            }
                        }
                    },
                    // search: {value: params.term},
                    order: {0:{dir:'asc'}}
                }
            },
            processResults: function (data, params) {
                params.page = params.page || 1;                
                var newData = []
                $.each(data.data, function(key, val){
                    newData[key] = {'id' : val.id, 'text' : val.name};                    
                })

                data.results = newData;
            
                return {
                    results: data.results,
                    pagination: {
                        more: (params.page * 25) < data.recordsFiltered
                    }
                }

            },
            cache: true
        }
        // minimumInputLength: 3,

    });
});

location_name.on("select2:unselect", function (e) { 
    facility_name.select2('val', '');
});

$('.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 += 'location_id=' + $('[name="location_id"]').val();
        if($('[name="facility_id"]').val() != null){
            input += '&facility_id=' + $('[name="facility_id"]').val();
        }
        input += '&booking_date=' + $('[name="booking_date"]').val();

        axios.get('{{route("reporting.meeting-room.datatable")}}'+input, config) .then(function (data) {
            console.log(data)
            setupChart(data.data);
            $("body").removeClass("loading");
        })
        .catch(function (error) { 
            console.log(error)
            $("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 = [];

    console.log(data);

    $.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 runPie(datax)
{
    var areaChartData = {
      labels  : ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label               : 'Electronics',
          fillColor           : 'rgba(210, 214, 222, 1)',
          strokeColor         : 'rgba(210, 214, 222, 1)',
          pointColor          : 'rgba(210, 214, 222, 1)',
          pointStrokeColor    : '#c1c7d1',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(220,220,220,1)',
          data                : [65, 59, 80, 81, 56, 55, 40]
        },
        {
          label               : 'Digital Goods',
          fillColor           : 'rgba(60,141,188,0.9)',
          strokeColor         : 'rgba(60,141,188,0.8)',
          pointColor          : '#3b8bba',
          pointStrokeColor    : 'rgba(60,141,188,1)',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(60,141,188,1)',
          data                : [28, 48, 40, 19, 86, 27, 90]
        }
      ]
    }
    var barChartCanvas                   = $('#pieChart').get(0).getContext('2d')
    var barChart                         = new Chart(barChartCanvas)
    var barChartData                     = areaChartData
    barChartData.datasets[1].fillColor   = '#00a65a'
    barChartData.datasets[1].strokeColor = '#00a65a'
    barChartData.datasets[1].pointColor  = '#00a65a'
    var barChartOptions                  = {
      //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
      scaleBeginAtZero        : true,
      //Boolean - Whether grid lines are shown across the chart
      scaleShowGridLines      : true,
      //String - Colour of the grid lines
      scaleGridLineColor      : 'rgba(0,0,0,.05)',
      //Number - Width of the grid lines
      scaleGridLineWidth      : 1,
      //Boolean - Whether to show horizontal lines (except X axis)
      scaleShowHorizontalLines: true,
      //Boolean - Whether to show vertical lines (except Y axis)
      scaleShowVerticalLines  : true,
      //Boolean - If there is a stroke on each bar
      barShowStroke           : true,
      //Number - Pixel width of the bar stroke
      barStrokeWidth          : 2,
      //Number - Spacing between each of the X value sets
      barValueSpacing         : 5,
      //Number - Spacing between data sets within X values
      barDatasetSpacing       : 1,
      //String - A legend template
      legendTemplate          : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].fillColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>',
      //Boolean - whether to make the chart responsive
      responsive              : true,
      maintainAspectRatio     : true
    }

    barChartOptions.datasetFill = false
    barChart.Bar(barChartData, barChartOptions)
}
</script>
@endsection