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

@section('title', 'Daily Revenue Stats')
@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">Daily Revenue Stats</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">

        <div class="row">
            <div class="col-lg-4">

                <div class="card bg-grey-400">
                    <div class="card-body">
                        <div class="d-flex">
                            <h3 class="font-weight-semibold mb-0">Rp {{ribuanDuaAngkaBelakangKomaIndo($average_daily_rate)}}</h3>
                        </div>

                        <div>
                            Yesterday Daily Report : {{$prev_daily_rate_date}}
                        </div>
                    </div>

                    <div id="today-revenue"></div>
                </div>

            </div>

            <div class="col-lg-4">

                <!-- Occupancy -->
                <div class="card bg-pink-400">
                    <div class="card-body">
                        <div class="d-flex">
                            <h3 class="font-weight-semibold mb-0">{{$occp}}%</h3>
                        </div>

                        <div>
                            Occupancy % :  {{$period_average_room_rates}}
                        </div>
                    </div>

                    <div id="server-load"></div>
                </div>
                <!-- /Occupancy -->

            </div>

            <div class="col-lg-4">

                <div class="card bg-blue-400">
                    <div class="card-body">
                        <div class="d-flex">
                            <h3 class="font-weight-semibold mb-0">Rp {{ribuanDuaAngkaBelakangKomaIndo($average_room_rates)}}</h3>
                        </div>

                        <div>
                            Average Room Rates : {{$period_average_room_rates}}
                        </div>
                    </div>

                    <div id="today-revenue"></div>
                </div>

                {{-- <div class="card bg-blue-400">
                    <div class="card-body">
                        <div class="d-flex">
                            <h3 class="font-weight-semibold mb-0">Rp {{ribuanDuaAngkaBelakangKomaIndo($pars->par)}}</h3>
                        </div>

                        <div>
                            RevPAR (Price per available room)
                        </div>
                    </div>

                    <div id="today-revenue"></div>
                </div> --}}

            </div>
        </div>

        <div class="row">
            <!-- Order Room Chart -->
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header header-elements-inline">
                            <h5 class="card-title">Room Only statistic</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">
                                <div class="chart" id="room-rev-chart"></div>
                            </div>
                        </div>
                    </div>
                </div>
            <!-- /Order Room Chart -->
        </div>

        <div class="row">
            <!-- Order Room Chart -->
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header header-elements-inline">
                            <h5 class="card-title">RevPAR(Price per available room) statistic</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">
                                <div class="chart" id="revpar-chart"></div>
                            </div>
                        </div>
                    </div>
                </div>
            <!-- /Order Room Chart -->
        </div>

	</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 ROOM REVENUE
                let data_room_rev = [];
                let key_room_rev = [];
                // get date for X
                    data_room_rev.push(array_date_x_room_orders)

                    let rev    = []
                    rev.push('Room only')
                    $.each(response.data_room_revenue_onlys, function (akey, bval) {
                        rev.push(bval);
                    });
                    data_room_rev.push(rev)
            // DEFINING DATA ROOM REVENUE

            // DEFINING DATA REVPAR
                let data_revpar = [];
                let key_revpar = [];
                // get date for X
                    data_revpar.push(array_date_x_room_orders)

                    let revpar    = []
                    revpar.push('RevPAR')
                    $.each(response.data_pars, function (akey, bval) {
                        revpar.push(bval);
                    });
                    data_revpar.push(revpar)
            // DEFINING DATA REVPAR

            // Setup Room Revenue Statistics
                console.log(data_room_rev);
                var RoomRevenueOnly = function() {
                    // Chart
                    var _barsPiesExamples = function() {
                        if (typeof c3 == 'undefined') {
                            console.warn('Warning - c3.min.js is not loaded.');
                            return;
                        }

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

                        // Bar chart
                        if(room_rev_chart) {

                            // Generate chart
                            var bar_chart = c3.generate({
                                bindto: room_rev_chart,
                                size: { height: 400 },
                                data: {
                                    x: 'x',
                                    columns: data_room_rev,
                                    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
                                        min:0,
                                        padding: {top:50, bottom:25},
                                        label: {
                                            // text: 'COUNT',
                                            position: 'outer-middle'
                                        }
                                    }
                                },
                                // legend: {
                                //     position: 'inset',
                                //     inset: {
                                //     anchor: 'top-left',
                                //     x: 10,
                                //     y: 0,
                                //     step: undefined
                                //     }
                                // },
                                padding: {
                                    bottom: 50
                                },
                            });

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

                    return {
                        init: function() {
                            _barsPiesExamples();
                        }
                    }
                }();
                RoomRevenueOnly.init();
            // Setup Room Revenue Statistics

            // Setup Room Revenue Statistics
                console.log(data_revpar);
                var RevPAR = function() {
                    // Chart
                    var _barsPiesExamples = function() {
                        if (typeof c3 == 'undefined') {
                            console.warn('Warning - c3.min.js is not loaded.');
                            return;
                        }

                        // Define charts elements
                        var revpar_chart = document.getElementById('revpar-chart');

                        // Bar chart
                        if(revpar_chart) {

                            // Generate chart
                            var bar_chart = c3.generate({
                                bindto: revpar_chart,
                                size: { height: 400 },
                                data: {
                                    x: 'x',
                                    columns: data_revpar,
                                    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
                                        min:0,
                                        padding: {top:50, bottom:25},
                                        label: {
                                            // text: 'COUNT',
                                            position: 'outer-middle'
                                        }
                                    }
                                },
                                // legend: {
                                //     position: 'inset',
                                //     inset: {
                                //     anchor: 'top-left',
                                //     x: 10,
                                //     y: 0,
                                //     step: undefined
                                //     }
                                // },
                                padding: {
                                    bottom: 50
                                },
                            });

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

                    return {
                        init: function() {
                            _barsPiesExamples();
                        }
                    }
                }();
                RevPAR.init();
            // Setup Room Revenue 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