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

@section('title', 'Statistic menu')
@section('css')
    <style type="text/css">
        .c3-axis-y-label{
            font-weight: bold
        }
        .c3-axis-x-label{
            font-weight: bold
        }
        .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">Statistic Menu</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">
        <!-- Statistic Menu -->
		{{-- <div class="card">
			<div class="card-body px-3">
				<div class="row">
					<div class="col-md-12">
						<div class="alert alert-secondary text-center mb-2 p-1" role="alert">
							<h4 class="font-weight-bold m-0">Statistic Menu</h4>
						</div>
					</div>
				</div>
				<div id="accordion-group">
                     <!-- Guest segment -->
					<div class="card mb-0 rounded-bottom-0">
						<div class="card-header">
							<h6 class="card-title">
								<a data-toggle="collapse" href="#guest-segment-stats"><i class="fas fa-chevron-circle-down"></i>Daily Revenue Statistics</a>
							</h6>
						</div>

						<div id="guest-segment-stats" class="collapse" data-parent="#accordion-group">
							<div class="card-body">
								<a href="#" target="_blank" class="btn btn-warning">
									<i class="icon-chart"></i>&nbsp;Go To Page
								</a>
							</div>
						</div>
					</div>
                    <!-- Room Order stats -->
					<div class="card mb-0 rounded-bottom-0">
						<div class="card-header">
							<h6 class="card-title">
								<a data-toggle="collapse" href="#room-order-stats"><i class="fas fa-chevron-circle-down"></i> Room Order Statistics</a>
							</h6>
						</div>

						<div id="room-order-stats" class="collapse" data-parent="#accordion-group">
							<div class="card-body">
								<a href="{{route('statistic.roomorder')}}" target="_blank" class="btn btn-warning">
									<i class="icon-chart"></i>&nbsp;Go To Page
								</a>
							</div>
						</div>
					</div>
                    <!-- Guest segment -->
					<div class="card mb-0 rounded-bottom-0">
						<div class="card-header">
							<h6 class="card-title">
								<a data-toggle="collapse" href="#guest-segment-stats"><i class="fas fa-chevron-circle-down"></i> Guest Segment Statistics</a>
							</h6>
						</div>

						<div id="guest-segment-stats" class="collapse" data-parent="#accordion-group">
							<div class="card-body">
								<a href="{{route('statistic.guestsegment')}}" target="_blank" class="btn btn-warning">
									<i class="icon-chart"></i>&nbsp;Go To Page
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div> --}}

        <!-- Revenue Box -->
            @if (in_array(\Auth::user()->role, [1,2,5,6]))
            <div class="row">
                <div class="col-lg-4">

                    <!-- Revenue -->
                    <div class="card bg-teal-400">
                        <div class="card-body">

                            <div class="d-flex">
                                <h3 class="font-weight-semibold mb-0">Rp {{ribuanDuaAngkaBelakangKomaIndo($room_rev->rev)}}</h3>
                            </div>
                            <div>
                                Room Only Revenue
                            </div>

                        </div>

                        <div class="container-fluid">
                            <div id="members-online"></div>
                        </div>
                    </div>
                    <!-- /Revenue  -->

                </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 %
                            </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($pars->par)}}</h3>
                            </div>

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

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

                </div>
            </div>
            @endif
        <!-- /Revenue Box -->

        <!--ARR dan ADR-->
            @if (in_array(\Auth::user()->role, [1,2,5,6]))
            <div class="row">
                <div class="col-lg-6">

                    <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>
                                Average Daily Report : {{$prev_daily_rate_date}}
                            </div>
                        </div>

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

                </div>
                <div class="col-lg-6">

                    <div class="card bg-grey-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>
            </div>
            @endif
        <!--ARR dan ADR-->

        <!-- Nett Profit -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <table class="tablesection">
                                <tr><td style="font-weight: bold;">Summary: {{$period_average_room_rates}} &nbsp;&nbsp;&nbsp; <a href="{{url('cancel-close-month-list')}}"><button type="button" class="btn btn-light btn-sm"> <i class=""></i> Go to page</button></a></td></tr>
                                <tbody class="maintable" style="font-weight:bold">
                                    <tr>
                                        <td>Revenue</td>
                                        <td style="text-align: right;">{{number_format($total_revenues, 2)}}</td>
                                    </tr>
                                    <tr>
                                        <td>Cost</td>
                                        <td style="text-align: right;">{{number_format($total_cost, 2)}}</td>
                                    </tr>
                                    <tr>
                                        <td>Gross</td>
                                        <td style="text-align: right;">{{number_format($total_gross, 2)}}</td>
                                    </tr>
                                    <tr>
                                        <td>Expenses</td>
                                        <td style="text-align: right;">{{number_format($total_expenses, 2)}}</td>
                                    </tr>
                                    <tr>
                                        <td>Ebitda</td>
                                        <td style="text-align: right;">{{number_format($EBITDA, 2)}}</td>
                                    </tr>
                                    <tr>
                                        <td>Non Operating Exp</td>
                                        <td style="text-align: right;">{{number_format($total_non_operating_exp, 2)}}</td>
                                    </tr>
                                    <tr>
                                        <td>Nett Profit</td>
                                        <td style="text-align: right;">{{number_format($total_nett_profit, 2)}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        <!-- Nett Profit -->

        <!-- Guest Segment Chart -->
            <div class="row">
                <!-- Order Room Chart -->
                    <div class="col-md-7">
                        <div class="card">
                            <div class="card-header header-elements-inline">
                                <h5 class="card-title">Room Order Statistics  &nbsp;&nbsp;&nbsp; <a href="{{url('bookings')}}"><button type="button" class="btn btn-light btn-sm"><i class=""></i> Go to page</button></a> </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="order-room-chart"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                <!-- /Order Room Chart -->
                <!-- Guest Segment Chart -->
                    <div class="col-md-5">
                        <div class="card">
                            <div class="card-header header-elements-inline">
                                <h5 class="card-title">Guest Segment Statistics &nbsp;&nbsp;&nbsp; <a href="{{url('bookings')}}"><button type="button" class="btn btn-light btn-sm"><i class=""></i> Go to page</button></a></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>
                <!-- Guest Segment Chart -->
            </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