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

@section('title', 'Reservation')

@section('css')
<style type="text/css">
	.datatable-column-width{
		overflow: hidden; text-overflow: ellipsis; max-width: 200px;
	}
    th{
        white-space: nowrap;
    }
</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">Home</span> - Data Reservation</h4>
				<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
			</div>
            <div class="d-flex">
                @if (in_array(\Auth::user()->role, [1,2]))
                <a href="{{ url('booking-custom-admin')}}">
                    <button type="button" class="btn btn-danger rounded-round">
                        <i class="icon-add mr-2"></i> New Reservation with Backdate
                    </button>
                </a>
                @endif
            </div>
			{{--
				@if(\Auth::user()->role != 10)
				<div class="form-inline">
					@if(\Session::get('shift'))
					<form action="{{route('close-shift-fo')}}" id="form_close_shift" target="_blank" method="post">
						@csrf
						<input type="hidden" name="shift_id_fo" id="shift_id_fo" value="{{\Session::get('shift_id')}}">
						<button type="submit" onclick="reloadPage()" class="btn btn-danger">Close Shift {{\Session::get('shift')}}</button>
					</form>
					@else
					<form action="{{route('open-shift-fo')}}" method="post">
						@csrf
						<select name="shift_id_fo" id="shift_id_fo" class="form-control" required>
							<option value="">** Pilih Shift **</option>
							@foreach(config('custom.shift_pos') as $key=>$val)
							<option value="{{$key}}" {{$key == \Session::get('shift') ? 'selected' : ''}}>{{$val}}</option>
							@endforeach
						</select>
						&nbsp;
						<button type="submit" class="btn btn-primary">Open Shift</button>
					</form>
					@endif
				</div>
				@endif
			--}}
		</div>
	</div>
	<!-- /page header -->

	<!-- Content area -->
	<div class="content">

        @if (checkBackDateHotel(hotelID()))
            <div class="alert alert-warning alert-styled-left alert-dismissible">
                There are backdated bookings from OTA or Manual; please check in first, and then don't forget to update DRR according to the date in the details.
                <button type="button" class="btn btn-warning m-1" style="float: right; top:0; right:0; position:absolute;" onclick="showDetailBookDates()">Detail</button>
            </div>
        @endif

        @if (otacancelledbooking())
            <div class="alert alert-warning alert-styled-left alert-dismissible">
                There are cancelled bookings from OTA; please cancelled it first.
                <button type="button" class="btn btn-warning m-1" style="float: right; top:0; right:0; position:absolute;" onclick="showCancelledOTA()">Detail</button>
            </div>
        @endif

		<!-- Filter Area -->
		<div class="card">
			<div class="card-header row">
				<div class="form-group row col-sm-5 mt-3">
                    <label class="col-form-label col-sm-3"><h6><b>Date Filter :</b></h6></label>
                    <div class="col-sm-5">
                        <input type="text" name="tanggal"
		                       class="form-control"
		                       id="filter_tanggal"
                        >
                    </div>
                </div>
				<div class="form-group row col-sm-5 mt-3">
                    <label class="col-form-label col-sm-3"><h6><b>Status Filter :</b></h6></label>
                    <div class="col-sm-5">
                        <select name="filter_status" id="filter_status" class="form-control form-control-select2">
							<option value=""> -- All status --</option>
                            @foreach(config('custom.status_booking') as $key=>$val)
                                @if(in_array($key, [4,1,2,13]))
							    <option value="{{$key}}"> {{$val}} </option>
                                @endif
                            @endforeach
						</select>
                    </div>
                </div>
				<div class="form-group col-sm-2 ml-0" style="text-align: right">
					<h6><input type="checkbox" name="hide_history" id="hide_history" value="1" style="margin: 12px">&nbsp;<b>Hide History</b></h6>
					<h6><input type="checkbox" name="show_checkout" id="show_checkout" value="1">&nbsp;<b>Checked Out Today</b></h6>
				</div>
			</div>
		</div>
		<!-- Filter Area -->

		<!-- Hover rows -->
		<div class="card">
			<div class="card-header header-elements-inline">
				<a href="{{ route('bookings.create')}}">
					<button type="button" class="btn btn-success rounded-round">
						<i class="icon-add mr-2"></i> New Reservation
					</button>
				</a>

                <div class="float-right">
                    @if ($hotel->bnl_user&&$hotel->bnl_pass&&$hotel->bnl_prop_id&&$hotel->bnl_pms_name)
                        <button type="button"
                                class="btn btn-success modal_reset_idx_data"
                                data-toggle="modal"
                                data-target="#modal_ota_update"
                        >
                            <i class="icon-upload"></i>&nbsp;
                            Update OTA Room Availibility
                        </button>
                        <button type="button" data-toggle="modal" data-target="#modal-confirmation" class="btn btn-warning">Pull BNL</button>
                    @endif
                </div>
			</div>

			<div id="with-history">
				<table class="table datatable-basic table-hover">
					<thead>
						{{--
							<tr>
								<th class="d-none">Updated At Sort</th>
								<th>#</th>
								@if(\Auth::user()->role == 1)
								<th>Hotel</th>
								@endif
								<th>Nama</th>
								<th>Kamar</th>
								<th>Start x End</th>

								<!-- <th>Start x End (day use)</th> -->

								<th>Jumlah</th>
	                            <th>Jumlah Kamar</th>
								<th>Segmentasi</th>
								<th>Total Biaya</th>
								<th>Status Booking</th>
								<th>Plat Nomor</th>
								<th class="text-center">Actions</th>
							</tr>
						--}}

						<tr>
							<th class="d-none">Updated At Sort</th>
							<th>#</th>
							<th>Reservation no.</th>
                            @if (\Auth::user()->role==1)
							<th title="Super Admin Only"><i class="icon-alert text-info"></i>Room - Day</th>
                            @endif
							{{-- <th>Group name</th> --}}
							<th>Reserve name</th>
							<th>Room number</th>
							<th>GuestName</th>
                            <th>Arrival & Departure</th>
							{{-- <th>Qty</th> --}}
							<th>Room type</th>
							{{-- <th>Arr. Code</th> --}}
							<th>Room Rate</th>
							{{-- <th>Night</th> --}}
							{{-- <th>Adult</th> --}}
							{{-- <th>Status Booking</th> --}}
							<th>License Plate</th>
							{{-- <th>Arrival Time</th>
							<th>Departure Time</th> --}}
							{{-- <th>Keycard</th> --}}
							<th>CreateDate</th>
							<th>By User</th>
							<th class="text-center">Actions</th>
						</tr>

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

			<div id="without-history">
				<table class="table datatable-nohistory table-hover">
					<thead>
						{{--
						<tr>
							<th class="d-none">Updated At Sort</th>
							<th>#</th>
							@if(\Auth::user()->role == 1)
							<th>Hotel</th>
							@endif
							<th>Nama</th>
							<th>Kamar</th>
							<th>Start x End</th>

							<!-- <th>Start x End (day use)</th> -->

							<th>Jumlah</th>
							<th>Jumlah Kamar</th>
							<th>Segmentasi</th>
							<th>Total Biaya</th>
							<th>Status Booking</th>
							<th>Plat Nomor</th>
							<th class="text-center">Actions</th>
						</tr>
						--}}

						<tr>
							<th class="d-none">Updated At Sort</th>
							<th>#</th>
							<th>Reservation no.</th>
                            @if (\Auth::user()->role==1)
							<th title="Super Admin Only"><i class="icon-alert text-info"></i>Room - Day</th>
                            @endif
							{{-- <th>Group name</th> --}}
							<th>Reserve name</th>
							<th>Room number</th>
							<th>GuestName</th>
                            <th>Arrival & Departure</th>
							{{-- <th>Qty</th> --}}
							<th>Room type</th>
							{{-- <th>Arr. Code</th> --}}
							<th>Room Rate</th>
							{{-- <th>Night</th>
							<th>Adult</th>
							<th>Status Booking</th> --}}
							<th>License Plate</th>
							{{-- <th>Arrival Time</th>
							<th>Departure Time</th> --}}
							{{-- <th>Keycard</th> --}}
							<th>CreateDate</th>
							<th>By User</th>
							<th class="text-center">Actions</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
			</div>

            <div id="checkedout-only">
				<table class="table datatable-checkedoutonly table-hover">
					<thead>
						{{--
						<tr>
							<th class="d-none">Updated At Sort</th>
							<th>#</th>
							@if(\Auth::user()->role == 1)
							<th>Hotel</th>
							@endif
							<th>Nama</th>
							<th>Kamar</th>
							<th>Start x End</th>

							<!-- <th>Start x End (day use)</th> -->

							<th>Jumlah</th>
							<th>Jumlah Kamar</th>
							<th>Segmentasi</th>
							<th>Total Biaya</th>
							<th>Status Booking</th>
							<th>Plat Nomor</th>
							<th class="text-center">Actions</th>
						</tr>
						--}}

						<tr>
							<th class="d-none">Updated At Sort</th>
							<th>#</th>
							<th>Reservation no.</th>
                            @if (\Auth::user()->role==1)
							<th title="Super Admin Only"><i class="icon-alert text-info"></i>Room - Day</th>
                            @endif
							{{-- <th>Group name</th> --}}
							<th>Reserve name</th>
							<th>Room number</th>
							<th>GuestName</th>
                            <th>Arrival & Departure</th>
							{{-- <th>Qty</th> --}}
							<th>Room type</th>
							{{-- <th>Arr. Code</th> --}}
							<th>Room Rate</th>
							{{-- <th>Night</th>
							<th>Adult</th>
							<th>Status Booking</th> --}}
							<th>License Plate</th>
							{{-- <th>Arrival Time</th>
							<th>Departure Time</th> --}}
							{{-- <th>Keycard</th> --}}
							<th>CreateDate</th>
							<th>By User</th>
							<th class="text-center">Actions</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
			</div>

		</div>
		<!-- /hover rows -->

	</div>
	<!-- /content area -->

    <!-- Danger modal -->
	<div id="modal_status_confirm_cancel" class="modal fade" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header custom-bg" align="center">
                    <h6 class="modal-title modal-title-confirm-cancel"></h6>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<form action="" method="post" id="statusform">
				    @csrf

					<input type="hidden" name="detail_id" id="id_booking"><!--This is for Booking_details id-->
					<input type="hidden" name="id" id="booking_id"><!--This is for Booking id-->
					<input type="hidden" name="status_booking" id="status_booking">
					<input type="hidden" name="hotel_id" id="hotel_id">

					<div class="modal-body modal-body-status-confirm-cancel">
                        <div class="row" id="header_modal_confirm">
                            <div class="col-lg-1">
                                #
                            </div>
                            <div class="col-lg-3 nomor-kamar-confirm-cancel">
                                Nomor Kamar
                            </div>
                            <div class="col-lg-6 reason_for_cancel_reservation">
                                Reason
                            </div>
                            <div class="col-lg-2 header-checkbox-cancel-all-reservation text-right">
                                <h6><input type="checkbox" name="cancel_all_reservation" id="checkbox_cancel_all_reservation" value="1" onchange="checkboxCancelAllReservation(this)">&nbsp;<b>All</b></h6>
                            </div>
                        </div>
                        <legend></legend>
                        <div id="html_confirm_cancel"></div>
					</div>

					<div class="modal-footer modal-footer-confirmcancel">
						<button type="button" class="btn btn-link" data-dismiss="modal">Cancel</button>
						<button type="submit" class="btn bg-danger submit-modal_confirmcancel">Yes</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<!-- /default modal -->

    <!-- Danger modal -->
	<div id="modal-copy" class="modal fade" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header bg-success" align="center">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<form action="{{url('copy-booking')}}" method="post">
				    @csrf
				    @method('POST')
					<div class="modal-body" align="center">
						<input type="hidden" name="booking_id" id="booking_id">
						<h2> Salin Data? </h2>
						<div class="form-group">
							<label for="copy_amount">Jumlah Data:</label>
							<input type="number" style="width: 10%;" size="2" name="jumlah_copy" id="jumlah_copy" min="1" value="1" class="form-control">
						</div>
					</div>

					<div class="modal-footer">
						<button type="button" class="btn btn-link" data-dismiss="modal">Batal</button>
						<button type="submit" class="btn btn-success">Salin</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<!-- /default modal -->

    <!-- Log file modal -->
    <div id="log_file_modal" class="modal fade">
		<div class="modal-dialog modal-xl">
			<div class="modal-content">
				<div class="modal-header bg-warning" align="center">
					<h6 class="modal-title"><i class="icon-history mr-1"></i>Log File - Guest <span class="guest-name"></span></h6>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<div class="modal-body">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>User</th>
                                <th>Datetime</th>
                                <th>Activity</th>
                                <th>Before</th>
                                <th>After</th>
                            </tr>
                        </thead>

                        <tbody id="tbody_log_file">
                        </tbody>
                    </table>
				</div>

				<div class="modal-footer">
					<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
				</div>
			</div>
		</div>
	</div>
    <!-- Log file modal -->

