@extends(in_array(\Auth::user()->role, [10, 40]) ? 'layoutfrontdesk' : 'layout')

@section('title', 'Guest Segment Statistics')
@section('css')
    <style type="text/css">
        .tablesection{
            width: 100%;
            margin-bottom: 0.5em;
            margin-top:5px;
            font-size: 12px;
            font-weight: bold;
        }
        .maintable{
            border-collapse: collapse;
        }
        .maintable tr, .maintable th, .maintable td{
            border-bottom: 1px solid rgba(128, 128, 128, 0.15);
        }
        .maintable th, .maintable td{
            padding: 5px;
            font-size: 12px;
            font-weight: normal;
        }
    </style>
@endsection

@section('content')

	<!-- Page header -->
	<div class="page-header {{\Auth::user()->role != 10 ? 'page-header-light' : ''}}">
		<div class="page-header-content header-elements-md-inline">
			<div class="page-title d-flex">
				<h4><span class="font-weight-semibold">Guest Segment Statistics</span></h4>
			</div>

            <div class="float-right">
                <div class="row">
                    <label style="white-space: nowrap;" class="col-form-label col-sm-2"><h6><b>Filter: </b></h6></label>
                    <div class="col-sm-4">
                        <select name="filter_method" id="filter_method" class="form-control form-control-select2">
                            <option value="period" {{ $method == 'period' ? 'selected':'' }}>Filter Date</option>
                            <option value="3day" {{ $method == '3day' ? 'selected':'' }}>Last 3 Day</option>
                            <option value="lastweek" {{ $method == 'lastweek' ? 'selected':'' }}>Last Week</option>
                            <option value="lastmonth" {{ $method == 'lastmonth' ? 'selected':'' }}>Last Month</option>
                            <option value="3month" {{ $method == '3month' ? 'selected':'' }}>Last 3 Month</option>
                        </select>
                    </div>
                    <div class="col-sm-6">
                        <input type="text"
                            name="tanggal"
                            id="tanggal_dashboard"
                            class="form-control daterange-picker"
                            autocomplete="off"
                            {{$method=='period'?'':'disabled'}}
                            required>
                    </div>
                </div>
            </div>
		</div>
	</div>
	<!-- /page header -->

	<!-- Content area -->
	<div class="content">
        <!-- Guest Segment Chart -->
            <div class="row">
                <!-- Pie Chart -->
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header header-elements-inline">
                                <h5 class="card-title">Guest Segment Statistics  &nbsp;&nbsp;&nbsp;</h5>
                                <div class="header-elements">
                                    <div class="list-icons">
                                        <a class="list-icons-item" data-action="collapse"></a>
                                    </div>
                                </div>
                            </div>

                            <div class="card-body">
                                <div class="chart-container text-center">
                                    <div class="d-inline-block" id="pie-segment"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                <!-- /Pie Chart -->
                <!-- Summary section -->
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header header-elements-inline">
                                <h5 class="card-title">Guest Segment Statistics &nbsp;&nbsp;&nbsp;</h5>
                                <div class="header-elements">
                                    <div class="list-icons">
                                        <a class="list-icons-item" data-action="collapse"></a>
                                    </div>
                                </div>
                            </div>

                            <div class="card-body">
                                <table class="tablesection">
                                    <tr><td style="font-weight: bold;">Summary: {{$period_average_room_rates}}</td></tr>
                                    <tbody class="maintable" style="font-weight:bold">
                                        @if (count($data_per_segments) > 0)
                                        @foreach ($data_per_segments as $key=>$item)
                                        <tr>
                                            <td>{{$key}}</td>
                                            <td style="text-align: right;">{{ribuanWithComma($item)}}</td>
                                        </tr>
                                        @endforeach
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                <!-- Summary section -->
            </div>
        <!-- Guest Segment Chart -->

	</div>
    <!-- Content area -->

@endsection

@section('js')

<!-- Theme JS files -->
<script src="{{asset('global_assets/js/plugins/visualization/d3/d3.min.js') }}"></script>
<script src="{{asset('global_assets/js/plugins/visualization/d3/d3_tooltip.js') }}"></script>
<script src="{{asset('global_assets/js/plugins/forms/styling/switchery.min.js') }}"></script>
<script src="{{asset('global_assets/js/plugins/forms/selects/bootstrap_multiselect.js') }}"></script>
<script src="{{asset('global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>

