@extends(\Auth::user()->role != 10 ? 'layout' : 'layoutfrontdesk')

@section('title', 'Room Availability')

@section('css')
<style type="text/css">
.headcol{
	position: absolute;
	line-height: 16px;
	/* height: */
}
.headcol:before{
	content: Row;
}
</style>
@endsection

@section('content')
	<!-- Page header -->
	<div class="page-header {{in_array(\Auth::user()->role, [1,2]) ? 'page-header-light' : ''}}">
		<div class="page-header-content header-elements-md-inline">
			<div class="page-title d-flex">
				<h4>  <span class="font-weight-semibold">Room Availability</span> - {{\Session::get('hotel_name') ?? \Auth::user()->hotel->nama}}</h4>
				<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
			</div>
		</div>
	</div>
	<!-- /page header -->

    <!-- Content area -->
	<div class="content">
		<!-- Availability Per Room Type -->
		<div class="row">
            <div class="col-md-12">
                <div class="card">
					<div class="card-header">
						<h4>Availability Per Room Type</h4>
					</div>
                    <div class="card-body">
						<div class="table-responsive">
							<table class="table table-bordered table-striped">
								<tbody>
									<tr>
										<th class="p-1 headcol" style="width: 188px; background: white;">
											<form id="form-periode" method="get">
												<input type="text" id="periode" name="periode" value="{{ date('d-m-Y', strtotime($start_date)) }} - {{ date('d-m-Y', strtotime($end_date)) }}" class="form-control daterange" style="width: initial" size="20">
											</form>
										</th>

										<!-- Dummy Buat Ngakal Stylenya -->
										<th class="p-1" style="width: 188px; background: white;">
											<input type="text" class="form-control" style="width: initial" size="20">
										</th>

										{{-- Load Kolom Bulan dan colspan sebanyak jumlah tanggal --}}
										@foreach($dates as $month => $date)
											@php
											$colspan_date = count($date);
											@endphp
											<th colspan="{{$colspan_date}}" class="text-center">{{$month}}</th>
										@endforeach
									</tr>
									<tr>
										<td class="headcol" style="width: 188px; height:64.5px; background: white;"></td>
										<td></td>
										{{-- Load Kolom Tanggal --}}
										@foreach($dates as $month => $date)
											@foreach($date as $day)
											<th class="text-center">
												{{date('D', strtotime($day))}}
												<br>
												{{date('d', strtotime($day))}}
											</th>
											@endforeach
										@endforeach
									</tr>

									@foreach($jenis_kamars as $jenis_kamar)
									<tr>
										<td class="headcol" style="width: 188px; background: white;">{{ucwords($jenis_kamar->nama)}}</td>
										<td></td>

										{{-- Load Stock Jenis Kamar Per Tanggal --}}
										@foreach($dates as $month => $date)
											@foreach($date as $day)
												@php
												//Hitung jumlah kamar tersisa di setiap jenis kamar (Jumlah Kamar dikurangi kamar digunakan)
												$ketersediaan = $jenis_kamar->kamars_count - ($stocks[$jenis_kamar->nama][$day] ?? 0);

												//Kurangi kamar tersisa dengan kamar yang out of order
												if(array_key_exists($jenis_kamar->nama, $ooo_schedule)){
                                                    $ketersediaan -= array_sum(@$ooo_schedule[$jenis_kamar->nama][$day]);
                                                    $kamar_out_of_order[] = array_sum(@$ooo_schedule[$jenis_kamar->nama][$day]);
													// foreach($ooo_schedule[$jenis_kamar->nama] as $date => $jumlah_ooo){
                                                    //     $ketersediaan -= array_sum($jumlah_ooo);
                                                    //     $kamar_out_of_order[] = array_sum($jumlah_ooo);
													// 	// if(strtotime($date) >= strtotime($day)){
													// 	// }
													// }
												}
												@endphp
											<td class="text-center p-2 {{$ketersediaan <= 5 ? 'bg-danger text-white' : 'bg-success text-white'}}">
												{{$ketersediaan}}
											</td>
											@endforeach
										@endforeach
									</tr>
									@endforeach
								</tbody>
							</table>
						</div>
                    </div>
                </div>
            </div>
		</div>

		<!-- Forecast Occupancy -->
		<div class="row">
			<div class="col-md-12">
				<div class="card">
					<div class="card-header">
						<h4>Forecast Occupancy</h4>
					</div>
                    @if (count($kamars) > 0)
					<div class="card-body">
						<div class="table-responsive">
							<table class="table table-bordered table-striped">
								<tr>
									<th class="p-3 headcol text-center" style="width: 188px; height:64.5px; background: white;">
										Forecast
									</th>

									<!-- Dummy Buat Ngakal Stylenya -->
									<th class="p-1" style="width: 188px; height:64.5px; background: white;">
										<input type="text" class="form-control" style="width: initial" size="20">
									</th>

									{{-- Load Kolom Bulan dan colspan sebanyak jumlah tanggal --}}
									@foreach($dates as $month => $date)
										@php
										$colspan_date = count($date);
										@endphp
										<th colspan="{{$colspan_date}}" class="text-center">{{$month}}</th>
									@endforeach
								</tr>
								<tr>
									<td class="headcol" style="width: 188px; height:64.5px; background: white;"></td>
									<td>
									</td>
									{{-- Load Kolom Tanggal --}}
									@foreach($dates as $month => $date)
										@foreach($date as $day)
										<th class="text-center">
											{{date('D', strtotime($day))}}
											<br>
											{{date('d', strtotime($day))}}
										</th>
										@endforeach
									@endforeach
								</tr>

								<tr>
									<td class="headcol" style="width: 188px; background: white;">Total Room Inventory</td>
									<td></td>

									{{-- Load Total Kamar --}}
									@foreach($dates as $month => $date)
										@foreach($date as $day)
										<td class="text-center p-2">
											{{count($kamars)}}
										</td>
										@endforeach
									@endforeach
								</tr>

								<tr>
									<td class="headcol" style="width: 188px; background: white;">Total Room</td>
									<td></td>
									{{-- Load Kamar Out Of Order Per Tanggal --}}
									@php
									$ooo_per_day = array();
									@endphp

									{{-- Load Total Kamar --}}
									@foreach($dates as $month => $date)
										@foreach($date as $day)
										<td class="text-center p-2">
											@php
											$jumlah_ooo = 0;
											@endphp
                                            @if (@$ooo_global_schedule[$day])
                                                @foreach(@$ooo_global_schedule[$day] as $key => $ooo)
                                                        @php $jumlah_ooo += $ooo;@endphp
                                                @endforeach
                                            @endif

											{{count($kamars) - $jumlah_ooo}}

											@php $ooo_per_day[$day] = $jumlah_ooo; @endphp
										</td>
										@endforeach
									@endforeach
								</tr>
								<tr>
									<td class="headcol" style="width: 188px; background: white;">Occupancy (Qty)</td>
									<td></td>

									{{-- Load Occupancy (jumlah) Tanggal --}}
									@foreach($dates as $month => $date)
										@foreach($date as $day)
										<td class="text-center p-2">
											{{$stock_globals[$day]}}
										</td>
										@endforeach
									@endforeach
								</tr>
								<tr>
									<td class="headcol" style="width: 188px; background: white;">Occupancy (%)</td>
									<td></td>

									{{-- Load Occupancy (persen) Per Tanggal --}}
									@foreach($dates as $month => $date)
										@foreach($date as $day)
										<td class="text-center p-2">
											@php
												$occupancypersen = 0;
												// $occupancypersen = floor(($stock_globals[$day] / count($kamars)) * 100);
												$occupancypersen = ($stock_globals[$day] / count($kamars)) * 100;

												$occupancypersenkoma = number_format($occupancypersen, 1);
											@endphp
											{{ $occupancypersenkoma }}
										</td>
										@endforeach
									@endforeach
								</tr>
								<tr>
									<td class="headcol" style="width: 188px; background: white;">Expected Arrival</td>
									<td></td>

									{{-- Load Expected Arrival --}}
									@foreach($dates as $month => $date)
										@foreach($date as $day)
										<td class="text-center p-2">
											{{ $expected_arrival[$day] }}
										</td>
										@endforeach
									@endforeach
								</tr>
								<tr>
									<td class="headcol" style="width: 188px; background: white;">Expected Departure</td>
									<td></td>

									{{-- Load Expected Departure --}}
									@foreach($dates as $month => $date)
										@foreach($date as $day)
										<td class="text-center p-2">
											{{ $expected_departure[$day] }}
										</td>
										@endforeach
									@endforeach
								</tr>
								<tr>
									<td class="headcol" style="width: 188px; background: white;">Out Of Order</td>
									<td></td>

									@foreach($dates as $month => $date)
										@foreach($date as $day)
										<td class="text-center p-2">
											{{$ooo_per_day[$day]}}
										</td>
										@endforeach
									@endforeach
								</tr>
								<tr>
									<td class="headcol" style="width: 188px; background: white;">Remaining Room</td>
									<td></td>

									{{-- Load Stock Jenis Kamar Per Tanggal --}}
									@foreach($dates as $month => $date)
										@foreach($date as $day)
										<td class="text-center p-2">
											{{ count($kamars) - $stock_globals[$day] - $ooo_per_day[$day] }}
										</td>
										@endforeach
									@endforeach
								</tr>
								<tr>
									<td class="headcol" style="width: 188px; background: white;">Total Guests</td>
									<td></td>

									{{-- Load Stock Jenis Kamar Per Tanggal --}}
									@foreach($dates as $month => $date)
										@foreach($date as $day)
										<td class="text-center p-2">
											{{ $totalguests[$day] }}
										</td>
										@endforeach
									@endforeach
								</tr>
								<tr>
									<td class="headcol" style="width: 188px; background: white;">Total Revenue</td>
									<td></td>
									@foreach($dates as $month => $date)
										@foreach($date as $day)
										<td class="text-center p-2">
											{{ @ribuanWithComma($total_revenue[$day]) }}
										</td>
										@endforeach
									@endforeach
								</tr>
								<tr>
									<td class="headcol" style="width: 188px; background: white;">Average Roomrate</td>
									<td></td>
									@foreach($dates as $month => $date)
										@foreach($date as $day)
										<td class="text-center p-2">
											{{ $stock_globals[$day] ? ($total_revenue[$day] ? ribuanWithComma(@$total_revenue[$day]/$stock_globals[$day]) : 0) : 0 }}
										</td>
										@endforeach
									@endforeach
								</tr>
								<tr class="d-none">
									<td class="headcol" style="width: 188px; background: white;">
										Extra Bed &nbsp;<a href="#"
														   data-toggle="modal"
														   data-target="#modal_extra_bed"
														><i class="fas fa-link"></i></a>
									</td>
									<td></td>
									@foreach($dates as $month => $date)
										@foreach($date as $day)
										<td class="text-center p-2">
											@php
											$extrabed_inventori_today = $extrabed_current ? ($extrabed_current->menu ? $extrabed_current->menu->stock : 0) : 0;
											$extrabed_stock_today  = $extrabed_inventori_today - $extrabeds[$day];
											@endphp

											<a data-toggle="modal"
											   data-target="#modal_extra_bed_position"
											   href="#"
											   class="detail-extrabed"
											   data-date="{{$day}}"
											   date-indo="{{tanggalIndo($day)}}"
											>
												{{$extrabed_stock_today}}
											</a>
										</td>
										@endforeach
									@endforeach
								</tr>
							</table>
						</div>
					</div>
                    @else
                    <div class="card-body text-center">
                        <span class="text-danger p-2 m-2 font-weight-bold">
                           <h5>No Room Available</h5>
                        </span>
                    </div>
                    @endif
				</div>
			</div>
		</div>


		<!-- SET EXTRA BED STOCK -->
		<!-- Form modal -->
		<div id="modal_extra_bed" class="modal fade">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header bg-primary" align="center">
	                    <h6 class="modal-title"><i class="fas fa-user mr-1"></i>Extra Bed Stock Settings</h6>
						<button type="button" class="close" data-dismiss="modal">&times;</button>
					</div>

					<form class="form-validate-jquery" action="{{ url('room-availability/set-extrabed') }}" method="post" id="myform" enctype="multipart/form-data">
	                    @csrf
	                    <div class="modal-body">
	                        <div class="form-group row">
	                            <label class="col-form-label col-lg-3">Choose Item</label>
	                            <div class="col-lg-9">
	                                <select name="menu_id" id="menu_id"
											class="form-control form-control-select2"
											data-container-css-class="border-teal"
											data-dropdown-css-class="border-teal"
											required
									>
	                                    <option value="">-- Tipe Item --</option>
	                                    @foreach($extrabed_items as $extrabed_item)
	                                        <option value="{{$extrabed_item->id}}"
													{{ $extrabed_current ? ($extrabed_current->menu_id == $extrabed_item->id ? 'selected' : '') : '' }}
											>
												{{$extrabed_item->nama}}
											</option>
	                                    @endforeach
	                                </select>
	                            </div>
	                        </div>
	                    </div>

	                    <div class="modal-footer">
	                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
	                        <button type="submit" class="btn btn-primary">Simpan <i class="icon-paperplane ml-2"></i></button>
	                    </div>
	                </form>

				</div>
			</div>
		</div>

		<!-- VIEW DETAIL EXTRABED -->
		<!-- Form modal -->
		<div id="modal_extra_bed_position" class="modal fade">
			<div class="modal-dialog modal-lg">
				<div class="modal-content">
					<div class="modal-header bg-primary" align="center">
	                    <h6 class="modal-title"><i class="fas fa-user mr-1"></i> <b>Extra Bed Position <span id="extrabed_position_date"></span></b></h6>
						<button type="button" class="close" data-dismiss="modal">&times;</button>
					</div>

					<div class="modal-body">
						<table class="table table-bordered table-stripped">
							<thead>
								<tr>
									<th style="width: 15%">No. Kamar</th>
									<th>Nama</th>
								</tr>
							</thead>
							<tbody id="table_extrabed_position">

							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>

        @php
            $datas['start_date'] = $start_date
        @endphp

		@component('house_count.index', $datas)
		@endcomponent
	</div>
	<!-- /content area -->