{{--
--------------------------------------------------------------
Reason Cancel Reservation Modal
--------------------------------------------------------------
--}}
<div id="reason_cancel_reservation_modal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger" align="center">
                <h6 class="modal-title"><i class="fas fa-exclamation mr-1"></i> Reason Cancel Reservation - Guest <span class="guest-name"></span></h6>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <div class="modal-body">
                <div class="form-group" id="container_cancelled_room">
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

    <div id="modal-confirmation" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-warning" align="center">
                    <h5 class="modal-title"><i class="fas fa-exclamation mr-1"></i> Confirmation!</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <div class="modal-body">
                    <span>Are you sure want pull data reservation from Book and link?</span>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
                    <a href="{{url('bnl_pull_btn')}}">
                        <button type="button" class="btn btn-danger">Pull now</button>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Alert Modal -->
	<div id="alert_modal" class="modal fade" tabindex="-1">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header bg-warning" align="center">
                    <h6 class="modal-title">
                       &nbsp;<h3>Alert!</h3>
                    </h6>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

                <div class="modal-body" align="center" id="text-alert">
                    <div>
                        <div class="col-md-12 mt-2">
                            <div id="alert-description" class="alert alert-warning text-center mb-2" role="alert">
                                Please check in the bookings first. This list is the backdated bookings or late bookings according to the start date; after this, please update DRR.
                            </div>
                        </div>
                    </div>
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Date</th>
                                <th>OTA reservation code</th>
                                <th>No. Reservation PMS</th>
                                <th>Guest name</th>
                                <th>Start date - end date</th>
                            </tr>
                        </thead>
                        <tbody id="label_data_list">
                            <tr>
                                <td colspan="3" class="text-center">
                                    <h4>No data</h4>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="modal-footer">
                    <button type="submit" class="btn bg-primary" data-dismiss="modal">Close</button>
                </div>

			</div>
		</div>
	</div>
	<!-- /Alert Modal -->

    <!-- Keycard modal -->
    <div id="modal-keycard" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-warning" align="center">
                    <h5 class="modal-title"><i class="fas fa-exclamation mr-1"></i> Keycard command</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <form action="{{url('send-keycard')}}" method="post" id="keycard-form">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" name="nomor_kamar" id="keycard-roomnumber">
                        <tr>
                            <td style="width:110px; height:25px">Current Room:<td>
                            <td><span class="font-weight-bold" id="keycard-htmlroom"></span><td>
                        </tr>

                        <hr class="mt-1">

                        <div class="form-group row">
                            <label class="col-form-label col-sm-4">Status</label>
                            <div class="col-lg-8">
                                <select name="status" id="keycard-status" class="form-control form-control-select2 border-1 border-1">
                                    <option value="">Reset</option>
                                    <option value="1">Check In</option>
                                    <option value="2">Check Out</option>
                                </select>
                            </div>
                        </div>
                    </div>


                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-warning">Submit</button>
                    </div>
                </form>

            </div>
        </div>
    </div>
    <!-- Keycard modal -->

    <!-- Keycard modal -->
    <div id="modal-extendstay" class="modal fade">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-warning" align="center">
                    <h6 class="modal-title"><i class="fas fa-running mr-1"></i>Extend Stay</h6>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <form id="extendstaygroup" action="{{url('extendstay-group')}}" method="post">
                    @method('post')
                    @csrf

                    <div class="modal-body">
                        <label class="col-form-label" id="label_current_room">
                            <tr>
                                <td style="width:110px; height:25px">Total Room<td>
                                <td>: 2<td>
                            </tr>
                        </label>
                        <hr class="mt-1">
                        <div class="row" style="text-align: center">
                            <div class="col-sm-1">
                                <div class="form-group font-weight-bold">
                                    Room
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="form-group font-weight-bold">
                                    Guest Name
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="form-group font-weight-bold">
                                    Last start - End
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="form-group font-weight-bold">
                                    Night
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="form-group font-weight-bold">
                                    Next start - End
                                </div>
                            </div>
                        </div>
                        <input type="hidden" name="booking_id" id="booking_id_es">
                        <div id="extendgroup-list" style="text-align: center">

                        </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">Submit</button>
                    </div>

                </form>
            </div>
        </div>
    </div>
    <!-- Keycard modal -->
    <!--MODAL Update Room Availlibility-->
    <div id="modal_ota_update" class="modal fade">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header bg-success" align="center">
					<h6 class="modal-title"><i class="fas fa-coins"></i>&nbsp;Update OTA Room Availlibility</span></h6>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<form action="{{url('/jenis-kamar-update-room')}}" method="post">
					@csrf
					<div class="modal-body">
                        <div>
                            <div class="col-md-12 mt-2">
                                <div id="alert-description" class="alert alert-warning text-center mb-2" role="alert">
                                    will only update have roomtype id bnl room type!
                                </div>
                            </div>
                        </div>
                        <div class="form-group col-lg-5">
                            <label for="date">Update until <span class="text-danger font-weight-bolder">*</span>:</label>
                            <input type="text" name="end_date" id="end_date" class="form-control daterange-single" required>
                        </div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-link btn-lg" data-dismiss="modal">Close</button>
						<button type="submit" class="btn btn-success">Submit</button>
					</div>
				</form>
			</div>
		</div>
	</div>
    <!--/MODAL Update Room Availlibility-->