<!-- Daterange Picker -->
<!-- <script src="{{asset('global_assets/js/plugins/ui/moment/moment.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/pickers/daterangepicker.js')}}"></script> -->

<script src="{{asset('assets/js/app.js') }}"></script>

<!-- Theme JS files -->
<script src="{{asset('global_assets/js/plugins/visualization/d3/d3.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/visualization/c3/c3.min.js')}}"></script>
<!-- /Theme JS files -->

<script>

$(document).ready(function () {
    statisticServer()
});

function statisticServer() {
    var date    = $('#tanggal_dashboard').val()
    var method  = $('#filter_method').val()
    $.ajax({
        type: "get",
        url: "{{ route('statistic.server') }}",
        data: {
            tanggal_dashboard: date,
            filter_method: method,
        },
        dataType: "json",
        success: function (response) {
            let max_room_order       =  response.room_order_max
            // DEFINING DATA ORDER ROOM STATISTICS
                let array_date_x_room_orders = []
                let room_order_datas = [];
                // get date for X
                    array_date_x_room_orders.push('x')
                    $.each(response.date_array, function (inkey, inval) {
                        array_date_x_room_orders.push(inval)
                    });
                    room_order_datas.push(array_date_x_room_orders)

                    $.each(response.order_room_stats, function (akey, bval) {
                        let test    = []
                        test.push(akey);
                        $.each(bval, function (index_date, ordered) {
                            test.push(ordered);
                        });
                        room_order_datas.push(test)
                    });
            // DEFINING DATA ORDER ROOM STATISTICS

            // DEFINING DATA BOOKING PER SEGMENT
                let data_segment = {};
                let key_segment = [];
                $.each(response.data_per_segments, function (akey, bval) {
                    key_segment.push(akey)
                    data_segment[akey] = bval;
                });
            // DEFINING DATA BOOKING PER SEGMENT

            // Setup Order Room Statistics
                var OrderRoomChart = function() {

                    // Chart
                    var _barsPiesExamples = function() {
                        if (typeof c3 == 'undefined') {
                            console.warn('Warning - c3.min.js is not loaded.');
                            return;
                        }

                        // Define charts elements
                        var bar_chart_element = document.getElementById('order-room-chart');

                        // Bar chart
                        if(bar_chart_element) {

                            // Generate chart
                            var bar_chart = c3.generate({
                                bindto: bar_chart_element,
                                size: { height: 400 },
                                data: {
                                    x: 'x',
                                    columns: room_order_datas,
                                    empty: {
                                        label: {
                                        text: "No Data"
                                        }
                                    }
                                },
                                zoom: {
                                    enabled: true
                                },
                                grid: {
                                    y: {
                                        show: true
                                    }
                                },
                                axis:{
                                    x:{
                                        type: 'timeseries',
                                        tick: {
                                            show: true,
                                            format: '%d-%m-%Y',
                                            fit: true,
                                            outer: false,
                                            culling: true,
                                            culling: {
                                                max: array_date_x_room_orders.length >= 8 ? (array_date_x_room_orders.length >= 10 ? 8 : 2 ) : 1
                                            }
                                        },
                                        label: {
                                            text: 'DATE',
                                            position: 'outer-center'
                                        }
                                    },
                                    y:{
                                        // Range includes padding, set 0 if no padding needed
                                        max:max_room_order * 3,
                                        min:0,
                                        padding: {top:0, bottom:0},
                                        label: {
                                            text: 'COUNT',
                                            position: 'outer-middle'
                                        }
                                    }
                                },
                                // legend: {
                                //     position: 'inset',
                                //     inset: {
                                //     anchor: 'top-left',
                                //     x: 10,
                                //     y: 0,
                                //     step: undefined
                                //     }
                                // },
                                padding: {
                                    bottom: 50
                                },
                                onresized: function () {
                                    array_date_x_room_orders.length >= 8 ? bar_chart.internal.config.axis_x_tick_culling_max = 8 : bar_chart.internal.config.axis_x_tick_culling_max = 4;
                                }
                            });

                                // Resize chart on sidebar width change
                                $('.sidebar-control').on('click', function() {
                                    bar_chart.resize();
                                });
                            }
                        };

                    return {
                        init: function() {
                            _barsPiesExamples();
                        }
                    }
                }();
                OrderRoomChart.init();
            // Setup Order Room Statistics

            // Setup Guest Segment Statistics
                var С3BarsPies = function() {
                    // Chart
                    var _barsPiesExamples = function() {

                        if (typeof c3 == 'undefined') {
                            console.warn('Warning - c3.min.js is not loaded.');
                            return;
                        }

                        // Define charts elements
                        var pie_chart_element = document.getElementById('pie-segment');

                        // Pie chart
                        if(pie_chart_element) {

                            // Generate chart
                            var pie_chart = c3.generate({
                                size:{height:395},
                                bindto: pie_chart_element,
                                data: {
                                    json: [data_segment],
                                    keys: {
                                        value: key_segment,
                                    },
                                    type : 'pie',
                                    empty: {
                                        label: {
                                        text: "No Data"
                                        }
                                    }
                                },
                            });

                            // Resize chart on sidebar width change
                            $('.sidebar-control').on('click', function() {
                                pie_chart.resize();
                            });
                        }
                    };

                    return {
                        init: function() {
                            _barsPiesExamples();
                        }
                    }
                }();
                С3BarsPies.init();
            // Setup Guest Segment Statistics
        }
    });

}