@endsection

@section('js')
	<!-- Theme JS files -->
	<script src="{{asset('global_assets/js/plugins/notifications/pnotify.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/notifications/bootbox.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/extensions/jquery_ui/interactions.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/buttons/spin.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/buttons/ladda.min.js')}}"></script>
    <script src="{{asset('global_assets/js/plugins/media/fancybox.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/forms/styling/uniform.min.js')}}"></script>
	<script src="{{asset('global_assets/js/demo_pages/form_select2.js')}}"></script>

	<script src="{{asset('/')}}/global_assets/js/plugins/notifications/jgrowl.min.js"></script>

	<script src="{{asset('assets/js/app.js')}}"></script>
	<script src="{{asset('global_assets/js/demo_pages/components_modals.js')}}"></script>
	<script src="{{asset('global_assets/js/demo_pages/form_checkboxes_radios.js')}}"></script>
	<script src="{{asset('global_assets/js/demo_pages/gallery_library.js')}}"></script>

	<script type="text/javascript">
		// View Extrabed Stock
		$('.detail-extrabed').on('click', function(){
			let tanggal = $(this).attr('data-date');
			let tanggal_text = $(this).attr('date-indo');

			$('#extrabed_position_date').html(', '+tanggal_text);
			$('#table_extrabed_position').html('');
			$.ajax({
				type: 'GET',
				url: "{{ url('extrabed-position') }}/"+tanggal,
				success: function(data){
					// console.log(data);
					let html = "";
					$.each(data, function(idx, booking){
						if(booking.booking_details){
							// console.log(booking);
							$.each(booking.booking_details, function(idx_detail, booking_detail){
								html += `<tr>
											<td style="text-align: center">${booking_detail.nomor_kamar}</td>
											<td>${booking.nama}</td>
										</tr>`;
							});
						}
					});

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

		//Date Range
		$('.daterange').daterangepicker({
			minDate: "{{date('d-m-Y', strtotime($start_date))}}",
			locale: {
				format: 'DD-MM-YYYY'
			}
		});

		//Periode Form
		$('#periode').on('change', function(){
			$('#form-periode').submit();
		});

		//Komponen Tooltip
  		$(".load-tooltip").tooltip();

		$( document ).ready(function() {
	        // Default style
	        @if(session('error'))
	            new PNotify({
	                title: 'Error',
	                text: '{{ session('error') }}.',
	                icon: 'icon-blocked',
	                type: 'error'
	            });
            @endif
            @if ( session('success'))
	            new PNotify({
	                title: 'Success',
	                text: '{{ session('success') }}.',
	                icon: 'icon-checkmark3',
	                type: 'success'
	            });
            @endif

		});

        //Date Time Picker
        var DateTimePickers = function() {

        // Anytime picker
        var _componentAnytime = function() {
            if (!$().AnyTime_picker) {
                console.warn('Warning - anytime.min.js is not loaded.');
                return;
            }

            $('.input-timepicker').AnyTime_picker({
                format: '%H:%i'
            });

            // On demand picker
            $('#button-checkin').on('click', function (e) {
                $('#input-checkin').AnyTime_noPicker().AnyTime_picker().focus();
                e.preventDefault();
            });

            // On demand picker
            $('#button-checkout').on('click', function (e) {
                $('#input-checkout').AnyTime_noPicker().AnyTime_picker().focus();
                e.preventDefault();
            });
        };


        //
        // Return objects assigned to module
        //
        return {
            init: function() {
                _componentAnytime();
            }
        }
        }();

        document.addEventListener('DOMContentLoaded', function() {
            DateTimePickers.init();
        });
	</script>

@endsection