@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/tables/datatables/datatables.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>

	<!-- JS Date 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('/')}}/global_assets/js/plugins/pickers/anytime.min.js"></script>
	<script src="{{asset('/')}}/global_assets/js/plugins/pickers/pickadate/picker.js"></script>
	<script src="{{asset('/')}}/global_assets/js/plugins/pickers/pickadate/picker.date.js"></script>
	<script src="{{asset('/')}}/global_assets/js/plugins/pickers/pickadate/picker.time.js"></script>
	<script src="{{asset('/')}}/global_assets/js/plugins/pickers/pickadate/legacy.js"></script> -->
	<script src="{{asset('/')}}/global_assets/js/plugins/notifications/jgrowl.min.js"></script>

    <!-- Helpers JS -->
    <script src="{{asset('assets/js/custom.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/gallery_library.js')}}"></script>
	<script>
		let jenis_identitas = {!! json_encode(config('custom.jenis_identitas')) !!};
		// let tipe_booking = {!! json_encode(config('custom.tipe_booking')) !!};
		// let jenis_pembayaran = {!! json_encode(config('custom.jenis_pembayaran')) !!};
		let status_booking = {!! json_encode(config('custom.status_booking')) !!};
		let source  = {!! json_encode(config('custom.source')) !!}
		let segments = {!! json_encode(config('custom.segmentasi_ratecodes')) !!}
		let jenis_deposit = {!! json_encode(config('custom.jenis_deposit')) !!};
		let tanggalsekarang = {!! json_encode(strtotime(getSystemDate())) !!};
		let datesystem = {!! json_encode(getSystemDate()) !!};
		let permission = {!! json_encode(\Auth::user()->permission_change_reserv) !!};
		let ceklengkap = false;


		//house count arriving
		@if(Request::get('s')=='in')
			$('#filter_status').val('4').trigger('change');
		@endif

        // global filter value
        let tanggal = $('#filter_tanggal').val();
        let filter = $('#filter_status').val();

        $('#end_date').daterangepicker({
            singleDatePicker:true,
            showDropdowns: true,
            minDate: '{{dateFormat(getSystemDate(), "d-m-Y")}}',
            startDate: '{{dateFormat(getSystemDate(), "d-m-Y")}}',
            applyClass: 'btn-primary',
            cancelClass: 'btn-light',
            locale: {
                format: 'DD-MM-YYYY'
            }
        });

        // Date Picker for Filter Tnggal
        $('#filter_tanggal').daterangepicker({
            startDate: "{{ formatDate(getSystemDate(), 'd-m-Y') }}",
            endDate:  "{{ formatDate(getSystemDate(), 'd-m-Y') }}",
            applyClass: 'btn-primary',
	        cancelClass: 'btn-light',
            locale: {
                format: 'DD-MM-YYYY'
            }
        });

        // ketika tanggal di pilih
        $(document).on("change", "#filter_tanggal", function () {
            tanggal = $('#filter_tanggal').val()
            filter = $('#filter_status').val()
            $('.datatable-basic').DataTable().clear().destroy()
            $('.datatable-nohistory').DataTable().clear().destroy()
            $('.datatable-checkedoutonly').DataTable().clear().destroy()
            DatatableBasic.init()
        });

        // ketika tanggal di pilih
        $(document).on("change", "#filter_status", function () {
            tanggal = $('#filter_tanggal').val()
            filter = $('#filter_status').val()
            $('.datatable-basic').DataTable().clear().destroy()
            $('.datatable-nohistory').DataTable().clear().destroy()
            $('.datatable-checkedoutonly').DataTable().clear().destroy()
            DatatableBasic.init()
        });

		//modal delete
        function functionStatusButton(url, id, status_booking_sekarang, hotel_id){
            // var url = $(this).data('uri');
            //  var status = $(this).data('status_booking')
            // var hotel_id = $(this).data('hotel_id')
            // var id = $(this).data('id_booking')
            // var status_booking_sekarang = $(this).data('status_booking_sekarang')
            //  var end_date = $(this).data('end_date')
            //  	end_date = Date.parse(end_date)/1000
            //  $('#status_booking').val(status)

            // defined variable
            let checked_cancel_all_reservation = false

            // reset positionheader
            $('#header_modal_confirm').show()

            $('#id_booking').val(id)
            $('#hotel_id').val(hotel_id)

            if (status_booking_sekarang == 4) {
                checked_cancel_all_reservation = $('#checkbox_cancel_all_reservation').is(":checked");
                url = checked_cancel_all_reservation ? "{{route('roomview.cancel-all-reservation')}}" : url;

                $('.custom-bg').removeClass('bg-info').addClass('bg-danger')
                $('.submit-modal_confirmcancel').removeClass('bg-info').addClass('bg-danger')
                // $('#text-confirmcancel').text(' Cancel Reservation? ')
                $(".modal-footer-confirmcancel").show();
                $("#statusform").attr("action", url);
                $('#status_booking').val(13)

                // show reason
                $('.reason_for_cancel_reservation').show()

                // change modal title
                $('.modal-title-confirm-cancel').html('<i class="icon-user-cancel"></i> Cancel Reservation')

                //  if (status == 13) {
                // 	 $('.custom-bg').removeClass('bg-info').addClass('bg-danger')
                // 	 $('.submit-modal_confirmcancel').removeClass('bg-info').addClass('bg-danger')
                // 	 $('#text-confirmcancel').text(' Cancel Reservation? ')
                // 	 $(".modal-footer-confirmcancel").show();
                // 	 $("#statusform").attr("action", url);
                //  }
            }
            else if(status_booking_sekarang == 13){
                $('.custom-bg').removeClass('bg-danger').addClass('bg-info')
                $('.submit-modal_confirmcancel').removeClass('bg-danger').addClass('bg-info')
                // $('#text-confirmcancel').text(' Confirm Reservation? ')
                $(".modal-footer-confirmcancel").show();
                $("#statusform").attr("action", url);
                $('#status_booking').val(4)

                // change modal title
                $('.modal-title-confirm-cancel').html('<i class="icon-user-check"></i> Confirmed Reservation')

                // hide reason
                $('.reason_for_cancel_reservation').hide()

                // if (status == 4 && end_date >= tanggalsekarang) {
                // 	 $('.custom-bg').removeClass('bg-danger').addClass('bg-info')
                // 	 $('.submit-modal_confirmcancel').removeClass('bg-danger').addClass('bg-info')
                // 	 $('#text-confirmcancel').text(' Confirm Reservation? ')
                // 	 $(".modal-footer-confirmcancel").show();
                // 	 $("#statusform").attr("action", url);
                //  }
                //  else if(end_date <= tanggalsekarang){
                // 	$('.custom-bg').removeClass('bg-danger').addClass('bg-info')
                // 	$('.submit-modal_confirmcancel').removeClass('bg-danger').addClass('bg-info')
                // 	$('#text-confirmcancel').text(' Anda hanya dapat mengubah status booking menjadi confirmed reservation jika booking tidak melewati tanggal check out! ')
                // 	$(".modal-footer-confirmcancel").hide();
                //  }
            }

            // ajax get booking data
            $.ajax({
                type: 'get',
                url: "{{ url('/get-booking-data')}}/"+id,
                dataType: "json",
                success: function (data) {
                    // let booking_details = data?.booking?.booking_details;
                    // define variable html confirm cancel
                    // let idx = 0;
                    let html_confirm_cancel = '';

                    // cek if booking details is not null
                    if (data) {
                        $('#booking_id').val(data.booking_id)
                        // foreach booking details
                        // $.each(booking_details, function(key, booking_detail){
                            let textarea_reason = '';

                            // cek if status booking from booking detail is 4
                            if (data.status_booking == status_booking_sekarang) {
                                if (data.status_booking == 4) {
                                    textarea_reason += `<div class="col-lg-8">
                                                                <textarea name="reason_cancel_reservation" id="textarea_reason_cancel_reservation" rows="5" class="form-control"></textarea>
                                                            </div>`

                                    html_confirm_cancel += `<div class="row mb-3">
                                                                <div class="col-lg-3 nomor-kamar-confirm-cancel ${checked_cancel_all_reservation ? 'd-none' : ''}">
                                                                    ${data.nomor_kamar ?? '-'}
                                                                </div>
                                                                ${textarea_reason}
                                                            </div>`
                                }else{
                                    $('#header_modal_confirm').hide()
                                    html_confirm_cancel += `<div style="text-align:center">
                                                                Are you sure to return this Booking ${data.nomor_kamar ?? '-'} into confirmed reservation?
                                                            </div>`
                                }
                            }else{
                                html_confirm_cancel += `<div class="row mb-3">
                                                            <div class="col-lg-12">
                                                                <p class="text-center">No Data (Something Wrong...!)</p>
                                                            </div>
                                                        </div>`
                            }

                        // });
                    }
                    $('#html_confirm_cancel').html(html_confirm_cancel)
                }
            });
        }

		//modal
        function checkboxCancelAllReservation(checkbox){
            if(checkbox.checked == true){
                $('.nomor-kamar-confirm-cancel').removeClass('d-none').addClass('d-none')
                $('.header-checkbox-cancel-all-reservation').removeClass('col-lg-2').addClass('col-lg-5')

                $("#statusform").attr("action", "{{route('roomview.cancel-all-reservation')}}");
            }else{
                $('.nomor-kamar-confirm-cancel').removeClass('d-none')
                $('.header-checkbox-cancel-all-reservation').removeClass('col-lg-5').addClass('col-lg-2')

                $("#statusform").attr("action", "{{route('roomview.update')}}");
            }
        }

		//Sembunyikan datatable tanpa history
		$('#without-history').hide();
		$('#checkedout-only').hide();

		var DatatableBasic = function() {

		    // Basic Datatable examples
		    var _componentDatatableBasic = function() {
		        if (!$().DataTable) {
		            console.warn('Warning - datatables.min.js is not loaded.');
		            return;
		        }

		        // Setting datatable defaults
		        $.extend( $.fn.dataTable.defaults, {
		            autoWidth: false,
                    @if (\Auth::user()->role==1)
		            columnDefs: [{
		                orderable: false,
		                width: 300,
		                targets: [ 12 ]
		            },{
		                orderable: false,
		                width: 300,
		                targets: [ 3 ]
		            }],
                    @else
		            columnDefs: [{
		                orderable: false,
		                width: 300,
		                targets: [ 11 ]
		            }],
                    @endif
                    scrollX: true,
		            dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
		            language: {
		                search: '<span>Filter:</span> _INPUT_',
		                searchPlaceholder: 'Type to filter...',
		                lengthMenu: '<span>Show:</span> _MENU_',
		                paginate: { 'first': 'First', 'last': 'Last', 'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;' }
		            }
		        });


                let style = "";
				let datas = [
						{data:null, name:'updated_at_sort', 'visible': false, 'targets': [0],  render:function(data, type, sort, row){
							let updated_at = moment(data.updated_at, "YYYYMMDDHHmmss").format('YYYYMMDDHHmmss');
                            let color = (data.status_booking == 13 ? 'color: #f44336; font-weight: bold;' : (data?.jml_malam > 7 ? 'color: #2196f3;font-weight: bold;' : ''));
                            return `<div style="${color}">`+updated_at+`</div>`;
						}},
						{data:null, render:function(data, type, row){
							ceklengkap = data.nomor_kamar == null || data.booking.alamat == null || data.booking.negara == null || data.booking.kota == null || data.booking.jns_identitas == null || data.booking.no_identitas == null || data.booking.telp == null
							let style = ceklengkap ? 'text-warning font-weight-bold' : '';
							let color = (data.status_booking == 13 ? 'color: #f44336; font-weight: bold;' : (data.jml_malam > 7 ? 'color: #2196f3;font-weight: bold;' : ''));
                            return `<span class="${style}" style="${color}">${data.DT_RowIndex}</span>`;
						}},
						{data:null, name:'booking.kode_booking',render:function(data, type, row){
							let style = ceklengkap ? 'text-warning font-weight-bold' : '';
							let color = (data.status_booking == 13 ? 'color: #f44336; font-weight: bold;' : (data.jml_malam > 7 ? 'color: #2196f3;font-weight: bold;' : ''));
                            let status_ota = ((data.booking.status_ota && data.status_booking != 13) ? '<i class="text-danger icon-warning22" title="Cancelled on OTA"></i>' : '')
							let html = `<div class="${style}" style="${color}">${status_ota}<a href="{{url('bookings')}}/${data.booking.id}/edit">`;
							let kode_booking =  data.booking.kode_booking ? data.booking.kode_booking : '-';
							html += kode_booking;
							html += '</a></div>';
							return html;
						}},
                        @if (\Auth::user()->role==1)
                        {data:null, name:'code',render:function(data, type, row){
							let style = ceklengkap ? 'text-warning font-weight-bold' : '';
							let color = (data.status_booking == 13 ? 'color: #f44336; font-weight: bold;' : (data.jml_malam > 7 ? 'color: #2196f3;font-weight: bold;' : ''));
							let html = `<div class="${style}" style="${color}">`;
							html += data.code ? data.code : '-';
							html += '</div>';
							return html;
						}},
                        @endif
						// {data:null, name:'group_name',render:function(data, type, row){
						// 	let style = ceklengkap ? 'text-warning font-weight-bold' : '';
						// 	let color = (data.status_booking == 13 ? 'color: #f44336; font-weight: bold;' : (data.jml_malam > 7 ? 'color: #2196f3;font-weight: bold;' : ''));
						// 	let html = `<div class="${style}" style="${color}">`;
						// 	html += data.booking.group_name ? data.booking.group_name : '-';
						// 	html += '</div>';
						// 	return html;
						// }},
						{data:null, name:'reserve_name',render:function(data, type, row){
							let style = ceklengkap ? 'text-warning font-weight-bold' : '';
							let color = (data.status_booking == 13 ? 'color: #f44336; font-weight: bold;' : (data.jml_malam > 7 ? 'color: #2196f3;font-weight: bold;' : ''));
							let html = `<div class="${style}" style="${color}">`;
							html += data.reserve_name ? data.reserve_name : '-';
							html += '</div>';
							return html;
						}},
						{data:null, name:'nomor_kamar_now',render:function(data, type, row){
							let style = ceklengkap ? 'text-warning font-weight-bold' : '';
							let color = (data.status_booking == 13 ? 'color: #f44336; font-weight: bold;' : (data.jml_malam > 7 ? 'color: #2196f3;font-weight: bold;' : ''));
							let html = `<div class="${style}" style="${color}">`;

							// $.each(data.nomor_kamar, (idx, nomor_kamar)=>{
							// 	html += nomor_kamar ? '-'+nomor_kamar+'<br />' : '-';
							// });

                            // if(data.booking_details.length > 0)
							// {
                            html += '<ul style="padding: 0px; list-style-type: none; text-align:center;">';
								// $.each(data.booking_details, function(key, val){
                                    // if (val.array_sub == 0) {
                                        html += `<li>${data.nomor_kamar_now ?? '-'} ${data.block_kamar == 1 ? ' <i class="icon-lock text-danger"></i> ' : ''} </li>`;
                                    // }
								// });
                            html += '</ul>';
							// }
							// else
							// {
							// 	html += `-`;
							// }


							html += '</div>';
							return html;
						}},
						{data:null, name:'guest_room',render:function(data, type, row){
							let style = ceklengkap ? 'text-warning font-weight-bold' : '';
							let color = (data.status_booking == 13 ? 'color: #f44336; font-weight: bold;' : (data.jml_malam > 7 ? 'color: #2196f3;font-weight: bold;' : ''));
							let html = `<div class="${style}" style="${color}">`;
							html += data.guest_room
							html += '</div>';
							return html;
						}},
						{data:null, name:'checkinout', render:function(data, type, row){
							let checkin = ''
							let checkout = ''
                            let colorin = (data.status_booking == 13 ? 'text-danger' : (data.jml_malam > 7 ? 'text-primary' : 'text-success'));
                            let colorout = (data.status_booking == 13 ? 'text-danger' : (data.jml_malam > 7 ? 'text-primary' : 'text-danger'));

							if (data.checkin && data.checkout) {
								checkin += moment(data.checkin, "YYYY-MM-DD").format('DD-MM-YY');
								checkout += moment(data.checkout, "YYYY-MM-DD").format('DD-MM-YY');
							} else {
								checkin += moment(data.start_date, "YYYY-MM-DD").format('DD-MM-YY');
								checkout += moment(data.end_date, "YYYY-MM-DD").format('DD-MM-YY');
							}

							// let checkin = moment(data.start_date, "YYYY-MM-DD").format('DD-MM-YY');
							// let checkout = moment(data.end_date, "YYYY-MM-DD").format('DD-MM-YY');
							let html = `<p class="${colorin}"><i class="icon-enter2"></i>&nbsp;${checkin}</p>`;
							html += `<p class="${colorout}"><i class="icon-exit2"></i>&nbsp;${checkout}</p>`;
							return html;
						}},
						// {data:null, name:'jml_kamar',render:function(data, type, row){
						// 	let style = ceklengkap ? 'text-warning font-weight-bold' : '';
						// 	let color = (data.status_booking == 13 ? 'color: #f44336; font-weight: bold;' : (data.jml_malam > 7 ? 'color: #2196f3;font-weight: bold;' : ''));
						// 	let html = `<div class="${style}" style="${color}">`;
						// 	html += '1'
						// 	html += '</div>';
						// 	return html;
						// }},
						{data:null, name:'jenis_kamar',render:function(data, type, row){
							let style = ceklengkap ? 'text-warning font-weight-bold' : '';
							let color = (data.status_booking == 13 ? 'color: #f44336; font-weight: bold;' : (data.jml_malam > 7 ? 'color: #2196f3;font-weight: bold;' : ''));
                            let html = `<div class="${style}" style="${color}">`;
							// let jns_kamar = JSON.parse(data.jns_kamar);
							// if(data.booking_details.length > 0)
							// {
                            html += '<ul style="padding: 0px; list-style-type: none;">';
								// $.each(data.booking_details, function(key, val){
                                    // if (val.array_sub == 0) {
                                        html += `<li>${data.jns_kamar} ${data.block_kamar == 1 ? ' <i class="icon-lock text-danger"></i> ' : ''} </li>`;
                                    // }
								// });
                            html += '</ul>';
							// }
							// else
							// {
								// html += `-`;
							// }

							html += '</div>';

							return html;
						}},
						// {data:null, name:'jenis_kamar',render:function(data, type, row){
						// 	let style = ceklengkap ? 'text-warning font-weight-bold' : '';
						// 	let color = (data.status_booking == 13 ? 'color: #f44336; font-weight: bold;' : (data.jml_malam > 7 ? 'color: #2196f3;font-weight: bold;' : ''));
                        //     let html = `<div class="${style}" style="${color}; white-space: nowrap">`;
						// 	// let jns_kamar = JSON.parse(data.jns_kamar);
						// 	// if(data.booking_details.length > 0)
						// 	// {
                        //     html += '<ul style="padding: 0px; list-style-type: none;">';
						// 		// $.each(data.booking_details, function(key, val){
                        //             // if (val.array_sub == 0) {
                        //                 html += `<li>${data.arrangement_codes != null ? '('+data.arrangement_codes+')' : ''} </li>`;
                        //             // }
						// 		// });
                        //     html += '</ul>';
						// 	// }
						// 	// else
						// 	// {
						// 	// 	html += `-`;
						// 	// }

						// 	html += '</div>';

						// 	return html;
						// }},
						{data:null, name:'total_booking', render:function(data, type, row){
							let style = ceklengkap ? 'text-warning font-weight-bold' : '';
							let color = (data.status_booking == 13 ? 'color: #f44336; font-weight: bold;' : (data.jml_malam > 7 ? 'color: #2196f3;font-weight: bold;' : ''));
                            // return `<div class="${style}">
							// 			Rp. ${data.total_biaya} <br />
							// 			${jenis_pembayaran[data.jns_pembayaran]}
							// 		</div>`;

							let html = `<div class="${style}" style="${color}; white-space: nowrap">`
								html += `Rp. ${ribuanWithComma(data.total_booking ?? 0)} <br />`

							// if (data.booking.deposits.length > 0) {
								$.each(data.booking.deposits, function(key, val){
                                    if (data.nomor_kamar == val.nomor_kamar) {
                                        html += `<span>${jenis_deposit[val.jenis_deposit]}</span>`;
                                    }
								});
							// }

							html += `</div>`;

							return html;

						}},
						// {data:null, name:'jml_malam', render:function(data, type, row){
						// 	let style = ceklengkap ? 'text-warning font-weight-bold' : '';
						// 	let color = (data.status_booking == 13 ? 'color: #f44336; font-weight: bold;' : (data.jml_malam > 7 ? 'color: #2196f3;font-weight: bold;' : ''));
                        //     let html = `<div class="${style}" style="${color}">`;

						// 	if (data.start_date_old && data.end_date_old) {
						// 		html += `${data.jumlah_malam_old} malam`;
						// 	}else{
						// 		html += `${data.jumlah_malam} malam`;
						// 	}

						// 	html += `</div>`;
						// 	return html;
						// }},
						// {data:null, name:'jml_dewasa', render:function(data, type, row){
						// 	let style = ceklengkap ? 'text-warning font-weight-bold' : '';
						// 	let color = (data.status_booking == 13 ? 'color: #f44336; font-weight: bold;' : (data.jml_malam > 7 ? 'color: #2196f3;font-weight: bold;' : ''));
                        //     let html = `<div class="${style}" style="${color}; white-space: nowrap">`;

                        //         html += `${data.pax} Person`;

						// 	html += `</div>`;
						// 	return html;
						// }},
						// 11
						{ data: null, name:'platnomortext',render: function ( data, type, row ) {
							let style = ceklengkap ? 'text-warning font-weight-bold' : '';
							let color = (data.status_booking == 13 ? 'color: #f44336; font-weight: bold;' : (data.jml_malam > 7 ? 'color: #2196f3;font-weight: bold;' : ''));
                            if (data.booking.plat_nomor) {
								html = `<span class="${style}" style="${color}">${data.booking.plat_nomor}</span>`;
							} else {
								html = `<span class="${style}" style="${color}">-</span>`;
							}
							return html;
						}},
						// {data:null, name:'checkin', render:function(data, type, row){
						// 	let checkin = ''
                        //     let colorin = (data.status_booking == 13 ? 'text-danger' : (data.jml_malam > 7 ? 'text-primary' : 'text-success'));

						// 	if (data.checkin) {
						// 		checkin += data.checkin ? moment(data.checkin, "YYYY-MM-DD HH:mm:ss").format('HH:mm:ss') : '-';
						// 	} else {
						// 		checkin += data.start_date ? moment(data.start_date, "YYYY-MM-DD HH:mm:ss").format('HH:mm:ss') : '-';
						// 	}

						// 	// let checkin = moment(data.start_date, "YYYY-MM-DD").format('DD-MM-YY');
						// 	// let checkout = moment(data.end_date, "YYYY-MM-DD").format('DD-MM-YY');
						// 	let html = `<p class="${colorin}" style="white-space: nowrap"><i class="icon-enter2"></i>&nbsp;${checkin}</p>`;
						// 	return html;
						// }},
						// {data:null, name:'checkout', render:function(data, type, row){
						// 	let checkout = ''
                        //     let colorout = (data.status_booking == 13 ? 'text-danger' : (data.jml_malam > 7 ? 'text-primary' : 'text-danger'));

						// 	if (data.checkout) {
						// 		checkout += data.checkout ? moment(data.checkout, "YYYY-MM-DD HH:mm:ss").format('HH:mm:ss') : '-';
						// 	} else {
						// 		checkout += data.end_date ? moment(data.end_date, "YYYY-MM-DD HH:mm:ss").format('HH:mm:ss') : '-';
						// 	}

						// 	// let checkin = moment(data.start_date, "YYYY-MM-DD").format('DD-MM-YY');
						// 	// let checkout = moment(data.end_date, "YYYY-MM-DD").format('DD-MM-YY');
						// 	let html = `<p class="${colorout}" style="white-space: nowrap"><i class="icon-exit2"></i>&nbsp;${checkout}</p>`;
						// 	return html;
						// }},

						// {data:null, name:'keycard', render:function(data, type, row){
						// 	return '-';
						// }},
						// {data: 'created_at'},
						{data: null, name:'created_at', render: function(data, type, row){
							let style = ceklengkap ? 'text-warning font-weight-bold' : '';
							let color = (data.status_booking == 13 ? 'color: #f44336; font-weight: bold;' : (data.jml_malam > 7 ? 'color: #2196f3;font-weight: bold;' : ''));
                            let html = `<div class="${style}" style="${color}; white-space: nowrap">`;

                            if (data.booking.transaction_date) {
                                html += moment(data.booking.transaction_date, "YYYY-MM-DD HH:mm:ss").format('DD-MM-YY');
                            }else{
                                html += ' - '
                            }

							html += `</div>`;
							return html;
						}},
						{data: 'user_nama'},
						{data:null, render:function(data, type, row){
							let html = '<div style="width: 100%; text-align:right">';
							let html_status_button = ''
							let end_date = data.end_date
								end_date = Date.parse(end_date)/1000

							let start_date = data.start_date
								start_date = Date.parse(start_date)/1000

							if (data.status_booking == 4 && data.booking.segmentasi_rate_code != 7 && end_date >= tanggalsekarang) {
                                if(permission == 0){
                                    html_status_button += `<a class="statusbutton" data-toggle="modal" data-target="#modal_status_confirm_cancel" onclick="functionStatusButton('{{route('roomview.update')}}', ${data.id}, ${data.status_booking}, ${data.booking.hotel_id})" ><button type="button" class="btn btn-danger btn-icon"><i class="icon-user-cancel" title="Cancel Reservation"></i></button></a>`
                                }
							}else if(data.status_booking == 13) {
								console.log(data)
                                if (start_date >= tanggalsekarang) {
                                    html_status_button += `<a class="statusbutton mr-1" data-toggle="modal" data-target="#modal_status_confirm_cancel" onclick="functionStatusButton('{{route('roomview.update')}}', ${data.id}, ${data.status_booking}, ${data.booking.hotel_id})" ><button type="button" class="btn btn-info btn-icon"><i class="icon-user-check" title="Confirmed Reservation"></i></button></a>`
                                }

                                html_status_button += `<a data-toggle="modal" data-target="#reason_cancel_reservation_modal" onclick='guestName("${data.guest_room}"), reasonCancelReservation("${data.id}")'><button type="button" class="btn btn-danger btn-icon"><i class="fas fa-exclamation" title="Reason Cancel Reservation"></i></button></a>`
							}

							// console.log(data)
                            // <button type="button" class="btn btn-success btn-tooltip btn-copy" title="Duplikat Booking" data-toggle="modal" data-target="#modal-copy" onclick="copyBooking(${data.booking.id})"><i class="far fa-copy"></i></button>
							// console.log(data.alamat+','+data.negara+','+data.propinsi+','+data.kota+','+data.jenis_identitas+','+data.no_identitas+','+data.email+','+data.telp)
							if(ceklengkap && data.status_booking != 13){
								html += `
												<p class="text-warning">*Please complete data this booking!</p>
												<a href="{{url('bookings')}}/${data.booking.id}/edit"><button type="button" class="btn btn-warning btn-icon"><i class="icon-pencil7" title="Edit"></i></button></a>

												${html_status_button}
											`;
							}
							else if((data.status_booking == 4) && data.nomor_kamar == null){
								html += `
												<p class="text-warning">*Room number not selected</p>
												<a href="{{url('bookings')}}/${data.booking.id}/edit"><button type="button" class="btn btn-warning btn-icon"><i class="icon-pencil7" title="Edit"></i></button></a>

												${html_status_button}
											`;
							}
							else{
								html += `
												<a href="{{url('bookings')}}/${data.booking.id}/edit"><button type="button" class="btn btn-primary btn-icon"><i class="icon-pencil7" title="Edit"></i></button></a>
												${html_status_button}
											`;


							}
                            if(data.status_booking == 1){
                                // html += `
                                //     <button type="button" class="btn btn-light btn-tooltip btn-icon" title="Extend stay group" data-toggle="modal" onclick='extendstaygroup(${data.booking.id})'><i class="icon-notebook"></i></button>
                                // `;
                            }
                            if (data.nomor_kamar) {
                                // html += `
                                // <button type="button" class="btn btn-light btn-tooltip btn-icon" title="Keycard encode" data-toggle="modal" data-target="#modal-keycard" data-toggle="modal" onclick='insertKeycardData(${data.nomor_kamar_now})'><i class="icon-vcard"></i></button>
                                // `;
                            }
                            html += `
                                        <button type="button" class="btn btn-warning btn-tooltip btn-icon" title="Log file" data-toggle="modal" data-target="#log_file_modal" data-toggle="modal" onclick='logFile(${data.booking.id}, guestName("${data.booking.nama}"), ${data.room_index})'><i class="icon-history"></i></button>
                                    `;
                            html +=`</div>`;

							return html;
						}}
					];

		        // Basic datatable
		        $('.datatable-basic').DataTable({
					processing: true,
					serverSide: true,
					ajax: {
                            url: "{{route('booking-datatable')}}",
                            type: "GET",
                            data:{
                                _token: '{{csrf_token()}}',
                                tanggal: tanggal,
                                filter: filter,
                            },
                            beforeSend: function () {
                                $('.datatable-basic > tbody').html(
                                    '<tr class="odd">' +
                                    '<td valign="top" colspan="100%" class="dataTables_empty"><div class="spinner-border text-success" role="status"><span class="sr-only">Loading...</span></div></td>' +
                                    '</tr>'
                                );
                            },
                        },
					columns: datas,
					"order": [[ 1, "asc" ]],
				});

		        // Basic datatable
		        $('.datatable-nohistory').DataTable({
					processing: true,
					serverSide: true,
					ajax: {
                            url: "{{route('nohistories-booking-datatable')}}",
                            type: "GET",
                            data:{
                                _token: '{{csrf_token()}}',
                                tanggal: tanggal,
                                filter: filter,
                            },
                            beforeSend: function () {
                                $('.datatable-basic > tbody').html(
                                    '<tr class="odd">' +
                                    '<td valign="top" colspan="100%" class="dataTables_empty"><div class="spinner-border text-success" role="status"><span class="sr-only">Loading...</span></div></td>' +
                                    '</tr>'
                                );
                            },
                        },
					columns: datas,
					"order": [[ 1, "desc" ]],
				});

		        // Basic datatable Checked Only
		        $('.datatable-checkedoutonly').DataTable({
					processing: true,
					serverSide: true,
					ajax: {
                            url: "{{route('checkedoutonly-booking-datatable')}}",
                            type: "GET",
                            data:{
                                _token: '{{csrf_token()}}',
                                tanggal: tanggal,
                                filter: filter,
                            },
                            beforeSend: function () {
                                $('.datatable-basic > tbody').html(
                                    '<tr class="odd">' +
                                    '<td valign="top" colspan="100%" class="dataTables_empty"><div class="spinner-border text-success" role="status"><span class="sr-only">Loading...</span></div></td>' +
                                    '</tr>'
                                );
                            },
                        },
					columns: datas,
					"order": [[ 1, "desc" ]],
				});

		        // Alternative pagination
		        $('.datatable-pagination').DataTable({
		            pagingType: "simple",
		            language: {
		                paginate: {'next': $('html').attr('dir') == 'rtl' ? 'Next &larr;' : 'Next &rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr; Prev' : '&larr; Prev'}
		            }
		        });

		        // Datatable with saving state
		        $('.datatable-save-state').DataTable({
		            stateSave: true
		        });

		        // Scrollable datatable
		        var table = $('.datatable-scroll-y').DataTable({
		            autoWidth: true,
		            scrollY: 300
		        });

		        // Resize scrollable table when sidebar width changes
		        $('.sidebar-control').on('click', function() {
		            table.columns.adjust().draw();
		        });
		    };

		    // Select2 for length menu styling
		    var _componentSelect2 = function() {
		        if (!$().select2) {
		            console.warn('Warning - select2.min.js is not loaded.');
		            return;
		        }

		        // Initialize
		        $('.dataTables_length select').select2({
		            minimumResultsForSearch: Infinity,
		            dropdownAutoWidth: true,
		            width: 'auto'
		        });
		    };


		    //
		    // Return objects assigned to module
		    //

		    return {
		        init: function() {
		            _componentDatatableBasic();
		            _componentSelect2();
		        }
		    }
		}();


		// Initialize module
		// ------------------------------

		document.addEventListener('DOMContentLoaded', function() {
		    DatatableBasic.init();
		});

		$('#hide_history').on('change', function(){
			let is_centang = $(this).is(":checked");
			if(is_centang){
				$('#with-history').hide();
                $('#checkedout-only').hide();
				$('#without-history').show();
                $('#show_checkout').prop('disabled', true); //disable checkbox checked out only
                var table = $('.datatable-nohistory').DataTable();
                table.columns.adjust().draw();
			}
			else{
				$('#with-history').show();
				$('#without-history').hide();
                $('#checkedout-only').hide();
                $('#show_checkout').prop('disabled', false); //enable checkbox checked out only
                var table = $('.datatable-nohistory').DataTable();
                table.columns.adjust().draw();
			}
		});

        $('#show_checkout').on('change', function(){
			let is_centang = $(this).is(":checked");
            datesystem     = moment(datesystem, "YYYY-MM-DD").format("DD-MM-YYYY");
            console.log(datesystem);
			if(is_centang){
				$('#with-history').hide();
				$('#without-history').hide();
				$('#checkedout-only').show();
                $('#hide_history').prop('disabled', true); //disable checkbox without history
                $('#filter_tanggal').val(datesystem+" - "+datesystem).prop('disabled', true);
                $('#filter_status').val('').prop('disabled', true);
                var table = $('.datatable-checkedoutonly').DataTable();
                table.columns.adjust().draw();
			}
			else{
				$('#with-history').show();
				$('#without-history').hide();
                $('#checkedout-only').hide();
                $('#hide_history').prop('disabled', false); //enable checkbox without history
                $('#filter_tanggal').prop('disabled', false);
                $('#filter_status').val('').prop('disabled', false);
                var table = $('.datatable-checkedoutonly').DataTable();
                table.columns.adjust().draw();
			}
		});

		function copyBooking(id){
			$('#booking_id').val(id);
		}

        // function log file
        function logFile(booking_id, nama=null,room_index) {
            // console.log(id)

            // ajax get data reservation deposit info
            $.ajax({
                type: "GET",
                url: "{{url('log-file')}}/"+booking_id,
                data:{
                    room_index:room_index
                },
                success: function (data) {
                    // console.log(data)

                    // Define variable
                    let html_log = '';

                    // Check if data is empty
                    if (data.length == 0) {
                        html_log += `<tr>
                                        <td colspan="4" class="text-center">Tidak ada data!</td>
                                    </tr>`
                    }else{
                        // Define varibale no with value 1
                        let no = 1

                        // foreach data logs
                        $.each(data.logs, function(key, log){
                            let after_json = JSON.parse(log.json_after)

                            // define variable short with empty string
                            let short_before = ''
                            let short_after = ''

                            // define variable long with empty string
                            let long_before = ''
                            let long_after = ''

                            // before
                                // check json from (before)
                                if (log.json_from != 'null') {
                                    // long Before
                                        // Define varibable json parse
                                        let json_parse_before = JSON.parse(log.json_from)

                                        // check long before
                                        if (json_parse_before){
                                            // check long before is array
                                            if (Array.isArray(json_parse_before) || typeof json_parse_before == 'object') {
                                                // Foreach json parse before
                                                $.each(json_parse_before, function(h1, b1){
                                                    // check if b1 is array
                                                    if (Array.isArray(b1)){
                                                        // Foreach b1
                                                        $.each(b1, function(h2, b2){
                                                            // check if b2 is array
                                                            if (Array.isArray(b2)){
                                                                // Foreach b2
                                                                $.each(b2, function(h3, b3){
                                                                    // check if b3 is array
                                                                    if (Array.isArray(b3)) {
                                                                        // Foreach b3
                                                                        $.each(b3, function(h4, b4){
                                                                            // add long before html
                                                                            long_before += `${h4} : ${b4 ?? ''} <br>`
                                                                        })
                                                                    }
                                                                    else {
                                                                        // add long before html
                                                                        long_before += `${h3} : ${b3 ?? ''} <br>`
                                                                    }
                                                                })
                                                            }else {
                                                                // add long before html
                                                                long_before += `${h2} : ${b2 ?? ''} <br>`
                                                            }
                                                        })
                                                    }else {
                                                        // add long before html
                                                        long_before += `${h1} : ${b1 ?? ''} <br>`
                                                    }
                                                })
                                            }
                                            else {
                                                // add long before html with json parse before
                                                long_before += json_parse_before
                                            }

                                            // add long before with action hide
                                            long_before += `<a href="#/" class="link_hide" onclick="hideMore(${log.id})">[hide]</a></div>`
                                        }
                                        else {
                                            // add long before html with empty condition
                                            long_before += `<div class="text-center" style="vertical-align: top;">( --- Empty --- )</div>`
                                        }
                                    // closing long before

                                    // short before
                                        // check if variable json from is more than 10
                                        if (log.json_from) {
                                            if (log.json_from.length > 10) {
                                                // remove element array then add in varibale short before
                                                short_before = log.json_from.substr(0, 15).replace(/{|"/g, "");
                                            }else{
                                                // add json from in varibale short before
                                                short_before = log.json_from
                                            }
                                        }

                                        // add "more" beside the data short before
                                        short_before += `&nbsp<a href="#/" class="link_hide" onclick="showMore(${log.id})">[more]</a>`
                                    // closing short before
                                }else{
                                    // Define variable with value EMPTY
                                    short_before = '-- EMPTY -- '
                                }
                            // closing before

                            // after
                                // check json after
                                if (log.json_after != 'null') {
                                    // long after
                                        // Define varibable json parse
                                        let json_parse_after = JSON.parse(log.json_after)

                                        // check long after
                                        if (json_parse_after){
                                            // check long after is array
                                            if (Array.isArray(json_parse_after) || typeof json_parse_after == 'object') {
                                                // Foreach json parse after
                                                $.each(json_parse_after, function(h1, b1){
                                                    // check if b1 is array
                                                    if (Array.isArray(b1)){
                                                        // Foreach b1
                                                        $.each(b1, function(h2, b2){
                                                            // check if b2 is array
                                                            if (Array.isArray(b2)){
                                                                // Foreach b2
                                                                $.each(b2, function(h3, b3){
                                                                    // check if b3 is array
                                                                    if (Array.isArray(b3)) {
                                                                        // Foreach b3
                                                                        $.each(b3, function(h4, b4){
                                                                            // add long after html
                                                                            long_after += `${h4} : ${b4 ?? ''} <br>`
                                                                        })
                                                                    }
                                                                    else {
                                                                        // add long after html
                                                                        long_after += `${h3} : ${b3 ?? ''} <br>`
                                                                    }
                                                                })
                                                            }else {
                                                                // add long after html
                                                                long_after += `${h2} : ${b2 ?? ''} <br>`
                                                            }
                                                        })
                                                    }else {
                                                        // add long after html
                                                        long_after += `${h1} : ${b1 ?? ''} <br>`
                                                    }
                                                })
                                            }
                                            else {
                                                // add long after html with json parse after
                                                long_after += json_parse_after
                                            }

                                            // add long after with action hide
                                            long_after += `<a href="#/" class="link_hide" onclick="hideMore(${log.id})">[hide]</a></div>`
                                        }
                                        else {
                                            // add long after html with empty condition
                                            long_after += `<div class="text-center" style="vertical-align: top;">( --- Empty --- )</div>`
                                        }
                                    // closing long after

                                    // short after
                                        // check if variable json after is more than 10
                                    if (log.json_after) {
                                        if (log.json_after.length > 10) {
                                            // remove element array then add in varibale short after
                                            short_after = log.json_after.substr(0, 15).replace(/{|"/g, "");
                                        }else{
                                            // add json after in varibale short after
                                            short_after = log.json_after
                                        }
                                    }


                                        // add "more" beside the data short after
                                        short_after += `&nbsp<a href="#/" class="link_hide" onclick="showMore(${log.id})">[more]</a>`
                                    // closing short after
                                }else{
                                    // Define variable with value EMPTY
                                    short_after = '-- EMPTY -- '
                                }
                            // closing after

                            html_log += `<tr>
                                            <td style="vertical-align: top">${no}</td>
                                            <td style="vertical-align: top">${log?.user?.nama}</td>
                                            <td style="vertical-align: top">${log.created_at}</td>
                                            <td style="vertical-align: top">${log.modul}</td>
                                            <td style="vertical-align: top">
                                                <div class="singkatan${log.id} resetS" style="white-space: nowrap">
                                                    ${short_before == '' ?'<div class="text-center" style="vertical-align: top;">( --- Empty --- )</div>' : short_before}
                                                </div>

                                                <div class="kepanjangan${log.id} resetK" style="display: none;">
                                                    ${long_before == '' ? '<div class="text-center" style="vertical-align: top;">( --- Empty --- )</div>' : long_before}
                                                </div>
                                            </td>

                                            <td style="vertical-align: top">
                                                <div class="singkatan${log.id} resetS" style="white-space: nowrap">
                                                    ${short_after == '' ? '<div class="text-center" style="vertical-align: top;">( --- Empty --- )</div>' : short_after}
                                                </div>

                                                <div class="kepanjangan${log.id} resetK" style="display: none;">
                                                    ${long_after == '' ? '<div class="text-center" style="vertical-align: top;">( --- Empty --- )</div>' : long_after}
                                                </div>
                                            </td>
                                        </tr>`

                            no++
                        });
                    }

                    // Insert html log to table
                    $('#tbody_log_file').html(html_log);
                }
            });
        }

        function insertKeycardData(nmor) {
            console.log(nmor)
            $('#keycard-roomnumber').val(nmor)
            $('#keycard-htmlroom').html(nmor)
        }

        function showMore(id){
            $(".resetS").show();
            $(".resetK").hide();
			$(".singkatan"+id).hide();
			$(".kepanjangan"+id).show();
		}

		function hideMore(id){
			$(".kepanjangan"+id).hide();
			$(".singkatan"+id).show();
		}

        // function guest name
        function guestName(guest_name) {
            $('.guest-name').text(guest_name)
        }

        // function reason cancel reservation
        function reasonCancelReservation(booking_id) {
            // $('#reason_cancel_reservation').text(reason_cancel_reservation)
            $.ajax({
                type: "get",
                url: "{{ route('getreasoncanceled.booking') }}",
                data: {
                    id:booking_id
                },
                dataType: "json",
                success: function (data) {
					let room = ``; //for default variable
                    // $.each(data, function (index, value) {
                        room += `<div class="row mb-1">
                                    <label for="reason_cancel_reservation" class="col-form-label col-lg-5">Room ${data.nomor_kamar} - Reason :</label>
                                    <div class="col-lg-7">
                                        <textarea name="reason_cancel_reservation" id="reason_cancel_reservation" rows="5" class="form-control" readonly>${data.reason_cancel_reservation}</textarea>
                                    </div>
                                </div>
                                `;
                    // });
                    console.log(room)
					$('#container_cancelled_room').html(room);
                }
            });
        }

        // function for cancel confirm checkbox
        function confirmCancelCheckbox(idx) {
            console.log('halo dru')
            let isChecked = $('#check_confirm_cancel'+idx).is(':checked');

            if (isChecked) {
                $('#textarea_reason_cancel_reservation'+idx).attr('disabled', false)
                $('#detail_id_confirm_cancel'+idx).attr('disabled', false)
            }else{
                $('#textarea_reason_cancel_reservation'+idx).attr('disabled', true)
                $('#detail_id_confirm_cancel'+idx).attr('disabled', true)
            }
        }

        function extendstaygroup(id) {
            $.ajax({
                type: "get",
                url: "{{url('checkoutgroup-get')}}",
                data: {
                    booking_id:id
                },
                async: false,
                cache: false,
                timeout: 30000,
                dataType: "json",
                success: function (response) {
                    var html = '';
                    $('#booking_id_es').val(id)
                    $.each(response.bdetails, function (index, value) {
                        html += `
                            <div class="row">
                                <input type="hidden" name="detailid[${index}]" value="${value.id}">
                                <input type="hidden" id="end_date_es${index}" value="${value.end_date}">
                                <div class="col-sm-1 col-form-label">
                                    <div class="form-group">
                                        ${value?.current}
                                    </div>
                                </div>
                                <div class="col-sm-3 col-form-label">
                                    <div class="form-group">
                                        ${value?.guest_room}
                                    </div>
                                </div>
                                <div class="col-sm-3 col-form-label">
                                    <div class="form-group">
                                        ${moment(value?.start_date).format('DD-MM-YYYY')} - ${moment(value?.end_date).format('DD-MM-YYYY')}
                                    </div>
                                </div>
                                <div class="col-sm-2">
                                    <div class="form-group font-weight-bold">
                                        <input type="number" id="night_change_es${index}" name="night[${index}]" onchange="changedatees(${index})" class="form-control" value="1" min="1">
                                    </div>
                                </div>
                                <div class="col-sm-3 col-form-label">
                                    <div class="form-group" id="next-date-es${index}">
                                        ${moment(value?.end_date).format('DD-MM-YYYY')} - ${moment(value?.end_date).add(1, 'days').format('DD-MM-YYYY')}
                                    </div>
                                </div>
                            </div>
                        `;
                    });
                    $('#extendgroup-list').html(html)
                    $('#modal-extendstay').modal('show')
                }
            });
        }

        function changedatees(index) {
            var end_date = $('#end_date_es'+index).val()
            var night = $('#night_change_es'+index).val()

            var start = moment(end_date).format('DD-MM-YYYY')
            var end   = moment(start,"DD-MM-YYYY").add('days', night).format('DD-MM-YYYY');
            var date  = start+' - '+end
            $('#next-date-es'+index).html(date)
        }
	</script>
	<script type="text/javascript">
		$( document ).ready(function() {
            let session_deposit_id = {!! json_encode(\Session::get('deposit_id')) !!}

            // Print Deposit
            if (session_deposit_id) {
                window.open("{{url('print-deposit').'/'}}"+session_deposit_id, "_blank");
            }

	        // 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

            @if ( session('data_backdate'))
                var data = {!! json_encode(session('data_backdate')) !!};
                if (data.length > 0) {
                    var html = ``;
                    $.each(data, function (i, d ) {
                        html +=   ` <tr>
                                        <td>${i+1}</td>
                                        <td>${d['date']}</td>
                                        <td>${d['code']}</td>
                                        <td>${d['nomor']}</td>
                                        <td>${d['guest']}</td>
                                        <td>${d['start']+' - '+d['end']}</td>
                                    </tr>`
                    });
                    $('#label_data_list').html("<h3>"+html+"</h3>")
                    $('#alert_modal').modal('show')
                }
            @endif

		});

		//house count departing
		@if(Request::get('s')=='out')
			$('#show_checkout').prop('checked', true).trigger('change');
		@endif

        function showDetailBookDates() {
            $.ajax({
                type: "get",
                url: "{{url('get-show-book-dates')}}",
                dataType: "json",
                success: function (response) {
                    if (response.length > 0) {
                        var html = ``;
                        $.each(response, function (i, d ) {
                            html +=   ` <tr>
                                            <td>${i+1}</td>
                                            <td>${moment(d.date_now, "YYYY-MM-DD").format('DD-MM-YYYY')}</td>
                                            <td>${d.booking.ota_reservation_code}</td>
                                            <td>${d.booking.kode_booking}</td>
                                            <td>${d.booking.nama}</td>
                                            <td>${moment(d.start_date, "YYYY-MM-DD").format('DD-MM-YYYY')+' - '+moment(d.end_date, "YYYY-MM-DD").format('DD-MM-YYYY')}</td>
                                        </tr>`
                        });
                        $('#alert-description').html('Please check in the bookings first. This list is the backdated bookings or late bookings according to the start date; after this, please update DRR.')
                        $('#label_data_list').html("<h3>"+html+"</h3>")
                        $('#alert_modal').modal('show')
                    }
                }
            });

        }

        function showCancelledOTA() {
            $.ajax({
                type: "get",
                url: "{{url('get-show-book-cancelledota')}}",
                dataType: "json",
                success: function (response) {
                    if (response.length > 0) {
                        var html = ``;
                        $.each(response, function (i, d ) {
                            html +=   ` <tr>
                                            <td>${i+1}</td>
                                            <td>${moment(d.date_now, "YYYY-MM-DD").format('DD-MM-YYYY')}</td>
                                            <td>${d.ota_code}</td>
                                            <td>${d.kode_booking}</td>
                                            <td>${d.guest}</td>
                                            <td>${moment(d.start, "DD-MM-YYYY").format('DD-MM-YYYY')+' - '+moment(d.end, "DD-MM-YYYY").format('DD-MM-YYYY')}</td>
                                        </tr>`
                        });
                        $('#alert-description').html('There are cancelled bookings from OTA; please cancelled it first.')
                        $('#label_data_list').html("<h3>"+html+"</h3>")
                        $('#alert_modal').modal('show')
                    }
                }
            });

        }
	</script>
@endsection