$('.form-control-select2').select2();

//Date Range Picker
$('.daterange-picker').daterangepicker({
	applyClass: 'btn-primary',
	cancelClass: 'btn-light',
	// startDate: moment().startOf('month').format('DD-MM-YYYY'),
	// startDate: `${moment("{{getSystemDate()}}").subtract(6, 'days').format('DD-MM-YYYY')}`,
	// endDate: `${moment("{{getSystemDate()}}").add(7, 'days').format('DD-MM-YYYY')}`,
	startDate: "{{ $js_tanggal_awal }}",
	endDate: "{{ $js_tanggal_sekarang }}",
	locale: {
	  format: 'DD-MM-YYYY'
	}
});

//Tanggal
$('#tanggal').on('change', function(){
	let tanggal_arr = $(this).val().split(" - ");
	let tanggal_awal = tanggal_arr[0].replaceAll('/', '-');
	let tanggal_akhir = tanggal_arr[1].replaceAll('/', '-');

	$.ajax({
		type: 'POST',
		url: "{{route('filter-status-kamar')}}",
		data: {
			_token:'{{csrf_token()}}',
			tanggal_awal: tanggal_awal,
			tanggal_akhir: tanggal_akhir
		},
		success: function (response) {
			console.log(response);
			let html = "";
			$.each(response, function(index, val){
				html += `<li class="list-group-item">
						  ${val.jenis ?? '-'}
						  <span class="badge bg-primary align-self-center ml-auto">${val.count ?? 0} Booked Room</span>
						 </li>`;
			});

			$('#list_statistik_kamar').html(html);
		}
	});
});

$('#tanggal_dashboard').on('apply.daterangepicker', (e, picker) => {
    console.log('tanggal')
    let newRequest = window.location.search;
    let params = new URLSearchParams(newRequest);

    // filter tanggal_dashboard
    params.delete('tanggal_dashboard');
    params.append('tanggal_dashboard', document.getElementById("tanggal_dashboard").value);

    // filter method
    params.delete('filter_method');
    params.append('filter_method', document.getElementById("filter_method").value);

    document.location.href = "?" + params.toString();
})

$('#filter_method').on('change', function(){
    var condition = document.getElementById("filter_method").value
    console.log(condition);
    if (condition != 'period') {
        $('#tanggal_dashboard').prop('disabled', true)

        let newRequest = window.location.search;
        let params = new URLSearchParams(newRequest);
        console.log('href');

        // filter method
        params.delete('filter_method');
        params.append('filter_method', document.getElementById("filter_method").value);

        document.location.href = "?" + params.toString();
    }else{
        $('#tanggal_dashboard').prop('disabled', false)
    }
})

</script>
@endsection