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

@section('title', 'Reservation | Edit Reservation')

@section('css')
	<style>
		.has-error .select2-selection, .has-error input {
			border: 1px solid #F44336 !important;
			border-radius: 4px !important;
		}

        #table_guest_history_booking_filter label input {
            width: 250px !important;
        }

		.rcheckbox {
		height: 18px;
  		width: 18px;
		top: -20%;
		-ms-transform: translateY(20%);
		transform: translateY(20%);

		}
		.rcheckbox input:checked{
		background-color: #F44336;
		}
        .circle {
            position: absolute;
            top: -5px;
            right: -5px;
            width: 15px;
            height: 15px;
            -webkit-border-radius: 25px;
            -moz-border-radius: 25px;
            border-radius: 25px;
            background: #f44336;
        }
        .select2-results__options:not(#select2-checkout_pembayaran_segment-results) .select2-results__option[aria-disabled=true]{
            background-color: darkgray;
            color: white;
            display:none;
        }
        input[type=radio][data-fouc]{
            visibility:visible;
        }

        .listtable {
            font-family: Arial, Helvetica, sans-serif;
            border-collapse: collapse;
            width: 100%;
            font-size: 14px;
        }

        .listtable td, .listtable th {
            border: 1px solid #ddd;
            padding: 20px 10px;
            text-align: center;
        }

        .listtable th {
            background-color: #f2f2f2;
        }

        .scroll-horizontal{
            display: block;
            overflow-x: scroll;
        }

        .headcol{
            position: absolute;
            line-height: 16px;
            /* height: */
        }
        .headcol:before{
            content: Row;
        }
        .modal {
            overflow-y:auto;
        }
	</style>
@endsection

@section('content')
    @php
        $hotel_id = $booking->hotel_id;
        $permission = \Auth::user()->permission_change_reserv;
    @endphp

	<!-- 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> Edit Data Reservation</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">
        @if (session('error_alert'))
            <div class="alert alert-danger alert-styled-left alert-dismissible">
                <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                {{ session('error_alert') }}
            </div>
        @endif

		<!-- Hover rows -->
		<div class="card">
			{{--
				<div class="card-header header-elements-inline">
	                <div class="col-md-12 text-right">
	                    <a class="guest_history_booking"
	                        data-toggle="modal"
	                        data-target="#guest_history_booking_modal"
	                        >
	                            <button type="button" class="btn btn-info btn-icon">
	                                <i class="fas fa-history" title="Guest History Booking"></i>
	                            </button>
	                    </a>
	                </div>
				</div>
			--}}

			<div class="card-body">
				<form class="form-validate-jquery" action="{{ route('bookings.update', $booking->id)}}" method="post" enctype="multipart/form-data" id="update_booking" class="update-booking">
					@method('PATCH')
					@csrf

                    @php
                        $checkreadonly = '';
                        $checkdisabled = '';
                        if (in_array($booking->status_booking,[1,2])) {
                            $checkreadonly = 'readonly';
                            $checkdisabled = 'disabled';
                        }

                        foreach ($booking->bookingDetails as $key_booking_detail => $booking_detail) {
                            if (in_array($booking_detail->status_booking, [1,2])) {
                                $checkreadonly = 'readonly';
                                $checkdisabled = 'disabled';
                                break;
                            }
                        }
                    @endphp

                    @if ($checkdisabled != '')
                        <input type="hidden" name="jenis_booking" id="jenis_booking" value="{{$booking->jenis_booking}}">
                        <input type="hidden" name="company_id" id="company_id" value="{{$booking->company_id}}">
                        <input type="hidden" name="segmentasi_rate_code" id="segmentasi_rate_code" value="{{$booking->segmentasi_rate_code}}">
                        <input type="hidden" name="source" id="source" value="{{$booking->source}}">

                    @endif

					<input type="hidden" id="booking_id" value="{{$booking->id}}">
					<fieldset class="mb-3">

						<legend class="text-uppercase font-weight-bold d-flex justify-content-between">

                            <div class="text-left"> Data Reservation </div>
                            <button
                                class="btn btn-success"
                                data-toggle="modal"
                                data-target="#all_action_modal"
                                type="button">
                                ACTION
                            </button>

                        </legend>

						<div class="form-group row">
							<label class="col-form-label col-lg-2">Reservation No.</label>
							<div class="col-lg-10">
								<input type="text" name="kode_booking" id="kode_booking" class="form-control" value="{{$booking->kode_booking ? $booking->kode_booking : ''}}" readonly>
							</div>
						</div>
						<input type="hidden" id="count_booking_detail" value="{{(@$bDetails->array_index)}}">
						@if(Auth::user()->role == 1)
							<input type="hidden" name="hotel_id" id="hotel_id" value="{{ Session::get('hotel_id') }}" />
						@else
							<input type="hidden" name="hotel_id" id="hotel_id" value="{{ hotelID() }}" />
						@endif

                        <div class="form-group row">
                            <label for="jenis_booking" class="col-form-label col-lg-2">Reservation Type  <span class="text-danger">*</span></label>
                            <div class="col-lg-4">
                                <select name="jenis_booking" id="jenis_booking" class="form-control form-control-select2" {{$checkdisabled}}  data-action-jenis-booking="true" required>
                                    <option value="">-- Select Reservation Type --</option>
                                    @foreach(config('custom.jenis_booking') as $key => $jenis_booking)
                                        <option value="{{$key}}" {{ $key == $booking->jenis_booking ? 'selected' : '' }}>
                                            {{$jenis_booking}}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="form-group row">
							<label for="company_id" class="col-form-label col-lg-2">Company</label>
							<div class="col-lg-4">
								<select name="company_id" id="company_id"
										class="form-control form-control-select2"
										{{ in_array($booking->segmentasi_rate_code, [2,3,4,5,6,8,9]) ? '' : 'disabled'}}
										{{$checkdisabled}}
										>
									<option value="">-- Select Company --</option>
									@foreach($companies as $company)
									<option value="{{$company->id}}"
											data-status="{{$company->status_ledger}}"
											data-source="{{$company->source}}"
											data-segmentasi_rate_code="{{$company->main_segment}}"
											data-status-text="{{ config('custom.status_ledger')[$company->status_ledger] }}"
											data-perusahaan="{{$company->comp_title}} {{$company->name}}"
											{{$company->id == $booking->company_id ? 'selected' : ''}}
									>{{$company->comp_title}} {{$company->name}}</option>
									@endforeach
								</select>

								{{-- <input type="hidden" name="company_id" id="company_id" value="{{$booking->company_id}}"> --}}
							</div>
							<div class="col-lg-6">
								<span class="text-danger" id="company_danger"></span>
							</div>
						</div>

                        <div class="form-group row">
							<label for="jns_kamar" class="col-form-label col-lg-2">Segment <span class="text-danger">*</span></label>
							<div class="col-lg-4 addError wrap-segmentasi_rate_code">
								<select name="segmentasi_rate_code"
										id="segmentasi_rate_code"
										class="form-control form-control-select2-red"
										onchange="removeColorValidation(this.id)"
										{{$checkdisabled}}
								>
									<option value="">-- Select Segment --</option>
									@foreach(config('custom.segment_ratecodes') as $key_segmentasi => $val)
									<option value="{{$key_segmentasi}}" {{$key_segmentasi == $booking->segmentasi_rate_code ? 'selected' : ''}}>{{$val}}</option>
									@endforeach
								</select>

								{{-- <input type="hidden" name="segmentasi_rate_code" id="segmentasi_rate_code" value="{{$booking->segmentasi_rate_code}}"> --}}
							</div>
							<label for="source" class="col-form-label col-lg-1 text-right">Source <span class="text-danger">*</span></label>
							<div class="col-lg-5 addError wrap-source">
								<select name="source" id="source" class="form-control form-control-select2-red" style="border-color: red" required onchange="removeColorValidation(this.id)" {{$checkdisabled}}>
									<option value="">-- Select Source --</option>
									@foreach(config('custom.source') as $key => $val)
									<option value="{{$key}}" {{$key == $booking->source ? 'selected' : ''}}>{{$key}} - {{$val}}</option>
									@endforeach
								</select>

								{{-- <input type="hidden" name="source" id="source" value="{{$booking->source}}"> --}}
							</div>
						</div>

						<div class="form-group row">
							<label class="col-form-label col-lg-2">Name <span class="text-danger font-weight-bolder">*</span></label>
							<div class="col-lg-2">
								<select name="title" id="title" class="form-control" style="border-color: red" required>
									<option value="">** Title **</option>
									@foreach(config('custom.titles') as $title)
									<option value="{{$title}}" {{$title == $booking->title ? 'selected' : ''}}>{{$title}}</option>
									@endforeach
								</select>
							</div>
							<div class="col-lg-7 addError">
								<input class="form-control" list="datalistOptions" name="nama" id="nama" value="{{$booking->nama}}" placeholder="Please input name here ..." autocomplete="off" style="border-color: red" required>
								<datalist id="datalistOptions">
								{{-- @foreach($autocompletes as $autocomplete)
								<option value="{{$autocomplete->nama}} - {{$autocomplete->no_identitas}}" data='{{json_encode($autocomplete)}}'>{{$autocomplete->alamat}}</option>
								@endforeach --}}
                                @foreach($autocompletes as $autocomplete)
                                <option value="{{$autocomplete->name}} - {{$autocomplete->mobile}}" data='{{json_encode($autocomplete)}}'>{{$autocomplete->address}}</option>
                                @endforeach
								</datalist>
								<div id="show_remark" class="pl-1 pt-1 text-danger"></div>
							</div>
							<div class="col-lg-1">
								<a class="guest_history_booking"
			                        data-toggle="modal"
			                        data-target="#guest_history_booking_modal"
			                        >
			                            <button type="button" class="btn btn-info btn-icon">
			                                <i class="fas fa-history" title="Guest History Booking"></i>
			                            </button>
			                    </a>
							</div>
						</div>

						<div class="form-group row">
							<label class="col-form-label col-lg-2">Address</label>
							<div class="col-lg-10">
								<textarea name="alamat" id="alamat" rows="5" class="form-control">{{@$booking->alamat??'-'}}</textarea>
							</div>
						</div>

						<div class="form-group row">
							<label for="negara" class="col-form-label col-lg-2">Country</label>
							<div class="col-lg-2">
								<input list="negaraList" type="text" name="negara" id="negara" class="form-control" value="{{@$booking->negara??'-'}}" style="border-color: red">
                                <datalist id="negaraList">
                                    @foreach($countries as $country)
                                        <option value="{{$country->country_name}}" data-id="{{$country->id}}"></option>
                                    @endforeach
                                </datalist>
							</div>
							<label for="propinsi" class="col-form-label col-lg-1">Province  <span class="text-danger font-weight-bolder"></span></label>
							<div class="col-lg-3">
								<input list="provinceList" type="text" name="propinsi" id="propinsi" class="form-control" value="{{@$booking->propinsi??'-'}}">
                                <datalist id="provinceList">
                                </datalist>
							</div>

							<label for="kota" class="col-form-label col-lg-1 text-right">City </label>
							<div class="col-lg-3">
								<input list="cityList" type="text" name="kota" id="kota" class="form-control" value="{{@$booking->kota??'-'}}" style="border-color: red">
                                <datalist id="cityList">
                                </datalist>
							</div>
						</div>
                        <div id="jns_identitas"></div>
						<div class="form-group row">
							<label for="jns_identitas" class="col-form-label col-lg-2">Identity Type <span class="text-danger">*</span> <span class="text-danger font-weight-bolder"></span></label>
							<div class="col-lg-10">
								<select name="jns_identitas"
										id="jns_identitas"
										class="form-control form-control-select2"
                                        required
								>
									<option value="">-- Select Identity Type --</option>
									@foreach(config('custom.jenis_identitas') as $key => $val)
									<option value="{{$key}}" {{$key == $booking->jns_identitas ? 'selected' : ''}}>{{$val}}</option>
									@endforeach
								</select>
							</div>
						</div>

						<div class="form-group row">
							<label for="no_identitas" class="col-form-label col-lg-2">Identity No.</label>
							<div class="col-lg-10">
								<input type="number" id="no_identitas" name="no_identitas" class="form-control number_only" value="{{@$booking->no_identitas??'-'}}">
							</div>
						</div>

						<div class="form-group row">
							<label for="kewarganegaraan" class="col-form-label col-lg-2">Nationality</label>
							<div class="col-lg-10">
								<input list="kewarganegaraan_list" autocomplete="off" type="text" id="kewarganegaraan" name="kewarganegaraan" class="form-control" value="{{@$booking->kewarganegaraan??null}}" style="border-color: red">
                                <datalist id="kewarganegaraan_list">
                                    @foreach($countries as $country)
                                    <option value="{{$country->country_name}}" data-id="{{$country->id}}"></option>
                                    @endforeach
                                </datalist>
							</div>
						</div>

						<div class="form-group row">
							<label for="jns_kelamin" class="col-form-label col-lg-2">Sex <span class="text-danger font-weight-bolder"></span></label>
							<div class="col-lg-10">
								<div class="form-check form-check-inline">
								<label class="form-check-label">
									<input type="radio" class="form-check-input-styled" name="jns_kelamin" value="1" {{$booking->jns_kelamin == 1 ? 'checked' : ''}} style="border-color: red" data-fouc id="male">
									Male
								</label>
							</div>

							<div class="form-check form-check-inline">
								<label class="form-check-label">
									<input type="radio" class="form-check-input-styled" name="jns_kelamin" value="2" {{$booking->jns_kelamin == 2 ? 'checked' : ''}} style="border-color: red" data-fouc id="female">
									Female
								</label>
							</div>
							</div>
						</div>

						<div class="form-group row">
							<label for="email" class="col-form-label col-lg-2">Email <span class="text-danger font-weight-bolder"></span></label>
							<div class="col-lg-10">
								<input type="email" id="email" name="email" class="form-control" value="{{$booking->email}}">
							</div>
						</div>

						<div class="form-group row">
							<label for="telp" class="col-form-label col-lg-2">Telp</label>
							<div class="col-lg-10">
								<input type="number" id="telp" name="telp" class="form-control number_only" value="{{@$booking->telp??null}}">
							</div>
						</div>

						<div class="form-group row">
							<label for="telp2" class="col-form-label col-lg-2">Telp (2)</label>
							<div class="col-lg-10">
								<input type="number" id="telp2" name="telp2" class="form-control number_only" value="{{$booking->telp2}}">
							</div>
						</div>

						<div class="form-group row">
							<label for="fax" class="col-form-label col-lg-2">Fax</label>
							<div class="col-lg-10">
								<input type="tel" id="fax" name="fax" class="form-control" value="{{$booking->fax}}">
							</div>
						</div>

						<div class="form-group row">
							<label for="plat_nomor" class="col-form-label col-lg-2">License Plate</label>
							<div class="col-lg-10">
								<input type="text" id="plat_nomor" name="plat_nomor" class="form-control" value="{{$booking->plat_nomor}}">
							</div>
						</div>

						{{-- @php
							$checkreadonly = '';
							$checkdisabled = '';
							if (in_array($booking->status_booking,[1,2])) {
								$checkreadonly = 'readonly';
								$checkdisabled = 'disabled';
							}
						@endphp --}}


						{{-- <div class="form-group row {{$booking->start_date_old && $booking->end_date_old ? 'mb-1' : ''}}">
							<label for="jml_anak" class="col-form-label col-lg-2">Reservasi <span class="text-danger">*</span></label>
							@php
							if(count($booking->bookingDetails) == 1){
								$start_date = $booking->bookingDetails[0]->checkin ? $booking->bookingDetails[0]->checkin : $booking->start_date;
								$end_date = $booking->bookingDetails[0]->checkout ? $booking->bookingDetails[0]->checkout : $booking->end_date;
							}
							else{
								$start_date = $booking->start_date;
								$end_date = $booking->end_date;
							}
							@endphp
							<div class="col-lg-3">
								<input type="text" id="inpDatePicker"
									   class="form-control daterange-buttons"
									   value="{{date('d-m-Y', strtotime($start_date))}} - {{date('d-m-Y', strtotime($end_date))}}"
									   style="border-color: red"
									   {{$checkdisabled}}
								>
							</div> --}}

							{{-- <div class="col-lg-1 pl-0">
								@if ($booking->start_date_old && $booking->end_date_old)
									<span class="text-danger">*Day Use</span>
								@endif
							</div> --}}

							{{-- <label for="jml_malam" class="col-form-label col-lg-2 text-right">Jumlah Malam <span class="text-danger">*</span> </label>
							<div class="col-lg-1 addError">
								<input type="number"
									   id="jml_malam"
									   name="jml_malam"
									   class="form-control"
									   min="0"
									   value="{{$booking->jml_malam}}"
                                       onchange="changeJml_Kamar(this.value)"
                                       required --}}
									   {{-- readonly --}}
								{{-- >
							</div>
							<label class="col-form-label col-lg-2 text-right">Expected Arrival</label>
							<div class="col-lg-2">
								<input type="text"
									   name="expected_arrival"
									   value="{{$booking->expected_arrival != "" ? $booking->expected_arrival->format('H:i') : ''}}"
									   class="form-control input-timepicker"
									   id="expected_arrival"
									   {{$checkdisabled}}
								>
							</div>
							<input type="hidden" id="expected_arrival" name="expected_arrival" value="{{$booking->expected_arrival? $booking->expected_arrival->format('H:i') : ''}}">
							<input type="hidden" id="start_date" name="start_date" value="{{ date('Y-m-d', strtotime($booking->start_date))}}">
							<input type="hidden" id="end_date" name="end_date" value="{{ date('Y-m-d', strtotime($booking->end_date))}}">
						</div>

						<div class="form-group row {{$booking->start_date_old && $booking->end_date_old ? '' : 'mb-0'}}">
							<div class="col-lg-2"></div>
							<div class="col-lg-3">
								@if ($booking->start_date_old && $booking->end_date_old)
									<span class="text-danger">*Day Use, Tanggal Asli: {{ date('Y/m/d', strtotime($booking->start_date_old)) }} - {{ date('Y/m/d', strtotime($booking->end_date_old)) }}</span>
								@endif
							</div>
						</div> --}}

						{{-- <div class="form-group row">
							<label for="jns_kamar" class="col-form-label col-lg-2">Segmentasi <span class="text-danger">*</span></label>
							<div class="col-lg-4 addError wrap-segmentasi_rate_code">
								<select name="segmentasi_rate_code"
										id="segmentasi_rate_code"
										class="form-control form-control-select2-red"
										onchange="removeColorValidation(this.id)"
										{{$checkdisabled}}
								>
									<option value="">-- Pilih Segmentasi --</option>
									@foreach(config('custom.segment_ratecodes') as $key_segmentasi => $val)
									<option value="{{$key_segmentasi}}" {{$key_segmentasi == $booking->segmentasi_rate_code ? 'selected' : ''}}>{{$val}}</option>
									@endforeach
								</select>

								<input type="hidden" name="segmentasi_rate_code" id="segmentasi_rate_code" value="{{$booking->segmentasi_rate_code}}">
							</div>
							<label for="source" class="col-form-label col-lg-1 text-right">Source <span class="text-danger">*</span></label>
							<div class="col-lg-5 addError wrap-source">
								<select name="source" id="source" class="form-control form-control-select2-red" style="border-color: red" required onchange="removeColorValidation(this.id)" {{$checkdisabled}}>
									<option value="">-- Pilih Source --</option>
									@foreach(config('custom.source') as $key => $val)
									<option value="{{$key}}" {{$key == $booking->source ? 'selected' : ''}}>{{$key}} - {{$val}}</option>
									@endforeach
								</select>

								<input type="hidden" name="source" id="source" value="{{$booking->source}}">
							</div>
						</div>
						<div class="form-group row">
							<label for="company_id" class="col-form-label col-lg-2">Company</label>
							<div class="col-lg-4">
								<select name="company_id" id="company_id"
										class="form-control form-control-select2"
										{{ in_array($booking->segmentasi_rate_code, [2,3,4,5,6,8,9]) ? '' : 'disabled'}}
										{{$checkdisabled}}
										>
									<option value="">-- Pilih Company --</option>
									@foreach($companies as $company)
									<option value="{{$company->id}}"
											data-status="{{$company->status_ledger}}"
											data-status-text="{{ config('custom.status_ledger')[$company->status_ledger] }}"
											data-perusahaan="{{$company->comp_title}} {{$company->name}}"
											{{$company->id == $booking->company_id ? 'selected' : ''}}
									>{{$company->comp_title}} {{$company->name}}</option>
									@endforeach
								</select>

								<input type="hidden" name="company_id" id="company_id" value="{{$booking->company_id}}">
							</div>
							<div class="col-lg-6">
								<span class="text-danger" id="company_danger"></span>
							</div>
						</div> --}}
						{{-- <div class="form-group row">
							<label for="jns_kamar" class="col-form-label col-lg-2">Kamar</label>
							<div class="col-lg-10" id="form_kamar">

								<!-- Alert -->
								<div class="row" id="alert-kamar" style="display:none">
									<div class="col-md-12">
										<div class="alert alert-danger alert-dismissible fade show" role="alert">
										  <strong>Kapasitas Kamar Tidak Cukup!</strong> Silahkan menambah kamar lagi
										  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
											<span aria-hidden="true">&times;</span>
										  </button>
										</div>
									</div>
								</div>
								<div class="row">
                                    <div id="label_multiply0" class="col-lg-0" style="{{$booking->status_booking == 4 ? '' : 'display:none'}}">Multiply: </div>
									<div class="col-lg-2">
										Jenis Kamar: <span class="text-danger">*</span>
									</div>
									<div class="col-lg-2">
										Nomor Kamar:
									</div>
									<div class="col-lg-2">
										Rate Code: <span class="text-danger">*</span>
									</div>
									<div class="col-lg-1" style="text-align: center">
										Arr. Code:
									</div>
									<div class="col-lg-2">
										Harga:
									</div>
									<div class="col-lg-2  pl-0">
										@if (!in_array($booking->status_booking,[1, 2]))
											Block?
										@endif
									</div>
								</div>
                                <legend></legend>
								@php
								$block_checkdisabled = '';
								@endphp
								@if(count($booking->bookingDetails) > 0)
	                                @foreach($details as $idx => $values)
	                                    @foreach ( $values as $id => $val )
                                            @if ($val->array_sub == 0)

											@php
	                                            if ($val->in_invoice != 1) {
	                                                if ($val->block_kamar == 1) {
	                                                    $block_checkdisabled = 'disabled';
	                                                } else {
	                                                    $block_checkdisabled = '';
	                                                }
	                                            } else {
	                                                $block_checkdisabled = 'disabled';
	                                            }
	                                        @endphp
	                                        <div class="per_rooms_class mb-2" data-idx="row_{{$idx}}_{{$id}}" id="row_{{$idx}}_{{$id}}" style="{{ ($val->array_sub == 0 ? '' : 'display:none' )  }}">
                                                <div class="row">
                                                    <div class="col-lg-0" id="button_multi_room{{$idx}}_{{$id}}" style="{{$booking->status_booking == 4 ? '' : 'display:none'}}">
                                                        <button type="button" onclick="modalMultiRoom({{$idx}})" class="btn btn-warning">
                                                            <i class="fas fa-copy"></i>
                                                        </button>
                                                    </div>
                                                    <div class="col-lg-2 addError wrap-jns_kamar{{$idx}}">
                                                        <select name="jns_kamar[{{$idx}}]"
                                                                id="jns_kamar{{$idx}}_{{$id}}"
                                                                data-group="{{$idx}}"
                                                                data-idx="{{$id}}"
                                                                onchange="getKamar(this.id), removeColorValidation(this.id)"
                                                                class="form-control form-control-select2-red"
                                                                required
                                                                {{$block_checkdisabled}}
                                                        >
                                                            <option data-id=""
                                                                    data-diskon=""
                                                                    data-kapasitas=""
                                                                    value="">-- Pilih Jenis Kamar --</option>
                                                            @if(array_key_exists($idx, $jenis_kamars))
                                                                @foreach($jenis_kamars[$idx] as $jenis_kamar)
                                                                    @php
                                                                    $diskon_kamar = count($jenis_kamar->discount) > 0 ? $jenis_kamar->discount[0]->diskon : 0;
                                                                    @endphp
                                                                <option data-id="{{$jenis_kamar->id}}"
                                                                        data-diskon="{{$diskon_kamar}}"
                                                                        data-kapasitas="{{$jenis_kamar->kapasitas}}"
                                                                        value="{{$jenis_kamar->nama}}" --}}
                                                                        {{-- {{$jenis_kamar->nama == $val->jns_kamar ? 'selected' : ''}} --}}
                                                                        {{-- {{$jenis_kamar->id == $val->jenis_kamar_id ? 'selected' : ''}}
                                                                >
                                                                {{$jenis_kamar->nama.' ('.$jenis_kamar->kapasitas.' Orang)'}}
                                                                </option>
                                                                @endforeach
                                                            @endif
                                                        </select>

                                                        @if ($block_checkdisabled == 'disabled')
                                                            <input type="hidden" name="jns_kamar[{{$idx}}]" id="jns_kamar{{$idx}}_{{$id}}" value="{{$val->jns_kamar}}">
                                                        @endif

                                                        <input type="hidden" name="diskon[{{$idx}}]" value="{{$val->diskon ?? 0}}" id="diskon{{$idx}}_{{$id}}">
                                                        <input type="hidden" name="jenis_kamar_id[{{$idx}}]" id="jenis_kamar_id{{$idx}}_{{$id}}" value="{{$val->jenis_kamar_id}}">
                                                        <input type="hidden" name="pax[{{$idx}}]" id="pax{{$idx}}_{{$id}}" value="{{$val->pax}}">
                                                    </div>
                                                    <div class="col-lg-2">
                                                        <select name="nomor_kamar[{{$idx}}]"
                                                                id="nomor_kamar{{$idx}}_{{$id}}"
                                                                data-group="{{$idx}}"
                                                                data-idx="{{$id}}"
                                                                class="form-control form-control-select2-red nomor_kamar_{{$idx}} nomor_kamars"
                                                                onchange="checkNomor(this.id)"
                                                                {{$block_checkdisabled}}
                                                        >
                                                            <option value="">-- Pilih Nomor Kamar --</option>
                                                            @if(array_key_exists($idx, $nomor_kamars))
                                                                @foreach($nomor_kamars[$idx] as $nomor_kamar)
                                                                    @if($nomor_kamar)
                                                                        @if($nomor_kamar->no_kamar == $val->nomor_kamar)
                                                                            <option value="{{$nomor_kamar->no_kamar}}"
                                                                                    {{$nomor_kamar->no_kamar == @$val->nomor_kamar ? 'selected' : ''}}
                                                                            >
                                                                                {{$nomor_kamar->no_kamar}}
                                                                            </option>
                                                                        @else
                                                                            @if(!in_array($nomor_kamar->no_kamar, $booked_room))
                                                                            <option value="{{$nomor_kamar->no_kamar}}"
                                                                                    {{$nomor_kamar->no_kamar == @$val->nomor_kamar ? 'selected' : ''}}
                                                                            >
                                                                                {{$nomor_kamar->no_kamar}}
                                                                            </option>
                                                                            @endif
                                                                        @endif
                                                                    @endif
                                                                @endforeach
                                                            @endif
                                                        </select>
                                                        <input type="hidden"
                                                            id="jml_kamar{{$idx}}_{{$id}}"
                                                            name="jml_kamar[{{$idx}}]"
                                                            class="form-control"
                                                            min="1"
                                                            value="1"
                                                            style="border-color: red"
                                                        >

                                                        @if ($block_checkdisabled == 'disabled')
                                                            <input type="hidden" name="nomor_kamar[{{$idx}}]" id="nomor_kamar{{$idx}}_{{$id}}" value="{{$val->nomor_kamar}}">
                                                        @endif
                                                    </div>
                                                    <div class="col-lg-2 addError wrap-rate_code{{$idx}}">
                                                        <select name="rate_codes[{{$idx}}]"
                                                                id="rate_code{{$idx}}_{{$id}}"
                                                                data-group="{{$idx}}"
                                                                data-idx="{{$id}}"
                                                                onchange="getPrice(this.getAttribute('data-idx'), this.getAttribute('data-group'), 1), removeColorValidation(this.id), sameValueRate(this.value, this.getAttribute('data-group'))"
                                                                class="form-control form-control-select2-red rate_codes_{{$idx}}"
                                                                style="border-color: red"
                                                                {{in_array($booking->segmentasi_rate_code, [10, 11]) ? '' : 'required'}}
                                                                {{$block_checkdisabled}}
                                                        >
                                                            <option value="" data-harga="0">-- Pilih Rate Code --</option>
                                                            @if(array_key_exists($idx, $rate_codes))
                                                                @foreach($rate_codes[$idx] as $rate_code)
                                                                <option value="{{$rate_code->rate_code}}"
                                                                        data-id="{{$rate_code->id}}"
                                                                        data-harga="{{$rate_code->harga}}"
                                                                        data-include_breakfast="{{$rate_code->include_breakfast}}"
                                                                        {{$rate_code->rate_code == $val->rate_codes ? 'selected' : ''}}
                                                                >
                                                                    Rate {{$rate_code->rate_code}}
                                                                </option>
                                                                @endforeach
                                                            @endif
                                                        </select>

                                                        @if ($block_checkdisabled == 'disabled')
                                                            <input type="hidden" name="rate_codes[{{$idx}}]" id="rate_code{{$idx}}_{{$id}}" value="{{$val->rate_codes}}">
                                                            @if($val->block_kamar == 1) --}}
                                                            {{-- <input type="hidden" name="jns_kamar_hidden[{{$idx}}]" value="{{$val->jns_kamar}}"> --}}
                                                            {{-- <input type="hidden" name="nomor_kamar_hidden[{{$idx}}]" value="{{$val->nomor_kamar}}"> --}}
                                                            {{-- @endif
                                                        @else --}}
                                                            {{-- @if($val->block_kamar == 1) --}}
                                                            {{-- <input type="hidden" name="jns_kamar_hidden[{{$idx}}]" value="{{$val->jns_kamar}}"> --}}
                                                            {{-- <input type="hidden" name="nomor_kamar_hidden[{{$idx}}]" value="{{$val->nomor_kamar}}"> --}}
                                                            {{-- @endif --}}
                                                        {{-- @endif
                                                    </div>

                                                    <div class="col-lg-1" style="text-align: center">
                                                        <button type="button" id="open_arr_dialog{{$idx}}" onclick="openArrangementDialog({{$idx}}, {{$id}})" class="btn btn-primary">
                                                            <i class="fas fa-calendar-check"></i>
                                                            <span class=""></span>
                                                        </button> --}}
                                                        {{-- <select name="arrangement_codes[{{$idx}}]"
                                                                id="arrangement_code{{$idx}}"
                                                                data-idx="{{$idx}}"
                                                                onchange="getPrice(this.getAttribute('data-idx'), 0)"
                                                                class="form-control form-control-select2" --}}
                                                                {{-- {{$checkdisabled}} --}}
                                                        {{-- >
                                                            <option value="" data-harga="0">-- Pilih Arrangement --</option>
                                                            @foreach($arrangements as $arrangement)
                                                            <option value="{{$arrangement->arrangement_code}}"
                                                                    data-id="{{$arrangement->id}}"
                                                                    data-harga="{{$arrangement->totalHarga->total ?? 0}}"
                                                                    {{$arrangement->arrangement_code == $val->arrangement_codes ? 'selected' : ''}}
                                                            >{{$arrangement->arrangement_code}}</option>
                                                            @endforeach
                                                        </select> --}}
                                                    {{-- </div>

                                                    <!-- For Container Hidden Arrangement -->
                                                    <div id="hidden_arrangement_code_container0">
                                                    </div>

                                                    <div class="col-lg-2">
                                                        @php
                                                            if ($val->nomor_kamar) {
                                                                $total_rooms = $booking->bookingDetails->where('nomor_kamar', $val->nomor_kamar);
                                                            }else {
                                                                $total_rooms = $booking->bookingDetails->where('room_index', $val->room_index);
                                                            }

                                                            $total_room = 0;
                                                            foreach ($total_rooms as $a => $b) {
                                                               $total_room += $b->per_item;
                                                            }
                                                        @endphp
                                                        <input type="text" min="0" value="{{ ribuan($total_room) }}" id="per_item{{$idx}}" class="form-control per_item_class" style="border-color: red" placeholder="Total Room" disabled readonly>
                                                    </div> --}}

                                                    {{-- <div class="col-lg-2">
                                                        <input type="text" name="group_name[{{$idx}}]" id="group_name{{$idx}}_{{$id}}" class="group_names_{{$idx}} form-control" placeholder="Group Name (Optional)..." value="{{$val->group_name}}" data-idx="{{$idx}}" oninput="sameValueGroup(this.value, this.getAttribute('data-idx'))">
                                                    </div> --}}

                                                    {{-- @if (!in_array($booking->status_booking,[1,2]))
                                                    <div class="col-lg-2 m-0 p-0">

                                                        <input class="ml-2 mr-3 rcheckbox cekblokkamar" data-idkamar="{{$idx}}" data-groupkamar="{{$id}}" data-nokamar="{{$val->nomor_kamar}}" type="checkbox" id="block_kamar{{$idx}}_{{$id}}" {{$val->date_now == getSystemDate() ? 'name=block_kamar['.$idx.']' : "" }} {{$val->block_kamar == 1 ? 'checked' : ''}}>

                                                            @if($idx > 0)
                                                            <button id="btnremovekamar{{$idx}}_{{$id}}" type="button" onclick="removeKamar({{$idx}}, {{$id}})" class="btn btn-danger" {{$block_checkdisabled}}>
                                                                <i class="fas fa-times-circle"></i>
                                                            </button>
                                                            @else
                                                            <button type="button" onclick="tambahKamar()" class="btn btn-success">
                                                                <i class="fas fa-plus-circle"></i>
                                                            </button>
                                                            @endif
                                                        </div>
                                                    @else
                                                    <div class="col-lg-2 m-0 p-0">
                                                        <button type="button" data-target="#detail_booking_rooms" data-toggle="modal" onclick="openSpecificRow({{$idx}}, {{$id}})" class="btn btn-info" title="Detail Room Rate"><i class="fas fa-info"></i> </button>
                                                    </div>
                                                    @endif
                                                </div>

                                                <br>

                                                <div class="row">
                                                    <div class="col-lg-3" style="padding-left:55px ">
                                                        Guest Name Room:
                                                    </div>
                                                    <div class="col-lg-2">
                                                        Billing Instruction: <span class="text-danger">*</span>
                                                    </div>
                                                    <div class="col-lg-2">
                                                        Incognito:
                                                    </div>
                                                </div>

                                                <br>

                                                <div class="row">
                                                    <div class="col-lg-3" style="padding-left:55px">
                                                        <input type="text" name="guest_room[{{$idx}}]" class="form-control" placeholder="guest name ..." value="{{$val->guest_room}}">
                                                    </div>
                                                    <div class="col-lg-2">
                                                        <select name="status_lock[{{$idx}}]" id="status_lock" class="form-control-select2-no-search">
                                                            <option value="">-- Select Billing Instruction --</option>
                                                            <option value="1" {{$val->status_lock == 1 ? 'selected' : ''}}>Tidak</option>
                                                            <option value="0" {{$val->status_lock == 0 ? 'selected' : ''}}>Ya</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-lg-2 text-left">
                                                        <div class="form-check">
                                                            <label class="form-check-label" for="flexCheckDefault">
                                                                <input class="form-check-input" type="checkbox" name="incognito[{{$idx}}]" value="1" id="incognito" {{$val->incognito == 1 ? 'checked' : ''}}>
                                                                <h4><i class="fas fa-user-secret"></i>&nbsp;<b>Incognito</b></h4>
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <legend></legend>
	                                        </div>
	                                        <!-- Alert Ketersediaan Kamar -->
	                                        <div class="row mb-2" data-idx="row_alert{{$idx}}_{{$id}}" id="row_alert{{$idx}}_{{$id}}" style="display:none">
	                                            <div class="col-lg-12">
	                                                <div class="alert alert-danger text-center">Kamar Tidak Tersedia Pada Tanggal Tersebut, Silahkan Ganti Tanggal Atau Carikan Jenis/Nomor Kamar Lain!</div>
	                                            </div>
	                                        </div>

                                            <!-- Hidden input --> --}}
                                                {{-- <input type="hidden" name="status_booking[{{$idx}}]" value="{{$val->status_booking}}"> --}}
                                                {{-- <input type="hidden" name="checkin[{{$idx}}]" value="{{@$val->checkin}}">
                                                <input type="hidden" name="checkout[{{$idx}}]" value="{{@$val->checkout}}"> --}}
                                            {{-- <!-- Hidden input -->

                                            @endif
	                                    @endforeach
	                                @endforeach
								@else
								<div class="row mb-2" data-idx="row_0" id="row_0">
                                    <div class="col-lg-0" id="button_multi_room0">
                                        <button type="button" onclick="modalMultiRoom(0)" class="btn btn-warning" style="{{$booking->status_booking == 4 ? '' : 'display:none'}}">
                                            <i class="fas fa-copy"></i>
                                        </button>
                                    </div>
									<div class="col-lg-2 addError wrap-jns_kamar0">
										<select name="jns_kamar[]"
												id="jns_kamar0_0"
                                                data-group="0"
												data-idx="0"
												onchange="getKamar(this.id), removeColorValidation(this.id)"
												class="form-control form-control-select2-red"
												required
												{{$block_checkdisabled}}
										>
											<option data-id=""
													data-diskon=""
													data-kapasitas=""
													value="">-- Pilih Jenis Kamar --</option>
											@foreach($jenis_kamars as $jns)
												@php
												$diskon_kamar = count($jns->discount) > 0 ? $jns->discount[0]->diskon : 0;
												@endphp
												<option data-id="{{$jns->id}}"
														data-diskon="{{$diskon_kamar}}"
														data-kapasitas="{{$jns->kapasitas}}"
														value="{{$jns->nama}}"
												>{{$jns->nama}} ({{$jns->kapasitas}} Orang)</option>
											@endforeach
										</select>
										<input type="hidden" name="diskon[0]" id="diskon0_0">
										<input type="hidden" name="jenis_kamar_id[0]" id="jenis_kamar_id0_0">
										<input type="hidden" name="pax[0]" id="pax0_0">
									</div>
									<div class="col-lg-2">
										<select name="nomor_kamar[0]"
												id="nomor_kamar0_0"
												data-idx="0"
                                                data-group="0"
												class="form-control form-control-select2-red nomor_kamar_0 nomor_kamars"
                                                onchange="checkNomor(this.id)"
												{{$block_checkdisabled}}
										>
											<option value="">-- Pilih Nomor Kamar --</option>
										</select>
										<input type="hidden"
											   id="jml_kamar0_0"
											   name="jml_kamar[0]"
											   class="form-control"
											   min="1"
											   value="1"
										>
										<input type="hidden" name="nomor_kamar_hidden[0]" id="nomor_kamar0" value="">
									</div>
									<div class="col-lg-2 addError wrap-rate_code0">
										<select name="rate_codes[0]"
												id="rate_code0_0"
												data-group="0"
												data-idx="0"
												onchange="getPrice(this.getAttribute('data-idx'), this.getAttribute('data-group'), 1), removeColorValidation(this.id), sameValueRate(this.value, this.getAttribute('data-group'))"
												class="form-control form-control-select2-red multiroom_rates rate_codes_0"
												required
												style="border-color: red"
												{{$checkdisabled}}
										>
											<option value="" data-id="0" data-harga="0" data-include_breakfast="0">-- Pilih Rate Code --</option>
										</select>

										<input type="hidden" name="rate_codes_hidden[0]" id="rate_code0" value="">
									</div>
									<div class="col-lg-1" style="text-align: center;">
                                        <button type="button" id="open_arr_dialog0" onclick="openArrangementDialog(0)" class="btn btn-primary">
                                            <i class="fas fa-calendar-check"></i>
                                            <span class=""></span>
                                        </button> --}}
										{{-- <select name="arrangement_codes[0]"
												id="arrangement_code0"
												data-idx="0"
												onchange="getPrice(this.getAttribute('data-idx'), 0)"
												class="form-control form-control-select2" --}}
												{{-- {{$checkdisabled}} --}}
										{{-- >
											<option value="" data-harga="0">-- Pilih Arrangement --</option>
											@foreach($arrangements as $arrangement)
											<option value="{{$arrangement->arrangement_code}}"
													data-id="{{$arrangement->id}}"
													data-harga="{{$arrangement->totalHarga->total ?? 0}}"
											>{{$arrangement->arrangement_code}}</option>
											@endforeach
										</select> --}}
									{{-- </div>

                                    <!-- For Container Hidden Arrangement -->
                                    <div id="hidden_arrangement_code_container0">
                                    </div>

									<div class="col-lg-2">
										<input type="text" min="0" id="per_item0" class="form-control" style="border-color: red" placeholder="Harga" disabled readonly>
										<span class="text-danger" id="ket_diskon0"></span>
									</div> --}}

                                    {{-- <div class="col-lg-2">
                                        <input type="text" name="group_name[0]" id="group_name0_0" class="group_names_0 form-control" placeholder="Group Name (Optional)..." value="" data-idx="0" oninput="sameValueGroup(this.value, this.getAttribute('data-idx'))">
                                    </div> --}}

									{{-- <div class="col-lg-2 m-0 p-0">

										<input class="ml-2 mr-3 rcheckbox cekblokkamar"
											   data-idkamar="0"
                                               data-groupkamar="0"
											   data-nokamar=""
											   type="checkbox"
											   id="block_kamar0_0"
											   name="block_kamar[0]"
										>

										<button type="button" onclick="tambahKamar()" class="btn btn-success">
											<i class="fas fa-plus-circle"></i>
										</button>
									</div>
								</div>
								<!-- Alert Ketersediaan Kamar -->
								<div class="row mb-2" data-idx="row_alert0" id="row_alert0_0" style="display:none">
									<div class="col-lg-12">
										<div class="alert alert-danger text-center">Kamar Tidak Tersedia Pada Tanggal Tersebut, Silahkan Ganti Tanggal Atau Carikan Jenis/Nomor Kamar Lain!</div>
									</div>
								</div>
								@endif
                                <!-- container for multiple room -->
                                <div id="container_multiple_room"></div>
							</div>
						</div> --}}

                        <div class="form-group row">
                            <label for="jns_kamar" class="col-form-label col-lg-2">Room</label>
                            <div class="col-lg-10" id="form_kamar">
                                @if ($log_changes->isNotEmpty())
                                    <button
                                        class="btn btn-info"
                                        data-toggle="modal"
                                        data-target="#log_change_modal"
                                        type="button"><i class="icon-history mr-1"></i>
                                        History
                                    </button>
                                    <br><br>
                                @endif
                                <!-- Alert -->
                                <div class="row" id="alert-kamar" style="display:none">
                                    <div class="col-md-12">
                                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                          <strong>insufficient room!</strong> Please add more rooms.
                                          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                          </button>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-12 scroll-horizontal" style="width: 100%">
                                    <div style="width: 200%">
                                        <table class="listtable">
                                            <tr>
                                                <th style="width: 50px">#</th>
                                                <th style="width: 50px;">Multiply</th>
                                                <th style="width: 200px">Reservation <span class="text-danger">*</span></th>
                                                <th style="width: 125px">Night <span class="text-danger">*</span></th>
                                                <th style="width: 150px">Expected Arrival</th>
                                                <th style="width: 200px">Guest Name Room</th>
                                                <th style="width: 200px">Room Type <span class="text-danger">*</span></th>
                                                <th style="width: 125px">Pax <span class="text-danger">*</span></th>
                                                <th style="width: 150px">Room Availability</th>
                                                <th style="width: 125px">Room Number</th>
                                                <th style="width: 150px">Rate Code <span class="text-danger">*</span></th>
                                                <th style="width: 100px" title="Arrangement Code">Arr. Code <span class="text-danger">*</span></th>
                                                <th style="width: 200px">Price</th>
                                                <th style="width: 50px">Block?</th>
                                                <th style="width: 150px">Billing Instruction</th>
                                                <th style="width: 100px">Incognito <i class="fas fa-user-secret"></i></th>
                                            </tr>

                                            @php
                                                $checkin_disabled = '';
                                                $checkin_readonly = '';
                                                $block_checkdisabled = '';
                                                $block_checkreadonly = '';
                                                $data_booking_details = [];
                                                $index_bd = [];
                                            @endphp

                                            @if (count($details) > 0)
                                                @foreach ($details as $idx => $values)
                                                    @foreach ($values as $id => $val)
                                                        @if ($val->array_sub == $tdy_array_sub[$val->array_index])
                                                        {{-- @if ($val->array_sub == 0) --}}
                                                            @php
                                                                $data_booking_details[] = $val;
                                                                $index_bd[] = $idx;

                                                                if ($val->start_date >= getSystemDate()) {
                                                                // if ($val->date_now >= getSystemDate()) {
                                                                    if ($val->block_kamar == 1) {
                                                                        $block_checkdisabled = 'disabled';
                                                                        $block_checkreadonly = 'readonly';
                                                                    } else {
                                                                        $block_checkdisabled = '';
                                                                        $block_checkreadonly = '';
                                                                    }
                                                                } else {
                                                                    $block_checkdisabled = 'disabled';
                                                                    $block_checkreadonly = 'readonly';
                                                                }

                                                                if ($val->status_booking == 1) {
                                                                    $checkin_disabled = 'disabled';
                                                                    $checkin_readonly = 'readonly';
                                                                }else{
                                                                    $checkin_disabled = '';
                                                                    $checkin_readonly = '';
                                                                }

                                                                if (\Auth::user()->permission_change_reserv == 1) {
                                                                    $checkin_disabled = 'disabled';
                                                                    $checkin_readonly = 'readonly';
                                                                    $block_checkdisabled = 'disabled';
                                                                    $block_checkreadonly = 'readonly';
                                                                }

                                                                if (in_array(\Auth::user()->role, [1])) {
                                                                    $checkin_disabled = '';
                                                                    $checkin_readonly = '';
                                                                    $block_checkdisabled = '';
                                                                    $block_checkreadonly = '';
                                                                }else{
                                                                    if (in_array($val->status_booking, [1,2])) {
                                                                        $checkin_disabled = 'disabled';
                                                                        $checkin_readonly = 'readonly';
                                                                        $block_checkdisabled = 'disabled';
                                                                        $block_checkreadonly = 'readonly';
                                                                    }
                                                                }

                                                                if ($val->noshowreservation == 1) {
                                                                    $checkin_disabled = 'disabled';
                                                                    $checkin_readonly = 'readonly';
                                                                    $block_checkdisabled = 'disabled';
                                                                    $block_checkreadonly = 'readonly';
                                                                }

                                                                // replace test
                                                                $id = 0;
                                                            @endphp

                                                            <tr class="per_rooms_class" data-idx="row_{{$idx}}_{{$id}}" id="row_{{$idx}}_{{$id}}" style="">
                                                                {{-- # --}}
                                                                <td style="text-align:center;width:{{!in_array($val->status_booking,[1,2]) ? '50px' : '150px'}}">
                                                                    @if (!in_array($val->status_booking,[1,2]))
                                                                        <div>
                                                                            @if($idx > 0)
                                                                                <button id="btnremovekamar{{$idx}}_{{$id}}" type="button" onclick="removeKamar({{$idx}}, {{$id}})" class="btn btn-danger" {{$block_checkdisabled}}>
                                                                                    <i class="fas fa-times-circle"></i>
                                                                                </button>
                                                                            @else
                                                                                <button type="button" onclick="tambahKamar()" class="btn btn-success">
                                                                                    <i class="fas fa-plus-circle"></i>
                                                                                </button>
                                                                            @endif
                                                                        </div>
                                                                    @else
                                                                        <div>
                                                                            @if($idx == 0 && $val->start_date > getSystemDate())
                                                                                <button type="button" onclick="tambahKamar()" class="btn btn-success mr-2">
                                                                                    <i class="fas fa-plus-circle"></i>
                                                                                </button>
                                                                            @endif

                                                                            <button type="button" data-target="#detail_booking_rooms" data-toggle="modal" onclick="openSpecificRow({{$idx}}, {{$id}})" class="btn btn-info" title="Detail Room Rate"><i class="fas fa-info"></i> </button>
                                                                        </div>
                                                                    @endif
                                                                </td>

                                                                {{-- Multiply --}}
                                                                <td>
                                                                    <div id="button_multi_room{{$idx}}_{{$id}}" style="{{$val->status_booking == 4 ? '' : 'display:none'}}">

                                                                        <button type="button" onclick="modalMultiRoom({{$idx}})" class="btn btn-warning">
                                                                            <i class="fas fa-copy"></i>
                                                                        </button>
                                                                    </div>
                                                                </td>

                                                                {{-- Reservation --}}
                                                                <td class="">
                                                                    @php
                                                                        // $start_date = $val->checkin ? $val->checkin : $val->start_date;
                                                                        // $end_date = $val->checkout ? $val->checkout : $val->end_date;
                                                                        $start_date = $val->start_date;
                                                                        $end_date   = $val->end_date;
                                                                    @endphp
                                                                    <input type="text" id="inpDatePicker{{$idx}}_{{ $id }}"
                                                                            class="form-control daterange-buttons"
                                                                            value="{{date('d-m-Y', strtotime($start_date))}} - {{date('d-m-Y', strtotime($end_date))}}"
                                                                            style="border-color: red"
                                                                            data-group="{{$idx}}"
                                                                            {{$block_checkdisabled != '' ? $block_checkdisabled : $checkin_disabled}}
                                                                    >
                                                                    @if ($val->start_date_old && $val->end_date_old)
                                                                        <p class="text-danger mb-0" style="font-size: 12px;">*Day Use, Real Date: </p>
                                                                        <p class="text-danger mb-0" style="font-size: 12px;">{{ date('d-m-Y', strtotime($val->start_date_old)) }} - {{ date('d-m-Y', strtotime($val->end_date_old)) }}</p>
                                                                    @elseif($val->early_co)
                                                                        <p class="text-danger mb-0" style="font-size: 12px;">*C/I - C/O, time: </p>
                                                                        <p class="text-danger mb-0" style="font-size: 12px; white-space: nowrap;">{{ date('d-m-Y H:i:s', strtotime($val->checkin_real)) }} - {{ date('d-m-Y H:i:s', strtotime($val->checkout_real)) }}</p>
                                                                    @endif
                                                                </td>

                                                                {{-- Jumlah Malam --}}
                                                                <td class="addError">
                                                                    <input type="number"
                                                                            id="jml_malam{{$idx}}_{{$id}}"
                                                                            name="jml_malam[{{$idx}}]"
                                                                            class="form-control cekjumlahmalam"
                                                                            min="0"
                                                                            value="{{$val->jumlah_malam}}"
                                                                            onchange="changeJml_Kamar(this.value, {{ $idx }})"
                                                                            required
                                                                            {{-- readonly --}}
                                                                            {{$block_checkreadonly}}
                                                                            {{$block_checkreadonly != '' ? $block_checkreadonly : $checkin_readonly}}
                                                                    >
                                                                </td>

                                                                {{-- Expected Arrival --}}
                                                                <td>
                                                                    <input type="text"
                                                                            name="expected_arrival[{{ $idx }}]"
                                                                            class="form-control input-timepicker"
                                                                            id="expected_arrival{{$idx}}_{{ $id }}"
                                                                            value="{{ $val->expected_arrival ? $val->expected_arrival->format('H:i') : '' }}"
                                                                            {{$block_checkdisabled}}
                                                                        >

                                                                    <input type="hidden" id="start_date{{ $idx }}_{{ $id }}" name="start_date[{{ $idx }}]" value="{{ date('Y-m-d', strtotime($val->start_date))}}">
                                                                    <input type="hidden" id="end_date{{ $idx }}_{{ $id }}" name="end_date[{{ $idx }}]" value="{{ date('Y-m-d', strtotime($val->end_date))}}">

                                                                    @if ($block_checkreadonly != '')
                                                                        <input type="hidden"
                                                                                name="expected_arrival[{{ $idx }}]"
                                                                                class="form-control input-timepicker"
                                                                                id="expected_arrival{{$idx}}_{{ $id }}"
                                                                                value="{{ $val->expected_arrival ? $val->expected_arrival->format('H:i') : '' }}"
                                                                        >
                                                                    @endif
                                                                </td>

                                                                {{-- Guest Name Room --}}
                                                                <td class="wrap-guest-room{{ $idx }}">
                                                                    <input type="text" name="guest_room[{{$idx}}]" class="form-control" placeholder="guest name ..." value="{{$val->guest_room}}" {{ $block_checkreadonly }} id="guest_room{{$idx}}_{{ $id }}">
                                                                </td>

                                                                {{-- Jenis Kamar --}}
                                                                <td class="addError wrap-jns_kamar{{$idx}} ">
                                                                    <select name="jns_kamar[{{$idx}}]"
                                                                            id="jns_kamar{{$idx}}_{{$id}}"
                                                                            data-group="{{$idx}}"
                                                                            data-idx="{{$id}}"
                                                                            onchange="getKamar(this.id), removeColorValidation(this.id)"
                                                                            class="form-control form-control-select2-red"
                                                                            required
                                                                            {{$block_checkdisabled}}
                                                                    >
                                                                        <option data-id=""
                                                                                data-diskon=""
                                                                                data-kapasitas=""
                                                                                value="">-- Select Room Type --</option>
                                                                        @if(array_key_exists($idx, $jenis_kamars))
                                                                            @foreach($jenis_kamars[$idx] as $jenis_kamar)
                                                                                @php
                                                                                $diskon_kamar = count($jenis_kamar->discount) > 0 ? $jenis_kamar->discount[0]->diskon : 0;
                                                                                $disctype = count($jenis_kamar->discount) > 0 ? $jenis_kamar->discount[0]->disctype : 1;
                                                                                @endphp
                                                                            <option data-id="{{$jenis_kamar->id}}"
                                                                                    data-diskon="{{$diskon_kamar}}"
                                                                                    data-disctype="{{$disctype}}"
                                                                                    data-kapasitas="{{$jenis_kamar->kapasitas}}"
                                                                                    value="{{$jenis_kamar->nama}}" --}}
                                                                                    {{-- {{$jenis_kamar->nama == $val->jns_kamar ? 'selected' : ''}} --}}
                                                                                    {{$jenis_kamar->id == $val->jenis_kamar_id ? 'selected' : ''}}
                                                                            >
                                                                            {{$jenis_kamar->nama.' ('.$jenis_kamar->kapasitas.' Orang)'}}
                                                                            </option>
                                                                            @endforeach
                                                                        @endif
                                                                    </select>

                                                                </td>
                                                                @if ($block_checkdisabled == 'disabled')
                                                                    <input type="hidden" name="jns_kamar[{{$idx}}]" id="jns_kamar{{$idx}}_{{$id}}" value="{{$val->jns_kamar}}">
                                                                @endif

                                                                <input type="hidden" name="diskon[{{$idx}}]" value="{{$val->diskon ?? 0}}" id="diskon{{$idx}}_{{$id}}">
                                                                <input type="hidden" name="disctype[{{$idx}}]" id="disctype{{$idx}}_{{$id}}" value="{{$val->disctype ?? 1}}">
                                                                <input type="hidden" name="jenis_kamar_id[{{$idx}}]" id="jenis_kamar_id{{$idx}}_{{$id}}" value="{{$val->jenis_kamar_id}}">
                                                                {{-- <input type="hidden" name="pax[{{$idx}}]" id="pax{{$idx}}_{{$id}}" value="{{$val->pax}}"> --}}

                                                                {{-- Pax --}}
                                                                <td class="addError wrap-pax0">
                                                                    <input type="number"
                                                                            id="pax{{$idx}}_{{$id}}"
                                                                            name="pax[{{$idx}}]"
                                                                            class="form-control"
                                                                            min="0"
                                                                            value="{{$val->pax}}"
                                                                            data-group="{{$idx}}"
                                                                            data-idx="{{$id}}"
                                                                            onchange="hitungjumlahdewasa(), getPrice(this.getAttribute('data-idx'), this.getAttribute('data-group'), 1)"
                                                                            required
                                                                            {{$block_checkreadonly}}
                                                                    >
                                                                </td>

                                                                {{-- Room Availability --}}
                                                                <td class="wrap-room-availability0">
                                                                    <button type="button" data-toggle="modal" data-target="#modal_room_availability" class="btn btn-primary addError button-room-availability" onclick="openModalRoomAvailability({{$idx}}, {{$id}})"  data-group="{{$idx}}" data-idx="{{$id}}">
                                                                        <i class="fab fa-buromobelexperte"></i>
                                                                    </button>
                                                                </td>

                                                                {{-- Nomor Kamar --}}
                                                                <td class=" wrap-nomor-kamar{{$idx}}">
                                                                    <select name="nomor_kamar[{{$idx}}]"
                                                                            id="nomor_kamar{{$idx}}_{{$id}}"
                                                                            data-group="{{$idx}}"
                                                                            data-idx="{{$id}}"
                                                                            class="form-control form-control-select2-red nomor_kamar_{{$idx}} nomor_kamars"
                                                                            onchange="checkNomor(this.id)"
                                                                            {{$block_checkdisabled}}
                                                                    >

                                                                        @if ($block_checkdisabled != 'disabled')
                                                                            <option value="">-- Select Room Number --</option>
                                                                            @if(array_key_exists($idx, $nomor_kamars))
                                                                                @foreach($nomor_kamars[$idx] as $nomor_kamar)
                                                                                    @if($nomor_kamar)
                                                                                        @if($nomor_kamar->no_kamar == $val->nomor_kamar)
                                                                                            <option value="{{$nomor_kamar->no_kamar}}"
                                                                                                    {{$nomor_kamar->no_kamar == @$val->nomor_kamar ? 'selected' : ''}}
                                                                                            >
                                                                                                {{$nomor_kamar->no_kamar}}
                                                                                            </option>
                                                                                        @else
                                                                                            @if(!in_array($nomor_kamar->no_kamar, $booked_room))
                                                                                            <option value="{{$nomor_kamar->no_kamar}}"
                                                                                                    {{$nomor_kamar->no_kamar == @$val->nomor_kamar ? 'selected' : ''}}
                                                                                            >
                                                                                                {{$nomor_kamar->no_kamar}}
                                                                                            </option>
                                                                                            @endif
                                                                                        @endif
                                                                                    @endif
                                                                                @endforeach
                                                                            @endif
                                                                        @else
                                                                            <option value="">{{ $val->nomor_kamar }}</option>
                                                                        @endif
                                                                    </select>
                                                                    <input type="hidden"
                                                                        id="jml_kamar{{$idx}}_{{$id}}"
                                                                        name="jml_kamar[{{$idx}}]"
                                                                        class="form-control"
                                                                        min="1"
                                                                        value="1"
                                                                        style="border-color: red"
                                                                    >

                                                                    @if ($block_checkdisabled == 'disabled')
                                                                        <input type="hidden" name="nomor_kamar[{{$idx}}]" id="nomor_kamar{{$idx}}_{{$id}}" value="{{$val->nomor_kamar}}">
                                                                    @endif
                                                                </td>

                                                                {{-- Rate Code --}}
                                                                <td class="addError wrap-rate_code{{$idx}} ">
                                                                    <select name="rate_codes[{{$idx}}]"
                                                                            id="rate_code{{$idx}}_{{$id}}"
                                                                            data-group="{{$idx}}"
                                                                            data-idx="{{$id}}"
                                                                            onchange="getPrice(this.getAttribute('data-idx'), this.getAttribute('data-group'), 1), removeColorValidation(this.id), sameValueRate(this.value, this.getAttribute('data-group'))"
                                                                            class="form-control form-control-select2-red rate_codes_{{$idx}}"
                                                                            style="border-color: red"
                                                                            {{in_array($booking->segmentasi_rate_code, [10, 11]) ? '' : 'required'}}
                                                                            {{$block_checkdisabled}}
                                                                    >
                                                                        <option value="" data-harga="0">-- Select Rate Code --</option>
                                                                        @if(array_key_exists($idx, $rate_codes))
                                                                            @foreach($rate_codes[$idx] as $rate_code)
                                                                            <option value="{{$rate_code->rate_code}}"
                                                                                    data-id="{{$rate_code->id}}"
                                                                                    data-harga="{{$rate_code->harga}}"
                                                                                    data-include_breakfast="{{$rate_code->include_breakfast}}"
                                                                                    data-segmentrc="{{$rate_code->segment_ratecode}}"
                                                                                    {{$rate_code->id == $val->ratecode_id ? 'selected' : ''}}
                                                                            >
                                                                                Rate {{$rate_code->rate_code}}
                                                                            </option>
                                                                            @endforeach
                                                                        @endif
                                                                    </select>

                                                                    <input type="hidden" id="selratecodeid{{$idx}}_{{$id}}" name="selratecodeid[{{$idx}}]" value="{{$val->segment_rate_code_drop_id}}">
                                                                    <input type="hidden" id="ratecode_id{{$idx}}_{{$id}}" name="ratecode_id[{{$idx}}]" value="{{$val->ratecode_id}}">

                                                                    @if ($block_checkdisabled == 'disabled')
                                                                        <input type="hidden" name="rate_codes[{{$idx}}]" id="rate_code{{$idx}}_{{$id}}" value="{{$val->rate_codes}}">
                                                                        @if($val->block_kamar == 1)
                                                                        {{-- <input type="hidden" name="jns_kamar_hidden[{{$idx}}]" value="{{$val->jns_kamar}}"> --}}
                                                                        {{-- <input type="hidden" name="nomor_kamar_hidden[{{$idx}}]" value="{{$val->nomor_kamar}}"> --}}
                                                                        @endif
                                                                    @else
                                                                        {{-- @if($val->block_kamar == 1) --}}
                                                                        {{-- <input type="hidden" name="jns_kamar_hidden[{{$idx}}]" value="{{$val->jns_kamar}}"> --}}
                                                                        {{-- <input type="hidden" name="nomor_kamar_hidden[{{$idx}}]" value="{{$val->nomor_kamar}}"> --}}
                                                                        {{-- @endif --}}
                                                                    @endif
                                                                </td>

                                                                {{-- Arrangement Code --}}
                                                                <td class=" wrap-arrangement-code{{ $idx }}">
                                                                    <button type="button" id="open_arr_dialog{{$idx}}" onclick="openArrangementDialog({{$idx}}, {{$id}})" class="btn btn-primary">
                                                                        <i class="fas fa-calendar-check"></i>
                                                                        <span class=""></span>
                                                                    </button>

                                                                    <div id="hidden_arrangement_code_container{{ $idx }}">
                                                                    </div>
                                                                </td>

                                                                {{-- Harga --}}
                                                                <td class=" wrap-harga{{ $idx }}">
                                                                    @php
                                                                        // if ($val->nomor_kamar) {
                                                                        //     $total_rooms = $booking->bookingDetails->where('nomor_kamar', $val->nomor_kamar);
                                                                        // }else {
                                                                            $total_rooms = $booking->bookingDetails->where('room_index', $val->room_index);
                                                                        // }

                                                                        $total_room = 0;
                                                                        foreach ($total_rooms as $a => $b) {
                                                                        $total_room += $b->per_item;
                                                                        }
                                                                    @endphp

                                                                    <input type="text" value="{{ ribuan($total_room) }}" id="per_item{{$idx}}" class="form-control per_item_class" style="border-color: red" placeholder="Total Room" disabled readonly>
                                                                    <span class="text-danger" id="ket_diskon{{$idx}}">
                                                                    </span>

                                                                    @if ($block_checkdisabled == 'disabled')
                                                                        <input type="hidden" name="per_item[{{$idx}}]" id="per_item{{$idx}}_{{$id}}" value="{{$total_room}}">
                                                                    @endif
                                                                </td>

                                                                {{-- Block Kamar --}}
                                                                <td class="wrap-block-kamar{{ $idx }}">
                                                                    @if (!in_array($val->status_booking,[1,2]))
                                                                        <input class="rcheckbox cekblokkamar" data-idkamar="{{$idx}}" data-groupkamar="{{$id}}" data-nokamar="{{$val->nomor_kamar}}" type="checkbox" id="block_kamar{{$idx}}_{{$id}}" {{$val->date_now == getSystemDate() ? 'name=block_kamar['.$idx.']' : "" }} {{$val->block_kamar == 1 ? 'checked' : ''}}>
                                                                    @endif
                                                                </td>

                                                                {{-- Billing Instruction --}}
                                                                <td class="wrap-billing-instruction{{ $idx }}">
                                                                    <select name="status_lock[{{$idx}}]" id="status_lock{{$idx}}_{{$id}}" class="form-control-select2-no-search">
                                                                        <option value="">-- Select Billing Instruction --</option>
                                                                        <option value="1" {{$val->status_lock == 1 ? 'selected' : ''}}>No</option>
                                                                        <option value="0" {{$val->status_lock == 0 ? 'selected' : ''}}>Yes</option>
                                                                    </select>

                                                                    {{-- @if ($block_checkdisabled != '')
                                                                        <input type="hidden" name="status_lock[{{$idx}}]" id="status_lock" value="{{ $val->status_lock }}">
                                                                    @endif --}}
                                                                </td>

                                                                {{-- Incognito --}}
                                                                <td class="wrap-incognito{{ $idx }}">
                                                                    <div class="form-check">
                                                                        <label class="form-check-label" for="flexCheckDefault">
                                                                            <input class="rcheckbox form-check-input" type="checkbox" name="incognito[{{$idx}}]" id="incognito{{$idx}}_{{$id}}" {{$val->incognito == 1 ? 'checked' : ''}} {{ $block_checkdisabled }}>

                                                                            @if ($block_checkdisabled != '')
                                                                                <input type="hidden" name="incognito[{{$idx}}]" id="incognito" value="{{ $val->incognito }}">
                                                                            @endif
                                                                        </label>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        @endif
                                                    @endforeach
                                                @endforeach
                                            @endif
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="group_name" class="col-form-label col-lg-2">Group Name</label>
                            <div class="col-lg-5">
                                <input type="text" list="group_names" id="group_name" name="group_name" class="form-control" placeholder="Group Name...(Optional)" value="{{$booking->group_name}}" autocomplete="off">
                                <datalist id="group_names">
                                    @foreach($group_lists as $group_list)
                                    <option value="{{$group_list->group_name}}">{{$group_list->group_name}}</option>
                                    @endforeach
                                </datalist>
                            </div>
                        </div>

						<div class="form-group row">
							<label for="jml_dewasa" class="col-form-label col-lg-2">Adult <span class="text-danger">*</span></label>
							<div class="col-lg-1 addError">
								<input type="number" id="jml_dewasa" name="jml_dewasa" class="form-control" min="0" value="{{$booking->jml_dewasa}}" style="border-color: red" readonly>
							</div>
							<label for="jml_anak" class="col-form-label col-lg-2 text-right">Child <span class="text-danger">*</span></label>
							<div class="col-lg-1 addError">
								<input type="number" id="jml_anak" name="jml_anak" class="form-control" min="0" value="{{$booking->jml_anak}}" required {{$checkreadonly}}>
							</div>
						</div>

						<div class="form-group row">
							<label for="total_biaya" class="col-form-label col-lg-2">Total Price <span class="text-danger">*</span></label>
							<div class="col-lg-10 addError">
                <input type="text" id="total_biaya_disabled" class="total_biaya form-control format_mask" value="{{ ribuanWithComma($booking->bookingDetails->sum('per_item')) }}"  style="border-color: red" disabled>
                <input type="hidden" id="total_biaya" name="total_biaya" class="total_biaya form-control format_mask" value="{{ ($booking->bookingDetails->sum('per_item')) }}" style="border-color: red">
							</div>
						</div>

                        {{--
						<div class="form-group row">
							<label for="deposit_reservasi" class="col-form-label col-lg-2">Deposit Reservasi</label>
							<div class="col-lg-10" id="form_deposit">
								<div class="row">
									<div class="col-md-2">
										Metode Deposit
									</div>
									<div class="col-md-3">
										Platform
									</div>
									<div class="col-md-2">
                                        Nama (Transfer / Credit Card)
									</div>
									<div class="col-md-2">
										Voucher Deposit
									</div>
									<div class="col-md-2">
										Nominal
									</div>
								</div>
                                @php
                                    $attr_deposit = 'readonly';
                                @endphp
								@if(count($deposits) > 0)
									@foreach($deposits as $key_deposit => $deposit)
									<div class="row mb-2" data-idx="{{$key_deposit}}" id="row_deposit_{{$key_deposit}}">
										<div class="col-md-2">
											<input type="hidden" name="deposit_id[{{$key_deposit}}]" value="{{$deposit->id}}">
											<select name="jenis_deposit[{{$key_deposit}}]"
													id="jenis_deposit{{$key_deposit}}"
													class="form-control form-control-select2"
													onchange="setJenisDeposit({{$key_deposit}})"
                                                    disabled
													required
											>
												<option value="">-- Pilih Jenis Deposit --</option>
                                                @foreach(config('custom.jenis_deposit') as $key => $val)
                                                    @if ($key == 3 || $key == 5)
                                                        @continue
                                                    @endif
                                                    <option value="{{$key}}" {{$key == $deposit->jenis_deposit ? 'selected' : ''}}>{{$val}}</option>
                                                @endforeach
											</select>
                                            <input type="hidden" name="jenis_deposit[{{$key_deposit}}]" value="{{$deposit->jenis_deposit}}"> <!--hidden input id for disabled select-->
										</div>
                                        <div class="col-md-3">
                                            <select name="platform_pembayaran_id[{{$key_deposit}}]"
                                                    id="platform_pembayaran_id{{$key_deposit}}"
                                                    class="form-control form-control-select2 border-1 border-1 cekplatformdepo"
                                                    {{ $deposit->jenis_deposit == 1 ? 'disabled' : ''}}
                                                    required
                                                    disabled
                                            >
                                                <option value="">** Pilih Platform Deposit **</option>
                                                @if ($deposit->jenis_deposit != 1)
                                                    @foreach ($platforms[$deposit->jenis_deposit] as $item)
                                                        <option value="{{$item->id}}" {{$item->id == $deposit->platform_pembayaran_id ? 'selected' : ''}}>{{$item->nama}}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                            <input type="hidden" name="platform_pembayaran_id[{{$key_deposit}}]" value="{{$deposit->platform_pembayaran_id}}"> <!--hidden input id for disabled select-->
                                        </div>
										<div class="col-md-2">
											<input type="text"
												   name="nama_deposit[{{$key_deposit}}]"
												   id="nama_deposit{{$key_deposit}}"
												   class="form-control"
												   onchange="chooseNama({{$key_deposit}})"
												   value=""
                                                   {{$attr_deposit}} --}}
												   {{-- value="{{$deposit->jenis_deposit == 1 ? '' : $deposit->nama}}" --}}
												   {{-- {{ $deposit->jenis_deposit == 1 ? 'disabled' : '' }}
												   {{ $deposit->jenis_deposit == 3 ? 'list="datalistTransfer'.$key_deposit.'"' : '' }} --}}
											{{-- >
											<datalist id="datalistTransfer{{$key_deposit}}">
											{!! $transfers !!}
											</datalist>
											<input type="hidden" name="transfer_akunting_id[{{$key_deposit}}]" id="transfer_akunting_id{{$key_deposit}}" value="{{$deposit->transfer_akunting_id}}">
										</div>
										<div class="col-md-2">
											<input type="text" name="voucher_deposit[{{$key_deposit}}]"
												   id="voucher_deposit{{$key_deposit}}" class="form-control"
												   value="{{$deposit->voucher}}"
                                                   {{$attr_deposit}}
											>
										</div>
										<div class="col-md-2">
											<input type="text"
												   name="nominal[{{$key_deposit}}]"
												   id="nominal{{$key_deposit}}" class="form-control ceknominaldepo"
												   value="{{ ribuan($deposit->nominal) }}"
                                                   data-idx="{{$key_deposit}}"
                                                   {{$attr_deposit}}
											>
										</div> --}}
										{{-- <div class="col-lg-1"> --}}
											{{-- @if($key_deposit > 0)
											<button type="button" onclick="removeDeposit({{$key_deposit}})" class="btn btn-danger">
												<i class="fas fa-times-circle"></i>
											</button>
											@else --}}
                                            {{-- @if ($inhouse_booking_detail < 1 && count($deposits) < 3)
                                                @if ($key_deposit == 0)
                                                    <button type="button" id="id_button_tambah_deposit" onclick="tambahDeposit()" class="btn btn-success">
                                                        <i class="fas fa-plus-circle"></i>
                                                    </button>
                                                @endif
                                            @endif --}}
											{{-- @endif --}}
										{{-- </div>
									</div>
									@endforeach
								@else
                                    <div class="row mb-2" data-idx="0" id="row_deposit_0">
                                        <input type="hidden" name="deposit_id[0]" value="0">
                                        <div class="col-md-2">
                                            <select name="jenis_deposit[0]"
                                                    id="jenis_deposit0"
                                                    class="form-control form-control-select2"
                                                    onchange="setJenisDeposit(0)"
                                                    {{$inhouse_booking_detail < 1 ? '' : 'disabled'}}
                                            >
                                                <option value="">-- Pilih Jenis Deposit --</option>
                                                @foreach(config('custom.jenis_deposit') as $key => $val)
                                                    @if ($key == 3 || $key == 5)
                                                        @continue
                                                    @endif
                                                    <option value="{{$key}}">{{$val}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <select name="platform_pembayaran_id[0]"
                                                    id="platform_pembayaran_id0"
                                                    class="form-control form-control-select2 border-1 border-1 cekplatformdepo"
                                                    required
                                                    disabled
                                            >
                                                <option value="">** Pilih Platform Deposit **</option>
                                            </select>
                                        </div>
                                        <div class="col-md-2">
                                            <input type="text" name="nama_deposit[0]" id="nama_deposit0" class="form-control" onchange="chooseNama(0)" disabled>
                                            <datalist id="datalistTransfer0">
                                            {!! $transfers !!}
                                            </datalist>
                                            <input type="hidden" name="transfer_akunting_id[0]" id="transfer_akunting_id0">
                                        </div>
                                        <div class="col-md-2">
                                            <input type="text" name="voucher_deposit[0]" id="voucher0" class="form-control" disabled>
                                        </div>
                                        <div class="col-md-2">
                                            <input type="text"
                                                   name="nominal[0]"
                                                   placeholder="0"
                                                   id="nominal0" required class="form-control format_mask ceknominaldepo" data-idx="0" disabled>
                                        </div>
                                        <div class="col-lg-1">
                                            @if ($inhouse_booking_detail < 1 && count($deposits) < 3)
                                                <button type="button" id="id_button_tambah_deposit" onclick="tambahDeposit()" class="btn btn-success">
                                                    <i class="fas fa-plus-circle"></i>
                                                </button>
                                            @endif --}}
                                            {{-- <button type="button" onclick="tambahDeposit()" class="btn btn-success">
                                                <i class="fas fa-plus-circle"></i>
                                            </button> --}}
                                        {{-- </div>
                                    </div>
								@endif
							</div>
						</div> --}}


						<div class="form-group row">
							{{-- <label for="jns_pembayaran" class="col-form-label col-lg-2">Jenis Pembayaran</label>
							<div class="col-lg-5">
								<select name="jns_pembayaran" id="jns_pembayaran" class="form-control form-control-select2" required>
									<option value="">-- Pilih Jenis Pembayaran --</option>
									@foreach(config('custom.jenis_pembayaran') as $key => $val)
									<option value="{{$key}}" {{$key == $booking->jns_pembayaran ? 'selected' : ''}}>{{$val}}</option>
									@endforeach
								</select>
							</div> --}}
							<label for="voucher" class="col-form-label col-lg-2">Voucher</label>
							<div class="col-lg-2">
								<input type="text" name="voucher" id="voucher" class="form-control" value="{{$booking->voucher}}">
							</div>
						</div>

						{{-- <div class="form-group row">
							<label for="status_lock" class="col-form-label col-lg-2">Billing Instruction</label>
							<div class="col-lg-2">
								<select name="status_lock" id="status_lock" class="form-control-select2-no-search">
									<option value="">-- Pilih Billing Instruction --</option>
									<option value="1" {{$booking->status_lock == 1 ? 'selected' : ''}}>Tidak</option>
									<option value="0" {{$booking->status_lock == 0 ? 'selected' : ''}}>Ya</option>
								</select>
							</div>
						</div> --}}

						<div class="form-group row">
							<label for="ket_pembayaran" class="col-form-label col-lg-2">Payment description</label>
							<div class="col-lg-10">
								<textarea name="ket_pembayaran" id="ket_pembayaran" rows="5" class="form-control summernote">{{$booking->ket_pembayaran}}</textarea>
							</div>
						</div>

						<div class="form-group row">
							<label for="remark" class="col-form-label col-lg-2">Guest Remark</label>
							<div class="col-lg-10">
								<textarea name="remark" id="remark" rows="5" class="form-control summernote">{{$booking->remark}}</textarea>
							</div>
						</div>

						<div class="form-group row">
							<label for="reservation_remark" class="col-form-label col-lg-2">Reservation Remark</label>
							<div class="col-lg-10">
								<textarea name="reservation_remark" id="reservation_remark" rows="5" class="form-control summernote">{{$booking->reservation_remark}}</textarea>
							</div>
						</div>

                        <div class="form-group row">
                            <label class="col-form-label col-lg-2">Upload ID Card photo</label>
                            <div class="col-lg-9">
                                <input type="file" name="idcard_url" id="idcard_url" value="{{ @$booking->idcard_url }}"
                                    class="form-control mb-2 border-teal border-1" onchange="preview()">
                                {{-- <span class="form-text text-muted">rekomendasi ukuran 1280 x 720 pixel</span> --}}
                                <img id="frame" width="256px" height="144px"
                                    src="/{{ $booking->idcard_url ?? asset('global_assets/images/placeholders/placeholder.jpg') }}"
                                    style="object-fit: cover;" class="mb-1" />
                            </div>
                        </div>

						<div class="form-group row">
							<label for="remark" class="col-form-label col-lg-2">File Uploaded</label>
							<div class="col-lg-10">
								@foreach ($booking->booking_file as $files)
									<div class="row mb-2" id="file_{{$files->id}}">
										<div class="col">
											<a href="{{url('/').'/'.$files->url}}" target="_blank" download>{{$files->nama}}</a>
										</div>
										<div class="col">
											<button type="button" class="btn btn-warning btn-sm rounded-round mx-2" onclick="deletebookfile({{$files->id}})"><i class="icon-cross2"></i></button>
										</div>
									</div>
								@endforeach
							</div>
						</div>


						<input type="hidden" id="jumlahfile" value="1">
								<div class="form-group row">
									<label class="col-form-label col-lg-2">Upload File</label>

									<div class="col-lg-6">
										<input class="form-control" id="files1" name="files[]" type="file">
									</div>
									{{-- <div class="col-lg-2" id="previewtext1">
									</div> --}}
									<div class="col-lg-2 text-left">
										<button type="button" onclick="tambahFile()" class="btn btn-success">
											<i class="fas fa-plus-circle"></i>
										</button>
									</div>
								</div>

								<div id="formfile">

								</div>

						{{-- <div class="form-group row">
							<div class="col-lg-12 text-left">
								<div class="form-check">
								  <input class="form-check-input" type="checkbox" name="incognito" value="1" id="incognito" {{$booking->incognito == 1 ? 'checked' : ''}}>
								  <label class="form-check-label" for="flexCheckDefault">
									<h4><i class="fas fa-user-secret"></i>&nbsp;<b>Incognito</b></h4>
								  </label>
								</div>
							</div>
						</div> --}}

                        <!--MODAL ARRANGEMENT CODE-->
                        <div id="modal_arrangement_codes" class="modal fade">
                            <div class="modal-dialog modal-xl">
                                <div class="modal-content">
                                    <div class="modal-header bg-primary" align="center">
                                        <h6 class="modal-title">
                                            <i class="fas fa-door-closed"></i>&nbsp; Arrangement Modal Room
                                        </h6>
                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    </div>

                                    <div class="modal-body">

                                        <div class="card table-responsive">

                                            <table class="table table-hover" id="table_arrangement_list">
                                                <thead>
                                                    <tr>
                                                        <th style="text-align:center; width:15%">From Date</th>
                                                        <th style="text-align:center; width:15%">To Date</th>
                                                        <th style="text-align:right; width:20%">Room Rate</th>
                                                        <th style="text-align:right; width:20%">Local Rate</th>
                                                        <th style="text-align:center; width:30%">ArgCode</th>
                                                    </tr>
                                                </thead>
                                                @if(count($booking->bookingDetails) > 0)
                                                    @php
                                                        $block_checkdisabled  = '';
                                                    @endphp
                                                    @foreach ($details as $idx => $values)
                                                    <tbody id="arrangement_list_{{$idx}}" class="table_arrs" style="display:none;">
                                                        @foreach ($values as $id => $val)
                                                        @php
                                                            if ($val->in_invoice != 1) {
                                                                if ($val->block_kamar == 1) {
                                                                    $block_checkdisabled = 'disabled';
                                                                } else {
                                                                    $block_checkdisabled = '';
                                                                }
                                                            } else {
                                                                $block_checkdisabled = 'disabled';
                                                            }

                                                            if (\Auth::user()->permission_change_reserv == 1) {
                                                                $block_checkdisabled = 'disabled';
                                                            }

                                                            if (in_array(\Auth::user()->role, [1,2])) {
                                                                $block_checkdisabled = '';
                                                            }

                                                        @endphp
                                                        <tr id="arr_row{{$idx}}_{{$id}}">
                                                            <td style="text-align:center">{{dateFormat($val->date_now, "d-m-Y")}}
                                                                <input type="hidden" name="date_now[{{$idx}}][{{$id}}]" id="date_now{{$idx}}_{{$id}}" value="{{$val->date_now}}">
                                                            </td>
                                                            <td style="text-align:center">{{dateFormat(date('d-m-Y',strtotime($val->date_now . "+1 days")), "d-m-Y")}}</td>
                                                            <td id="roomrate{{$idx}}_{{$id}}" style="text-align: right;">{{ ribuan(($val->per_item_real + $val->per_item_services + $val->per_item_tax)) }}</td>
                                                            <td id="localrate{{$idx}}_{{$id}}" style="text-align: right;">
                                                                {{-- @if (in_array($val->status_booking,[1,2]))
                                                                <input type="hidden" name="per_item[{{$idx}}][{{$id}}]" value="{{$val->per_item}}">
                                                                @endif --}}
                                                                @if ($block_checkdisabled == 'disabled')
                                                                    <input type="hidden" name="per_item[{{$idx}}][{{$id}}]" value="{{$val->per_item}}">
                                                                @endif

                                                                <input type="text" class="per_item_new local_room{{$idx}} form-control format_mask" style="text-align: right;" id="input_localrate{{$idx}}_{{$id}}" name="per_item[{{$idx}}][{{$id}}]" value="{{ribuan($val->per_item)}}" onchange="recount({{$idx}}, {{$id}})" {{$block_checkdisabled }}>
                                                            </td>
                                                            <td style="text-align:center">
                                                                @if ($block_checkdisabled == 'disabled')
                                                                <input type="hidden" name="arrangement_codes[{{$idx}}][{{$id}}]" value="{{$val->arrangement_codes}}">
                                                                @endif
                                                                <select name="arrangement_codes[{{$idx}}][{{$id}}]"
                                                                        id="arrangement_code{{$idx}}_{{$id}}"
                                                                        data-group="{{$idx}}"
                                                                        data-idx="{{$id}}"
                                                                        onchange="getPrice(this.getAttribute('data-idx'), this.getAttribute('data-group'), 0), removeWarningButton(this.getAttribute('data-group'))"
                                                                        class="arrangement_cols{{$idx}} form-control form-control-select2 form-arrangements"
                                                                        required
                                                                        {{$block_checkdisabled }}
                                                                >
                                                                    <option value="" data-harga="0">-- Select Arrangement --</option>
                                                                    @foreach($arrangements as $arrangement)
																		{{--
																			<option value="{{$arrangement->arrangement_code}}"
																					data-id="{{$arrangement->id}}"
																					data-harga="{{$arrangement->totalHarga->total ?? 0}}"
																					data-service="0"
																					data-tax="0"
																					{{$arrangement->arrangement_code == $val->arrangement_codes ? 'selected' : ''}}
																			>{{$arrangement->arrangement_code}}</option>
																		--}}
																		@php
																		$harga_arrangement = 0;
																		$service_arrangement = 0;
																		$tax_arrangement = 0;
																		@endphp

																		@if($arrangement->arrangementCodeDetail)
																			@foreach($arrangement->arrangementCodeDetail as $arrangement_detail)
																				@php
																				//$service_arrangement_temp = $arrangement_detail->harga * ($arrangement_detail->shop ? ($arrangement_detail->shop->services/100) : 0);
																				//$service_arrangement += $service_arrangement_temp;
																				//$tax_arrangement_temp = ($service_arrangement_temp * ($arrangement_detail->shop ? ($arrangement_detail->shop->ppn/100) : 0)) + $service_arrangement_temp;
																				//$tax_arrangement += $tax_arrangement_temp;
																				//$harga_arrangement += $arrangement_detail->harga;
																				$tax_shop = $arrangement_detail->shop ? $arrangement_detail->shop->ppn : 0;
																				$service_shop = $arrangement_detail->shop ? $arrangement_detail->shop->services : 0;

																				$tax_arrangement_temp = ($arrangement_detail->harga * $tax_shop)/(100+$tax_shop);
																				$tax_arrangement += $tax_arrangement_temp;

																				$harga_exclude_tax = $arrangement_detail->harga - $tax_arrangement_temp;
																				$service_arrangement_temp = ($harga_exclude_tax * $service_shop)/(100+$service_shop);
																				$service_arrangement += $service_arrangement_temp;

																				$harga_arrangement += $arrangement_detail->harga;
																				@endphp
																			@endforeach
																		@endif

																		<option value="{{$arrangement->arrangement_code}}"
																				data-id="{{$arrangement->id}}"
																				data-harga="{{$harga_arrangement}}"
																				data-service="{{$service_arrangement}}"
																				data-tax="{{$tax_arrangement}}"
																				{{$arrangement->id == $val->arrangement_id ? 'selected' : ''}}
																		>{{$arrangement->arrangement_code}}</option>
                                                                    @endforeach
                                                                </select>
                                                                <input type="hidden" name="arrangement_id[{{$idx}}][{{$id}}]" id="per_arrangement_id{{$idx}}_{{$id}}" value="{{$val->arrangement_id}}">
                                                                <input type="hidden" name="amount_item_total[{{$idx}}][{{$id}}]" id="per_item_total{{$idx}}_{{$id}}" value="{{$val->per_item_real}}">
                                                                <input type="hidden" name="amount_item_services[{{$idx}}][{{$id}}]" id="per_item_services{{$idx}}_{{$id}}" value="{{$val->per_item_services}}">
                                                                <input type="hidden" name="amount_item_tax[{{$idx}}][{{$id}}]" id="per_item_tax{{$idx}}_{{$id}}" value="{{$val->per_item_tax}}">
                                                                <input type="hidden" name="amount_item_arr[{{$idx}}][{{$id}}]" id="per_item_arr{{$idx}}_{{$id}}" value="{{$val->per_item_arr}}">
																<input type="hidden" name="amount_item_arr_services[{{$idx}}][{{$id}}]" id="per_item_arr_service{{$idx}}_{{$id}}" value="{{$val->per_item_arr_services}}">
																<input type="hidden" name="amount_item_arr_tax[{{$idx}}][{{$id}}]" id="per_item_arr_tax{{$idx}}_{{$id}}" value="{{$val->per_item_arr_tax}}">
                                                            </td>
                                                        </tr>
                                                        @endforeach
                                                    </tbody>
                                                    @endforeach
                                                @else
                                                    <tbody id="arrangement_list_0" class="table_arrs" style="display:none;">
                                                        <tr id="arr_row0_0">
                                                            <td style="text-align:center">{{dateFormat(getSystemDate(), "d-m-Y")}}
                                                                <input type="hidden" name="date_now[0][0]" id="date_now0_0" value="{{getSystemDate()}}">
                                                            </td>
                                                            <td style="text-align:center">{{dateFormat(date('d-m-Y',strtotime(getSystemDate() . "+1 days")), "d-m-Y")}}</td>
                                                            <td id="roomrate0_0" style="text-align:right">0</td>
                                                            <td id="localrate0_0" style="text-align:right">
                                                                <input type="text" class="per_item_new local_room0 form-control format_mask" style="text-align: right;" id="input_localrate0_0" name="per_item[0][0]" value="0" onchange="recount(0,0)">
                                                            </td>
                                                            <td style="text-align:center">
                                                                <select name="arrangement_codes[0][0]"
                                                                        id="arrangement_code0_0"
                                                                        data-group="0"
                                                                        data-idx="0"
                                                                        onchange="getPrice(this.getAttribute('data-idx'), this.getAttribute('data-group'), 0), removeWarningButton(this.getAttribute('data-group'))"
                                                                        class="arrangement_cols0 form-control form-control-select2 form-arrangements"
                                                                        required
                                                                >
                                                                    <option value="" data-harga="0">-- Pilih Arrangement --</option>
																	@foreach($arrangements as $arrangement)
																		@php
																		$harga_arrangement = 0;
																		$service_arrangement = 0;
																		$tax_arrangement = 0;
																		@endphp

																		@if($arrangement->arrangementCodeDetail)
																			@foreach($arrangement->arrangementCodeDetail as $arrangement_detail)
																				@php
																				// $service_arrangement_temp = $arrangement_detail->harga * ($arrangement_detail->shop ? ($arrangement_detail->shop->services/100) : 0);
																				// $service_arrangement += $service_arrangement_temp;
																				// $tax_arrangement_temp = ($service_arrangement_temp * ($arrangement_detail->shop ? ($arrangement_detail->shop->ppn/100) : 0)) + $service_arrangement_temp;
																				// $tax_arrangement += $tax_arrangement_temp;
																				// $harga_arrangement += $arrangement_detail->harga;
																				$tax_shop = $arrangement_detail->shop ? $arrangement_detail->shop->ppn : 0;
																				$service_shop = $arrangement_detail->shop ? $arrangement_detail->shop->services : 0;

																				$tax_arrangement_temp = ($arrangement_detail->harga * $tax_shop)/(100+$tax_shop);
																				$tax_arrangement += $tax_arrangement_temp;

																				$harga_exclude_tax = $arrangement_detail->harga - $tax_arrangement_temp;
																				$service_arrangement_temp = ($harga_exclude_tax * $service_shop)/(100+$service_shop);
																				$service_arrangement += $service_arrangement_temp;

																				$harga_arrangement += $arrangement_detail->harga;
																				@endphp
																			@endforeach
																		@endif

																		<option value="{{$arrangement->arrangement_code}}"
																				data-id="{{$arrangement->id}}"
																				data-harga="{{$harga_arrangement}}"
																				data-service="{{$service_arrangement}}"
																				data-tax="{{$tax_arrangement}}"
																		>{{$arrangement->arrangement_code}}</option>

																		{{--
																			<option value="{{$arrangement->arrangement_code}}"
																					data-id="{{$arrangement->id}}"
																					data-harga="{{$arrangement->totalHarga->total ?? 0}}"
																					data-service="0"
																					data-tax="0"
																					{{$arrangement->arrangement_code == $val->arrangement_codes ? 'selected' : ''}}
																			>{{$arrangement->arrangement_code}}</option>
																		--}}
																	@endforeach
                                                                </select>
                                                                <input type="hidden" name="arrangement_id[0][0]" id="per_arrangement_id0_0">
                                                                <input type="hidden" name="amount_item_total[0][0]" id="per_item_total0_0">
                                                                <input type="hidden" name="amount_item_services[0][0]" id="per_item_services0_0">
                                                                <input type="hidden" name="amount_item_tax[0][0]" id="per_item_tax0_0">
                                                                <input type="hidden" name="amount_item_arr[0][0]" id="per_item_arr0_0">
																<input type="hidden" name="amount_item_arr_services[0][0]" id="per_item_arr_service0_0" />
																<input type="hidden" name="amount_item_arr_tax[0][0]" id="per_item_arr_tax0_0" />
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                @endif
                                            </table>
                                        </div>

                                        <div class="text-right">
                                            <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--/MODAL-->

					</fieldset>
					<div class="text-right">
						<a href="{{ url('/bookings')}}" class="btn btn-light">Back <i class="icon-undo"></i></a>
						<button type="button" class="submit btn btn-primary">Update <i class="icon-paperplane ml-2"></i></button>
					</div>
				</form>
			</div>

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

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

    <!-- Modal Detail Room -->
    <div id="detail_booking_rooms" class="modal fade">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header bg-info" align="center">
					<h6 class="modal-title"><i class="fas fa-file-invoice-dollar mr-1"></i> Booking Details </h6>
					<button type="button" onclick="$('.arrows_details').hide()" class="close" data-dismiss="modal">&times;</button>
				</div>

				<div class="modal-body">
                    <table class="table datatable-basic table-hover" style="width: 100%">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Room Rate</th>
                                <th>Rate</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if(count($booking->bookingDetails) > 0)
                                @foreach($details as $index_2 => $details_2)
                                    @foreach ( $details_2 as $index_3 => $details_3 )
                                        <tr class="rows_details{{$index_2}} arrows_details" style="display: none">
                                            <td>{{dateFormat(@$details_3->date_now, "d-m-Y")}}</td>
                                            <td>{{@$details_3->jns_kamar .'-'. @$val->arrangement_codes}}</td>
                                            <td>{{ribuan(@$details_3->per_item)}}</td>
                                        </tr>
                                    @endforeach
                                @endforeach
                            @endif
                        </tbody>
                    </table>
				</div>

				<div class="modal-footer">
					<button type="button" onclick="$('.arrows_details').hide()" class="btn btn-link" data-dismiss="modal">Close</button>
				</div>
			</div>
		</div>
	</div>
    <!-- Modal Detail Room -->

    <!-- Modal Action Room -->
    <div id="all_action_modal" 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-file-invoice-dollar mr-1"></i> Action </h6>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<div class="modal-body">
                    <legend></legend>
                    @foreach ($booking->bookingDetails as $index_detail => $val_detail )
                        @if ($val_detail->array_sub == 0)

                            <div class="row justify-content-evenly mb-2 pb-2">
                                <div class="col-lg-6" style="padding-top: 15px"> <label for=""> Room Number {{$val_detail->nomor_kamar}} :</label></div>

                                @php
                                    // $nominalpembayaran = 0;
                                    // $nominalrefund = 0;
                                    // $balance_total = 0;
                                    // $nominaltransaksishop = 0;
                                    // $nominal_total = 0;

                                    // // Get Booking Detail per item
                                    // $nominal_total  = 0;

                                    //     // get price per_item with same room_index
                                    //     foreach ($booking->bookingDetails as $index_bd => $value_bd) {
                                    //         if ($value_bd->room_index == $val_detail->room_index) {
                                    //             $nominal_total += $value_bd->per_item;
                                    //         }
                                    //     }

                                    // $nominalinvoice = @$nominal_total - @$booking->invoice->total_deposit;
                                    // if (@count($booking->invoice->pembayaran) > 0) {
                                    //     foreach ($booking->invoice->pembayaran as $pembayaran) {
                                    //         if ($pembayaran->room_index == $val_detail->room_index) {
                                    //             $nominalpembayaran += $pembayaran->nominal;
                                    //             $nominalrefund += $pembayaran->nominal_refund;
                                    //         }
                                    //     }
                                    // }

                                    // if (@count($booking->invoice->shop_transaction)) {
                                    //     foreach ($booking->invoice->shop_transaction as $transaction) {
                                    //         if ($transaction->room_index == $val_detail->room_index) {
                                    //             $nominaltransaksishop += $transaction->grand_total;
                                    //         }
                                    //     }
                                    // }

                                    // // calculate bill from POS payment.
                                    // if (@count($booking->pembayaran_pos)) {
                                    //     foreach ($booking->pembayaran_pos as $pos) {
                                    //         if ($pos->room_index == $val_detail->room_index) {
                                    //             if ($pos->jenis_transaksi == 1) {
                                    //                 $nominaltransaksishop += $pos->nominal;
                                    //             }
                                    //         }
                                    //     }
                                    // }

                                    // $balance_total = $nominalinvoice + $nominaltransaksishop - $nominalpembayaran;
                                    // $balance_total = $balance_total + $nominalrefund;
                                    $balance_total = getTotalTagihan($val_detail->booking_id, $val_detail->room_index, $val_detail->nomor_kamar, 'checkout');

                                    // cek apakah ada kamar
                                    $belum_ada_kamar = false;

                                    if (count($booking->bookingDetails) > 0) {
                                        foreach ($booking->bookingDetails as $key => $booking_detail) {
                                            if ($booking_detail->room_index == $val_detail->room_index  && $booking_detail->nomor_kamar == null) {
                                                $belum_ada_kamar = true;
                                            }
                                        }
                                    }else{
                                        $belum_ada_kamar = false;
                                    }
                                @endphp

                                @if ($val_detail->status_booking == 4)


                                    <div class="col-lg-6" style="right: 0px;">
                                        @if (true)
                                        <span style="margin-right: 5px">
                                            <label for="">No Show reservation : </label>
                                            <input type="checkbox" id="noshowreservation" data-detail_id="{{$val_detail->id}}" {{$val_detail->noshowreservation==1?'checked':''}}>
                                        </span>

                                        <a class="noshowreseration mr-1" data-toggle="modal"
                                            data-target="#no_show_reservation_modal"
                                            data-noshowreservation="{{$val_detail->noshowreservation}}"
                                            title="No Show Reservation"
                                            style="display: none"
                                            >
                                            <button type="button" class="btn btn-warning btn-icon">
                                                <i class="fas fa-question" title="Check In"></i>Check In
                                            </button>
                                        </a>
                                        @endif

                                        @if (!$belum_ada_kamar)
                                            @if ($val_detail->checkKamarStatus())
                                                @if ($val_detail->checkKamarStatus()->first()->status == 'VD')
                                                    <a href="#" onclick="callModalAlert('unable to checkin due to room status is VD!')" title="Check In">
                                                        <button type="button" class="btn btn-success btn-light btn-icon">
                                                            <i class="icon-user-check" title="Check In"></i>Check In
                                                        </button>
                                                    </a>
                                                @elseif(in_array($val_detail->checkKamarStatus()->first()->status, ['OD','OC']))
                                                    <a href="#" onclick="callModalAlert('Room still occupied, cannot checkin!!')" title="Check In">
                                                        <button type="button" class="btn btn-warning btn-icon">
                                                            <i class="icon-user-check" title="Check In"></i>Check In
                                                        </button>
                                                    </a>
                                                @else
                                                    <a class="statusbutton" data-toggle="modal"
                                                        data-target="#modal_status_confirm_cancel"
                                                        data-uri="{{route('roomview.update')}}"
                                                        data-id_booking="{{$booking->id}}"
                                                        data-status_to="1"
                                                        data-hotel_id="{{$booking->hotel_id}}"
                                                        data-detail_id="{{@$val_detail->id}}"
                                                        title="Check In"
                                                        style="{{ strtotime(formatDateAwal($val_detail->start_date)) > strtotime(formatDateAwal(getSystemDate())) ? 'display: none;' : '' }}">
                                                        <button type="button" class="btn btn-success btn-icon">
                                                            <i class="icon-user-check" title="Check In"></i>Check In
                                                        </button>
                                                    </a>
                                                @endif
                                            @else
                                                <a class="statusbutton" data-toggle="modal"
                                                    data-target="#modal_status_confirm_cancel"
                                                    data-uri="{{route('roomview.update')}}"
                                                    data-id_booking="{{$booking->id}}"
                                                    data-status_to="1"
                                                    data-hotel_id="{{$booking->hotel_id}}"
                                                    data-detail_id="{{@$val_detail->id}}"
                                                    title="Check In"
                                                    style="{{ strtotime(formatDateAwal($val_detail->start_date)) > strtotime(formatDateAwal(getSystemDate())) ? 'display: none;' : '' }}">
                                                    <button type="button" class="btn btn-success btn-icon">
                                                        <i class="icon-user-check" title="Check In"></i>Check In
                                                    </button>
                                                </a>
                                            @endif
                                        @else
                                            <a href="#"
                                                class="statusbutton"
                                                data-target="#alertStatusModal"
                                                data-toggle="modal"
                                                onclick="alertStatus({{$val_detail->booking->id}}, '{{$val_detail->jns_kamar}}',  {{$val_detail->array_index}})"
                                                title="Check In">
                                                <button type="button" class="btn btn-warning btn-icon">
                                                    <i class="icon-user-check" title="Check In"></i>Check In
                                                </button>
                                            </a>
                                        @endif

                                        {{-- @if ($booking->segmentasi_rate_code != 7 $val_detail->end_date >= tanggalsekarang) --}}
                                        @if ($permission == 0)
                                        <a class="statusbutton ml-1"
                                            data-toggle="modal"
                                            data-target="#modal_status_confirm_cancel"
                                            data-uri="{{route('roomview.update')}}"
                                            data-id_booking="{{$booking->id}}"
                                            data-status_to="13"
                                            data-hotel_id="{{$booking->hotel_id}}"
                                            data-detail_id="{{@$val_detail->id}}"
                                            title="Cancel Reservation">
                                            <button type="button" class="btn btn-danger btn-icon">
                                                <i class="icon-user-cancel" title="Cancel Reservation"></i>Cancel Reservation
                                            </button>
                                        </a>
                                        @endif
                                        {{-- @endif --}}
                                    </div>


                                @elseif ($val_detail->status_booking == 1 && date('Y-m-d', strtotime($val_detail->end_date)) <= getSystemDate())
                                    <div class="col-lg-6 " style="right: 0;">
                                        @if ($balance_total < 0)
                                            <a class="statusbutton ml-1"
                                                data-target="#checkout_refundmodal"
                                                data-toggle="modal"
                                                onclick="ClickBtnRefundCheckout({{@$booking->id}}, {{$balance_total}}, {{$booking->segmentasi_rate_code}},  {{$val_detail->room_index}}, {{$booking->company_id}})"
                                                title="Refund">
                                                <button type="button" class="btn btn-warning btn-icon">
                                                    <i class="fas fa-receipt"></i> Checkout + Refund
                                                </button>
                                            </a>
                                        @elseif($balance_total > 0)
                                            <a class="statusbutton ml-1"
                                                data-target="#checkout_pembayaranmodal"
                                                data-toggle="modal"
                                                onclick="ClickBtnPembayaranCheckout({{$booking->id}}, {{$balance_total}}, {{$booking->segmentasi_rate_code}}, {{$val_detail->room_index}}, {{$booking->company_id}})"
                                                title="Pembayaran">
                                                <button type="button" class="btn btn-success btn-icon">
                                                    <i class="fas fa-wallet" title="Check Out"></i> Checkout + Acquittance
                                                </button>
                                            </a>
                                        @elseif($balance_total == 0)
                                            <a href="#/" onclick="updateStatus({{$booking->hotel_id}}, {{$booking->id}}, 2, {{$val_detail->id}})" class="btn bg-slate" style="text-transform: capitalize">
                                                <i class="fas fa-door-open" title="Check Out"></i>Checkout
                                            </a>
                                        @endif
                                    </div>
                                @else
                                    <div class="col-lg-6" style="padding-top:15px">-- No Action --</div>
                                @endif
                            </div>

                            <legend></legend>

                        @endif
                    @endforeach

				</div>

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

    <!-- Alert 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"><i class="fas fa-exclamation mr-1"></i>Cancel Reservation</h6>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

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

					<input type="hidden" name="id" id="id_booking">
					<input type="hidden" name="status_booking" id="status_booking">
					<input type="hidden" name="hotel_id" id="hotel_id_modal">
                    <input type="hidden" name="detail_id" id="detail_id_cancel_reservation">

					<div class="modal-body" align="center">
                        <h2 class="text-confirmcancel" id="text-confirmcancel" ali></h2><br>
                        <div class="form-group row" id="modal_body_reservation">
                            <label for="reason" class="col-form-label col-lg-4">Reason</label>
                            <div class="col-lg-8">
                                <textarea name="reason_cancel_reservation" id="reason_cancel_reservation" rows="5" class="form-control"></textarea>
                            </div>
                        </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>
	<!-- /Alert modal -->

     <!-- Pembayaran + Checkout -->

	<!-- Checkout Pembayaran Modal -->
	<div id="checkout_pembayaranmodal" 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-wallet mr-1"></i> Payment & Checkout</h6>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<div class="modal-body">
					<form action="{{url('rv_savepembayaran_checkout')}}" id="form_checkout" class="form-validate-checkout" method="POST">
					@csrf

					@if(Auth::user()->role == 1 || Auth::user()->role == 5)
						<input type="hidden" name="hotel_id" value="{{ Session::get('hotel_id') }}" />
					@else
						<input type="hidden" name="hotel_id" value="{{ hotelID() }}" />
					@endif
						<input type="hidden" id="checkout_pembayaran_booking_id" name="booking_id" value="{{$booking->id}}">
                        <input type="hidden" id="checkout_pembayaran_room_index" name="room_index">

					<div class="form-group row">
						<label class="col-form-label col-sm-3">Name</label>
						<div class="col-sm-9">
							<input id="checkout_pembayaran_nama" name="nama" value="{{$booking->nama}}" class="form-control border-1 border-teal addError" type="text">
						</div>
					</div>

                    <div class="form-group row">
						<label class="col-form-label col-sm-3">Payment Method</label>
						<div class="col-lg-9">
							<!-- Kode lama ada onchange="setJenisPembayaran()" -->
							<select name="jenis_pembayaran_id"
									id="checkout_jenis_pembayaran"
									onchange="setJenisPembayaran()"
									class="form-control form-control-select2 addError"
									required
							>
								<option value="">** Select Payment Method **</option>
								@foreach(config('custom.jenis_pembayaran') as $key => $value)
                                {{-- @if ( $key == 5 )
                                    @if ($booking->company_id == null && @$booking->guest->individual_ledger == 0)
                                        @continue;
                                    @endif
                                @elseif(in_array($key, [3,6,7,8]))
                                    @continue;
                                @endif

                                <option value="{{$key}}">{{$value}}</option> --}}

                                {{-- @if(!in_array($key, [5,6,7,8]))
                                    <option value="{{$key}}">{{$value}}</option>
                                @endif --}}

                                    @if(!in_array($key, [3]))
                                        <option value="{{$key}}">{{$value}}</option>
                                    @endif

								@endforeach
							</select>
						</div>
					</div>

					<div class="form-group row" id="checkout_jenis_pembayaran_option" style="display: none">
						<label for="platform_pembayaran" class="col-form-label col-sm-3">Payment Platform</label>
						<div class="col-lg-9">
							<select name="platform_pembayaran_id"
									id="platform_pembayaran_id"
									class="form-control form-control-select2 border-1 border-1 addError"
							>
								<option value="">** Select Payment Platform **</option>
							</select>
						</div>
					</div>

					<div class="form-group row" id="pembayaran_transfer" style="display: none">
						<label for="platform_pembayaran" class="col-form-label col-sm-3">Transfer List</label>
						<div class="col-lg-9">
							<select name="transfer_akunting_id"
									id="pembayaran_transfer_akunting_id"
									class="form-control form-control-select2 border-1 border-teal addError"
							>
								<option value="">-- Select Data(Optional) --</option>
								@foreach ($transfers as $transfer)
								<option value="{{$transfer->id}}"
										data-voucher="{{$transfer->voucher}}"
										data-nominal = "{{$transfer->nominal}}"
								>
									{{$transfer->nama}} /  Rp.{{ribuan($transfer->nominal)}} ({{$transfer->keterangan}})
								</option>
								@endforeach
							</select>
							<br>
							<span id="warning_pembayaran_transfer" class="text-danger"></span>
						</div>
					</div>

                    <div class="form-group row">
                        <div class="col-lg-3"></div>
                        <div class="col-lg-8">
                            <span class="text-danger" id="alert-limit-ledger"></span>
                        </div>
                    </div>

                    <div class="form-group row wrap_segmentation_option" style="display: none">
						<label class="col-form-label col-sm-3">Segment</label>
						<div class="col-lg-9">
							<select name="segment" id="checkout_pembayaran_segment" class="form-control form-control-select2 border-1 border-1 addError">
								<option value="">-- Select Segmentation --</option>
                                @foreach (config('custom.segment_ratecodes') as $key => $val)
                                    @if (in_array($key, [1,7,12,13]))
                                        @continue
                                    @endif

                                    <option value="{{$key}}" class="segmentation_value">{{$val}}</option>
                                @endforeach

                                {{-- <option value="999">Transfer</option> --}}
							</select>
						</div>
					</div>

                    <div class="form-group row">
						<label class="col-form-label col-sm-3">Voucher</label>
						<div class="col-lg-9">
							<input type="text" class="form-control addError" name="voucher" id="voucher">
						</div>
					</div>

					{{-- <div class="form-group row wrap_segmentation_option" style="display: none">
						<label class="col-form-label col-sm-3">Segmentasi</label>
						<div class="col-lg-9">
							<select name="segment" id="checkout_pembayaran_segment" class="form-control form-control-select2 border-1 border-1 addError">
								<option value="">-- Select Segmentation --</option>
                                @foreach (config('custom.segment_ratecodes') as $key => $val)
                                    @if (in_array($key, [1,7,12,13]))
                                        @continue
                                    @endif

                                    <option value="{{$key}}" class="segmentation_value">{{$val}}</option>
                                @endforeach

                                <option value="999">Transfer</option>
							</select>
						</div>
					</div> --}}

					{{-- <div class="form-group row" id="checkout_pembayaran_company_ledger" style="display: none">
						<label class="col-form-label col-sm-3" for="company_ledger"> City Ledger</label>
						<div class="col-lg-9">
							<select name="company_ledger" id="company_ledger_pembayaran_checkout" class="form-control addError" disabled>
								<option value="">-- Pilih City Ledger --</option>
								@foreach($company_ledgers as $comled)
								<option value="{{$comled->id}}"
										data-status="{{$comled->status_ledger}}"
										data-status-text="{{ config('custom.status_ledger')[$comled->status_ledger] }}"
										data-perusahaan="{{$comled->comp_title}} {{$comled->name}}"
								>{{$comled->comp_title}} {{$comled->name}}</option>
							@endforeach
							</select>
						</div>
						<div class="col-lg-3"></div>
						<div class="col-lg-9">
							<span class="text-danger" id="company_danger"></span>
						</div>
					</div> --}}

                    @if ($booking)
                    <div class="m-2">
                       <label> Detail : </label>
                        <table class="table table-hover" >
                            <thead>
                                <tr>
                                    <th>Description</th>
                                    <th>Qty</th>
                                    <th style="text-align:right">Price</th>
                                    <th style="text-align:right">Total</th>
                                </tr>
                            </thead>
                            <tbody class="tabelb_rincian_depo_booking">
                            </tbody>
                            <tbody class="tabelb_rincian_pembayaran_sebagian_booking">
                            </tbody>
                            <tbody class="tabelb_rincian_booking">
                            </tbody>
                            <tbody class="tabelb_rincian_shop_booking">
                            </tbody>
                            <tbody class="tabelb_rincian_pembayaranpos">
                            </tbody>
                        </table>
                    </div>
                    @endif

					<div class="form-group row">
						<label for="total_biaya" class="col-form-label col-lg-3">Amount</label>
						<div class="col-lg-9">
							<input type="text" id="checkout_pembayaran_nominal" name="nominal" value="{{ribuanWithComma(@$balance_total)}}" class="form-control border-teal border-1 addError" required>
							<span class="text-success" id="nominalbayar"></span>
						</div>
					</div>

				</div>

				<div class="modal-footer">
					<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
					<button type="submit" id="submit_pembayaran_checkout" onclick="checkBeforeCheckout()" class="btn bg-primary submit-button-check">Save</button>
				</div>

				</form>


			</div>
		</div>
	</div>
	<!-- /default modal -->

    <!-- Checkout Refund Modal -->
	<div id="checkout_refundmodal" class="modal fade">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header bg-orange" align="center">
					<h6 class="modal-title"><i class="fas fa-wallet mr-1"></i> Refund & Checkout</h6>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<div class="modal-body">
					<form action="{{url('rv_saverefund_checkout')}}" method="POST" id="form_checkout_refund">
					@csrf

					@if(Auth::user()->role == 1 || Auth::user()->role == 5)
						<input type="hidden" name="hotel_id" value="{{ Session::get('hotel_id') }}" />
					@else
						<input type="hidden" name="hotel_id" value="{{ hotelID() }}" />
					@endif
						<input type="hidden" id="checkout_refund_booking_id" name="booking_id" value="{{$booking->id}}">
                        <input type="hidden" id="checkout_refund_room_index" name="room_index">

					<div class="form-group row">
						<label class="col-form-label col-sm-3">Name</label>
						<div class="col-sm-9">
							<input id="checkout_refund_nama" name="nama" value="{{$booking->nama}}" class="form-control border-1 border-teal" type="text">
						</div>
					</div>

					<div class="form-group row">
						<label class="col-form-label col-sm-3">Segment</label>
						<div class="col-lg-9">
							<select name="segment" id="checkout_refund_segment" class="form-control form-control-select2 border-1 border-1" required disabled>
								<option value="">-- Select Segment --</option>
								@foreach(config('custom.segment_ratecodes') as $key => $val)
									<option value="{{$key}}">{{$val}}</option>
								@endforeach
							</select>
						</div>
					</div>

					{{-- <div class="form-group row">
						<label class="col-form-label col-sm-3">Metode Pembayaran</label>
						<div class="col-lg-9">
							<select name="jenis_pembayaran_id"
									id="refund_jenis_pembayaran"
									onchange="setJenisRefund()"
									class="form-control form-control-select2"
									required
							>
								<option value="">** Pilih Metode Pembayaran **</option>
								@foreach(config('custom.jenis_refund') as $key => $value)
                                @if ( $key == 5 )
                                    @if ($booking->company_id == null && @$booking->guest->individual_ledger == 0)
                                        @continue;
                                    @endif
                                @endif

								<option value="{{$key}}">{{$value}}</option>
								@endforeach
							</select>
						</div>
					</div> --}}

					{{-- <div class="form-group row" id="refund_jenis_pembayaran_option" style="display: none">
						<label for="platform_pembayaran" class="col-form-label col-sm-3">Platform Pembayaran</label>
						<div class="col-lg-9">
							<select name="platform_pembayaran_id"
									id="refund_platform_pembayaran_id"
									class="form-control border-1 border-1"
									disabled
							>
								<option value="">** Pilih Platform Pembayaran **</option>
							</select>
						</div>
					</div> --}}

					{{-- <div class="form-group row" id="refund_transfer" style="display: none">
						<label for="platform_pembayaran" class="col-form-label col-sm-3">Daftar Transfer</label>
						<div class="col-lg-9">
							<select name="transfer_akunting_id"
									id="refund_transfer_akunting_id"
									class="form-control form-control-select2 border-1 border-teal"
							>
								<option value="">-- Pilih Data (Opsional) --</option>
								@foreach ($refund_transfers as $transfer)
								<option value="{{$transfer->id}}"
										data-voucher="{{$transfer->voucher}}"
										data-nominal = "{{$transfer->nominal}}"
								>
									{{$transfer->nama}} /  Rp.{{ribuan($transfer->nominal)}} ({{$transfer->keterangan}})
								</option>
								@endforeach
							</select>
							<br>
							<span id="warning_refund_transfer" class="text-danger"></span>
						</div>
					</div> --}}

                    {{-- <div class="form-group row">
						<label class="col-form-label col-sm-3">Voucher</label>
						<div class="col-lg-9">
							<input type="text" class="form-control" name="voucher" id="voucher_refund">
						</div>
					</div> --}}

					{{-- <div class="form-group row" id="checkout_refund_company_ledger" style="display: none">
						<label class="col-form-label col-sm-3">City Ledger</label>
						<div class="col-lg-9">
							<select name="company_ledger" id="checkout_refund_company_ledgers" class="form-control border-1 border-1" disabled>
								<option value="">-- Pilih City Ledger --</option>
								@foreach($company_ledgers as $comled)
									<option value="{{$comled->id}}">{{$comled->name}}</option>
								@endforeach
							</select>
						</div>
					</div> --}}

                    {{-- NEW REFUND METHOD USING ITEM PAID OUT --}}
                    @if (count($item_paid_out) > 0)
                    <div class="form-group row">
                        <label class="col-form-label col-sm-3">Paid out:</label>
                        <div class="col-lg-9">
                            <select name="paid_out_status" id="paid_out_status_checkout" class="form-control border-1 border-1">
                                @foreach ($item_paid_out as $a)
                                    <option value="{{$a->id}}">{{$a->nama}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    @else
                    <div class="form-group row">
                        <label class="col-form-label col-sm-3">Paid out:</label>
                        <label class="col-form-label col-sm-9 text-danger">Please generate item paid out first. <a href="{{route('menus.index')}}/?a=1">click here!</a> </label>
                    </div>
                    @endif

                    @if ($booking)
                    <div class="m-2">
                       <label> Detail : </label>
                        <table class="table table-hover" >
                            <thead>
                                <tr>
                                    <th>Services</th>
                                    <th>Qty</th>
                                    <th style="text-align:right">Price</th>
                                    <th style="text-align:right">Total</th>
                                </tr>
                            </thead>
                            <tbody class="tabelb_rincian_depo_booking">
                            </tbody>
                            <tbody class="tabelb_rincian_pembayaran_sebagian_booking">
                            </tbody>
                            <tbody class="tabelb_rincian_booking">
                            </tbody>
                            <tbody class="tabelb_rincian_shop_booking">
                            </tbody>
                            <tbody class="tabelb_rincian_pembayaranpos">
                            </tbody>
                        </table>
                    </div>
                    @endif

					<div class="form-group row">
						<label for="total_biaya" class="col-form-label col-lg-3">Nominal Refund</label>
						<div class="col-lg-9">
							<input type="text" id="checkout_nominal_refund" name="nominal" value="{{ribuan(@$balance_total)}}" class="form-control border-teal border-1 input_comma_custom" required readonly>
							<span class="text-orange" id="refund_nominalbayar"></span>

						</div>
					</div>

				</div>

				<div class="modal-footer">
					<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
					<button type="submit" onclick="checkBeforeCheckoutRefund()" class="btn bg-primary submit-button-check" id="btn_refund" {{count($item_paid_out) > 0 ? '' : 'disabled' }}>Save</button>
				</div>

				</form>


			</div>
		</div>
	</div>
	<!-- /default modal -->

    <!-- Form update status booking -->
	<form id="form_booking_status" method="post" action="{{route('roomview.update')}}">
		@csrf
		<input type="hidden" name="id" id="id_booking">
		<input type="hidden" name="status_booking" id="status_booking">
		<input type="hidden" name="hotel_id" id="hotel_id">
		<input type="hidden" name="detail_id" id="detail_id">
	</form>


    {{--
    --------------------------------------------------------------
    Guest History Booking Modal
    --------------------------------------------------------------
    --}}
    <!--MODAL-->
    <div id="guest_history_booking_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="fas fa-history"></i>&nbsp;Guest History Booking - <span class="guest_name">{{ @$guest_profile->name }}</span>
                    </h6>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <div class="modal-body">
                    <div class="col-lg-3">
                        <p style="font-weight: bold" class="mb-0">Night: <span class="total_malam">{{ $total_malam }}</span></p>
                    </div>

                    <table class="table datatable-basic table-hover" id="table_guest_history_booking" style="width: 100%">
                        <thead>
                            <tr>
                                <th class="d-none">Sort No</th>
                                <th class="d-none">Kode Booking Filter</th>
                                <th class="d-none">Date Filter</th>
                                <th class="d-none">No Bill Filter</th>

                                <th style="width:10px !important">#</th>
                                <th>Date</th>
                                <th>Room Number</th>
                                <th>Qty</th>
                                <th>Description / Voucher</th>
                                <th class="text-right">Per Item</th>
                                <th class="text-right">Total</th>
                            </tr>
                        </thead>
                        <tbody id="tbody_guest_history_booking">
                            {{-- @if (!$guest_history_bookings)
                                @php
                                    $no = 1;
                                    $sort_no = 1;
                                @endphp

                                @foreach ($guest_history_bookings as $guest_history_booking)
                                    @php
                                        $refunds = array();
                                        if ($guest_history_booking->start_date_old && $guest_history_booking->end_date_old) {
                                            $checkin = formatDateAwal($guest_history_booking->start_date_old);
                                            $checkout = formatDateAwal($guest_history_booking->end_date_old);
                                        } else {
                                            $checkin = formatDateAwal($guest_history_booking->start_date);
                                            $checkout = formatDateAwal($guest_history_booking->end_date);
                                        }
                                    @endphp

                                    <tr>
                                        <td class="d-none">{{$sort_no}}</td>
                                        <td class="d-none">{{$guest_history_booking->kode_booking}}</td>
                                        <td class="d-none">{{$checkin}} - {{$checkout}}</td>
                                        <td class="d-none"> --}}
                                            {{-- {{@$guest_history_booking->invoice->no_invoice}} --}}
                                        {{-- </td>

                                        <td>{{$no}}</td>
                                        <td colspan="6">
                                            Kode Booking: {{$guest_history_booking->kode_booking}} --}}
                                            {{-- <span style="font-weight:bold;"> (No. Bill: <a href="{{url('invoice-draft/'.@$guest_history_booking->invoice->id)}}" target="_blank">{{ @$guest_history_booking->invoice->no_invoice }}</a>)</span> |  <span class="text-success"><i class="icon-enter2"></i>&nbsp;{{formatDate($checkin)}}</span> - <span class="text-danger"><i class="icon-exit2"></i>&nbsp;{{formatDate($checkout)}}</span> --}}
                                        {{-- </td>
                                        <td class="d-none"></td>
                                        <td class="d-none"></td>
                                        <td class="d-none"></td>
                                        <td class="d-none"></td>
                                        <td class="d-none"></td>
                                    </tr> --}}

                                    {{-- Invoice Detail --}}
									{{-- @if ($guest_history_booking->invoice)

										@if (!$guest_history_booking)
											@foreach ($guest_history_booking->invoice as $invoices)
                                                @foreach ($invoices->invoicedetail as $invoice_detail)
												<tr>
													<td class="d-none">{{$sort_no}}</td>
													<td class="d-none">{{$guest_history_booking->kode_booking}}</td>
													<td class="d-none">{{formatDateAwal($invoice_detail->date)}}</td>
													<td class="d-none"> --}}
                                                        {{-- {{$guest_history_booking->invoice->no_invoice}} --}}
                                                    {{-- </td>

													<td></td>
													<td>{{formatDate($invoice_detail->date)}}</td>
													<td>No. {{$invoice_detail->room_no}}</td>
													<td>{{$invoice_detail->qty ?? ''}}</td>
													<td>{{$invoice_detail->description}}</td>
													<td class="text-right">{{$invoice_detail->harga_satuan ? ribuan($invoice_detail->harga_satuan) : ''}}</td>
													<td class="text-right">{{ribuan($invoice_detail->total)}}</td>
												</tr>
                                                @endforeach
											@endforeach

											@php
												$sort_no++;
											@endphp
										@endif

									@endif --}}

                                    {{-- Pembayaran --}}
                                    {{-- @if (!$guest_history_booking->pembayaran)
                                        @foreach ($guest_history_booking->pembayaran as $pembayaran)
                                            @if ($pembayaran->tipe_pembayaran == 1)
                                                <tr>
                                                    <td class="d-none">{{$sort_no}}</td>
                                                    <td class="d-none">{{$guest_history_booking->kode_booking}}</td>
                                                    <td class="d-none">{{formatDateAwal($pembayaran->transaction_date)}}</td>
                                                    <td class="d-none"> --}}
                                                        {{-- {{$guest_history_booking->invoice->no_invoice}} --}}
                                                    {{-- </td>

                                                    <td></td>
                                                    <td>{{formatDate($pembayaran->transaction_date)}}</td>
													<td>No. {{@$guest_history_booking->bookingDetails[0]->nomor_kamar}}</td>
                                                    <td></td>
                                                    <td>Pembayaran {{config('custom.jenis_pembayaran')[$pembayaran->jenis_pembayaran_id]}} {{$pembayaran->bank ?? ''}} A.N. {{$guest_history_booking->nama}}</td>
                                                    <td></td>
                                                    <td class="text-right">(-){{ribuan($pembayaran->nominal)}}</td>
                                                </tr>
                                            @else
                                                @php
                                                    $refunds[] = $pembayaran;
                                                @endphp
                                            @endif
                                        @endforeach

                                        @php
                                            $sort_no++;
                                        @endphp
                                    @endif --}}

                                    {{-- Deposit --}}
                                    {{-- @if (!$guest_history_booking->deposits)
                                        @foreach ($guest_history_booking->deposits as $deposit)
                                            <tr class="{{$deposit->jenis_transaksi == 1 ? '' : 'text-danger' }}">
                                                <td class="d-none">{{$sort_no}}</td>
                                                <td class="d-none">{{$guest_history_booking->kode_booking}}</td>
                                                <td class="d-none">{{ formatDateAwal($deposit->transaction_date) }}</td>
                                                <td class="d-none"> --}}
                                                    {{-- {{$guest_history_booking->invoice->no_invoice}} --}}
                                                {{-- </td>

                                                <td></td>
                                                <td>{{ formatDateAwal($deposit->transaction_date)}}</td>
                                                <td>No. {{@$guest_history_booking->bookingDetails[0]->nomor_kamar}}</td>
                                                <td></td>
                                                <td>{{$deposit->jenis_deposit != 5 ? 'Pembayaran' : ''}} {{config('custom.jenis_deposit')[$deposit->jenis_deposit]}} {{$deposit->bank ?? ''}} A.N. {{$deposit->nama}}</td>
                                                <td></td>
                                                <td class="text-right">{{$deposit->jenis_transaksi == 1 ? '(-)' : '' }}{{ribuan($deposit->nominal)}}</td>
                                            </tr>
                                        @endforeach

                                        @php
                                            $sort_no++;
                                        @endphp
                                    @endif --}}

                                    {{-- Shop Transaction --}}
									{{-- @if ($guest_history_booking->invoice)

										@if (!$guest_history_booking->invoice)
											@foreach ($guest_history_booking->invoice as $invoices)
                                                @foreach ($invoices as $shop_transaction)
                                                    @php
                                                        $harga_satuan = $shop_transaction->total_biaya / $shop_transaction->jumlah;
                                                    @endphp

                                                    <tr class="{{$shop_transaction->jenis_transaksi == 1 ? '' : 'text-danger' }}">
                                                        <td class="d-none">{{$sort_no}}</td>
                                                        <td class="d-none">{{$guest_history_booking->kode_booking}}</td>
                                                        <td class="d-none">{{formatDateAwal($shop_transaction->transaction_date)}}</td>
                                                        <td class="d-none"> --}}
                                                            {{-- {{$guest_history_booking->invoice->no_invoice}} --}}
                                                        {{-- </td>

                                                        <td></td>
                                                        <td>{{formatDate($shop_transaction->transaction_date)}}</td>
                                                        <td>No. {{$shop_transaction->kamar->no_kamar}}</td>
                                                        <td>{{$shop_transaction->jumlah}}</td>
                                                        <td>{{$shop_transaction->menu ? $shop_transaction->menu->nama : $shop_transaction->keterangan_custom}}</td>
                                                        <td class="text-right">{{ribuan($harga_satuan)}}</td>
                                                        <td class="text-right">{{$shop_transaction->jenis_transaksi == 0 ? '(-)' : '' }}{{ribuan($shop_transaction->grand_total)}}</td>
                                                    </tr>
                                                @endforeach
											@endforeach

											@php
												$sort_no++;
											@endphp
										@endif
									@endif --}}

                                    {{-- Transaksi POS hanya total bill --}}
                                    {{-- @if (!$guest_history_booking->pembayaran_pos)
                                        @foreach ($guest_history_booking->pembayaran_pos as $pembayaran_pos)
                                            <tr class="{{$pembayaran_pos->jenis_transaksi == 1 ? '' : 'text-danger' }}">
                                                <td class="d-none">{{$sort_no}}</td>
                                                <td class="d-none">{{$guest_history_booking->kode_booking}}</td>
                                                <td class="d-none">{{formatDateAwal($pembayaran_pos->transaction_date)}}</td>
                                                <td class="d-none"> --}}
                                                    {{-- {{$guest_history_booking->invoice->no_invoice}} --}}
                                                {{-- </td>

                                                <td></td>
                                                <td>{{formatDate($pembayaran_pos->transaction_date)}}</td>
                                                <td>No. {{@$guest_history_booking->bookingDetails[0]->nomor_kamar}}</td>
                                                <td></td>
                                                <td>Outlet Bill{{$pembayaran_pos->cart ? ': '.$pembayaran_pos->cart->order_flag : ''}}</td>
                                                <td class="text-right">{{ribuan($pembayaran_pos->nominal)}}</td>
                                                <td class="text-right">{{$pembayaran_pos->jenis_transaksi == 0 ? '(-)' : '' }}{{ribuan($pembayaran_pos->nominal)}}</td>
                                            </tr>
                                        @endforeach

                                        @php
                                            $sort_no++
                                        @endphp
                                    @endif --}}

                                    {{-- Refunds --}}
                                    {{-- @if ($refunds)
                                        @foreach ($refunds as $refund)
                                            <tr>
                                                <td class="d-none">{{$sort_no}}</td>
                                                <td class="d-none">{{$guest_history_booking->kode_booking}}</td>
                                                <td class="d-none">{{formatDateAwal($refund->transaction_date)}}</td>
                                                <td class="d-none"> --}}
                                                    {{-- {{$guest_history_booking->invoice->no_invoice}} --}}
                                                {{-- </td>

                                                <td></td>
                                                <td>{{formatDate($refund->transaction_date)}}</td>
                                                <td>No. {{@$guest_history_booking->bookingDetails[0]->nomor_kamar}}</td>
                                                <td></td>
                                                <td>Refund {{config('custom.jenis_pembayaran')[$refund->jenis_pembayaran_id]}} {{$refund->bank ?? ''}} A.N. {{$guest_history_booking->nama}}</td>
                                                <td></td>
                                                <td class="text-right">{{ribuan($refund->nominal)}}</td>
                                            </tr>
                                        @endforeach

                                        @php
                                            $sort_no++;
                                        @endphp
                                    @endif

                                    @php
                                        $no++;
                                        $sort_no++
                                    @endphp


                                @endforeach
                            @endif --}}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!--/MODAL-->

<!--MODAL Tidak ada Nomor kamar-->
<div id="alertStatusModal" 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-info mr-1"></i>Set Room Number</h6>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <form id="set_room_number" action="{{route('roomview.choosekamar')}}" method="post">
                @method('post')
                @csrf

                <div class="modal-body">
                    <input type="hidden" name="booking_id" id="alert_status_book_id" value="" class="form-control mb-3" required>
                    <input type="hidden" name="index" id="index_current_kamar" value="" class="form-control mb-3" required>
                    <input type="hidden" name="hotel_id" value="{{ $hotel_id }}" class="form-control mb-3" required>

                    <div>
                        <b>Reservation <span id="no_reservasi"></span> doesn't have Room No.!</b>, please choose Room No. first.
                        {{-- <b>Nomor Reservasi <span id="no_reservasi"></span> Belum Mempunyai Nomor Kamar yang di Pesan!</b>, silahkan pilih nomor kamar terlebih dahulu. --}}
                    </div>

                    <!-- <label class="col-form-label" id="label_current_jeniskamar"></label>

                    <div class="form-group row" id="change_room_number">
                        <label class="col-form-label col-sm-3">Kamar yang Tersedia :</label>
                        <div class="col-lg-8">
                            <select name="id_kamar" id="alert_status_number_select" class="form-control form-control-select2 border-1 border-1">
                            </select>
                        </div>
                    </div> -->

                    <div class="container mt-2" id="set_room_number_form">

                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" id="closekamar" data-dismiss="modal">Close</button>
                    <button type="button" id="submit_wakeUpCall" class="btn btn-primary" onclick="checkSetAllRoom(1)">Submit</button>
                </div>
            </form>

        </div>
    </div>
</div>
<!--/MODAL-->

<!-- modal confirm unblock kamar -->
<div id="modal_unblock_kamar" class="modal fade" tabindex="-1">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header bg-danger" align="center">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>
				<div class="modal-body" align="center">
					<h2>Room <span id="nokamarmodalunblock"></span> is blocked! Do you want to unblock it? </h2>
				</div>

				<div class="modal-footer">
					<button type="button" class="btn btn-link" data-dismiss="modal">Cancel</button>
					<button id="btnmodalunblock" type="button" class="btn bg-danger" data-groupkamar="" data-idkamar="">Yes, Unblock it.</button>
				</div>

		</div>
	</div>
</div>
<!-- /default modal -->

    <!--MODAL-->
    <div id="multiple_room_modal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-warning" align="center">
                    <h6 class="modal-title">
                        <i class="fas fa-door-closed"></i>&nbsp; Multiple Room
                    </h6>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <div class="modal-body">

                    <div class="form-group row">
                        <label class="col-form-label col-sm-4">Multiple Room :</label>
                        <div class="col-lg-8">
                            <input type="number" id="qty_multiple_room" class="form-control" placeholder="Insert Qty to multiply ... ">
                        </div>
                    </div>

                    <div class="text-right">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="button" id="apply_multi_button" class="btn btn-primary">Apply<i class="icon-add ml-2"></i></button>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!--/MODAL-->

    <!-- No Show Reservation Modal -->
	<div id="no_show_reservation_modal" class="modal fade" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header bg-warning" align="center">
                    <h6 class="modal-title">
                        <i class="fas fa-question"></i>&nbsp; No Show Reservation
                    </h6>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<form action="{{ route('bookings.noshowreservation')}}" method="post" id="noshowreservationform">
				    @csrf

					<input type="hidden" name="booking_id" id="booking_id_noshowreservation" value="{{$booking->id}}">

					<input type="hidden" name="detail_id" id="booking_detail_id_noshowreservation" value="{{$booking->id}}">

					<div class="modal-body" align="center" id="text-noshowresevation">
					</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">Confirm</button>
					</div>
				</form>

			</div>
		</div>
	</div>
	<!-- /No Show Reservation Modal -->

     <!-- Alert Modal -->
	<div id="alert_modal" class="modal fade" tabindex="-1">
		<div class="modal-dialog">
			<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="modal-footer">
                    <button type="submit" class="btn bg-warning" data-dismiss="modal">Okay</button>
                </div>

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

    {{-- Modal Room Availability --}}
        <div id="modal_room_availability" class="modal fade">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header bg-primary" align="center">
                        <h6 class="modal-title">
                            <i class="fab fa-buromobelexperte"></i>&nbsp; Room Availability
                        </h6>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <div class="modal-body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped" id="table_room_availibility">
                            </table>
                        </div>

                        <div class="text-right">
                            <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {{-- Modal Room Availability --}}

    <!-- Log change modal -->
    <div id="log_change_modal" class="modal fade">
		<div class="modal-dialog modal-xl">
			<div class="modal-content">
				<div class="modal-header bg-info" align="center">
					<h6 class="modal-title"><i class="icon-history mr-1"></i>Change Rate Code History</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>Date</th>
                                <th>Room Number</th>
                                <th>Room Type</th>
                                <th>Rate Code</th>
                                <th>Arr. Code</th>
                                <th>Room Rate</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if ($log_changes->isNotEmpty())
                                @php ($i = 1) @endphp
                                @foreach ($log_changes as $log_change)
                                    <tr>
                                        <td>{{ $i }}</td>
                                        <td>{{ @$log_change->user->nama }}</td>
                                        <td>{{ @$log_change->date_now }}</td>
                                        <td>{{ @$log_change->nomor_kamar }}</td>
                                        <td>{{ @$log_change->jns_kamar }}</td>
                                        <td>{{ @$log_change->rate_codes }}</td>
                                        <td>{{ @$log_change->arrangement_codes }}</td>
                                        <td>{{ ribuan(@$log_change->per_item) }}</td>
                                    </tr>
                                    @php ($i++) @endphp
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="8" style="text-align:center">No Data</td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
				</div>

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

@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/validation/validate.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>

    <!-- Helpers JS -->
    <script src="{{asset('assets/js/custom.js')}}"></script>

	<!-- <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/forms/styling/uniform.min.js')}}"></script>
    <script src="{{asset('global_assets/js/plugins/forms/inputs/jquery.mask.js')}}"></script>

	<script src="{{asset('global_assets/js/plugins/editors/summernote/summernote.min.js')}}"></script>
	{{-- <script src="{{asset('global_assets/js/demo_pages/editor_summernote.js')}}"></script> --}}

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

	<script src="{{asset('assets/js/app.js')}}"></script>
	{{-- <script src="{{asset('global_assets/js/demo_pages/form_inputs.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">
        let data_booking_details = {!! json_encode($data_booking_details) !!};
        let index_bd = {!! json_encode($index_bd) !!};
        let booking_id_here = {!! json_encode($booking->id) !!};
        // Check Disabled Variabel
        let check_disabled = {!! json_encode($checkdisabled) !!}
        let hotel_id_now = {!! json_encode($hotel_id) !!};

        // Datatable
        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,
                    columnDefs: [{
                        orderable: false,
                        // width: 150,
                        // targets: [ 0,4,5,6,7,8,9,10 ],
                        searchable: false,
                    }],
                    bInfo : false,
                    dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
                    language: {
                        search: '<span>Filter:</span> _INPUT_',
                        searchPlaceholder: 'Kode Booking/No. Bill/Tanggal...',
                        lengthMenu: '<span>Show:</span> _MENU_',
                        paginate: { 'first': 'First', 'last': 'Last', 'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;' }
                    }
                });

                $('.datatable-basic').DataTable();

                // 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();
    });

    let jenis_deposit_text = {!! json_encode(config('custom.jenis_deposit')) !!};
    let jenis_pembayaran = {!! json_encode(config('custom.jenis_pembayaran')) !!};

    // variable untuk tax dan services
    let tax_percent_global      = 0;
    let services_percent_global = 0;

    $(document).ready(function () {
        // ambil data ppn services global
        $.ajax({
            type: "get",
            url: "{{url('get-global-prices')}}",
            dataType: "json",
            success: function (response) {
                tax_percent_global         = response.tax;
                services_percent_global    = response.services;
            }
        });

        guestHistoryBooking("{{ $booking->guest_profile_id }}")

        // variable
        let room_availability_buttons = $('.button-room-availability')

        // each variable for get group and idx
        $.each(room_availability_buttons, function(key_room_availability_button, room_availability_button){
            let group_room_availability = $(room_availability_button).data('group')
            let idx_room_availability = $(room_availability_button).data('idx')

            getRoomAvailability(group_room_availability, idx_room_availability)
        })

    })

	$('.form-control-select2-no-search').select2({
		minimumResultsForSearch: Infinity
	});

    // CUSTOM TOOLBAR DI RESERVATION NOTE
    $('.summernote').summernote({
        toolbar: [
            ['style', ['bold', 'italic', 'underline', 'clear']],
        ]
    });

    $('#checkout_pembayaran_nominal').on('input', function(){
        // $('#checkout_pembayaran_nominal').mask("#.##0", {reverse: true});//set separator number
        $('#checkout_pembayaran_nominal').mask("#,##0", {reverse: true});//set separator number
    })

    // $('#checkout_nominal_refund').on('input', function(){
    //     $('#checkout_nominal_refund').mask("#.##0", {reverse: true});//set separator number
    // })

    // all class format mask
    $('.format_mask').on('input', function(){
        $('.format_mask').mask("#.##0", {reverse: true});//set separator number
    })

    document.querySelector(".number_only").addEventListener("keypress", function (evt) {
        if (evt.which != 8 && evt.which != 0 && evt.which < 48 || evt.which > 57)
        {
            evt.preventDefault();
        }
    });


	//MULTIPLE DEPOSIT
	//Add Input
	let new_deposit_idx = {{count($deposits)}};
	function tambahDeposit(){
        if (new_deposit_idx == 0) {
            new_deposit_idx++;
        }
        console.log(new_deposit_idx)
		let html = `<div class="row mb-2" data-idx="${new_deposit_idx}" id="row_deposit_${new_deposit_idx}">
						<div class="col-md-2">
							<input type="hidden" name="deposit_id[${new_deposit_idx}]" value="0">
							<select name="jenis_deposit[${new_deposit_idx}]"
									id="jenis_deposit${new_deposit_idx}"
									class="form-control form-control-select2"
									onchange="setJenisDeposit(${new_deposit_idx})"
									required
							>
								<option value="">-- Pilih Jenis Deposit --</option>
                                @foreach(config('custom.jenis_deposit') as $key => $val)
                                    @if ($key == 3  || $key == 5)
                                        @continue
                                    @endif
                                    <option value="{{$key}}">{{$val}}</option>
                                @endforeach
							</select>
						</div>
                        <div class="col-md-3">
                            <select name="platform_pembayaran_id[${new_deposit_idx}]"
                                    id="platform_pembayaran_id${new_deposit_idx}"
                                    class="form-control form-control-select2 border-1 border-1 cekplatformdepo"
                                    required
                                    disabled
                            >
                                <option value="">** Select Deposit Platform **</option>
                            </select>
                        </div>
						<div class="col-md-2">
							<input type="text" name="nama_deposit[${new_deposit_idx}]" id="nama_deposit${new_deposit_idx}" class="form-control" onchange="chooseNama(${new_deposit_idx})" required disabled>
							<datalist id="datalistTransfer${new_deposit_idx}">
							{!! $transfers !!}
							</datalist>
							<input type="hidden" name="transfer_akunting_id[${new_deposit_idx}]" id="transfer_akunting_id${new_deposit_idx}">
						</div>
						<div class="col-md-2">
							<input type="text" name="voucher_deposit[${new_deposit_idx}]" id="voucher${new_deposit_idx}" class="form-control" disabled>
						</div>
						<div class="col-md-2">
							<input type="text"
								   name="nominal[${new_deposit_idx}]"
								   id="nominal${new_deposit_idx}" class="form-control format_mask" required disabled>
						</div>
						<div class="col-lg-1">
							<button type="button" onclick="removeDeposit(${new_deposit_idx})" class="btn btn-danger">
								<i class="fas fa-times-circle"></i>
							</button>
						</div>
					</div>`

        if (new_deposit_idx < 3) {
            $('#form_deposit').append(html);
            new_deposit_idx++;
            if (new_deposit_idx == 3) {
                $('#id_button_tambah_deposit').hide();
            }
        }else{
            $('#id_button_tambah_deposit').hide();
        }


		// new_deposit_idx++;
		// $('#form_deposit').append(html);

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

        // all class format mask
        $('.format_mask').on('input', function(){
            $('.format_mask').mask("#.##0", {reverse: true});//set separator number
        })
	}

     //Change Room
	function alertStatus(book_id, jenis_kamar, index_detail){

        $('#alert_status_book_id').val(book_id)

        $('#index_current_kamar').val(index_detail)

        $('#label_current_jeniskamar').html('Jenis Kamar : <b>' + jenis_kamar + '</b>');

        $.ajax({
            type: 'POST',
            url: "{{route('roomview.optionchoosekamar')}}",
            data: {
                _token      :'{{csrf_token()}}',
                id          : book_id,
                jenis_kamar : jenis_kamar,
                array_index : index_detail,
                hotel_id    : hotel_id_now
            },
            success: function (response) {
                $('#set_room_number_form').html('');

                // console.log(response);

                // return false;

                let html_jenis_kamar = "";
                let html_ratecode = "";
                let html_no_kamar = "";

                if(response.booking_details.length > 0){
                    $.each(response.booking_details, function(index, value){
                        if (value.array_sub === 0 || value.array_sub_extend_stay === 0) {
                            if (value.extend_stay === 0){
                                return;
                            }

                            let html_options = '';
                            let option = "";

                            if (response.options[value.jns_kamar]) {
                                html_options += `<option value="">-- Please Choose Room Number --</option>`;

                                $.each(response.options[value.jns_kamar], function(index2, value2){
                                    option += `<option value="${value2.id}">${value2.no_kamar}</option>`
                                })

                                html_options += `${option}`;
                            }else{
                                html_options = `<option value="">-- No Room Available --</option>`;
                            }

                            html_jenis_kamar += `<input type="text" class="form-control mb-2" value="${value.jns_kamar}" disabled>`;
                            html_ratecode += `<input type="text" class="form-control mb-2" value="${value.rate_codes}" disabled>`;
                            html_no_kamar += `
                                <div class="mb-2">
                                    <input type="hidden" name="array_index[]" value="${value.array_index}" />
                                    <select name="id_kamar[]" id="id_kamar_${index}" onchange="checkNomor(this.id)" class="nomor_kamar_${index} nomor_kamars alert_status_number_select form-control form-control-select2 room-number-checkin">
                                        ${html_options}
                                    </select>
                                </div>
                            `;
                        }
                    })
                }

                let html_set_kamar = `
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="jenis_kamar" class="font-weight-bold">Room Type</label>
                                ${html_jenis_kamar}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="rate_code" class="font-weight-bold">Rate Code</label>
                                ${html_ratecode}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group font-weight-bold">
                                <label for="rate_code" class="font-weight-bold">Room Number</label>
                                ${html_no_kamar}
                            </div>
                        </div>
                    </div>
                `;
                console.log('ini set kmar', html_set_kamar)
                $('#set_room_number_form').html(html_set_kamar);
                $('.form-control-select2').select2();
                // $('.alert_status_number_select').html(html);

            }
        });
    }

    // function for check all set room before submit group checkin
        function checkSetAllRoom(from){

            let all_nomors = []

            // to fill array container room number
            // if (from == 2) {
            //     all_nomors = $('.room-number-group-checkin')
            // }else{
                all_nomors = $('.room-number-checkin')
            // }

            let success = true

            $.each(all_nomors, function(key, val){
                if (!$(val).val()) {
                    success = false
                    return
                }
            });

            if (!success) {
                callModalAlert("Please make sure all the room number is not empty.");
            }else{
                // if (from == 2) {
                //     let booking_detail_id = $('#booking_detail_id_checkin').val()
                //     let code = $('#code_group_checkin').val()
                //     let group_name = $('#group_checkin_group_name').val()

                //     checkStatusRoom(booking_detail_id, code, group_name)
                // }else{
                    $('#set_room_number').submit()
                // }
            }
        }
    // function for check all set room when group checkin

	//Remove Input
	function removeDeposit(id){
        if (new_deposit_idx > 1 ) {
            $('#row_deposit_'+id).remove();
            new_deposit_idx--;

            $('#id_button_tambah_deposit').show();
        }
		// $('#row_deposit_'+id).remove();
	}

    //Set Jenis Deposit
    let plat_pembayaran = {!! json_encode($platforms) !!}
    function setJenisDeposit(id){
        console.log(id);
        let jenis_deposit = $('#jenis_deposit'+id).val();
        //1: Cash; 2: Credit Card; 3: Transfer; 4: Diigtal;

        //Platform Pembayaran
        let option_pembayaran = `<option value="">** Select Payment Platform **</option>"`;

        //Reset Form Platform Pembayaran
        $('#platform_pembayaran_id').select2().val('').trigger('change');

        //Reset Form
        $('#row_deposit_'+id).find('input').val('');

        //Kartu dan Digital
        if(['2','4'].includes(jenis_deposit)){
            $('#platform_pembayaran_id'+id).removeAttr('disabled');
            $('#nama_deposit'+id).attr('disabled', 'disabled');
            $('#nama_deposit'+id).removeAttr('required');

            $('#nominal'+id).removeAttr('disabled').removeAttr('readonly');
            $('#voucher'+id).removeAttr('disabled');
            $.each(plat_pembayaran[jenis_deposit], function(key, platform){
                option_pembayaran += `<option value="${platform.id}">${platform.nama}</option>`
            });
            $('#platform_pembayaran_id'+id).html(option_pembayaran);
            $('#platform_pembayaran_id'+id).attr('required', 'required');
        }
        //Transfer
        else if(['3'].includes(jenis_deposit)){
            $('#platform_pembayaran_id'+id).attr('disabled', 'disabled')
            $('#platform_pembayaran_id'+id).removeAttr('required');

            $('#nama_deposit'+id).removeAttr('disabled');
            // $('#nama_deposit'+id).attr('disabled', 'disabled');

            // $('#nominal'+id).attr('disabled', 'disabled');
            $('#nominal'+id).removeAttr('disabled').attr('readonly', true);
        }
        //Cash
        else if (['1'].includes(jenis_deposit)) {
            $('#platform_pembayaran_id'+id).attr('disabled', 'disabled');
            $('#nama_deposit'+id).attr('disabled', 'disabled');
            $('#nominal'+id).removeAttr('disabled').removeAttr('readonly');;
            $('#voucher'+id).removeAttr('disabled');
            $('#nama_deposit'+id).removeAttr('required');
            $('#platform_pembayaran_id'+id).removeAttr('required');
        }
        //not pick anything
        else{
            $('#platform_pembayaran_id'+id).attr('disabled', 'disabled');
            $('#nama_deposit'+id).attr('disabled', 'disabled');
            $('#nominal'+id).val('').attr('disabled', true).removeAttr('readonly');
            $('#voucher'+id).val('').attr('disabled', true);
            $('#nama_deposit'+id).removeAttr('required');
            $('#platform_pembayaran_id'+id).removeAttr('required');
        }

    }

	//Pilih Nama Transfer
	function chooseNama(id){
		let nama_transfer = $('#nama_deposit'+id).val();
		let data_transfer = $('#datalistTransfer'+id).find('option[value="'+nama_transfer+'"]').attr('data-transfer');
		data_transfer = JSON.parse(data_transfer);

		if(data_transfer){
			//Set value nama transfer
			$('#nama_deposit'+id).val(data_transfer.nama);
			//Set Transfer Akunting ID
			$('#transfer_akunting_id'+id).val(data_transfer.id);
			//Set Bank
			$('#bank'+id).val(data_transfer.bank);
			//Set Nomninal Transfer
			$('#nominal'+id).val(data_transfer.nominal);
		}
	}

		function tambahFile(){
		var ids = $('#jumlahfile').val()
			ids = parseInt(ids)+1;
			console.log($('#jumlahfile').val())
			let html = `<div class="form-group row" id="rowfile_${ids}">

									<div class="col-lg-2">
										&nbsp;
									</div>

									<div class="col-lg-6">
										<input class="form-control" id="files${ids}" name="files[]" type="file">
									</div>

									<div class="col-lg-2 text-left">
										<button type="button" onclick="deleteFile(${ids})" class="btn btn-danger">
											<i class="fas fa-times-circle"></i>
										</button>
									</div>
								</div>`

			$('#formfile').append(html);
			$('#jumlahfile').val(ids)
		}

		function deleteFile(ids){
			$('#rowfile_'+ids).remove();

			var idx = $('#jumlahfile').val()
			idmin = parseInt(idx)-1

			$('#jumlahfile').val(idmin)
			console.log($('#jumlahfile').val())
		}

		function deletebookfile(id) {
			console.log(id)
			if (confirm('Are you sure you want to delete this?')) {
				$.ajax({
					// type: 'GET',
					url: "{{ url('/deletebookfile/')}}/"+id,
					success: function (data) {
						if( data.status === true ) {
							new PNotify({
								title: 'Success',
								text: 'Data Deleted',
								icon: 'icon-checkmark3',
								type: 'success'
							});
							$('#file_'+id).remove()
						}
						else {
							new PNotify({
								title: 'Error',
								text: 'Something wrong, please try again.',
								icon: 'icon-blocked',
								type: 'error'
							});
						}
						console.log(data)
					}
				});
			}

		}

		$(document).ready(function () {

            $.each(data_booking_details, function(key_data_booking_detail, data_booking_detail){
                let block_checkdisabled = ''
                let block_checkreadonly = ''
                let checkin_disabled = ''
                let checkin_readonly = ''

                if (data_booking_detail.date_now >= "{{getSystemDate()}}") {
                    if (data_booking_detail.block_kamar == 1) {
                        block_checkdisabled = 'disabled';
                        block_checkreadonly = 'readonly';
                    } else {
                        block_checkdisabled = '';
                        block_checkreadonly = '';
                    }
                } else {
                    block_checkdisabled = 'disabled';
                    block_checkreadonly = 'readonly';
                }

                if (data_booking_detail.status_booking == 1) {
                    checkin_disabled = 'disabled';
                    checkin_readonly = 'readonly';
                }else{
                    checkin_disabled = '';
                    checkin_readonly = '';
                }

                // Button class options
                // $('#inpDatePicker'+key_data_booking_detail+'_0').daterangepicker({
                $('#inpDatePicker'+index_bd[key_data_booking_detail]+'_0').daterangepicker({
                    applyClass: 'btn-success',
                    cancelClass: 'btn-danger',
                    minDate: block_checkdisabled == '' ? (checkin_disabled == '' ? "{{ date('d-m-Y', strtotime(getSystemDate())) }}" : false) : false,
                    locale: {
                        format: 'DD-MM-YYYY'
                    }
                });
            })

            // $('.daterange-buttons').daterangepicker({
			// 	applyClass: 'btn-success',
			// 	cancelClass: 'btn-danger',
            //     minDate: check_disabled == '' ? "{{ date('d-m-Y', strtotime(getSystemDate())) }}" : false,
			// 	locale: {
			// 		format: 'DD-MM-YYYY'
			// 	}
			// });

			// $('#submit').click(function(){
			// 	let input = $('#update_booking').find(':input').not(':input[type=submit],:hidden')
			// 	console.log(input, 'halo input')
			// 	if(input.length > 0){
            //         console.log('yo guys berhasil')
			// 		$("#submit").attr("disabled", true);
			// 		$('#update_booking').submit()
			// 	}
			// })

            $('#email').on('change', function(e) {
                $(".submit").attr("disabled", false);
            })

            $('.submit').click(function(e){
				// let input = $('#submituser').find(':input').not(':input[type=submit],:hidden')
				// console.log(input)
				// if(input.val()){
				// 	$(".submit").attr("disabled", true);
				// 	$('#submituser').submit()
				// }

				let input = $('#update_booking').find(':input[required]:visible').not(':input[type=submit],:hidden')
				// console.log(input.length, 'halo input')
				var jumlah_input_req = input.length;
				var input_keisi = 0;

				input.each(function() {
					if(this.value == "") {

                        if ($(this).hasClass('ceknominaldepo')) {

                            //Conflict Faishal Start
                            //var jenis_deposit0 = $('#jenis_deposit0').val()

                            // console.log(jenis_deposit0)
                            // jika jenis deposit[0] tidak diisi, hitung nominal deposit sebagai terisi
                            //if (jenis_deposit0 == '') {
                            //Conflic Faishal End

                            var jenis_deposit = $('#jenis_deposit'+$(this).data('idx')).val()

                            // console.log(jenis_deposit)
                            // jika jenis deposit tidak diisi, hitung nominal deposit sebagai terisi
                            if (jenis_deposit == '') {
                                input_keisi += 1;
                            }else{
                                scrollToInvalid(this.id)//scroll to input form
                                // new PNotify({
                                //     title: 'Error',
                                //     text: 'Data is incomplete, please check all field first before submitting.',
                                //     icon: 'icon-blocked',
                                //     type: 'error'
                                // });

                                return false;
                                e.preventDefault()
                            }
                        }else if($(this).hasClass('cekplatformdepo')){
                            input_keisi += 1;
                        }
                        else if($(this).hasClass('cekjumlahmalam')){
                            input_keisi += 1;
                        }
                         else {
                            scrollToInvalid(this.id)//scroll to input form
                            // alert("You must fill in all items on the form");
                            // new PNotify({
                            //     title: 'Error',
                            //     text: 'Data is incomplete, please check all field first before submitting.',
                            //     icon: 'icon-blocked',
                            //     type: 'error'
                            // });

                            return false;
                            e.preventDefault()
                        }

					} else {
						input_keisi += 1;
					}
				})

				console.log(jumlah_input_req, input_keisi)
				if (jumlah_input_req == input_keisi) {
                        console.log('masuk')
						// return false;
						// e.preventDefault()
					$(".submit").attr("disabled", true);
					$('#update_booking').submit()

                    // console.log($('.update-booking').submit(), 'ini syubmit')
				} else {
                    new PNotify({
                        title: 'Error',
                        text: 'Data is incomplete, please check all field first before submitting.',
                        icon: 'icon-blocked',
                        type: 'error'
                    });
                    return false;
					e.preventDefault()
                }
			})

            // ambil data ppn services global
            $.ajax({
                type: "get",
                url: "{{url('get-global-prices')}}",
                dataType: "json",
                success: function (response) {
                    tax_percent_global         = response.tax;
                    services_percent_global    = response.services;
                }
            });

		});

		// //pilih Hotel
		// $(document).on("change", "#hotel_id", function () {
		// 	$('[name="jns_kamar[]"]').html('<option data-id="" data-harga="" data-kapasitas="" value="">-- Pilih Jenis Kamar --</option>');
		// 	$('[name="nomor_kamar[]"]').html('<option value="">-- Pilih Nomor Kamar --</option>');
		// 	var id = $(this).find(':selected').val();
		// 	var startdate = $('#start_date').val();
        //     selectJenisKamar(id, startdate);
		// 	autocompleteNama(id);
		// });
		//
		// /*Auto complete Nama*/
		// //Get Option
		// function autocompleteNama(id){
		// 	$.ajax({
		// 		type: 'GET',
		// 		url: "{{ url('/autocomplete-nama/')}}/"+id,
		// 		success: function (data) {
		// 			$('#datalistOptions').html(data);
		// 		}
		// 	});
		// }

		//Assign Value
		$('#nama').on('change', function(event){
			let data_text = $('#datalistOptions').find('option[value="'+$(this).val()+'"]')
										    .attr('data');
			let data_json = JSON.parse(data_text);
			// console.log(data_json)
			$('.form-check-input-styled').uniform();

            // reset total malam guest history booking
            $('.total_malam').text(0)

			//Clear Form
			$('#nama').val('');
			$('#alamat').val('');
			$('#negara').val('');
			$('#propinsi').val('');
			$('#kota').val('');
			$('[name="jns_identitas"]').select2().val('').trigger('change');
            $('#title').val('').trigger('change');
			$('#no_identitas').val('');
			$('#kewarganegaraan').val('');
			$('[name="jns_kelamin"]').prop('checked', false).uniform();
			$('[value="Laki-laki"]').prop('checked', true)
									.uniform();

			$('#email').val('');
			$('#telp').val('');
			$('#telp2').val('');
			$('#fax').val('');
			$('#plat_nomor').val('');
			$('#remark').val('');
			$('#show_remark').html('');

			//Assign Value
            $('#nama').val(data_json.name);
            $('#alamat').val(data_json.address);
            $('#negara').val(data_json.country);
            $('#propinsi').val(data_json.province);
            $('#kota').val(data_json.city);
            $('[name="jns_identitas"]').select2().val(data_json.id_cardtype).trigger('change');
            $('#title').val(data_json.title).trigger('change');
            $('#no_identitas').val(data_json.id_cardno);
            $('#kewarganegaraan').val(data_json.nation);

			$('[name="jns_kelamin"]').prop('checked', false).uniform();

			// $('[value="'+data_json.sex+'"]').prop('checked', true)
			// 							 				.uniform();

            if (data_json.sex == 1) {
                $('#male').prop('checked', true).uniform();
            }else if(data_json.sex == 2){
                $('#female').prop('checked', true).uniform();
            }

            $('#email').val(data_json.email);
            $('#telp2').val(data_json.phone);
            $('#telp').val(data_json.mobile);
            $('#fax').val(data_json.telefax);
            $('#plat_nomor').val(data_json.plat_nomor);

			if (data_json.remark == null || data_json.remark == undefined){
                $('#remark').val('-');
            }
            else if (data_json.remark != ""){
                if(data_json.hotel_id == hotel_id){
                    $('#remark').val(data_json.remark);
                }
                else{
                    $('#remark').val('-');
                }
            }


			//Remark
            if (data_json.remark == null || data_json.remark == undefined){
                $('#show_remark').html('*Guest Remark: -');
            }
            else if (data_json.remark != ""){
                if(data_json.hotel_id == hotel_id){
                    $('#show_remark').html('*Guest Remark: '+data_json.remark);
                }
                else{
                    $('#show_remark').html('*Guest Remark: -');
                }
            }

            guestHistoryBooking(data_json.id);
		});

        function guestHistoryBooking(booking_id) {
            // Guest History Booking
            $.ajax({
                type: 'GET',
                url: "{{ url('/guest-history-booking')}}/"+booking_id,
                success: function (results) {
                    console.log(booking_id, 'ini resuls')
                    $('.datatable-basic').DataTable().destroy();

                    if (results.guest_profile) {
                        $('.guest_name').text(results.guest_profile.name)
                    }

                    let html_guest_history_booking = ''

                    if (results.booking_details.length > 0) {
                        let no = 1
                        let sort_no = 1
                        let total_malam = 0

                        $.each(results.booking_details, function(key, booking_detail){
                            let refunds = []
                            let checkin = ''
                            let checkout = ''
                            let booking = booking_detail.booking
                            let invoice_array = results.invoice_array

                            console.log(booking_detail)
                            // console.log(invoice_array[booking.id][booking_detail.nomor_kamar])

                            let invoice = booking_detail.nomor_kamar != null ? invoice_array[booking.id][booking_detail.nomor_kamar] : invoice_array[booking.id][""][booking_detail.room_index]

                            if (booking_detail.start_date_old && booking_detail.end_date_old) {
                                checkin += moment(booking_detail.start_date_old, "YYYY-MM-DD").format('YYYY-MM-DD');
                                checkout += moment(booking_detail.end_date_old, "YYYY-MM-DD").format('YYYY-MM-DD');

                                total_malam += booking_detail.jumlah_malam_old
                            } else {
                                checkin += moment(booking_detail.start_date, "YYYY-MM-DD").format('YYYY-MM-DD');
                                checkout += moment(booking_detail.end_date, "YYYY-MM-DD").format('YYYY-MM-DD');

                                total_malam += booking_detail.jumlah_malam
                            }

                            html_guest_history_booking += `<tr>
                                                                <td class="d-none">${sort_no}</td>
                                                                <td class="d-none">${booking.kode_booking}</td>
                                                                <td class="d-none">${checkin} - ${checkout}</td>
                                                                <td class="d-none">
                                                                    ${invoice ? invoice.no_invoice : ''}
                                                                </td>

                                                                <td>${no}</td>
                                                                <td colspan="6">
                                                                    Reservation Number: ${booking.kode_booking}<span style="font-weight:bold;"> (No. Bill: <a href="{{url('invoice-draft/${invoice ? invoice.id : null}')}}" target="_blank">${invoice ? invoice.no_invoice : ''}</a>)</span> | <span class="text-success"><i class="icon-enter2"></i>&nbsp;${moment(checkin, "YYYY-MM-DD").format('DD-MM-YYYY')}</span> - <span class="text-danger"><i class="icon-exit2"></i>&nbsp;${moment(checkout, "YYYY-MM-DD").format('DD-MM-YYYY')}</span>
                                                                </td>
                                                                <td class="d-none"></td>
                                                                <td class="d-none"></td>
                                                                <td class="d-none"></td>
                                                                <td class="d-none"></td>
                                                                <td class="d-none"></td>
                                                            </tr>`

                            // Invoice Detail
                            if (invoice?.invoicedetail.length > 0) {
                                $.each(invoice.invoicedetail, function(key, invoice_detail){
                                    html_guest_history_booking += `<tr>
                                                                        <td class="d-none">${sort_no}</td>
                                                                        <td class="d-none">${booking.kode_booking}</td>
                                                                        <td class="d-none">${moment(invoice_detail.date).format('YYYY-MM-DD')}</td>
                                                                        <td class="d-none">${invoice ? invoice.no_invoice : ''}</td>

                                                                        <td></td>
                                                                        <td>${moment(invoice_detail.date).format('DD-MM-YYYY')}</td>
                                                                        <td>No. ${invoice_detail.room_no}</td>
                                                                        <td>${invoice_detail.qty ?? ''}</td>
                                                                        <td>${invoice_detail.description}</td>
                                                                        <td class="text-right">${invoice_detail?.harga_satuan ? ribuanWithComma(invoice_detail?.harga_satuan) : ''}</td>
                                                                        <td class="text-right">${invoice_detail.booking_deposit_id ? '(-)' : ''}${ribuanWithComma(invoice_detail?.total ?? 0)}</td>
                                                                    </tr>`
                                })

                                sort_no++
                            }

                            // Pembayaran
                            if (booking.pembayaran.length > 0) {
                                $.each(booking.pembayaran, function(key, pembayaran){
                                    if (pembayaran.tipe_pembayaran == 1) {
                                        html_guest_history_booking += `<tr>
                                                                            <td class="d-none">${sort_no}</td>
                                                                            <td class="d-none">${booking.kode_booking}</td>
                                                                            <td class="d-none">${moment(pembayaran.transaction_date).format('YYYY-MM-DD')}</td>
                                                                            <td class="d-none">${invoice ? invoice.no_invoice : ''}</td>

                                                                            <td></td>
                                                                            <td>${moment(pembayaran.transaction_date).format('DD-MM-YYYY')}</td>
                                                                            <td>No. ${booking_detail.nomor_kamar ?? ''}</td>
                                                                            <td></td>
                                                                            <td>Payment ${jenis_pembayaran[pembayaran.jenis_pembayaran_id]} ${pembayaran.bank ?? ''} A.N. ${booking.nama}</td>
                                                                            <td></td>
                                                                            <td class="text-right">(-)${ribuanWithComma(pembayaran?.nominal)}</td>
                                                                        </tr>`
                                    }else{
                                        refunds.push(pembayaran)
                                    }
                                })

                                sort_no++
                            }

                            // Deposit
                            if (booking.deposits.length > 0) {
                                $.each(booking.deposits, function(key, deposit){
                                    html_guest_history_booking += `<tr class="${deposit.jenis_transaksi == 1 ? '' : 'text-danger' }">
                                                                        <td class="d-none">${sort_no}</td>
                                                                        <td class="d-none">${booking.kode_booking}</td>
                                                                        <td class="d-none">${moment(deposit.transaction_date).format('YYYY-MM-DD')}</td>
                                                                        <td class="d-none">${invoice ? invoice.no_invoice : ''}</td>

                                                                        <td></td>
                                                                        <td>${moment(deposit.transaction_date).format('DD-MM-YYYY')}</td>
                                                                        <td>No. ${booking_detail.nomor_kamar ?? ''}</td>
                                                                        <td></td>
                                                                        <td>${deposit.jenis_deposit != 5 ? 'Payment' : ''} ${jenis_deposit_text[deposit.jenis_deposit]} ${deposit.bank ?? ''} A.N. ${deposit.nama}</td>
                                                                        <td></td>
                                                                        <td class="text-right">${deposit.jenis_transaksi == 1 ? '(-)' : '' }${ribuanWithComma(deposit?.nominal)}</td>
                                                                    </tr>`
                                })

                                sort_no++
                            }

                            // Shop Transaction
                            if (invoice?.old_shop_transaction.length > 0) {
                                $.each(invoice.old_shop_transaction, function(key, shop_transaction){
                                    let harga_satuan = shop_transaction.grand_total / shop_transaction.jumlah

                                    html_guest_history_booking += `<tr class="${shop_transaction.jenis_transaksi == 1 ? '' : 'text-danger' }">
                                                                        <td class="d-none">${sort_no}</td>
                                                                        <td class="d-none">${booking.kode_booking}</td>
                                                                        <td class="d-none">${moment(shop_transaction.transaction_date).format('YYYY-MM-DD')}</td>
                                                                        <td class="d-none">${invoice ? invoice.no_invoice : ''}</td>

                                                                        <td></td>
                                                                        <td>${moment(shop_transaction.transaction_date).format('DD-MM-YYYY')}</td>
                                                                        <td>No. ${invoice.nomor_kamar}</td>
                                                                        <td>${shop_transaction.jumlah}</td>
                                                                        <td>${shop_transaction.menu ? shop_transaction.menu.nama : shop_transaction.keterangan_custom}</td>
                                                                        <td class="text-right">${ribuanWithComma(harga_satuan)}</td>
                                                                        <td class="text-right">${shop_transaction.jenis_transaksi == 0 ? '(-)' : '' }${ribuanWithComma(shop_transaction?.grand_total)}</td>
                                                                    </tr>`
                                })

                                sort_no++
                            }

                            // Transaksi POS hanya total bill
                            if (booking.pembayaran_pos.length > 0) {
                                $.each(booking.pembayaran_pos, function(key, pembayaran_pos){
                                    html_guest_history_booking += `<tr class="${pembayaran_pos.jenis_transaksi == 1 ? '' : 'text-danger' }">
                                                                        <td class="d-none">${sort_no}</td>
                                                                        <td class="d-none">${booking.kode_booking}</td>
                                                                        <td class="d-none">${moment(pembayaran_pos.transaction_date).format('YYYY-MM-DD')}</td>
                                                                        <td class="d-none">${invoice ? invoice.no_invoice : ''}</td>

                                                                        <td></td>
                                                                        <td>${moment(pembayaran_pos.transaction_date).format('DD-MM-YYYY')}</td>
                                                                        <td>No. ${booking_detail.nomor_kamar ?? ''}</td>
                                                                        <td></td>
                                                                        <td>Outlet Bill${pembayaran_pos?.cart ? ': '+pembayaran_pos?.cart?.order_flag : ''}</td>
                                                                        <td class="text-right">${ribuanWithComma(pembayaran_pos?.nominal)}</td>
                                                                        <td class="text-right">${pembayaran_pos.jenis_transaksi == 0 ? '(-)' : '' }${ribuanWithComma(pembayaran_pos?.nominal)}</td>
                                                                    </tr>`
                                })

                                sort_no++
                            }

                            // refunds
                            if (refunds.length > 0) {
                                $.each(refunds, function(key, refund){
                                    html_guest_history_booking += `<tr>
                                                                        <td class="d-none">${sort_no}</td>
                                                                        <td class="d-none">${booking.kode_booking}</td>
                                                                        <td class="d-none">${moment(refund.transaction_date).format('YYYY-MM-DD')}</td>
                                                                        <td class="d-none">${invoice ? invoice.no_invoice : ''}</td>

                                                                        <td></td>
                                                                        <td>${moment(refund.transaction_date).format('DD-MM-YYYY')}</td>
                                                                        <td>No. ${booking_detail.nomor_kamar ?? ''}</td>
                                                                        <td></td>
                                                                        <td>Refund ${jenis_pembayaran[refund.jenis_pembayaran_id]} ${refund.bank ?? ''} A.N. ${booking.nama}</td>
                                                                        <td></td>
                                                                        <td class="text-right">${ribuanWithComma(refund?.nominal)}</td>
                                                                    </tr>`
                                })

                                sort_no++
                            }

                            no++;
                            sort_no++
                        })

                        $('.total_malam').text(total_malam)
                    }

                    $('#tbody_guest_history_booking').html(html_guest_history_booking)

                    $('.datatable-basic').DataTable().draw();
                }
            });
        }

		//Tampil Option Provinsi Ketika Negara Diubah
		$('#negara').on('change', function(){
			let val_negara = $(this).val();
			let data_id = $('#negaraList').find('option[value="'+val_negara+'"]')
										  .attr('data-id');
			getProvinceOptions(data_id);
			$('#propinsi').val('');
			$('#kota').val('');
		});

		//Tampil Option Kota Ketika Provinsi Diubah
		$('#propinsi').on('change', function(){
			let val_provinsi = $(this).val();
			let data_id = $('#provinceList').find('option[value="'+val_provinsi+'"]')
										  	.attr('data-id');
			getCityOptions(data_id);
			$('#kota').val('');
		});

        // Insert Jenis Kelamin by MR/MRS
        $('#title').on('change', function() {
            let val = this.value
            if(['Mr', 'Bapak'].includes(val)){
                $('#female').prop('checked', false).uniform();
                $('#male').prop('checked', true).uniform();
            }else if(['Mrs', 'Ms', 'Ibu'].includes(val)){
                $('#male').prop('checked', false).uniform();
                $('#female').prop('checked', true).uniform();
            }
        })

		//Menampilkan OPtion Provinsi Sesuai Negara
		function getProvinceOptions(country_id){
			$.ajax({
				type: 'GET',
				url: "{{ url('/get-province/')}}/"+country_id,
				success: function (data) {
					$('#provinceList').html(data);
				}
			});
		}

		//Menampilkan OPtion Provinsi Sesuai dengan kota
		function getCityOptions(province_id){
			$.ajax({
				type: 'GET',
				url: "{{ url('/get-city/')}}/"+province_id,
				success: function (data) {
					$('#cityList').html(data);
				}
			});
		}

		//Index element
        let arrays_kamarss = [];
		@if(count($booking->bookingDetails) > 0)
		// let new_idx = {{count($booking->bookingDetails)}};
		let new_idx = parseInt($('#count_booking_detail').val())+1;
		let multiple_room = parseInt($('#count_booking_detail').val())+1;

        // to fill container array room number
        let arr_kamars = {!! json_encode($booking->bookingDetails) !!}
        $.each(arr_kamars, function (in_arr, val_arr) {
            if (val_arr.nomor_kamar) {
                if (!arrays_kamarss.hasOwnProperty(in_arr)) {
                    arrays_kamarss[in_arr] = []
                }

                arrays_kamarss[in_arr]['nomor_kamar'] = val_arr.nomor_kamar
                arrays_kamarss[in_arr]['checkin'] = val_arr.start_date
                arrays_kamarss[in_arr]['checkout'] = val_arr.end_date
            }
        });

        console.log('new idx ='+new_idx, 'array kamar '+arrays_kamarss)
		// console.log('bookdetail', new_idx)
		@else
		let new_idx = 1;
		let multiple_room = 1;
		// console.log('default')
		@endif

        applyDateRangePicker('daterange-buttons')

        function applyDateRangePicker(element) {
            // Trigger Ketika Ganti Tanggal Checkin / Checkout
            $('.'+element).on('apply.daterangepicker', (e, picker) => {
                var idx_element = $('#'+picker.element[0].id).data('group');

                //Hotel ID
                let hotel_id = $("#hotel_id").val();

                //Menghitung jumlah malam, total biaya, dan ketersediaan kamar
                // var range = $('#inpDatePicker').data('daterangepicker');
                if(picker){
                    var checkin = picker.startDate;
                    var checkout = picker.endDate;

                    var diff = checkout.diff(checkin, 'days')
                    $('#jml_malam'+idx_element+'_0').val(diff);


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

                    var id = $("#hotel_id").find(':selected').val();
                    var startdate = $('#start_date').val();

                    $('#start_date'+idx_element+'_0').val(checkin.format('YYYY-MM-DD')); // hidden input checkin
                    $('#end_date'+idx_element+'_0').val(checkout.format('YYYY-MM-DD')); // hidden input checkout

                    //Booking ID
                    let booking_id = $('#booking_id').val();

                    //Jenis Kamar
                    let elemen_jenis_kamar = $('[name*="jns_kamar["]');

                    // reset arrangement code
                    if (document.getElementById('arrangement_list_'+idx_element)) {
                        $('#arrangement_list_'+idx_element).html('')
                    }else{
                        let list =`<tbody id="arrangement_list_${idx_element}" class="table_arrs" style="display:none;">
                                    </tbody>`

                        $('#table_arrangement_list').append(list);
                    }

                    //Get ID Jenis Kamar
                    // $.each(elemen_jenis_kamar, function(key, val){
                    //     let id_elemen_jenis_kamar = $(val).attr('id');
                    //     let group = $(val).attr('data-group');
                    //     let idx = $(val).attr('data-idx');
                    //     let value_jenis_kamar = $(val).val();

                    //     let id_jenis_kamar = $(this).find('option[value="'+value_jenis_kamar+'"]').attr('data-id');
                    //     selectNomorKamar('#nomor_kamar'+key, hotel_id, id_jenis_kamar, checkin, checkout);
                    //     if (idx == 0) {
                    //         addArrangement(group, '', 0);
                    //     }
                    //     getPrice(idx, group, 0);
                    // });
                    let id_elemen_jenis_kamar = $('#jns_kamar'+idx_element+'_0').attr('id');
                    let group = $('#jns_kamar'+idx_element+'_0').attr('data-group');
                    let idx = $('#jns_kamar'+idx_element+'_0').attr('data-idx');
                    let value_jenis_kamar = $('#jns_kamar'+idx_element+'_0').val();

                    let id_jenis_kamar = $('#jns_kamar'+idx_element+'_0').find('option[value="'+value_jenis_kamar+'"]').attr('data-id');
                    selectNomorKamar('#nomor_kamar'+group+'_'+idx, hotel_id, id_jenis_kamar, checkin, checkout, group);

                    if (idx == 0) {
                        addArrangement(group, '', 0);
                    }
                    getPrice(idx, group, 0);

                    freeCompliment();

                    // Reset Pilihan kamar hotel
                    let jenis_kamar_html = `
                                    <select name="jns_kamar[${idx_element}]"
                                            id="jns_kamar${idx_element}_0"
                                            data-group="${idx_element}"
                                            data-idx="0"
                                            onchange="getKamar(this.id), removeColorValidation(this.id)"
                                            class="form-control form-control-select2-red"
                                            required
                                    >
                                        <option data-id=""
                                                data-diskon=""
                                                data-kapasitas=""
                                                value="">-- Select Room Type --</option>
                                        @if(array_key_exists($idx, $jenis_kamars))
                                            @foreach($jenis_kamars[$idx] as $jenis_kamar)
                                                @php
                                                $diskon_kamar = count($jenis_kamar->discount) > 0 ? $jenis_kamar->discount[0]->diskon : 0;
                                                @endphp
                                            <option data-id="{{$jenis_kamar->id}}"
                                                    data-diskon="{{$diskon_kamar}}"
                                                    data-kapasitas="{{$jenis_kamar->kapasitas}}"
                                                    value="{{$jenis_kamar->nama}}" --}}
                                            >
                                            {{$jenis_kamar->nama.' ('.$jenis_kamar->kapasitas.' Orang)'}}
                                            </option>
                                            @endforeach
                                        @endif
                                    </select>
                                    <input type="hidden" name="diskon[${idx_element}]" id="diskon${idx_element}_0" value="">
                                    <input type="hidden" name="disctype[${idx_element}]" id="disctype${idx_element}_0" value="">
                                    <input type="hidden" name="jenis_kamar_id[${idx_element}]" id="jenis_kamar_id${idx_element}_0" value="">
                                    `

                    let nomor_kamar_html = `
                                            <select name="nomor_kamar[${idx_element}]"
                                                    id="nomor_kamar${idx_element}_0"
                                                    data-group="${idx_element}"
                                                    data-idx="0"
                                                    class="form-control form-control-select2-red nomor_kamar_${idx_element} nomor_kamars"
                                                    onchange="checkNomor(this.id)"
                                            >
                                                <option value="">-- Pilih Nomor Kamar --</option>
                                            </select>

                                            <input type="hidden"
                                                    id="jml_kamar${idx_element}_0"
                                                    name="jml_kamar[${idx_element}]"
                                                    class="form-control"
                                                    min="1"
                                                    value="1"
                                            >
                                        `

                    let arrangement_code_html = `
                                                    <button type="button" id="open_arr_dialog${idx_element}" onclick="openArrangementDialog(${idx_element}, 0)" class="btn btn-primary">
                                                        <i class="fas fa-calendar-check"></i>
                                                        <span class=""></span>
                                                    </button>

                                                    <div id="hidden_arrangement_code_container${idx_element}">
                                                    </div>
                                                `

                    let harga_html =  `
                                        <input type="text"
                                            id="per_item${idx_element}" class="form-control"
                                            placeholder="Harga"  style="border-color: red"  disabled readonly>
                                        <span class="text-danger" id="ket_diskon${idx_element}">
                                        </span>
                                        `

                    let block_kamar_html = `
                                            <input class="rcheckbox" type="checkbox" id="block_kamar${idx_element}" name="block_kamar[${idx_element}]">
                                            `

                    $('#jns_kamar'+idx_element+'_0').attr('disabled', false);
                    $('.wrap-jns_kamar'+idx_element).html(jenis_kamar_html);
                    $('.wrap-nomor-kamar'+idx_element).html(nomor_kamar_html);
                    $('#rate_code'+idx_element+'_0').select2().val('').trigger('change');
                    $('#rate_code'+idx_element+'_0').attr('disabled', false);
                    $('.wrap-arrangement-code'+idx_element).html(arrangement_code_html);
                    $('.wrap-harga'+idx_element).html(harga_html);
                    $('.wrap-block-kamar'+idx_element).html(block_kamar_html);
                    $('#btnremovekamar'+idx_element+'_0').attr('disabled', false);
                    $('#jns_kamar'+idx_element+'_0').select2()
                }
            });
        }

        // Function untuk hitung range tanggal jika ganti jml malam
        let system_date = {!! json_encode(getSystemDate()) !!}; // ambil function php getsystemdate
        function changeJml_Kamar(jml, idx_element){

            //Hotel ID
			let hotel_id = $("#hotel_id").val();

            //Menghitung jumlah malam, total biaya, dan ketersediaan kamar
                if(jml){
                    var checkin     = moment(system_date, "YYYY-MM-DD").format("YYYY-MM-DD") // tanggal awal dari datesystem
                    var checkout    = moment(system_date, "YYYY-MM-DD").add(jml, 'days').format("YYYY-MM-DD") //end date dari jml malam tambah tanggal awal

                    // console.log(checkin, checkout)

                    $('#start_date'+idx_element+'_0').val(checkin); // hidden input checkin
                    $('#end_date'+idx_element+'_0').val(checkout); // hidden input checkout

                    //change the selected date range of that picker
                    $('#inpDatePicker'+idx_element+'_0').data('daterangepicker').setStartDate(moment(checkin).format('DD/MM/YYYY'));
                    $('#inpDatePicker'+idx_element+'_0').data('daterangepicker').setEndDate(moment(checkout).format('DD/MM/YYYY'));

                    //Jenis Kamar
	  		         let elemen_jenis_kamar = $('[name*="jns_kamar["]');

                       // reset arrangement code
                    if (document.getElementById('arrangement_list_'+idx_element)) {
                        $('#arrangement_list_'+idx_element).html('')
                    }else{
                        let list =`<tbody id="arrangement_list_${idx_element}" class="table_arrs" style="display:none;">
                                    </tbody>`

                        $('#table_arrangement_list').append(list);
                    }

                    //Get ID Jenis Kamar
                    // $.each(elemen_jenis_kamar, function(key, val){
                    //     let id_elemen_jenis_kamar = $(val).attr('id');
                    //     let group = $(val).attr('data-group');
                    //     let idx = $(val).attr('data-idx');
                    //     let value_jenis_kamar = $(val).val();

                    //     let id_jenis_kamar = $(this).find('option[value="'+value_jenis_kamar+'"]').attr('data-id');
                    //     selectNomorKamar('#nomor_kamar'+key, hotel_id, id_jenis_kamar, checkin, checkout);

                    //     // Call function when first in the row
                    //     if (idx == 0) {
                    //         addArrangement(group, '', 1);
                    //     }
                    //     getPrice(idx, group, 0);
                    // });

                    let id_elemen_jenis_kamar = $('#jns_kamar'+idx_element+'_0').attr('id');
                    let group = $('#jns_kamar'+idx_element+'_0').attr('data-group');
                    let idx = $('#jns_kamar'+idx_element+'_0').attr('data-idx');
                    let value_jenis_kamar = $('#jns_kamar'+idx_element+'_0').val();

                    let id_jenis_kamar = $('#jns_kamar'+idx_element+'_0').find('option[value="'+value_jenis_kamar+'"]').attr('data-id');
                    console.log('ini nomor kamar nya id', '#nomor_kamar'+group+'_'+idx, hotel_id, id_jenis_kamar, checkin, checkout)
                    selectNomorKamar('#nomor_kamar'+group+'_'+idx, hotel_id, id_jenis_kamar, checkin, checkout, group);
                    if (idx == 0) {
                        addArrangement(group, '', 0);
                    }
                    getPrice(idx, group, 0);

                    var id = $("#hotel_id").val();
                    var startdate = $('#start_date').val();
                }

            freeCompliment();

            // Reset Pilihan kamar hotel
            let jenis_kamar_html = `
                                    <select name="jns_kamar[${idx_element}]"
                                            id="jns_kamar${idx_element}_0"
                                            data-group="${idx_element}"
                                            data-idx="0"
                                            onchange="getKamar(this.id), removeColorValidation(this.id)"
                                            class="form-control form-control-select2-red"
                                            required
                                    >
                                        <option data-id=""
                                                data-diskon=""
                                                data-kapasitas=""
                                                value="">-- Select Room Type --</option>
                                        @if(array_key_exists($idx, $jenis_kamars))
                                            @foreach($jenis_kamars[$idx] as $jenis_kamar)
                                                @php
                                                $diskon_kamar = count($jenis_kamar->discount) > 0 ? $jenis_kamar->discount[0]->diskon : 0;
                                                @endphp
                                            <option data-id="{{$jenis_kamar->id}}"
                                                    data-diskon="{{$diskon_kamar}}"
                                                    data-kapasitas="{{$jenis_kamar->kapasitas}}"
                                                    value="{{$jenis_kamar->nama}}" --}}
                                            >
                                            {{$jenis_kamar->nama.' ('.$jenis_kamar->kapasitas.' Orang)'}}
                                            </option>
                                            @endforeach
                                        @endif
                                    </select>
                                    <input type="hidden" name="diskon[${idx_element}]" id="diskon${idx_element}_0" value="">
                                    <input type="hidden" name="disctype[${idx_element}]" id="disctype${idx_element}_0" value="">
                                    <input type="hidden" name="jenis_kamar_id[${idx_element}]" id="jenis_kamar_id${idx_element}_0" value="">`

            let nomor_kamar_html = `
                                    <select name="nomor_kamar[${idx_element}]"
                                            id="nomor_kamar${idx_element}_0"
                                            data-group="${idx_element}"
                                            data-idx="0"
                                            class="form-control form-control-select2-red nomor_kamar_${idx_element} nomor_kamars"
                                            onchange="checkNomor(this.id)"
                                    >
                                        <option value="">-- Pilih Nomor Kamar --</option>
                                    </select>

                                    <input type="hidden"
                                            id="jml_kamar${idx_element}_0"
                                            name="jml_kamar[${idx_element}]"
                                            class="form-control"
                                            min="1"
                                            value="1"
                                    >
                                `

            let arrangement_code_html = `
                                            <button type="button" id="open_arr_dialog${idx_element}" onclick="openArrangementDialog(${idx_element}, 0)" class="btn btn-primary">
                                                <i class="fas fa-calendar-check"></i>
                                                <span class=""></span>
                                            </button>

                                            <div id="hidden_arrangement_code_container${idx_element}">
                                            </div>
                                        `

            let harga_html =  `
                                <input type="text"
                                    id="per_item${idx_element}" class="form-control"
                                    placeholder="Harga"  style="border-color: red"  disabled readonly>
                                `

            let block_kamar_html = `
                                    <input class="rcheckbox" type="checkbox" id="block_kamar${idx_element}" name="block_kamar[${idx_element}]">
                                    `

            $('#jns_kamar'+idx_element+'_0').attr('disabled', false);
            $('.wrap-jns_kamar'+idx_element).html(jenis_kamar_html);
            $('.wrap-nomor-kamar'+idx_element).html(nomor_kamar_html);
            $('#rate_code'+idx_element+'_0').select2().val('').trigger('change');
            $('#rate_code'+idx_element+'_0').attr('disabled', false);
            $('.wrap-arrangement-code'+idx_element).html(arrangement_code_html);
            $('.wrap-harga'+idx_element).html(harga_html);
            $('.wrap-block-kamar'+idx_element).html(block_kamar_html);
            $('#jns_kamar'+idx_element+'_0').select2()
        }

        // Room Availability
            // function when open modal room availability
            function openModalRoomAvailability(group, idx) {
                if (document.getElementById('tbody_room_availability'+group+'_'+idx)) {
                    $('#tbody_room_availability'+group+'_'+idx).show()
                }else{
                    getRoomAvailability(group, idx)
                    $('#tbody_room_availability'+group+'_'+idx).show()
                }

            }

            // Jquery when close modal
            $("#modal_room_availability").on("hidden.bs.modal", function (e) {
                $('.tbody-room-availability').hide()
            });

            function getRoomAvailability(group, idx){
                // console.log(idx)
                let start_date = moment($('#start_date'+group+'_'+idx).val()).format('YYYY-MM-DD')
                let end_date = moment($('#end_date'+group+'_'+idx).val()).format('YYYY-MM-DD')

                if (document.getElementById('tbody_room_availability'+group+'_'+idx)) {
                    $('#tbody_room_availability'+group+'_'+idx).html('')
                }else{
                    let tbody =`<tbody id="tbody_room_availability${group+'_'+idx}" class="tbody-room-availability" style="display:none;">
                                </tbody>`

                    $('#table_room_availibility').append(tbody);
                }

                // console.log(jenis_kamar, start_date, end_date)

                $.ajax({
                    type: "GET",
                    url: "{{ url('get-room-availability')}}/"+start_date+'/'+end_date,
                    dataType: "json",
                    success: function (response) {
                        let dates = response.dates
                        let jenis_kamars = response.jenis_kamars
                        let stocks = response.stocks
                        let ooo_schedule = response.ooo_schedule

                        let month_element = ''
                        let day_element = ''
                        let jenis_kamar_element = ''

                        // dates for header
                        $.each(dates, function(month, date){
                            let colspan_date = date.length

                            month_element += `<th colspan="${colspan_date}" class="text-center">${month}</th>`

                            $.each(date, function(key_day, day){
                                let day_name = moment(day).format('ddd')
                                let day_date = moment(day).format('DD')
                                day_element += `<th class="text-center">
                                                    ${day_name}
                                                    <br>
                                                    ${day_date}
                                                </th>`
                            });
                        });

                        // Jenis kamar for body
                        $.each(jenis_kamars, function(key_jenis_kamar, jenis_kamar){
                            let ketersediaan_element = ''

                            // dates for count ketersediaan
                            $.each(dates, function(month, date){
                                $.each(date, function(key_day, day){
                                    let ketersediaan = jenis_kamar.kamars_count - (stocks[jenis_kamar.nama][day] ?? 0);

                                    if(ooo_schedule.hasOwnProperty(jenis_kamar.nama)){
                                        ketersediaan -= (ooo_schedule[jenis_kamar.nama][day]).reduce((a, b) => a + b, 0)
                                        // $.each(ooo_schedule[jenis_kamar.nama], function(key_ooo_schedule, jumlah_ooo){
                                        //     if(Date.parse(key_ooo_schedule) >= Date.parse(day)){
                                        //         ketersediaan -= jumlah_ooo.reduce((a, b) => a + b, 0)
                                        //     }
                                        // })
                                    }

                                    ketersediaan_element += `<td class="text-center p-2 ${ketersediaan <= 5 ? 'bg-danger text-white' : 'bg-success text-white'}">
                                                                ${ketersediaan}
                                                            </td>`
                                });
                            });

                            jenis_kamar_element += `
                                                        <tr>
                                                            <td class="headcol" style="width: 200px; background: white;">${jenis_kamar.nama.replace(/\b\w/g, l => l.toUpperCase())}</td>
                                                            <td></td>

                                                            ${ketersediaan_element}
                                                        </tr>
                                                    `
                        });

                        let content = `
                                            <tr>
                                                <th class="p-1 headcol" style="width: 200px; background: white;">
                                                    <form id="form-periode" method="get">
                                                        <input type="text" class="form-control" style="width: initial" size="20" disabled>
                                                    </form>
                                                </th>

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

                                                ${month_element}
                                            </tr>

                                            <tr>
                                                <td class="headcol" style="width: 200px; height:64.5px; background: white;"></td>

                                                <td></td>

                                                ${day_element}
                                            </tr>

                                            ${jenis_kamar_element}
                                        `
                        $('#tbody_room_availability'+group+'_'+idx).html(content)
                    }
                });
            }
        // Room Availability

		//Untuk ambil nomor kamar dan ratecode
		function getKamar(id_select){
			//Hotel ID
			let hotel_id = $("#hotel_id").val();

			//Element html nomor kamar
			let group = $("#"+id_select).data('group');
			let idx = $("#"+id_select).data('idx');
			let select_element = "#nomor_kamar"+group+"_"+idx;
			let select_rate_code = "#rate_code"+group+"_"+idx;

			//Data Segmentasi
			let segmentasi = $("#segmentasi_rate_code").val();

			//Option item
			let jenis_kamar_options = $("#"+id_select).html();
			let nomor_kamar_options = $(select_element).html();

			//Data Jenis Kamar
			let jenis_kamar_val = $("#"+id_select).val();
			let jenis_kamar = $("#"+id_select).find('option[value="'+jenis_kamar_val+'"]').attr('data-id');
			let diskon = $("#"+id_select).find('option[value="'+jenis_kamar_val+'"]').attr('data-diskon');
			let pax = $("#"+id_select).find('option[value="'+jenis_kamar_val+'"]').attr('data-kapasitas');
			let disctype = $("#"+id_select).find('option[value="'+jenis_kamar_val+'"]').attr('data-disctype');

			$('#jenis_kamar_id'+group+"_"+idx).val(jenis_kamar)
			$('#pax'+group+"_"+idx).val(pax)

			//Company ID
			let company_id = $('#company_id').val();

            var waktucheck = $('#inpDatePicker'+group+'_'+idx).data('daterangepicker');
            var checkincheck = checkoutcheck = null;
			if(waktucheck && jenis_kamar){
				var checkincheck = waktucheck.startDate.format('Y-MM-DD');
				var checkoutcheck = waktucheck.endDate.format('Y-MM-DD');
                $.ajax({
                    type: "get",
                    url: "{{ url('checkdiskonroomtype') }}",
                    data: {
                        roomtype_id: jenis_kamar,
                        start: checkincheck,
                        end: checkoutcheck,
                    },
                    async: false,
                    dataType: "json",
                    success: function (response) {
                        diskon = response.diskon;
                        disctype = response.disctype;
                    }
                });
            }else{
                diskon = 0;
                disctype = 0;
            }

			//Assign diskon per kamar
			$("#diskon"+group+"_"+idx).val(diskon);
			$("#disctype"+group+"_"+idx).val(disctype);
            console.log('DISCTYPE:'+disctype)
            $("#ket_diskon"+group).html(null);
            $("#per_item"+group).val(0);

			// Update total kapasitas kamar dari option jenis kamar yang sudah dipilih
			let kapasitas_total = 0;
			let kamar2 = $('[name*="jns_kamar["]');
			$.each(kamar2, function(key, val){
                if ( $(val).attr('data-idx') == 0 ) {
                    let val_option = $(val).val();
                    let kapasitas_kamar = parseInt($(val).find('option[value="'+val_option+'"]').attr('data-kapasitas'));
                    if(!isNaN(kapasitas_kamar)){
                        kapasitas_total += kapasitas_kamar;
                    }
                }
			});

            console.log(kapasitas_total)

			// assign total kapasitas kamar ke value field jumlah dewasa
			// $('#jml_dewasa').val(kapasitas_total);
            hitungjumlahdewasa()

            // to fill array container room number
            arrays_kamarss = []

            let all_nomors = $('.nomor_kamars')
            $.each(all_nomors, function(key, val){
                if ($(val).find(":selected").val() != '') {
                    // arrays_kamarss[key] = $(val).find(":selected").val();
                    let nomor_kamar_multiple_room = $(val).val()
                    let idx_multiple_room = $(val).data('idx')
                    let group_multiple_room = $(val).data('group')
                    let checkin_multiple_room = $('#start_date'+group_multiple_room+'_'+idx_multiple_room).val()
                    let checkout_multiple_room = $('#end_date'+group_multiple_room+'_'+idx_multiple_room).val()

                    if (!arrays_kamarss.hasOwnProperty(key)) {
                        arrays_kamarss[key] = []
                    }

                    arrays_kamarss[key]['nomor_kamar'] = nomor_kamar_multiple_room
                    arrays_kamarss[key]['checkin'] = checkin_multiple_room
                    arrays_kamarss[key]['checkout'] = checkout_multiple_room
                }
            });

			//Untuk mengecek kapasitas, jika kapasitas kamar tidak cukup akan muncul alert
			let jumlah_dewasa = $('#jml_dewasa').val();
			// if(jumlah_dewasa > kapasitas_total){
			// 	$("#alert-kamar").removeAttr('style');
			// }
			// else{
			// 	$("#alert-kamar").removeAttr('style');
			// 	$("#alert-kamar").attr('style', 'display:none');
			// }

			//Untuk mencari ketersediaan nomor kamar
			var range = $('#inpDatePicker'+group+'_'+idx).data('daterangepicker');
            var booking_id = $('#booking_id').val();
			if(range){
				var checkin = range.startDate;
				var checkout = range.endDate;

				var diff = checkout.diff(checkin, 'days');
				$('#jml_malam').val(diff);

                // console.log('CHECKTYPE'+jenis_kamar);

                $.ajax({
                    type: "GET",
                    url: "{{route('booking.checktyperoom')}}",
                    data: {
                        booking_id:booking_id,
                        jenis:jenis_kamar,
                        checkin: moment(checkin).format('YYYY-MM-DD'),
                        checkout: moment(checkout).format('YYYY-MM-DD'),
                    },
                    success: function (response) {
                        let jenis_kamar_multiple_rooms = $($('[name*="jns_kamar["]'))

                        $.each(jenis_kamar_multiple_rooms, function (key, val){
                            checkin = moment(checkin).format('YYYY-MM-DD')
                            checkout = moment(checkout).format('YYYY-MM-DD')

                            let jenis_kamar_multiple_room = $(val).find(":selected").data('id')
                            let idx_multiple_room = $(val).data('idx')
                            let group_multiple_room = $(val).data('group')
                            let checkin_multiple_room = $('#start_date'+group_multiple_room+'_'+idx_multiple_room).val()
                            let checkout_multiple_room = $('#end_date'+group_multiple_room+'_'+idx_multiple_room).val()

                            // console.log(idx_multiple_room, idx)
                            if (jenis_kamar_multiple_room == jenis_kamar && group_multiple_room != group) {
                                let boolean_checkin = checkin_multiple_room <= checkin || checkin_multiple_room < checkout
                                let boolean_checkout = checkout_multiple_room > checkin || checkout_multiple_room >= checkout
                                if (boolean_checkin && boolean_checkout) {
                                    response--
                                }
                            }
                        });
                        if (response >= 1) {
                            selectNomorKamar(select_element, hotel_id, jenis_kamar, checkin, checkout, group);
                        } else {
                            callModalAlert("There aren't available rooms for this room type.")
                            $('#jns_kamar'+group+"_"+idx).val(null).select2().trigger('change')
                        }
                    }
                });
			}

			if(['2','3','4','5','6','8','9'].includes(segmentasi)){
                selectRateCodeCompany(select_rate_code, jenis_kamar, company_id, segmentasi, checkin);
				// selectRateCodeCompany(select_rate_code, jenis_kamar, company_id, checkin);
			}
			else{
				selectRateCode(select_rate_code, jenis_kamar, segmentasi, checkin);
			}
		}

		// Untuk ambil harga dari ratecode
		function getPrice(indeks, group, btn){

			// Value Rate code
			let value_rate_code     = '';
			let harga               = '';
            let status              = '';
            let rate_code_id        = '';
			let value_arrangement_code = '';
            let harga_arrangement = '';
			let arrangement_service = 0;
			let arrangement_tax = 0;
            let diskon              = '';
            let disctype              = '';
            let total_biaya         = parseInt($('#total_biaya').val());
            let arrangement_id = null
            // alert('testgetprice')
            // check btn indikator to get proper variable
            if (btn == 0) {
                value_rate_code = $("#rate_code"+group+"_0").val();
                harga           = parseInt($("#rate_code"+group+"_0").find('option[value="'+value_rate_code+'"]').attr('data-harga')) ?? 0;

                status          = parseInt($("#rate_code"+group+"_0").find('option[value="'+value_rate_code+'"]').attr('data-include_breakfast')); // ambil data status breakfast aktiv atau tidak
                rate_code_id    = parseInt($("#rate_code"+group+"_0").find('option[value="'+value_rate_code+'"]').attr('data-id')); // ambil data id rate code
                //  segment rate code dari dropdown pilih rate code
                segment_rate_code = $("#rate_code"+group+"_0").find('option[value="'+value_rate_code+'"]').attr('data-segmentrc'); // ambil data segment rate code

				value_arrangement_code = $("#arrangement_code"+group+"_"+indeks).val();
                arrangement_id = $("#arrangement_code"+group+"_"+indeks).find('option[value="'+value_arrangement_code+'"]').attr('data-id')
				 harga_arrangement = parseInt(getRealPriceArrangement(arrangement_id, group, 0))
				// harga_arrangement = parseInt($("#arrangement_code"+group+"_"+indeks).find('option[value="'+value_arrangement_code+'"]').attr('data-harga'));
                arrangement_service = parseInt($("#arrangement_code"+group+"_"+indeks).find('option[value="'+value_arrangement_code+'"]').attr('data-service'));
				arrangement_tax = parseInt($("#arrangement_code"+group+"_"+indeks).find('option[value="'+value_arrangement_code+'"]').attr('data-tax'));

                // new adjustment tax service arr item
                var this_pax = $('#pax'+group+'_'+0).val()
                arrangement_tax = arrangement_tax * this_pax;
                arrangement_service = arrangement_service * this_pax;

                diskon          = parseInt($("#diskon"+group+"_0").val()) ?? 0;
                disctype          = parseInt($("#disctype"+group+"_0").val()) ?? 0;

                $("#selratecodeid"+group+"_0").val(segment_rate_code)
                $('#ratecode_id'+group+"_0").val(rate_code_id)
                $('#per_arrangement_id'+group+"_"+indeks).val(arrangement_id)

                console.log(segment_rate_code, arrangement_id, group, indeks, btn)
            }else{
                value_rate_code = $("#rate_code"+group+"_"+indeks).val();
                harga           = parseInt($("#rate_code"+group+"_"+indeks).find('option[value="'+value_rate_code+'"]').attr('data-harga')) ?? 0;


                status          = parseInt($("#rate_code"+group+"_"+indeks).find('option[value="'+value_rate_code+'"]').attr('data-include_breakfast')); // ambil data status breakfast aktiv atau tidak
                rate_code_id    = parseInt($("#rate_code"+group+"_"+indeks).find('option[value="'+value_rate_code+'"]').attr('data-id')); // ambil data id rate code
                //  segment rate code dari dropdown pilih rate code
                segment_rate_code = $("#rate_code"+group+"_"+indeks).find('option[value="'+value_rate_code+'"]').attr('data-segmentrc'); // ambil data segment rate code

				value_arrangement_code = $("#arrangement_code"+indeks+"_0").val();
                arrangement_id = $("#arrangement_code"+indeks+"_0").find('option[value="'+value_arrangement_code+'"]').attr('data-id')
                harga_arrangement = parseInt(getRealPriceArrangement(arrangement_id, indeks, 0))
				// harga_arrangement = parseInt($("#arrangement_code"+indeks+"_0").find('option[value="'+value_arrangement_code+'"]').attr('data-harga'));


                arrangement_service = parseInt($("#arrangement_code"+indeks+"_0").find('option[value="'+value_arrangement_code+'"]').attr('data-service'));
				arrangement_tax = parseInt($("#arrangement_code"+indeks+"_0").find('option[value="'+value_arrangement_code+'"]').attr('data-tax'));

                // new adjustment tax service arr item
                var this_pax = $('#pax'+indeks+'_'+0).val()
                arrangement_tax = arrangement_tax * this_pax;
                arrangement_service = arrangement_service * this_pax;

                diskon          = parseInt($("#diskon"+group+"_"+indeks).val()) ?? 0;
                disctype          = parseInt($("#disctype"+group+"_"+indeks).val()) ?? 0;

                $('#selratecodeid'+group+"_"+indeks).val(segment_rate_code)
                $('#ratecode_id'+group+"_"+indeks).val(rate_code_id)

                console.log(arrangement_id, indeks, btn)
                $.ajax({
                    type: "get",
                    url: "{{{url('/getinforatecode')}}}",
                    data: {id:rate_code_id},
                    dataType: "json",
                    async: false,
                    cache: false,
                    timeout: 30000,
                    success: function (rate) {
                        tipe_rate_code = rate.tipe_rate_code
                        $('#arrangement_list_'+group).html(null);

                        addArrangement(group, '', 0)

                        console.log('TEST123DICOBA: '+tipe_rate_code)
                    }
                });
            }

			let harga_awal = parseInt(harga_arrangement) + parseInt(harga);

            let this_harga_diskon = (harga_awal * (diskon/100)) ?? 0;
            if (disctype == 2) {
                this_harga_diskon = diskon;
            }

			let harga_diskon = parseInt(harga_awal - this_harga_diskon);

			let segmentasi = $('#segmentasi_rate_code').val();

            // Assign tax dan services
            let tax             = Math.round(Number(((harga_diskon-harga_arrangement) * tax_percent_global)/(100+tax_percent_global)));//Find tax from normal price, without arrangement price
            let harga_min_t     = (Number(((harga_diskon-harga_arrangement) - tax)));//price minus total tax
            let services        = Math.round(Number((harga_min_t * services_percent_global)/(100+services_percent_global)));//Find service from normal price, without arrangement price
            let harga_item_real = (Number((harga_diskon-harga_arrangement) - (tax) - (services)));//input per item real, without arrangement price
			let arr_real = Number(harga_arrangement - arrangement_service - arrangement_tax);

            // button arrangement code
            if (btn == 0) {
                // Assign value to hidden input
                $("#per_item_services"+group+"_"+indeks).val(services);
                $("#per_item_tax"+group+"_"+indeks).val(tax);
                $("#per_item_total"+group+"_"+indeks).val(harga_item_real);

                // jika segment rate code dropdown house use / compliment
                if (['10', '11'].includes(segment_rate_code)) {
                    // console.log('masuksegmentdasda')
                    $("#per_item_arr"+group+"_"+indeks).val(0);
                    $("#per_item_arr_service"+group+"_"+indeks).val(0);
                    $("#per_item_arr_tax"+group+"_"+indeks).val(0);

                    $("#input_localrate"+group+"_"+indeks).val(0);
                } else {
                    console.log(segmentasi)
                    if (['10', '11'].includes(segmentasi)) {
                        $("#per_item_arr"+group+"_"+indeks).val(0);
                        $("#per_item_arr_service"+group+"_"+indeks).val(0);
                        $("#per_item_arr_tax"+group+"_"+indeks).val(0);

                        $("#input_localrate"+group+"_"+indeks).val( formatRibuanID(0) );
                    } else {
                        $("#per_item_arr"+group+"_"+indeks).val(arr_real);
                        $("#per_item_arr_service"+group+"_"+indeks).val(arrangement_service);
                        $("#per_item_arr_tax"+group+"_"+indeks).val(arrangement_tax);

                        $("#input_localrate"+group+"_"+indeks).val( formatRibuanID(harga_diskon) );
                    }
                }

                console.log(harga, harga_arrangement)
                $("#roomrate"+group+"_"+indeks).html( formatRibuanID(harga) )
                // harga room rate
                // $("#input_localrate"+group+"_"+indeks).val( formatRibuanID(harga_diskon) );
                // $("#input_localrate"+group+"_"+indeks).val( formatRibuanID(harga+harga_arrangement) );

            }

            //Assign harga per kamar
            // update total local rate
            let total_local_rate    = 0;
            let localrate           = $('.local_room'+group);
            $.each(localrate, function(key, val){
                let harga = parseInt(($(val).val()).replaceAll(".",""));
                if(!isNaN(harga)){
                    total_local_rate += parseInt(harga);
                }
            });
            $('#per_item'+group).val( formatRibuanID(total_local_rate) );

            // $("#per_item_arr"+group+"_"+indeks).val(arr_real);
			// $("#per_item_arr_service"+group+"_"+indeks).val(arrangement_service);
			// $("#per_item_arr_tax"+group+"_"+indeks).val(arrangement_tax);

            // $("#input_localrate"+group+"_"+indeks).val( formatRibuanID(harga_diskon) );

            // $("#roomrate"+group+"_"+indeks).html( formatRibuanID(harga) )

			//Assign harga per kamar
            // console.log(value_arrangement_code, harga_arrangement, harga_awal, harga_diskon)
            // console.log('group:'+group, 'indeks:'+indeks, harga_diskon)
			if(diskon !== 0){
                if (disctype == 2) {
                    $("#ket_diskon"+group).html('<strike>'+ribuanWithComma(harga)+'</strike> Disc fixed '+ribuanWithComma(diskon));
                }else{
                    $("#ket_diskon"+group).html('<strike>'+ribuanWithComma(harga)+'</strike> Disc '+diskon+'%');
                }
			}

			//Update Total Harga Dari Option rate code yang sudah dipilih
			let harga_kumulatif = 0;
			let harga_tiap_item = $('[name*="per_item"]');
			$.each(harga_tiap_item, function(key, val){
				let harga_kamar = parseInt(($(val).val()).replaceAll(".",""));
				if(!isNaN(harga_kamar)){
					harga_kumulatif += parseInt(harga_kamar);
				}
			});

			//Grand Total, total harga Dikali jumlah malam
			let jml_malam = $('#jml_malam'+group+'_0').val();
			let grand_total = harga_kumulatif * jml_malam;

            console.log(grand_total)
			// console.log('Harga kumulatif: '+harga_kumulatif)
			// console.log('Jumlah Malam: '+jml_malam);
			// console.log('Grand total: '+grand_total);
			// console.log('Segmentasi: '+segmentasi)

			if(['10', '11'].includes(segmentasi)){
				// console.log('fired');
				$('.total_biaya').val(0);
				$('.total_biaya').attr('readonly', 'readonly');

                $('.review_harga').val(0)
                $('.per_item_new').removeAttr('required').val(0);
			}
			else{
				// console.log(grand_total);
                $('.total_biaya').val(grand_total);
                // $('#total_biaya').removeAttr('readonly'); //always disabled or readonly now
                $('.per_item_new').attr('required', 'required');

                //Update Total Harga Dari Option rate code yang sudah dipilih
                let harga_new_per_item = 0;
                let harga_tiap_item_new = $('.per_item_new');
                $.each(harga_tiap_item_new, function(key, val){
                    let harga = parseInt(($(val).val()).replaceAll(".",""));
                    if(!isNaN(harga)){
                        harga_new_per_item += parseInt(harga);
                    }
                });
                $('.total_biaya').val( formatRibuanID(harga_new_per_item) );

                // update total local rate
                let total_local_rate    = 0;
                let localrate           = $('.local_room'+group);
                $.each(localrate, function(key, val){
                    let harga = parseInt(($(val).val()).replaceAll(".",""));
                    if(!isNaN(harga)){
                        total_local_rate += parseInt(harga);
                    }
                });
                $('#per_item'+group).val( formatRibuanID(total_local_rate) );
			}


            // Rate Code Arrangement Code Bundle, !Reminder variable btn : for condition when just change rate code and prevent maximum call error.
            if (status == 1 && btn == 1) {

                let arrangment_cols = $('.arrangement_cols'+group);

                $.ajax({
                    type: 'get',
                    url: "{{ url('/getarrangementfromratecode')}}/"+rate_code_id,
                    dataType: "json",
                    success: function (data) {
                        // trigger change all arrangement cols
                        $.each(arrangment_cols, function(key, val){
                            $(val).val(data.arrangement_code).trigger('change');
                        });

                        console.log('replaced')
                    }
                });
            }else if(btn == 1){

                let arrangment_cols = $('.arrangement_cols'+group);

                // trigger change all arrangement cols
                $.each(arrangment_cols, function(key, val){
                    $(val).val('').trigger('change');
                });
                console.log('replaced')

            }

		}

        // Function get real price from arrangement
        function getRealPriceArrangement(arrangement_id, idx, group) {
            let price = 0;

            $.ajax({
                async: false,
				type: 'GET',
				url: "{{ url('get-arrangement-code/')}}/"+arrangement_id,
				success: function (response) {
                    let pax = $('#pax'+idx+'_'+group).val()
                    console.log(idx, group, pax)
                    let arrangement_code = response.arrangement_code

                    if (arrangement_code?.arrangement_code_detail) {
                        $.each(arrangement_code.arrangement_code_detail, function(key_arrangement_code_detail, arrangement_code_detail){
                            if (arrangement_code_detail.always_one == 1) {
                                price += arrangement_code_detail.harga
                            }else{
                                price += arrangement_code_detail.harga * pax
                            }
                        });
                    }
                }
			});

            return price
        }

        // Hitung total adds price if price manual edit.
        function globalPrice(group, indeks){

            let harga = parseInt($('#input_localrate'+group+'_'+indeks).val().replaceAll(".",""));

            let value_arrangement_code = $("#arrangement_code"+group+"_"+indeks).val();
			let arrangement_service = parseInt($("#arrangement_code"+group+"_"+indeks).find('option[value="'+value_arrangement_code+'"]').attr('data-service'));
			let arrangement_tax = parseInt($("#arrangement_code"+group+"_"+indeks).find('option[value="'+value_arrangement_code+'"]').attr('data-tax'));
            let arrangement_id = $("#arrangement_code"+group+"_"+indeks).find('option[value="'+value_arrangement_code+'"]').attr('data-id');
            let harga_arrangement = parseInt(getRealPriceArrangement(arrangement_id, group, 0));
            // let harga_arrangement = parseInt($("#arrangement_code"+group+"_"+indeks).find('option[value="'+value_arrangement_code+'"]').attr('data-harga'));

            // new adjustment tax service arr item
            var this_pax = $('#pax'+group+'_'+0).val()
            arrangement_tax = arrangement_tax * this_pax;
            arrangement_service = arrangement_service * this_pax;

            // Assign tax dan services
            let tax             = Math.round(Number(((harga-harga_arrangement) * tax_percent_global)/(100+tax_percent_global)));//Find tax from normal price, without arrangement price
            let harga_min_t     = (Number((harga-harga_arrangement - tax)));//price minus total tax,  without arrangement price
            let services        = Math.round(Number((harga_min_t * services_percent_global)/(100+services_percent_global)));//Find service from normal price,
            let harga_item_real = (Number((harga-harga_arrangement) - (tax) - (services)));//input per item real,  without arrangement price\
			let arr_real = Number(harga_arrangement - arrangement_service - arrangement_tax);

            // Assign value to hidden input
            $("#per_item_services"+group+"_"+indeks).val(services);
            $("#per_item_tax"+group+"_"+indeks).val(tax);
            $("#per_item_total"+group+"_"+indeks).val(harga_item_real);
            $("#per_item_arr"+group+"_"+indeks).val(arr_real);
			$("#per_item_arr_service"+group+"_"+indeks).val(arrangement_service);
            $("#per_item_arr_tax"+group+"_"+indeks).val(arrangement_tax);

            console.log(group+"_"+indeks+": "+(harga).toLocaleString('ID'))
            $("#roomrate"+group+"_"+indeks).html((harga).toLocaleString('ID'))
			$("#input_localrate"+group+"_"+indeks).val( formatRibuanID(harga) )

            //Update Total Harga Dari Option rate code yang sudah dipilih
			let harga_new_per_item = 0;
			let harga_tiap_item_new = $('.per_item_new');
			$.each(harga_tiap_item_new, function(key, val){
				let harga_kamar = parseInt(($(val).val()).replaceAll(".",""));
				if(!isNaN(harga_kamar)){
					harga_new_per_item += parseInt(harga_kamar);
				}
			});
			$('.total_biaya').val( formatRibuanID(harga_new_per_item) );

            // update total local rate
            let total_local_rate    = 0;
            let localrate           = $('.local_room'+group);
            $.each(localrate, function(key, val){
                let harga =  parseInt(($(val).val()).replaceAll(".",""));
                if(!isNaN(harga)){
                    total_local_rate += parseInt(harga);
                }
            });
            $('#per_item'+group).val( formatRibuanID(total_local_rate) );

            console.log(harga)

        }

		//Hitung total kembali jika harga diedit
		function recount(indeks, idx){

            console.log('recounted')

            globalPrice(indeks, idx);//untuk assign tax dan pajak

			let harga_kumulatif = 0;
			let harga_tiap_item = $('[name*="per_item"]');
			let segmentasi = $('#segmentasi_rate_code').val();

			$.each(harga_tiap_item, function(key, val){
				let harga_kamar = parseInt(($(val).val()).replaceAll(".",""));
				if(!isNaN(harga_kamar)){
					harga_kumulatif += parseInt(harga_kamar);
				}
			});

			//Grand Total, total harga Dikali jumlah malam
			let jml_malam = $('#jml_malam').val();
			let grand_total = harga_kumulatif * jml_malam;

			if(['10', '11'].includes(segmentasi)){
				$('.total_biaya').val(0);
				$('.total_biaya').attr('readonly', 'readonly');
			}
			else{
				$('.total_biaya').val( formatRibuanID(grand_total) );
				// $('#total_biaya').removeAttr('readonly'); //always disabled or readonly now
			}

            //Update Total Harga Dari Option rate code yang sudah dipilih
            let harga_new_per_item = 0;
            let harga_tiap_item_new = $('.per_item_new');
            $.each(harga_tiap_item_new, function(key, val){
                let harga_kamar = parseInt(($(val).val()).replaceAll(".",""));
                if(!isNaN(harga_kamar)){
                    harga_new_per_item += parseInt(harga_kamar);
                }
            });
            $('.total_biaya').val( formatRibuanID(harga_new_per_item) );

            // update total local rate
            let total_local_rate    = 0;
            let localrate           = $('.local_room'+indeks);
            $.each(localrate, function(key, val){
                let harga = parseInt(($(val).val()).replaceAll(".",""));
                if(!isNaN(harga)){
                    total_local_rate += parseInt(harga);
                }
                console.log(val)
            });
            $('#per_item'+indeks).val( formatRibuanID(total_local_rate) );

		}

		function tambahKamar(){
			// console.log(new_idx)
			// var kapasitas_kamarpertama = $('#jns_kamar0_0 option:selected').data('kapasitas')
			let jenis_kamar_options = $("#jns_kamar0_0").html();
			let nomor_kamar_options = $("#nomor_kamar0_0").html();

			// let html = `<div class="per_rooms_class mb-2" data-idx="row_${new_idx}_0" id="row_${new_idx}_0">
            //                 <div class="row">
            //                     <div class="col-lg-0" id="button_multi_room${new_idx}_0">
            //                         <button type="button" onclick="modalMultiRoom(${new_idx})" class="btn btn-warning">
            //                             <i class="fas fa-copy"></i>
            //                         </button>
            //                     </div>
            //                     <div class="col-lg-2 addError wrap-jns_kamar${new_idx}">
            //                         <select name="jns_kamar[${new_idx}]"
            //                                 id="jns_kamar${new_idx}_0"
            //                                 data-group="${new_idx}"
            //                                 data-idx="0"
            //                                 onchange="getKamar(this.id), removeColorValidation(this.id)"
            //                                 class="form-control form-control-select2-red"
            //                                 required
            //                         >
            //                             ${jenis_kamar_options}
            //                         </select>
            //                         <input type="hidden" name="diskon[${new_idx}]" id="diskon${new_idx}_0" value="0">
            //                         <input type="hidden" name="jenis_kamar_id[${new_idx}]" id="jenis_kamar_id${new_idx}_0">
            //                         <input type="hidden" name="pax[${new_idx}]" id="pax${new_idx}_0">
            //                     </div>
            //                     <div class="col-lg-2">
            //                         <select name="nomor_kamar[${new_idx}]"
            //                                 id="nomor_kamar${new_idx}_0"
            //                                 data-group="${new_idx}"
            //                                 data-idx="0"
            //                                 class="form-control form-control-select2-red nomor_kamar_${new_idx} nomor_kamars"
            //                                 onchange="checkNomor(this.id)"
            //                         >
            //                             <option value="">-- Pilih Nomor Kamar --</option>
            //                             ${nomor_kamar_options}
            //                         </select>
            //                         <input type="hidden"
            //                                id="jml_kamar${new_idx}_0"
            //                                name="jml_kamar[${new_idx}]"
            //                                class="form-control"
            //                                min="1"
            //                                value="1"
            //                         >
            //                     </div>
            //                     <div class="col-lg-2 addError wrap-rate_code${new_idx}">
            //                         <select name="rate_codes[${new_idx}]" id="rate_code${new_idx}_0"
            //                                 data-group="${new_idx}" data-idx="0" onchange="getPrice(this.getAttribute('data-idx'), this.getAttribute('data-group'), 1), removeColorValidation(this.id), sameValueRate(this.value, this.getAttribute('data-group'))"
            //                                 class="form-control form-control-select2-red multiroom_rates rate_codes_${new_idx}" required
            //                         >
            //                             <option value="" data-harga="0" data-include_breakfast="0">-- Pilih Rate Code --</option>
            //                         </select>
            //                     </div>
            //                     <div class="col-lg-1" style="text-align: center;">
            //                         <button type="button" id="open_arr_dialog${new_idx}" onclick="openArrangementDialog(${new_idx}, 0)" class="btn btn-primary">
            //                             <i class="fas fa-calendar-check"></i>
            //                             <span class=""></span>
            //                         </button>
            //                     </div>

            //                     <!-- For Container Hidden Arrangement -->
            //                     <div id="hidden_arrangement_code_container${new_idx}">
            //                     </div>

            //                     <div class="col-lg-2">
            //                         <input type="text" min="0"
            //                                id="per_item${new_idx}" class="form-control"
            //                                placeholder="Harga"  style="border-color: red">
            //                     </div>
            //                     <div class="col-lg-2 m-0 p-0">

            //                         <input class="ml-2 mr-3 rcheckbox cekblokkamar" type="checkbox" data-idkamar="${new_idx}" data-groupkamar="0" id="block_kamar${new_idx}_0" name="block_kamar[${new_idx}]" data-nokamar="">

            //                         <button type="button" onclick="removeKamar(${new_idx}, 0)" class="btn btn-danger">
            //                             <i class="fas fa-times-circle"></i>
            //                         </button>
            //                     </div>
            //                 </div>
            //                 <br>

            //                 <div class="row">
            //                     <div class="col-lg-3" style="padding-left:55px ">
            //                         Guest Name Room:
            //                     </div>
            //                     <div class="col-lg-2">
            //                         Billing Instruction: <span class="text-danger">*</span>
            //                     </div>
            //                     <div class="col-lg-2">
            //                         Incognito:
            //                     </div>
            //                 </div>

            //                 <br>

            //                 <div class="row">
            //                     <div class="col-lg-3" style="padding-left:55px">
            //                         <input type="text" name="guest_room[${new_idx}]" class="form-control" placeholder="guest name ...">
            //                     </div>
            //                     <div class="col-lg-2">
            //                         <select name="status_lock[${new_idx}]" id="status_lock" class="form-control-select2-no-search">
            //                             <option value="">-- Pilih Billing Instruction --</option>
            //                             <option value="1" selected>Tidak</option>
            //                             <option value="0">Ya</option>
            //                         </select>
            //                     </div>
            //                     <div class="col-lg-2 text-left">
            //                         <div class="form-check">
            //                             <label class="form-check-label" for="flexCheckDefault">
            //                                 <input class="form-check-input" type="checkbox" name="incognito[${new_idx}]" value="1" id="incognito">
            //                                 <h4><i class="fas fa-user-secret"></i>&nbsp;<b>Incognito</b></h4>
            //                             </label>
            //                         </div>
            //                     </div>
            //                 </div>
            //                 <legend></legend>
			// 			</div>`

			let html = `<tr class="per_rooms_class" data-idx="row_${new_idx}_0" id="row_${new_idx}_0">
                            {{-- # --}}
                            <td style="text-align:center">
                                <button id="btnremovekamar${new_idx}_0" type="button" onclick="removeKamar(${new_idx}, 0)" class="btn btn-danger">
                                    <i class="fas fa-times-circle"></i>
                                </button>
                            </td>

                            {{-- Multiply --}}
                            <td>
                                <div id="button_multi_room${new_idx}_0">
                                    <button type="button" onclick="modalMultiRoom(${new_idx})" class="btn btn-warning">
                                        <i class="fas fa-copy"></i>
                                    </button>
                                </div>
                            </td>

                            {{-- Reservation --}}
                            <td class="">
                                <input type="text" id="inpDatePicker${new_idx}_0"
                                        class="form-control daterange-buttons"
                                        style="border-color: red"
                                        data-group="${new_idx}"
                                >
                            </td>

                            {{-- Jumlah Malam --}}
                            <td class="addError">
                                <input type="number"
                                        id="jml_malam${new_idx}_0"
                                        name="jml_malam[${new_idx}]"
                                        class="form-control cekjumlahmalam"
                                        min="0"
                                        value="0"
                                        onchange="changeJml_Kamar(this.value, ${new_idx})"
                                        required
                                        {{-- readonly --}}
                                >
                            </td>

                            {{-- Expected Arrival --}}
                            <td>
                                <input type="text"
                                        name="expected_arrival[${new_idx}]"
                                        class="form-control input-timepicker"
                                        id="expected_arrival${new_idx}_0"
                                    >

                                <input type="hidden" id="start_date${new_idx}_0" name="start_date[${new_idx}]" value="{{date('d/m/Y', strtotime(getSystemDate()))}}">
                                <input type="hidden" id="end_date${new_idx}_0" name="end_date[${new_idx}]" value="{{date('d/m/Y', strtotime(getSystemDate()))}}">
                            </td>

                            {{-- Guest Name Room --}}
                            <td class="wrap-guest-room${new_idx}">
                                <input type="text" name="guest_room[${new_idx}]" class="form-control" placeholder="guest name ..." >
                            </td>

                            {{-- Jenis Kamar --}}
                            <td class="addError wrap-jns_kamar${new_idx} ">
                                <select name="jns_kamar[${new_idx}]"
                                        id="jns_kamar${new_idx}_0"
                                        data-group="${new_idx}"
                                        data-idx="0"
                                        onchange="getKamar(this.id), removeColorValidation(this.id)"
                                        class="form-control form-control-select2-red"
                                        required
                                >
                                    ${jenis_kamar_options}
                                </select>

                                <input type="hidden" name="diskon[${new_idx}]" id="diskon${new_idx}_0" value="0">
                                <input type="hidden" name="disctype[${new_idx}]" id="disctype${new_idx}_0">
                                <input type="hidden" name="jenis_kamar_id[${new_idx}]" id="jenis_kamar_id${new_idx}_0">
                            </td>

                            {{-- Pax --}}
                            <td class="addError wrap-pax0">
                                <input type="number"
                                        id="pax${new_idx}_0"
                                        name="pax[${new_idx}]"
                                        class="form-control"
                                        min="0"
                                        data-group="${new_idx}"
                                        data-idx="0"
                                        onchange="hitungjumlahdewasa(), getPrice(this.getAttribute('data-idx'), this.getAttribute('data-group'), 1)"
                                        required
                                        {{$block_checkdisabled}}
                                >
                            </td>

                            {{-- Room Availability --}}
                            <td class="wrap-room-availability${new_idx}">
                                <button type="button" data-toggle="modal" data-target="#modal_room_availability" class="btn btn-primary addError button-room-availability" onclick="openModalRoomAvailability(${new_idx}, 0)">
                                    <i class="fab fa-buromobelexperte"></i>
                                </button>
                            </td>

                            {{-- Nomor Kamar --}}
                            <td class=" wrap-nomor-kamar${new_idx}">
                                <select name="nomor_kamar[${new_idx}]"
                                        id="nomor_kamar${new_idx}_0"
                                        data-group="${new_idx}"
                                        data-idx="0"
                                        class="form-control form-control-select2-red nomor_kamar_${new_idx} nomor_kamars"
                                        onchange="checkNomor(this.id)"
                                >
                                    <option value="">-- Pilih Nomor Kamar --</option>
                                </select>

                                <input type="hidden"
                                        id="jml_kamar${new_idx}_0"
                                        name="jml_kamar[${new_idx}]"
                                        class="form-control"
                                        min="1"
                                        value="1"
                                >
                            </td>

                            {{-- Rate Code --}}
                            <td class="addError wrap-rate_code${new_idx} ">
                                <select name="rate_codes[${new_idx}]" id="rate_code${new_idx}_0"
                                        data-group="${new_idx}" data-idx="0" onchange="getPrice(this.getAttribute('data-idx'), this.getAttribute('data-group'), 1), removeColorValidation(this.id), sameValueRate(this.value, this.getAttribute('data-group'))"
                                        class="form-control form-control-select2-red multiroom_rates rate_codes_${new_idx}" required
                                >
                                    <option value="" data-harga="0" data-include_breakfast="0">-- Pilih Rate Code --</option>
                                </select>
                                <input type="hidden" id="selratecodeid${new_idx}_0" name="selratecodeid[${new_idx}]">
                                <input type="hidden" id="ratecode_id${new_idx}_0" name="ratecode_id[${new_idx}]">
                            </td>

                            {{-- Arrangement Code --}}
                            <td class=" wrap-arrangement-code${new_idx}">
                                <button type="button" id="open_arr_dialog${new_idx}" onclick="openArrangementDialog(${new_idx}, 0)" class="btn btn-primary">
                                    <i class="fas fa-calendar-check"></i>
                                    <span class=""></span>
                                </button>

                                <div id="hidden_arrangement_code_container${new_idx}">
                                </div>
                            </td>

                            {{-- Harga --}}
                            <td class=" wrap-harga${new_idx}">
                                <input type="text"
                                       id="per_item${new_idx}" class="form-control"
                                       placeholder="Harga"  style="border-color: red"  disabled readonly>
                                <span class="text-danger" id="ket_diskon${new_idx}">
                                </span>
                            </td>

                            {{-- Block Kamar --}}
                            <td class="wrap-block-kamar${new_idx}">
                                <input class="rcheckbox cekblokkamar" type="checkbox" data-idkamar="${new_idx}" data-groupkamar="0" id="block_kamar${new_idx}_0" name="block_kamar[${new_idx}]" data-nokamar="">
                            </td>

                            {{-- Billing Instruction --}}
                            <td class="wrap-billing-instruction${new_idx}">
                                <select name="status_lock[${new_idx}]" id="status_lock" class="form-control-select2-no-search">
                                    <option value="">-- Select Billing Instruction --</option>
                                    <option value="1" selected>No</option>
                                    <option value="0">Yes</option>
                                </select>
                            </td>

                            {{-- Incognito --}}
                            <td class="wrap-incognito${new_idx}">
                                <div class="form-check">
                                    <label class="form-check-label" for="flexCheckDefault">
                                        <input class="rcheckbox form-check-input" type="checkbox" name="incognito[${new_idx}]" value="1" id="incognito">
                                    </label>
                                </div>
                            </td>
                        </tr>`

			// $('#form_kamar').append(html);
            $('.listtable tbody').append(html);
			$('.form-control-select2').select2();
            $('.form-control-select2-no-search').select2();
			$('.form-control-select2-red').select2();
			$('.form-control-select2-red').each(function(){
			  $(this).siblings('.select2-container').css('border', '1px solid red');
			});

            $('#inpDatePicker'+new_idx+'_0').daterangepicker({
				applyClass: 'btn-success',
				cancelClass: 'btn-danger',
          		minDate: "{{ date('d-m-Y', strtotime(getSystemDate())) }}",
                startDate: "{{ date('d-m-Y', strtotime(getSystemDate())) }}",
                endDate: "{{ date('d-m-Y', strtotime(getSystemDate())) }}",
				locale: {
					format: 'DD-MM-YYYY'
				}
			});

            $('#expected_arrival'+new_idx+'_0').AnyTime_noPicker().AnyTime_picker({
                format: '%H:%i'
            });

            // reset jenis kamar
            $("#jns_kamar"+new_idx+"_0").val('').trigger('change')

            getKamar('jns_kamar'+new_idx+'_0');

			var jml_dewasa = $('#jml_dewasa').val()
			var new_jml_dewasa = Number(jml_dewasa)
			// console.log(jml_dewasa, kapasitas_kamarpertama)
			$('#jml_dewasa').val(new_jml_dewasa)

            multipleArrangement(new_idx);

            applyDateRangePicker('daterange-buttons')

            // ======== Hidden After Add Room ========
                hiddenSelectedNomorKamar();
            // ======== Hidden After Add Room ========

            new_idx++;
            multiple_room++;
		}

        // AddMoreRoom
        let total_room = {!! json_encode($jumlah_total_kamar) !!};
        let array_arr   = {!! json_encode($arrangements) !!}
        function moreRoom(index){
            $('#multiple_room_modal').modal('hide');

            // reset room container for check
            // a = []; penyesuaian dengan edit

            // get value off multiple room
            let count_room  = $("#qty_multiple_room").val();

            // GET VALUE SEGMENTASI
            let segmentasi = $("#segmentasi_rate_code").val();
            let parse = 0;
            if (index != 0) {
                parse = parseInt(index) - 1;
            }

            let jenis_value     = $('#jns_kamar'+index+'_0 option:selected').data('id')             // GET VALUE SELECTED JENIS KAMAR FIRST ROW.
            let jenis_nama      = $('#jns_kamar'+index+'_0').val()                                  // GET VALUE SELECTED JENIS KAMAR FIRST ROW.
            let rate_value      = $('#rate_code'+index+'_0 option:selected').val()                  // GET VaLUE SELECTED RATE CODE FIRST ROW.
			let rate_value_id   = $('#rate_code'+index+'_0 option:selected').data('id')             // GET DATA ID SELECTED RATE CODE FIRST ROW.
			let arr_value       = $('#arrangement_code'+index+'_0 option:selected').val()           // GET VALUE SELECTED ARRANGEMENT CODE FIRST ROW.
			let arr_valu_id     = $('#arrangement_code'+index+'_0 option:selected').data('id')      // GET DATA ID SELECTED ARRANGEMENT CODE FIRST ROW.
            let jenis_kmr       = $('#jns_kamar'+parse+'_0').val()

            // CONDITION OR PROTECTION CANT CREATE MORE THAN TOTAL ROOM OF HOTEL HAVE IT.
            var range    = $('#inpDatePicker'+index+'_0').data('daterangepicker');
            var checkin  = moment(range.startDate).format('YYYY-MM-DD');
            var checkout = moment(range.endDate).format('YYYY-MM-DD');

            var jumlah_malam = $('#jml_malam'+index+'_0').val();
            var expected_arrival = $('#expected_arrival'+index+'_0').val();

            var ratecode_tipe = null;
            $.ajax({
                type: "get",
                url: "{{{url('/getinforatecode')}}}",
                data: {id:rate_value_id},
                dataType: "json",
                async: false,
                cache: false,
                timeout: 30000,
                success: function (rate) {
                    ratecode_tipe = rate.tipe_rate_code
                }
            });

            var jenis_kamar_multiple_rooms = $($('[name*="jns_kamar["]'))
            var alrdy_room = 0
            $.each(jenis_kamar_multiple_rooms, function (key, val){
                var this_element_here = $(val).find(':selected').data('id')
                if(jenis_value == this_element_here){
                    alrdy_room++
                }
            });

            $.ajax({
                type: "get",
                url: "{{ route('check-available-jenis-kamar') }}",
                data: {
                    jkamarid: jenis_value,
                    checkin: checkin,
                    checkout: checkout,
                    count_room: count_room,
                    alrdy_room: alrdy_room,
                    booking_id: booking_id_here,
                },
                dataType: "json",
                success: function (count) {
                    console.log(count_room, count)
                    if (count) {
                        // callModalAlert("Total available room for type <span class='font-italic'>"+jenis_nama+"</span> is <span class='text-danger font-weight-bold'>"+count+"</span> remaining")
                        callModalAlert("Total available room not enough, please check the room availability.")
                        return false;
                    }else{

                         // LOOPING TO CREATE MANY ROW ROOM
                        for (let i = 0; i < count_room; i++) {

                            //========================== Start html app ==========================//
                            // let html_app = `<div class="per_rooms_class mb-2" data-idx="row_${new_idx}" id="row_${new_idx}_0">
                            //                     <div class="row">
                            //                         <div class="col-lg-0" id="button_multi_room${new_idx}" ${jenis_nama ? '' : 'style="display:none"'}>
                            //                             <button type="button" onclick="modalMultiRoom(${new_idx})" class="btn btn-warning">
                            //                                 <i class="fas fa-copy"></i>
                            //                             </button>
                            //                         </div>
                            //                         <div class="col-lg-2 addError wrap-jns_kamar${new_idx}">
                            //                             <select name="jns_kamar[${new_idx}]"
                            //                                     id="jns_kamar${new_idx}_0"
                            //                                     data-group="${new_idx}"
                            //                                     data-idx="0"
                            //                                     onchange="getKamar(this.id), removeColorValidation(this.id)"
                            //                                     class="form-control form-control-select2-red multiroom_jns"
                            //                                     required
                            //                             >
                            //                                 ${ $('#jns_kamar'+index+'_0').html() }
                            //                             </select>
                            //                             <input type="hidden" name="diskon[${new_idx}]" id="diskon${new_idx}_0" value="${ $('#diskon'+index+'_0').val() }">
                            //                             <input type="hidden" name="jenis_kamar_id[${new_idx}]" id="jenis_kamar_id${new_idx}_0" value="${ $('#jenis_kamar_id'+index+'_0').val() }">
                            //                             <input type="hidden" name="pax[${new_idx}]" id="pax${new_idx}_0" value="${ $('#pax'+index+'_0').val() }">
                            //                         </div>
                            //                         <div class="col-lg-2">
                            //                             <select name="nomor_kamar[${new_idx}]"
                            //                                     id="nomor_kamar${new_idx}_0"
                            //                                     data-group="${new_idx}"
                            //                                     data-idx="0"
                            //                                     class="form-control form-control-select2-red nomor_kamar_${new_idx} nomor_kamars"
                            //                                     onchange="checkNomor(this.id)"
                            //                             >
                            //                                 ${ $('#nomor_kamar'+index+'_0').html() }
                            //                             </select>
                            //                             <input type="hidden"
                            //                                     id="jml_kamar${new_idx}_0"
                            //                                     name="jml_kamar[${new_idx}]"
                            //                                     class="form-control"
                            //                                     min="1"
                            //                                     value="1"
                            //                             >
                            //                         </div>
                            //                         <div class="col-lg-2 addError wrap-rate_code${new_idx}">
                            //                             <select name="rate_codes[${new_idx}]"
                            //                                     id="rate_code${new_idx}_0"
                            //                                     data-group="${new_idx}"
                            //                                     data-idx="0"
                            //                                     onchange="getPrice(this.getAttribute('data-idx'), this.getAttribute('data-group'), 1), removeColorValidation(this.id), sameValueRate(this.value, this.getAttribute('data-idx'))"
                            //                                     class="form-control form-control-select2-red multiroom_rates rate_codes_${new_idx}"
                            //                                     required
                            //                                     style="border-color: red"
                            //                             >
                            //                                 ${ $('#rate_code'+index+'_0').html() }
                            //                             </select>
                            //                         </div>

                            //                         <input type="hidden" name="rate_codes_hidden[${new_idx}]" id="rate_code${new_idx}_0" value="">

                            //                         <div class="col-lg-1" style="text-align:center">
                            //                             <button type="button" id="open_arr_dialog${new_idx}" onclick="openArrangementDialog(${new_idx}, 0)" class="btn btn-primary">
                            //                                 <i class="fas fa-calendar-check"></i>
                            //                                 <span class=""></span>
                            //                             </button>
                            //                         </div>

                            //                         <!-- For Container Hidden Arrangement -->
                            //                         <div id="hidden_arrangement_code_container${new_idx}">
                            //                         </div>

                            //                         <div class="col-lg-2">
                            //                             <input type="text" id="per_item${new_idx}" class="form-control" style="border-color: red" placeholder="Total Room" value="${ $('#per_item'+index).html() }" disabled readonly>
                            //                             <span class="text-danger" id="ket_diskon${new_idx}"></span>
                            //                         </div>

                            //                         <div class="col-lg-2 m-0 p-0">

                            //                             <input class="ml-2 mr-3 rcheckbox cekblokkamar" data-idkamar="${new_idx}" data-groupkamar="0" data-nokamar="1" type="checkbox" id="block_kamar${new_idx}_0" name="block_kamar[${new_idx}]">

                            //                             <button type="button" onclick="removeKamar(${new_idx}, 0)" class="btn btn-danger">
                            //                                 <i class="fas fa-times-circle"></i>
                            //                             </button>
                            //                         </div>
                            //                     </div>

                            //                     <br>

                            //                     <div class="row">
                            //                         <div class="col-lg-3" style="padding-left:55px ">
                            //                             Guest Name Room:
                            //                         </div>
                            //                         <div class="col-lg-2">
                            //                             Billing Instruction: <span class="text-danger">*</span>
                            //                         </div>
                            //                         <div class="col-lg-2">
                            //                             Incognito:
                            //                         </div>
                            //                     </div>

                            //                     <br>

                            //                     <div class="row">
                            //                         <div class="col-lg-3" style="padding-left:55px">
                            //                             <input type="text" name="guest_room[${new_idx}]" class="form-control" placeholder="guest name ...">
                            //                         </div>
                            //                         <div class="col-lg-2">
                            //                             <select name="status_lock[${new_idx}]" id="status_lock" class="form-control-select2-no-search">
                            //                                 <option value="">-- Pilih Billing Instruction --</option>
                            //                                 <option value="1" selected>Tidak</option>
                            //                                 <option value="0">Ya</option>
                            //                             </select>
                            //                         </div>
                            //                         <div class="col-lg-2 text-left">
                            //                             <div class="form-check">
                            //                                 <label class="form-check-label" for="flexCheckDefault">
                            //                                     <input class="form-check-input" type="checkbox" name="incognito[${new_idx}]" value="1" id="incognito">
                            //                                     <h4><i class="fas fa-user-secret"></i>&nbsp;<b>Incognito</b></h4>
                            //                                 </label>
                            //                             </div>
                            //                         </div>
                            //                     </div>

                            //                     <legend></legend>
                            //                 </div>`;

                            let html_app = `<tr class="per_rooms_class" data-idx="row_${new_idx}_0" id="row_${new_idx}_0">
                                                {{-- # --}}
                                                <td style="text-align:center">
                                                    <button type="button"  id="btnremovekamar${new_idx}_0" onclick="removeKamar(${new_idx}, 0)" class="btn btn-danger">
                                                        <i class="fas fa-times-circle"></i>
                                                    </button>
                                                </td>

                                                {{-- Multiply --}}
                                                <td>
                                                    <div id="button_multi_room${new_idx}_0">
                                                        <button type="button" onclick="modalMultiRoom(${new_idx})" class="btn btn-warning">
                                                            <i class="fas fa-copy"></i>
                                                        </button>
                                                    </div>
                                                </td>

                                                {{-- Reservation --}}
                                                <td class="">
                                                    <input type="text" id="inpDatePicker${new_idx}_0"
                                                            class="form-control daterange-buttons"
                                                            style="border-color: red"
                                                            data-group="${new_idx}"
                                                    >
                                                </td>

                                                {{-- Jumlah Malam --}}
                                                <td class="addError">
                                                    <input type="number"
                                                            id="jml_malam${new_idx}_0"
                                                            name="jml_malam[${new_idx}]"
                                                            class="form-control cekjumlahmalam"
                                                            min="0"
                                                            value="${jumlah_malam}"
                                                            onchange="changeJml_Kamar(this.value, ${new_idx})"
                                                            required
                                                            {{-- readonly --}}
                                                    >
                                                </td>

                                                {{-- Expected Arrival --}}
                                                <td>
                                                    <input type="text"
                                                            name="expected_arrival[${new_idx}]"
                                                            class="form-control input-timepicker"
                                                            id="expected_arrival${new_idx}_0"
                                                        >

                                                    <input type="hidden" id="start_date${new_idx}_0" name="start_date[${new_idx}]" value="${checkin}">
                                                    <input type="hidden" id="end_date${new_idx}_0" name="end_date[${new_idx}]" value="${checkout}">
                                                </td>

                                                {{-- Guest Name Room --}}
                                                <td class="wrap-guest-room${new_idx}">
                                                    <input type="text" name="guest_room[${new_idx}]" class="form-control" placeholder="guest name ..." >
                                                </td>

                                                {{-- Jenis Kamar --}}
                                                <td class="addError wrap-jns_kamar${new_idx} ">
                                                    <select name="jns_kamar[${new_idx}]"
                                                            id="jns_kamar${new_idx}_0"
                                                            data-group="${new_idx}"
                                                            data-idx="0"
                                                            onchange="getKamar(this.id), removeColorValidation(this.id)"
                                                            class="form-control form-control-select2-red"
                                                            required
                                                    >
                                                        ${ $('#jns_kamar'+index+'_0').html() }
                                                    </select>

                                                    <input type="hidden" name="diskon[${new_idx}]" id="diskon${new_idx}_0" value="${ $('#diskon'+index+'_0').val() }">
                                                    <input type="hidden" name="disctype[${new_idx}]" id="disctype${new_idx}_0" value="${ $('#disctype'+index+'_0').val() }">
                                                    <input type="hidden" name="jenis_kamar_id[${new_idx}]" id="jenis_kamar_id${new_idx}_0" value="${ $('#jenis_kamar_id'+index+'_0').val() }">
                                                </td>

                                                {{-- Pax --}}
                                                <td class="addError wrap-pax0">
                                                    <input type="number"
                                                            id="pax${new_idx}_0"
                                                            name="pax[${new_idx}]"
                                                            value="${ $('#pax'+index+'_0').val() }"
                                                            class="form-control"
                                                            min="0"
                                                            data-group="${new_idx}"
                                                            data-idx="0"
                                                            onchange="hitungjumlahdewasa(), getPrice(this.getAttribute('data-idx'), this.getAttribute('data-group'), 1)"
                                                            required
                                                    >
                                                </td>

                                                {{-- Room Availability --}}
                                                <td class="wrap-room-availability${new_idx}">
                                                    <button type="button" data-toggle="modal" data-target="#modal_room_availability" class="btn btn-primary addError button-room-availability" onclick="openModalRoomAvailability(${new_idx}, 0)">
                                                        <i class="fab fa-buromobelexperte"></i>
                                                    </button>
                                                </td>

                                                {{-- Nomor Kamar --}}
                                                <td class=" wrap-nomor-kamar${new_idx}">
                                                    <select name="nomor_kamar[${new_idx}]"
                                                            id="nomor_kamar${new_idx}_0"
                                                            data-group="${new_idx}"
                                                            data-idx="0"
                                                            class="form-control form-control-select2-red nomor_kamar_${new_idx} nomor_kamars"
                                                            onchange="checkNomor(this.id)"
                                                    >
                                                        ${ $('#nomor_kamar'+index+'_0').html() }
                                                    </select>

                                                    <input type="hidden"
                                                            id="jml_kamar${new_idx}_0"
                                                            name="jml_kamar[${new_idx}]"
                                                            class="form-control"
                                                            min="1"
                                                            value="1"
                                                    >
                                                </td>

                                                {{-- Rate Code --}}
                                                <td class="addError wrap-rate_code${new_idx} ">
                                                    <select name="rate_codes[${new_idx}]" id="rate_code${new_idx}_0"
                                                            data-group="${new_idx}" data-idx="0" onchange="getPrice(this.getAttribute('data-idx'), this.getAttribute('data-group'), 1), removeColorValidation(this.id), sameValueRate(this.value, this.getAttribute('data-group'))"
                                                            class="form-control form-control-select2-red multiroom_rates rate_codes_${new_idx}" required
                                                    >
                                                        ${ $('#rate_code'+index+'_0').html() }
                                                    </select>

                                                    <input type="hidden" id="selratecodeid${new_idx}_0" name="selratecodeid[${new_idx}]">
                                                    <input type="hidden" id="ratecode_id${new_idx}_0" name="ratecode_id[${new_idx}]">
                                                </td>

                                                {{-- Arrangement Code --}}
                                                <td class=" wrap-arrangement-code${new_idx}">
                                                    <button type="button" id="open_arr_dialog${new_idx}" onclick="openArrangementDialog(${new_idx}, 0)" class="btn btn-primary">
                                                        <i class="fas fa-calendar-check"></i>
                                                        <span class=""></span>
                                                    </button>

                                                    <div id="hidden_arrangement_code_container${new_idx}">
                                                    </div>
                                                </td>

                                                {{-- Harga --}}
                                                <td class=" wrap-harga${new_idx}">
                                                    <input type="text" value="${ $('#per_item'+index).val() }"
                                                        id="per_item${new_idx}" class="form-control"
                                                        placeholder="Harga"  style="border-color: red"  disabled readonly>\

                                                    <span class="text-danger" id="ket_diskon${new_idx}">
                                                    </span>
                                                </td>

                                                {{-- Block Kamar --}}
                                                <td class="wrap-block-kamar${new_idx}">
                                                    <input class="rcheckbox cekblokkamar" type="checkbox" data-idkamar="${new_idx}" data-groupkamar="0" id="block_kamar${new_idx}_0" name="block_kamar[${new_idx}]" data-nokamar="">
                                                </td>

                                                {{-- Billing Instruction --}}
                                                <td class="wrap-billing-instruction${new_idx}">
                                                    <select name="status_lock[${new_idx}]" id="status_lock" class="form-control-select2-no-search">
                                                        <option value="">-- Select Billing Instruction --</option>
                                                        <option value="1" selected>No</option>
                                                        <option value="0">Yes</option>
                                                    </select>
                                                </td>

                                                {{-- Incognito --}}
                                                <td class="wrap-incognito${new_idx}">
                                                    <div class="form-check">
                                                        <label class="form-check-label" for="flexCheckDefault">
                                                            <input class="rcheckbox form-check-input" type="checkbox" name="incognito[${new_idx}]" value="1" id="incognito">
                                                        </label>
                                                    </div>
                                                </td>
                                            </tr>`;
                            //========================== End html app ==========================//

                            // getKamar('jns_kamar'+new_idx+'_0'); maybe useless

                            // INSERT VARIABLE HTML TO CONTAINER
                            // $('#container_multiple_room').append(html_app);
                            $('.listtable tbody').append(html_app);

                            // CHANGE APPENDED JENIS KAMAR WITH COPIED VALUE WITHOUT TRIGGERING FUNCTION ON IT
                            let this_jenis_kamar = $('#jns_kamar'+new_idx+"_0");
                            this_jenis_kamar.val(jenis_nama).select2()

                            // RESET NOMOR KAMAR JUST FOR TEMPORARY!!!
                            let this_nomor_kamar = $('#nomor_kamar'+new_idx+"_0");
                            this_nomor_kamar.val(null).select2()

                            // CHANGE APPENDED RATECODE WITH COPIED VALUE  WITHOUT TRIGGERING FUNCTION ON IT
                            let this_rate_code  = $('#rate_code'+new_idx+"_0");
                            this_rate_code.val(rate_value).select2()

                            // CREATING ROW ON ARRANGEMENT MODAL
                            multipleArrangement(new_idx, index);

                            // TRIGGER CHANGE ARRANGEMENT CODE ON MODAL ===>> TRIGGER GETPRICE WITH BUTTON CONDITION 1
                            let all_arr_codes	= $('.arrangement_cols'+new_idx);
                            $.each(all_arr_codes, function(key, val){
                                let copied_options = $('#arrangement_code'+index+'_'+key).html();
                                let value_this     = $('#arrangement_code'+index+'_'+key).val();

                                let replace        = $(val).html(copied_options);
                                let rp             = $(val).val(value_this).select2().change()
                            });

                            // TRIGGER CHANGE LOCAL RATE ON MODAL ==>> TRIGGER RECOUNT() FUNCTION
                            let all_local_room	= $('.local_room'+new_idx);
                            $.each(all_local_room, function(key, val){
                                if ($('#input_localrate'+index+'_'+key).length) {
                                    let copied_rate_night = parseInt(($('#input_localrate'+index+'_'+key).val()).replaceAll(".",""));
                                    let replace           = $(val).val( formatRibuanID(copied_rate_night) ).change();
                                }
                            });

                            // //Hitung total kembali jika harga diedit
                                // $('[name="per_item[]"]').on('change', function(){
                                //     let harga_kumulatif = 0;
                                //     let harga_tiap_item = $('[name="per_item[]"]');
                                //     $.each(harga_tiap_item, function(key, val){
                                //         let harga_kamar = parseInt(($(val).val()).replaceAll(".",""));
                                //         if(!isNaN(harga_kamar)){
                                //             harga_kumulatif += parseInt(harga_kamar);
                                //         }
                                //     });
                                //     //Grand Total, total harga Dikali jumlah malam
                                //     let jml_malam = $('#jml_malam').val();
                                //     let grand_total = harga_kumulatif * jml_malam;
                                //     $('#total_biaya').val(grand_total);
                            // });

                            hitungjumlahdewasa()

                            // Initialize form-select2 or calling again select2 : function for append select2 is working.
                            $('.form-control-select2').select2();
                            $('.form-control-select2-no-search').select2();
                            $('.form-control-select2-red').select2();
                            $('.form-control-select2-red').each(function(){
                            $(this).siblings('.select2-container').css('border', '1px solid red');
                            });

                            $('#inpDatePicker'+new_idx+'_0').daterangepicker({
                                applyClass: 'btn-success',
                                cancelClass: 'btn-danger',
                                minDate: "{{ date('d-m-Y', strtotime(getSystemDate())) }}",
                                startDate: moment(range.startDate).format('DD-MM-YYYY'),
                                endDate: moment(range.endDate).format('DD-MM-YYYY'),
                                locale: {
                                    format: 'DD-MM-YYYY'
                                }
                            });

                            $('#expected_arrival'+new_idx+'_0').val(expected_arrival).AnyTime_picker({
                                format: '%H:%i',
                            });

                            applyDateRangePicker('daterange-buttons')

                            new_idx ++;
                            multiple_room ++;

                        }

                        // ======== Hidden After Duplicated ========
                        let all_nomors = $('.nomor_kamars')
                        $.each(all_nomors, function(key, val){
                            if ($(val).find(":selected").val() != '') {
                                // arrays_kamarss[key] = $(val).find(":selected").val();
                                let nomor_kamar_multiple_room = $(val).val()
                                let idx_multiple_room = $(val).data('idx')
                                let group_multiple_room = $(val).data('group')
                                let checkin_multiple_room = $('#start_date'+group_multiple_room+'_'+idx_multiple_room).val()
                                let checkout_multiple_room = $('#end_date'+group_multiple_room+'_'+idx_multiple_room).val()

                                if (!arrays_kamarss.hasOwnProperty(key)) {
                                    arrays_kamarss[key] = []
                                }

                                arrays_kamarss[key]['nomor_kamar'] = nomor_kamar_multiple_room
                                arrays_kamarss[key]['checkin'] = checkin_multiple_room
                                arrays_kamarss[key]['checkout'] = checkout_multiple_room
                            }
                        });

                        hiddenSelectedNomorKamar();
                        // ======== Hidden After Duplicated ========

                    }
                }
            });


		}

        function hitungjumlahdewasa(){
            let jk = 0;
            // $.each($('[name*="jns_kamar["]'),function (key, val){
            //     nilai = (parseInt($(val).find('option:selected').attr('data-kapasitas'))>0) ? parseInt($(val).find('option:selected').attr('data-kapasitas')) : 0
            //     jk += nilai
            // });

            $.each($('[name*="pax["]'),function (key, val){
                nilai = (parseInt($(val).val())>0) ? parseInt($(val).val()) : 0
                jk += nilai
            });

            $('#jml_dewasa').val(jk)
        }

        function modalMultiRoom(index){
            $('#multiple_room_modal').modal('show');
            $('#qty_multiple_room').val(1);
            $('#apply_multi_button').attr('onclick', 'moreRoom('+index+')');
        }

		function removeKamar(group, id){
			var kapasitas_kamardikurangi = $('#jns_kamar'+group+'_'+id+' option:selected').data('kapasitas')

			// var jml_dewasa = $('#jml_dewasa').val()
			// var new_jml_dewasa = Number(jml_dewasa) - kapasitas_kamardikurangi
			// // console.log(jml_dewasa, kapasitas_kamardikurangi)
			// $('#jml_dewasa').val(new_jml_dewasa)

			$('#row_'+group+'_'+id).remove();

            // Delete Arrangement Tables in modal dialog Arr
			$('#arrangement_list_'+group).remove();

            // new_idx                 =   new_idx - 1
            multiple_room--

            // reset container array
            arrays_kamarss = [];
            // to fill array container room number
            let all_nomors = $('.nomor_kamars')
			$.each(all_nomors, function(key, val){
                if ($(val).find(":selected").val() != '') {
                    // arrays_kamarss[key] = $(val).find(":selected").val();
                    let nomor_kamar_multiple_room = $(val).val()
                    let idx_multiple_room = $(val).data('idx')
                    let group_multiple_room = $(val).data('group')
                    let checkin_multiple_room = $('#start_date'+group_multiple_room+'_'+idx_multiple_room).val()
                    let checkout_multiple_room = $('#end_date'+group_multiple_room+'_'+idx_multiple_room).val()

                    if (!arrays_kamarss.hasOwnProperty(key)) {
                        arrays_kamarss[key] = []
                    }

                    arrays_kamarss[key]['nomor_kamar'] = nomor_kamar_multiple_room
                    arrays_kamarss[key]['checkin'] = checkin_multiple_room
                    arrays_kamarss[key]['checkout'] = checkout_multiple_room
                }
            });
            hitungjumlahdewasa()

            getPrice(id, group, 0);

		}

		function selectJenisKamar(id, startdate){
			$.ajax({
				type: 'GET',
				url: "{{ url('/getjeniskamar-text/')}}/"+id+"/"+startdate,
				success: function (data) {
					$('[name="jns_kamar[]"]').html(data);
				}
			});
		}


		function unblockbtn(groupkamar, idkamar, nokamar) {

            console.log(groupkamar, idkamar, nokamar)
			// var groupkamar = $('#btnmodalunblock').data('groupkamar')
			// var idkamar = $('#btnmodalunblock').data('idkamar')
			// var nokamar = $('#nokamarmodalunblock').text()

			// console.log('tes'+groupkamar, idkamar, nokamar)
			// var groupkamar = $('#btnmodalunblock').data('groupkamar')
			// var idkamar = $('#btnmodalunblock').data('idkamar')

			// console.log(groupkamar, idkamar)
			$('#modal_unblock_kamar').modal('hide');

			new PNotify({
							title: 'Success',
							// text: 'Room '+nokamar+' unblocked',
							text: 'Room unblocked !',
							icon: 'icon-checkmark3',
							type: 'danger'
						});

			$('#block_kamar'+idkamar+'_'+groupkamar).prop('checked', false);
			$('#jns_kamar'+idkamar+'_'+groupkamar).prop("disabled", false);
			$('#nomor_kamar'+idkamar+'_'+groupkamar).prop("disabled", false);
			$('#btnremovekamar'+idkamar+'_'+groupkamar).prop("disabled", false);
			$('#inpDatePicker'+idkamar+'_'+groupkamar).prop("disabled", false);
			$('#jml_malam'+idkamar+'_'+groupkamar).prop("readonly", false);
			$('#expected_arrival'+idkamar+'_'+groupkamar).prop("disabled", false);
			$('#guest_room'+idkamar+'_'+groupkamar).prop("readonly", false);
			$('#rate_code'+idkamar+'_'+groupkamar).prop("disabled", false);
			$('#per_item'+idkamar+'_'+groupkamar).prop("disabled", false);
			$('#status_lock'+idkamar+'_'+groupkamar).prop("disabled", false);
			$('#incognito'+idkamar+'_'+groupkamar).prop("disabled", false);

		}



		var Modals = function () {

			console.log()

		// Load remote content
		var _componentModalRemote = function() {
			$('#modal_remote').on('show.bs.modal', function() {
				$(this).find('.modal-body').load('../../../../global_assets/demo_data/wizard/education.html', function() {
					_componentSelect2();
				});
			});
		};

		// Bootbox extension
		var _componentModalBootbox = function() {
			if (typeof bootbox == 'undefined') {
				console.warn('Warning - bootbox.min.js is not loaded.');
				return;
			}

			$(document).on('change', '.cekblokkamar',function(e) {
			var idkamar = $(this).data('idkamar')
			var groupkamar = $(this).data('groupkamar')
			var nokamar = $(this).data('nokamar')
			var stack_custom_top = {"dir1": "right", "dir2": "down", "push": "top", "spacing1": 1};
			var checkbox = $(this);

			console.log('kiriman'+groupkamar, idkamar)
			if (!checkbox.is(":checked")) {

				// prevent checkbox unchecked
				if (checkbox.is(":checked")) {
				//check it
				} else {
				// prevent from being unchecked
					this.checked=!this.checked;
				}

				// console.log(groupkamar, idkamar)
				// show modal confirm unblock
				$('#btnmodalunblock').attr('data-groupkamar', groupkamar)
				$('#btnmodalunblock').attr('data-idkamar', idkamar)
				$('#btnmodalunblock').attr('onclick', 'unblockbtn('+groupkamar+','+idkamar+','+nokamar+')')


				$('#nokamarmodalunblock').text(nokamar)
				$('#modal_unblock_kamar').modal('show');
				// bootbox.confirm({
				// 	// title: 'Confirmation',
				// 	size:'large',
				// 	message: '<h3>This room('+nokamar+') is <span class="font-weight-semibold text-danger">Blocked</span>. Do you want to <span class="font-weight-semibold text-danger">unblock</span> this room?</h3>',
				// 	buttons: {
				// 		confirm: {
				// 			label: '<i class="icon-checkmark mr-1"></i> Yes, unblock this room.',
				// 			className: 'btn-danger'
				// 		},
				// 		cancel: {
				// 			label: 'Cancel',
				// 			className: 'btn-link'
				// 		}
				// 	},
				// 	callback: function (result) {
				// 		// console.log(result)
				// 		if (result==true) {
				// 			// bootbox.alert({
				// 			// 	title: 'Confirmation result',
				// 			// 	message: 'Confirm result: ' + result
				// 			// });

				// 			new PNotify({
				// 				title: 'Success',
				// 				text: 'Room '+nokamar+' unblocked',
				// 				icon: 'icon-checkmark3',
				// 				type: 'danger'
				// 			});
				// 			checkbox.prop('checked', false); // Unchecks it
				// 			$('#jns_kamar'+groupkamar+'_'+idkamar).prop("disabled", false);
				// 			$('#nomor_kamar'+groupkamar+'_'+idkamar).prop("disabled", false);
				// 			$('#btnremovekamar'+groupkamar+'_'+idkamar).prop("disabled", false);
				// 		}
				// 	}
				// });

				// On cancel
				// notice.get().on('pnotify.cancel', function() {

				// });
			}

		})

		};

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

			// Initialize
			$('.form-control-select2').select2({
				minimumResultsForSearch: Infinity
			});
		};


		//
		// Return objects assigned to module
		//

		return {
			initComponents: function() {
				_componentModalBootbox();
			}
		}
		}();


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

		document.addEventListener('DOMContentLoaded', function() {
		Modals.initComponents();
		});


		function selectNomorKamar(select_element, hotel_id, jenis_kamar, checkin, checkout, roomindexhere){
            console.log(roomindexhere)
			var scheckin = moment(checkin).format('YYYY-MM-DD');
			var scheckout = moment(checkout).format('YYYY-MM-DD');
			$('#start_date').val(scheckin)
			$('#end_date').val(scheckout)

			$.ajax({
				type: 'GET',
				url: "{{ url('/getnomorkamar-edit')}}/"+hotel_id+"/"+jenis_kamar+"/"+scheckin+"/"+scheckout+'/'+{{$booking->id}}+'/'+roomindexhere,
				success: function (data) {
					$(select_element).html(data);

                    // ======== Hidden After Add Room ========
                        hiddenSelectedNomorKamar();
                    // ======== Hidden After Add Room ========
				}
			});
		}

		//Select Ratecode untuk segmentasi non corporate
		function selectRateCode(select_element, jenis_kamar, segmentasi, checkin){
			var scheckin = moment(checkin).format('YYYY-MM-DD');
			$.ajax({
				type: 'GET',
				url: "{{ url('/getratecodes')}}/"+jenis_kamar+"/"+segmentasi+"/"+scheckin,
				success: function (data) {
					$(select_element).html(data);
				}
			});
		}

		//Select ratecode untuk segmentasi corporate
		// function selectRateCodeCompany(select_element, jenis_kamar, company_id, checkin){
		function selectRateCodeCompany(select_element, jenis_kamar, company_id, segmentasi, checkin){
			var scheckin = moment(checkin).format('YYYY-MM-DD');
			console.log("{{ url('/getcompanyratecodes')}}/"+jenis_kamar+"/"+company_id+"/"+segmentasi+"/"+scheckin);
			$.ajax({
				type: 'GET',
				url: "{{ url('/getcompanyratecodes')}}/"+jenis_kamar+"/"+company_id+"/"+segmentasi+"/"+scheckin,
				success: function (data) {
					$(select_element).html(data);
				}
			});
		}

		//Trigger ketika jumlah dewasa diganti
		$("#jml_dewasa").on('change', function(){
			let idx_before = new_idx - 1;
			let jumlah_dewasa = $(this).val();
			let kapasitas_total = 0
			let kamar2 = $('[name="jns_kamar[]"]');
			let jenis_kamar_options = $("#jns_kamar"+idx_before).html();
			let nomor_kamar_options = $("#nomor_kamar"+idx_before).html();

			//Ngesum kapasitas kamar dari option jenis kamar yang sudah dipilih
			$.each(kamar2, function(key, val){
				let val_option = $(val).val();
				let kapasitas_kamar = parseInt($(val).find('option[value="'+val_option+'"]').attr('data-kapasitas'));
				if(!isNaN(kapasitas_kamar)){
					kapasitas_total += kapasitas_kamar;
				}
			});

			// if(jumlah_dewasa > kapasitas_total){
			// 	$("#alert-kamar").removeAttr('style');
			// }
			// else{
			// 	$("#alert-kamar").removeAttr('style');
			// 	$("#alert-kamar").attr('style', 'display:none');
			// }
		});

		//Update Rate Code Ketika Segmentasi Segment Diganti
		$('#segmentasi_rate_code').on('change', function(){
			let segmentasi = $(this).val();
            let jenis_booking = $('#jenis_booking').val();

			let action_jenis_booking = $('#jenis_booking').data('action-jenis-booking');

			//Enable pilihan company guest jika segmentasinya company (Value 2 (Corporate) atau 3 (Group corporate))
            // if(action_jenis_booking == 'false' || action_jenis_booking == false){
            //     if(['2','3','4','5','6','8','9'].includes(segmentasi)){
            //         $('#company_id').removeAttr('disabled');
            //         $('#company_id').attr('required', 'required');
            //     }else{
            //         $('#company_id').removeAttr('required');
            //         $('#company_id').attr('disabled', 'disabled');

            //         $('#company_danger').html('');
            //         $('#submit').removeAttr('disabled');
            //     }

            //     //Ambil Corporate Dengan Segment
            //     getCorporateBySegment(segmentasi);
            // }

			freeCompliment();

			// //Ambil Ratecode berdasarkan SEgmentasinya
			// let range = $('#inpDatePicker').data('daterangepicker');
			// let checkin = moment(range.startDate).format('YYYY-MM-DD') ?? '';
			let company_id = $('#company_id').val();

			// let jenis_kamars = $('[name="jns_kamar[]"]');
            let jenis_kamars = $('[name*="jns_kamar["]');

            // //Ambil Corporate Dengan Segment
            // getCorporateBySegment(segmentasi);

            // $('#jenis_booking').data('action-jenis-booking', 'false');

			$.each(jenis_kamars, function(key, val){
                let group = $(val).data('group')
                let idx = $(val).data('idx')

                //Ambil Ratecode berdasarkan SEgmentasinya
                let range = $('#inpDatePicker'+group+'_'+idx).data('daterangepicker');
                console.log(moment(range.startDate).format('YYYY-MM-DD'), 'ini ada start date')
                let checkin = moment(range.startDate).format('YYYY-MM-DD') ?? '';

				let jenis_kamar_value = $('#jns_kamar'+group+'_'+idx).val();
				let jenis_kamar_id = $('#jns_kamar'+group+'_'+idx).find('option[value="'+jenis_kamar_value+'"]').attr('data-id');
				if(['2','3','4','5','6','8','9'].includes(segmentasi)){
					selectRateCodeCompany('#rate_code'+group+'_'+idx, jenis_kamar_id, company_id, segmentasi, checkin);
				}
				else{
					selectRateCode('#rate_code'+group+'_'+idx, jenis_kamar_id, segmentasi, checkin);
				}
			});
		});

        //when change jenis booking
		$('#jenis_booking').on('change', function(){
            // get value jenis booking
			let jenis_booking = $(this).val();

            // reset
            $('#segmentasi_rate_code').val('').trigger('change');
            $('#source').val('').trigger('change');
            $('#company_id').val('').trigger('change');

            // check if value jenis booking is 1 (FIT), auto fill segmentasi (individual) and Source (Walk in Guest)
            if(jenis_booking == 1){
                $('#segmentasi_rate_code').val('1').trigger('change');
                $('#source').val('1').trigger('change');

                $('#company_id').removeAttr('required');
                $('#company_id').attr('disabled', 'disabled');
            }

            // if value jenis booking is 10 (Company), undisabled company
            else if(['10', '20'].includes(jenis_booking)){
                // Change value of data action jenis booking in true
                // true = corporate by jenis booking, false = corporate by segment
                $(this).data('action-jenis-booking', 'true')

                $('#company_id').removeAttr('disabled');
                $('#company_id').attr('required', 'required');

                getCorporateByJenisBooking(jenis_booking);
            }
		});

		// Compliment dan house use gratis
		function freeCompliment(){
			let segmentasi = $('#segmentasi_rate_code').val();

			//Jika Segmentasi House Use dan Compliment Total Biaya 0
			if(['10', '11'].includes(segmentasi)){
				console.log('compliment');
				$('.total_biaya').val(0);
				$('.total_biaya').attr('readonly', 'readonly');
				$('[id*="rate_code"]').removeAttr('required');
			}
			else{
				// $('#total_biaya').removeAttr('readonly'); //always disabled or readonly now
				$('[id*="rate_code"]').attr('required', 'required');
			}
		}

		function getCorporateBySegment(id_segment){
			$.ajax({
				type: 'GET',
				url: "{{ url('/get-corporate')}}/1/"+id_segment,
				success: function (data) {
					$('#company_id').html(data);
				}
			});
		}

        function getCorporateByJenisBooking(jenis_booking){
			$.ajax({
				type: 'GET',
				url: "{{ url('/get-corporate-by-jenis-booking')}}/"+jenis_booking,
				success: function (data) {
					$('#company_id').html(data);
				}
			});
		}

		//Cek status company jika status company inactive booking tidak dapat ditambahkan
		$('#company_id').on('change', function(){
			let company_val = $(this).val();
			let status_company = $(this).find('option[value="'+company_val+'"]').attr('data-status');
			let status_company_text = $(this).find('option[value="'+company_val+'"]').attr('data-status-text');
			let nama_perusahaan = $(this).find('option[value="'+company_val+'"]').attr('data-perusahaan');

            let action_jenis_booking = $('#jenis_booking').data('action-jenis-booking');

            let source_awal = $('#source').val();
            let source = $(this).find('option[value="'+company_val+'"]').attr('data-source');
            let segmentasi_rate_code = $(this).find('option[value="'+company_val+'"]').attr('data-segmentasi_rate_code');

            console.log(source, segmentasi_rate_code)
            if (action_jenis_booking == 'true' || action_jenis_booking == true) {
                $('#source').val(source).trigger('change');
                $('#segmentasi_rate_code').val(segmentasi_rate_code).trigger('change');
            }

			//Status 1: Active; 2: Deactive
			if(status_company == 2){
				let url = "{{url('companyguestprofile')}}";
				$('#company_danger').html('Status Ledger Perusahaan &nbsp;<a href="'+url+'/'+company_val+'/edit" target="_blank"><b>'+nama_perusahaan+'</b></a>&nbsp; Dalam Status <b>'+status_company_text+'</b> Tidak Dapat Menambahkan Transaksi');
				$('#submit').attr('disabled', 'disabled');
			}
			else{
				$('#company_danger').html('');
				$('#submit').removeAttr('disabled');
			}
		});

        //Inputan untuk modal ganti status check in atau cancel reservation
        let booking = {!! json_encode($booking); !!};
		$(document).on("click", ".statusbutton", function () {

            var url = $(this).data('uri');
            var hotel_id = $(this).data('hotel_id')
            var id = $(this).data('id_booking')
            var status_to = $(this).data('status_to')
            var detail = $(this).data('detail_id')

            let index_increment = 0;

            $.each(booking.booking_details, function(i, v) {
                if (v.status_booking != 2 && v.status_booking != 13) {
                    if (!v.nomor_kamar) {
                        index_increment++;
                    }
                }
            });

            $('#id_booking').val(id)
            $('#hotel_id_modal').val(hotel_id)
            $('#status_booking').val(status_to)
            $('#detail_id_cancel_reservation').val(detail)
            $("#statusform").attr("action", url);

            if (status_to == 13) {
                $('.custom-bg').removeClass('bg-info').addClass('bg-danger')
                $('.submit-modal_confirmcancel').removeClass('bg-info').addClass('bg-danger')
                $('#modal_status_confirm_cancel .modal-title').text(' Cancel Reservation ')
                $('#text-confirmcancel').text(' Cancel Reservation? ')
                $(".modal-footer-confirmcancel").show();
                $('.submit-modal_confirmcancel').attr('disabled', false).show()
                $('#modal_body_reservation').show()
            }
            else if(status_to == 1){
                $('.custom-bg').removeClass('bg-danger').addClass('bg-info')
                $('.submit-modal_confirmcancel').removeClass('bg-danger').addClass('bg-info')
                $('#modal_body_reservation').hide()
                $('#modal_status_confirm_cancel .modal-title').text(' Check In ')
                if (index_increment > 0) {
                    $('#text-confirmcancel').text('Silahkan pilih kamar terlebih dahulu!')
                    $('.submit-modal_confirmcancel').attr('disabled', 'true').hide()
                } else{
                    $('#text-confirmcancel').text('Check In?')
                    $('.submit-modal_confirmcancel').attr('disabled', false).show()
                }

                $(".modal-footer-confirmcancel").show();
            }

		});

        //Open Modal No Show Reservation and this input
        $(document).on("click", ".noshowreseration", function(){

            // GET DATA
            var noshowreservation   = $(this).data('noshowreservation')

            // FOR CHECK THE NOSHOWRESERVATION STATUS ON THIS BOOKING
            if (noshowreservation == 0) {

                $('#text-noshowresevation').html('Are you sure want <b>"change"</b> this booking status to "no show reservation"?')

            }else if (noshowreservation == 1) {

                $('#text-noshowresevation').html('Are you sure want <b>"remove"</b> this booking status to "no show reservation"?')

            }

        });

        //Checkbox No show reservation
        $(document).on("click", "#noshowreservation", function(){
            let detail = $(this).data('detail_id');

            $('#booking_detail_id_noshowreservation').val(detail)

            $("#noshowreservationform").submit()
        });

		//Disable submit dengan enter
		$(document).ready(function() {
            addArrangement(0, '', 0);
		  $(window).keydown(function(event){
		    if(event.keyCode == 13) {
		      event.preventDefault();
		      return false;
		    }
		  });
		});

		function removeColorValidation(id) {
			let value = $('#'+id).val();

			if (value != '') {
				let cek = $('.wrap-'+id).hasClass('has-error');

				if (cek == true) {
					$('.wrap-'+id).removeClass('has-error')
				}
				$('#'+id+'-error').hide();
			}
		}

        // TO REMOVE WARNING ON BUTTON OPEN ARRANGEMENT MODAL
		function removeWarningButton(idx) {
            // DEFINING ALL VARIABLE THAT USE THIS FUNCTION
			let malam 		= $('#jml_malam'+idx+'_0').val();
			let arr_codes 	= $('.arrangement_cols'+idx)
            let i           = 0;

            // FOREACH THE RIGHT ARRANGEMENT COLS WITH INDEX (idx)
            $.each(arr_codes, function (index, val) {
                if($(val).val() != ''){
                    i += 1;
                }
            });

            // CHECK IF VALUE HAS BEEN FILLED ALREADY SAME WITH VALUE NIGHT COUNT
            console.log('removewarningbutn'+i+','+malam)
			if (i == malam) {
                $('#open_arr_dialog'+idx).children('span').removeClass('circle');
                $(".submit").attr("disabled", false);
                console.log('disabled false')
			}
		}

        // Set Jenis Pembayaran
        let platform_pembayarans = {!! json_encode($platforms); !!};

        function setJenisPembayaran(){
            $('#submit_pembayaran_checkout').removeAttr('disabled');
            //1: Cash; 2: Credit Card; 3: Transfer;
            let jenis_deposit = $('#checkout_jenis_pembayaran').val();
            //Platform Pembayaran
            let option_pembayaran = `<option value="">** Select Payment Platform **</option>"`;

            //Reset Form Platform Pembayaran
            $('#platform_pembayaran_id').select2().val('').trigger('change');

            //Show Platform pembayaran jika memilih jenis deposit
            if(['2','4'].includes(jenis_deposit)){
                $('#pembayaran_transfer').hide()
                $('#checkout_jenis_pembayaran_option').show();

                $.each(platform_pembayarans[jenis_deposit], function(key, platform){
                    // console.log(val)
                    option_pembayaran += `<option value="${platform.id}">${platform.nama}</option>`
                });

                $('#platform_pembayaran_id').html(option_pembayaran);
                $('#platform_pembayaran_id').attr('required', 'required');
                $('.wrap_segmentation_option').hide()
                $('#checkout_pembayaran_segment').attr('required', false)
            }
            else if(jenis_deposit == '3'){
                $('#checkout_jenis_pembayaran_option').hide();
                $('#platform_pembayaran_id').removeAttr('required');

                $('#pembayaran_transfer').show();

                $('.wrap_segmentation_option').hide()
                $('#checkout_pembayaran_segment').attr('required', false)
            }
            else{
                $('#checkout_jenis_pembayaran_option').hide();
                $('#platform_pembayaran_id').removeAttr('required');
                $('#pembayaran_transfer').hide();

                if (jenis_deposit == '5') {
                    $('.wrap_segmentation_option').show()
                    $('#checkout_pembayaran_segment').attr('required', true)
                    $('#alert-limit-ledger').show()
                    $('#submit_pembayaran_checkout').prop('disabled', true);
                }else{
                    $('.wrap_segmentation_option').hide()
                    $('#checkout_pembayaran_segment').attr('required', false)
                    $('#alert-limit-ledger').hide()
                }
            }
        }

        $('#checkout_pembayaran_segment').on('change', function() {
            var stat = $('#checkout_pembayaran_segment').val()
            if (stat) {
                $('#submit_pembayaran_checkout').prop('disabled', false)
            }else{
                $('#submit_pembayaran_checkout').prop('disabled', false)
            }
        })

        //Pilih Jenis Refund
        function setJenisRefund(){
            //1: Cash; 2: Credit Card; 3: Transfer;
            let jenis_deposit = $('#refund_jenis_pembayaran').val();
            //Platform Pembayaran
            let option_pembayaran = `<option value="">** Select Payment Platform **</option>"`;

            //Reset Form Platform Pembayaran
            $('#refund_platform_pembayaran_id').select2().val('').trigger('change');
            $('#refund_transfer_akunting_id').select2().val('').trigger('change');

            //Show Platform pembayaran jika memilih jenis deposit
            if(['2','4'].includes(jenis_deposit)){
                $('#refund_transfer').hide();
                $('#refund_jenis_pembayaran_option').show();

                $.each(platform_pembayarans[jenis_deposit], function(key, platform){
                    // console.log(val)
                    option_pembayaran += `<option value="${platform.id}">${platform.nama}</option>`
                });

                $('#refund_platform_pembayaran_id').html(option_pembayaran);
                $('#refund_platform_pembayaran_id').attr('required', 'required').attr('disabled', false);
            }
            else if(jenis_deposit == '3'){
                $('#refund_jenis_pembayaran_option').hide();
                $('#refund_platform_pembayaran_id').removeAttr('required').attr('disabled', true);

                $('#refund_transfer').show();
            }
            else{
                $('#refund_jenis_pembayaran_option').hide();
                $('#refund_platform_pembayaran_id').removeAttr('required').attr('disabled', true);
                $('#refund_transfer').hide();
            }
        }

        // // Checkout + Pelunasan
        // let jenis_deposit_text = {!! json_encode(config('custom.jenis_deposit')) !!};
        // let jenis_pembayaran = {!! json_encode(config('custom.jenis_pembayaran')) !!};
        function ClickBtnPembayaranCheckout(id, nominal, segmentasi_rate_code, room_index, company_id){
			// Reset Modal
	        $("#checkout_jenis_pembayaran").val('').trigger("change");
	        $("#voucher").val('');

            // Option Metode Pembayaran
                // defined variable
                let segmentations = $('.segmentation_value')

                // ajax get data booking
                $.ajax({
                    type: "GET",
                    url: "{{url('data-booking')}}/"+id,
                    success: function (data) {
                        var booking = data.booking

                        //Cek apakah data booking termasuk ledger atau individual ledger
                        var company_ledger = booking.company_id;
                        var status_company_ledger  = booking?.company?.status_ledger
                        var status_limittime  = booking?.company?.statuslimittime
                        var limittime         = booking?.company?.limittime
                        var individual_ledger = booking?.guest?.individual_ledger ?? booking?.guest_profile?.individual_ledger;
                        var status_individual_ledger = booking?.guest?.status_ledger ?? booking?.guest_profile?.status_ledger;
                        var option_metode_pembayaran = '<option value="">** Select Payment Method **</option>';

                        $.each(jenis_deposit_text, function(index, metode_pembayaran){
                            if(!['3'].includes(index)){
                                option_metode_pembayaran += `<option value="${index}">${metode_pembayaran}</option>`;
                            }
                        });

                        $(".segmentation_value").prop('disabled', true)

                        $.each(segmentations, function(index_segmentation, segmentation){
                            if(($(segmentation).val() == booking?.company?.main_segment && status_company_ledger == 1) || (individual_ledger ? $(segmentation).val() == 14 && status_individual_ledger == 1: false)){
                                $("#checkout_pembayaran_segment option[value='"+$(segmentation).val()+"']").prop('disabled', false)
                            } else {
                                $("#checkout_pembayaran_segment option[value='"+$(segmentation).val()+"']").prop('disabled', true)
                            }
                        });

                        let dateSystem = {!! json_encode(getSystemDate()) !!}
                        console.log(status_limittime, limittime,dateSystem >  limittime)
                        if (status_limittime == 1 && dateSystem > limittime) {
                            $('#alert-limit-ledger').html('This ledger has been disabled, pass the time limit '+ moment(limittime).format('YYYY-MM-DD') );
                            $('#checkout_pembayaran_segment').prop('disabled', true)
                            $('#submit_pembayaran_checkout').prop('disabled', true)
                        }else{
                            $('#alert-limit-ledger').html(null);
                            $('#checkout_pembayaran_segment').prop('disabled', false)
                            $('#submit_pembayaran_checkout').prop('disabled', false)
                        }


                        $('#checkout_jenis_pembayaran').html(option_metode_pembayaran);
                        $('.wrap_segmentation_option').attr('style','display:none')
                        $('#checkout_pembayaran_segment').attr('required', false)
                        $('#checkout_pembayaran_segment').val('').select2().trigger('change')
                    }
                });

            // Option Metode Pembayaran

            $('#checkout_pembayaran_room_index').val(room_index)

            if(['10','11'].includes(segmentasi_rate_code))
            {
                $('#checkout_pembayaran_nominal').val(0)
                $('#checkout_jenis_pembayaran').removeAttr('required');
                $('#checkout_jenis_pembayaran').attr('disabled', 'disabled');

                $('#nominalbayar').text('Remaining Balance : Rp ' + ribuanWithComma(Number(0)))
            }
            else{
                nominal = String(nominal).replace(/(?<!\..*)(\d)(?=(?:\d{3})+(?:\.|$))/g, '$1,')
                $('#checkout_pembayaran_nominal').val(nominal.toLocaleString('ID'))
                $('#checkout_jenis_pembayaran').attr('required', 'required');
                $('#checkout_jenis_pembayaran').removeAttr('disabled');

                $('#nominalbayar').text('Remaining Balance : Rp ' + ribuanWithComma(nominal))
            }

            // // jika segmen bukan individual ledger, jangan tampilkan jenis pembayaran ledger
            // if (!['14'].includes(segmentasi_rate_code)) {
            //     $('#checkout_jenis_pembayaran option[value=5]').remove();
            // } else {
            // // jika segmen individual ledger, tampilkan jenis pembayran ledger
            //     $('#checkout_jenis_pembayaran').append($('<option>', {value:5, text:'Ledger'}));
            // }

            // $('#checkout_pembayaran_segment').val(segmentasi_rate_code).trigger('change')
            // $('#checkout_pembayaran_segment').val('').trigger('change')

            if (['2','3','4','5','6','8','9'].includes(segmentasi_rate_code)) {
                $('#checkout_pembayaran_company_ledger').removeAttr('style')

                setTimeout(function(){
                    $('#company_ledger_pembayaran_checkout').val(company_id);
                }, 1000);

            }else{
                $('#checkout_pembayaran_company_ledger').attr('style','display:none')
            }

            detailBooking(id, room_index);
        }

        // Checkout + Refund
        function ClickBtnRefundCheckout(id, nominal, segmentasi_rate_code, room_index, company_id){

            $('#checkout_refund_room_index').val(room_index)

            $('#refund_nominalbayar').text('Refund Nominal : Rp ' + ribuanWithComma(Number(Math.abs(nominal))))

            $('#checkout_nominal_refund').val(ribuanWithComma(nominal * -1))
            $('#checkout_refund_segment').val(segmentasi_rate_code).trigger('change')

            if (segmentasi_rate_code == 2 || segmentasi_rate_code == 3 ) {
                $('#checkout_refund_company_ledgers').removeAttr('style')
                $('#checkout_refund_company_ledgers').val(company_id);

            }else{
                $('#checkout_refund_company_ledger').attr('style','display:none')
            }

            detailBooking(id, room_index);
        }

        function checkBeforeCheckoutRefund() {
            event.preventDefault();

            let booking_id = $('#checkout_refund_booking_id').val();
            let room_index = $('#checkout_refund_room_index').val();

            $.ajax({
                type: "get",
                url: "{{route('check-before-checkout')}}",
                data: {
                    booking_id:booking_id,
                    room_index:room_index
                },
                dataType: "json",
                success: function (response) {
                    if (response < 1) {
                        callModalAlert("Can't checkout, because the roomcharge haven't yet generate")
                    }else{
                        $('#form_checkout_refund').submit()
                    }
                }
            });
        }

        // Check Room Rate has been generated or not
        function checkBeforeCheckout() {
            event.preventDefault();
            let booking_id = $('#checkout_pembayaran_booking_id').val();
            let room_index = $('#checkout_pembayaran_room_index').val();
            $.ajax({
                type: "get",
                url: "{{route('check-before-checkout')}}",
                data: {
                    booking_id:booking_id,
                    room_index:room_index
                },
                dataType: "json",
                success: function (response) {
                    if (response < 1) {
                        callModalAlert("Can't checkout, because the roomcharge haven't yet generate")
                    }else{
                        $('#form_checkout').submit()
                    }
                }
            });
        }

        $('#form_checkout').on('submit', function(e){
            // $('#submit_pembayaran_checkout').prop('disabled', true)
            var empty = false;
            $('#form_checkout').find('[required]').each(function() {
                if ($(this).val() == '') {
                    empty = true;
                }
            });

            console.log(empty)
            if (empty) {
                e.preventDefault();
                $("#submit_pembayaran_checkout").attr("disabled", false);

                setTimeout(() => {
                    $('body').unblock()
                    new PNotify({
                        title: 'Error',
                        text: 'Missing required input!, please check again.',
                        icon: 'icon-blocked',
                        type: 'error'
                    });
                }, 5000);
                return false;
            } else {
                $('#submit_pembayaran_checkout').prop('disabled', true)
                return true;
            }
        })

        $('#form_checkout_refund').on('submit', function(){
            $('#btn_refund').prop('disabled', true)
        })

        // Get Data Booking using Ajax
        function detailBooking(id, room_index){
            let segment =  {!! json_encode(config('custom.segment_ratecodes')) !!};

            $.ajax({
                type: 'POST',
                url: "{{route('roomview.detailratebook')}}",
                data: {
                    _token:'{{csrf_token()}}',
                    id: id,
                    room_index:room_index

                },
                success: function (response) {
                    let html = "";

                    $.each(response, function(i, v){


                        if(response.length > 0){
                        html += `
                            <tr>
                                <td><b>Rate Code ${moment(v?.booking_detail?.date_now).format('DD-MM-YYYY')}: </b>${v?.booking_detail?.rate_codes ?? v.description}</td>
                                <td>-</td>
                                <td align="right">${ribuanWithComma(v?.total)}</td>
                                <td align="right">${['10','11'].includes(segmentasi_rate_code) ? 0 : ribuanWithComma(v?.total)}</td>
                            </tr>`
                        }
                        else{
                        html += `
                            <tr>
                                <td>Rate Code -</td>
                                <td>-</td>
                                <td align="right">-</td>
                                <td align="right">-</td>
                            </tr>`
                        }

                        $('.tabelb_rincian_booking').html(html);

                    })
                }
            });

            $.ajax({
                type: 'POST',
                url: "{{route('roomview.detailshopbook')}}",
                data: {
                    _token:'{{csrf_token()}}',
                    id: id,
                    room_index:room_index
                },
                success: function (response) {

						let html = "";

                        // Ambil Data pembayaran pos yang transfer kamar
                        if(response.pembayaran_pos.length > 0){
                            $.each(response.pembayaran_pos, function(i, v){
                                html += `
                                    <tr>
                                        <td><b>Outlet ${moment(v?.cart?.transaction_date).format('DD-MM-YYYY')}: </b>${v?.cart?.order_flag}</td>
                                        <td></td>
                                        <td align="right">${ribuanWithComma(v.nominal)}</td>
                                        <td align="right">${ribuanWithComma(v.nominal)}</td>
                                    </tr>`
                            })

                        }

                        // Ambil Data Item Transaksi Shop
                        if(response.shop_transactions.length > 0){
                            $.each(response.shop_transactions, function(i, v){
                                html += `
                                    <tr>
                                        <td><b>Order ${moment(v?.transaction_date).format('DD-MM-YYYY')}: </b>${v?.menu?.nama ?? v.keterangan_custom} ${v.description ? v.description : ''}</td>
                                        <td>${v.jumlah}</td>
                                        <td align="right">${ribuanWithComma((v?.grand_total/v?.jumlah))}</td>
                                        <td align="right">${ribuanWithComma(v.grand_total)}</td>
                                    </tr>`
                            })
                        }

                        $('.tabelb_rincian_shop_booking').html(html);

                }
            });

            $.ajax({
                type: 'POST',
                url: "{{route('roomview.detaildepobook')}}",
                data: {
                    _token:'{{csrf_token()}}',
                    id: id,
                    room_index:room_index
                },
                success: function (response) {
                    let html = "";

                    $.each(response, function(i, v){


                        if(response.length > 0){
                        html += `
                            <tr>
                                <td><b>${v.deposit_reservasi == 1 ? 'Deposit' : 'Payment' } ${moment(v?.transaction_date).format('DD-MM-YYYY')}: </b> ${v.no_kwitansi == null ? ' - ' : v.no_kwitansi }: ${v.nama} ${jenis_deposit_text[v.jenis_deposit]} ${[2,4].includes(v.jenis_deposit) ? v.platform.nama : ([5].includes(v.jenis_deposit) ? (v.segmentation ? '-'+segment[v.segmentation] : '') : '')} ${v.voucher ? '/'+v.voucher : '' } ${v.description ? '-'+v.description : ''}</td>
                                <td>-</td>
                                <td align="right">-</td>
                                <td align="right">${ribuanWithComma(v.nominal)}</td>
                            </tr>`
                        }
                        else{
                        html += `
                            <tr>
                                <td><b>Payment :</b> - </td>
                                <td>-</td>
                                <td align="right">-</td>
                                <td align="right">-</td>
                            </tr>`
                        }

                        $('.tabelb_rincian_depo_booking').html(html);

                    })
                }
            });

            $.ajax({
                type: 'POST',
                url: "{{route('roomview.detailpembayaransebagianbook')}}",
                data: {
                    _token:'{{csrf_token()}}',
                    id: id,
                    room_index:room_index
                },
                success: function (response) {
                    let html = "";

                    $.each(response, function(i, v){


                        if(response.length > 0){
                        html += `
                            <tr>
                                <td><b>Payment ${moment(v?.transaction_date).format('DD-MM-YYYY')}: </b> ${v.no_kwitansi == null ? ' - ' : v.no_kwitansi }: ${v?.booking?.nama} ${jenis_pembayaran[v.jenis_pembayaran_id]} ${[2,4].includes(v.jenis_pembayaran_id) ? v?.platform_pembayaran?.nama : ([5].includes(v.jenis_pembayaran_id) ? (v.segment ? '-'+segment[v.segment] : '') : '')}</td>
                                <td>-</td>
                                <td align="right">-</td>
                                <td align="right">${ribuanWithComma(v.nominal)}</td>
                            </tr>`
                        }
                        else{
                        html += `
                            <tr>
                                <td><b>Payment :</b> - </td>
                                <td>-</td>
                                <td align="right">-</td>
                                <td align="right">-</td>
                            </tr>`
                        }

                        $('.tabelb_rincian_pembayaran_sebagian_booking').html(html);

                    })
                }
            });

            $.ajax({
                type: 'POST',
                url: "{{route('roomview.detailpembayaranpos')}}",
                data: {
                    _token:'{{csrf_token()}}',
                    id: id,
                    room_index:room_index
                },
                success: function (response) {
                    let html = "";

                    $.each(response, function(i, v){


                        if(response.length > 0){
                        html += `
                            <tr>
                                <td>Transfer from ${v?.cart?.shop?.nama} ${v?.cart?.order_flag}</td>
                                <td>-</td>
                                <td align="right">-</td>
                                <td align="right">${['10','11'].includes(booking.segmentasi_rate_code) ? 0 : ribuanWithComma(v.nominal)}</td>
                            </tr>`
                        }

                        $('.tabelb_rincian_pembayaranpos').html(html);
                        console.log('rincian transfer to room pos')
                    })
                }
            });
        }

        // Scrooll intomview
        function scrollToInvalid(id) {
            const element = document.getElementById(id);
            element.scrollIntoView();
        };

//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'
        // });
        $.each(data_booking_details, function(key_data_booking_detail, data_booking_detail){
            console.log('#expected_arrival'+key_data_booking_detail+'_0', 'ini expected arrival')
            // Button class options
            $('#expected_arrival'+key_data_booking_detail+'_0').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();
        }
    }
}();


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

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

		var FormValidation = function() {

		    // Validation config
		    var _componentValidation = function() {
		        if (!$().validate) {
		            console.warn('Warning - validate.min.js is not loaded.');
		            return;
		        }

		        // Initialize
		        var validator = $('.form-validate-jquery').validate({
					focusInvalid: false,
		            ignore: 'input[type=hidden], .select2-search__field', // ignore hidden fields
		            errorClass: 'validation-invalid-label',
		            //successClass: 'validation-valid-label',
		            validClass: 'validation-valid-label',
		            highlight: function(element, errorClass) {
		                $(element).removeClass(errorClass);
						$(element).closest('.addError').addClass('has-error');
		            },
		            unhighlight: function(element, errorClass) {
		                $(element).removeClass(errorClass);
						$(element).closest('.addError').removeClass('has-error');
		            },
		            // success: function(label) {
		            //    label.addClass('validation-valid-label').text('Success.'); // remove to hide Success message
		            //},

		            // Different components require proper error label placement
		            errorPlacement: function(error, element) {

		                // Unstyled checkboxes, radios
		                if (element.parents().hasClass('form-check')) {
							$(element).closest('.addError').addClass('has-error');
		                    error.appendTo( element.parents('.form-check').parent() );
                            scrollToInvalid(element.attr('id'));
		                }

                        // Arrangement elements
						else if (element.hasClass('form-arrangements')) {
                            console.log(element)
							// add warning on button open arrangement
							$('#open_arr_dialog'+element.data('group')).children('span').addClass('circle');
                            scrollToInvalid(element.attr('id'));
		                }

		                // Input with icons and Select2
		                else if (element.parents().hasClass('form-group-feedback') || element.hasClass('select2-hidden-accessible')) {
							$(element).closest('.addError').addClass('has-error');
						    error.appendTo( element.parent() );
                            scrollToInvalid(element.attr('id'));
		                }

		                // Input group, styled file input
		                else if (element.parent().is('.uniform-uploader, .uniform-select') || element.parents().hasClass('input-group')) {
		                    $(element).closest('.addError').addClass('has-error');
							error.appendTo( element.parent().parent() );
                            scrollToInvalid(element.attr('id'));
		                }

		                // Other elements
		                else {
		                    $(element).closest('.addError').addClass('has-error');
							error.insertAfter(element);
                            scrollToInvalid(element.attr('id'));
		                }
		            },
		            messages: {
						hotel_id: {
							required: 'Mohon diisi.'
						},
		                title: {
		                    required: 'Mohon diisi.'
		                },
		                nama: {
		                    required: 'Mohon diisi.'
		                },
		                alamat: {
		                    required: 'Mohon diisi.'
		                },
		                propinsi: {
		                    required: 'Mohon diisi.'
		                },
		                kota: {
		                    required: 'Mohon diisi.'
		                },
		                negara: {
		                    required: 'Mohon diisi.'
		                },
		                jns_identitas: {
		                    required: 'Mohon diisi.'
		                },
		                no_identitas: {
		                    required: 'Mohon diisi.'
		                },
		                kewarganegaraan: {
		                    required: 'Mohon diisi.'
		                },
		                email: {
		                    required: 'Mohon diisi.'
		                },
		                telp: {
		                    required: 'Mohon diisi.'
		                },
		                'jns_kamar[0]': {
		                    required: 'Mohon diisi.'
		                },
						jml_kamar: {
							required: 'Mohon diisi.'
						},
						checkin: {
							required: 'Mohon diisi.'
						},
						checkout: {
							required: 'Mohon diisi.'
						},
						jml_malam: {
                            min: 'Mohon tentukan waktu reservasi.'
						},
						jml_dewasa: {
							required: 'Mohon diisi.'
						},
						jml_anak: {
							required: 'Mohon diisi.'
						},
						total_biaya: {
							required: 'Mohon diisi.'
						},
						jns_pembayaran: {
							required: 'Mohon diisi.'
						},
                        segmentasi_rate_code: {
							required: 'Mohon diisi.'
						},
                        source: {
							required: 'Mohon diisi.'
						},
                        "arrangement_codes[][": {
							required: 'Mohon diisi.'
						},
		            },
		        });

		        // Reset form
		        $('#reset').on('click', function() {
		            validator.resetForm();
		        });
		    };

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

		var FormValidationCheckout = function() {

		    // Validation config
		    var _componentValidation = function() {
		        if (!$().validate) {
		            console.warn('Warning - validate.min.js is not loaded.');
		            return;
		        }

		        // Initialize
		        var validator = $('.form-validate-checkout').validate({
					focusInvalid: false,
		            ignore: 'input[type=hidden], .select2-search__field', // ignore hidden fields
		            errorClass: 'validation-invalid-label',
		            //successClass: 'validation-valid-label',
		            validClass: 'validation-valid-label',
		            highlight: function(element, errorClass) {
		                $(element).removeClass(errorClass);
						$(element).closest('.addError').addClass('has-error');
		            },
		            unhighlight: function(element, errorClass) {
		                $(element).removeClass(errorClass);
						$(element).closest('.addError').removeClass('has-error');
		            },
		            // success: function(label) {
		            //    label.addClass('validation-valid-label').text('Success.'); // remove to hide Success message
		            //},

		            // Different components require proper error label placement
		            errorPlacement: function(error, element) {

		                // Unstyled checkboxes, radios
		                if (element.parents().hasClass('form-check')) {
							$(element).closest('.addError').addClass('has-error');
		                    error.appendTo( element.parents('.form-check').parent() );
		                }

		                // Input with icons and Select2
		                else if (element.parents().hasClass('form-group-feedback') || element.hasClass('select2-hidden-accessible')) {
							$(element).closest('.addError').addClass('has-error');
						    error.appendTo( element.parent() );
		                }

		                // Input group, styled file input
		                else if (element.parent().is('.uniform-uploader, .uniform-select') || element.parents().hasClass('input-group')) {
		                    $(element).closest('.addError').addClass('has-error');
							error.appendTo( element.parent().parent() );
		                }

		                // Other elements
		                else {
		                    $(element).closest('.addError').addClass('has-error');
							error.insertAfter(element);
		                }
		            },
		            messages: {
		            },
		        });

		        // Reset form
		        $('#reset').on('click', function() {
		            validator.resetForm();
		        });
		    };

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


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

		document.addEventListener('DOMContentLoaded', function() {
		    FormValidation.init();
            FormValidationCheckout.init();
		});
	</script>
	<script type="text/javascript">

		function preview() {
			frame.src=URL.createObjectURL(event.target.files[0]);
		}

        // checkout jika balance 0
		function updateStatus(hotel_id, booking_id, status_booking, detail_id){
            // ==== ASSIGN VALUE TO FORM HIDDEN INPUT ==== //
            $("#form_booking_status").find('#id_booking').val(booking_id);
			$("#form_booking_status").find('#status_booking').val(status_booking);
			$("#form_booking_status").find('#hotel_id').val(hotel_id);
			$("#form_booking_status").find('#detail_id').val(detail_id);

            // CONDITION IF CHECKED OUT BALANCE BUT NO ROOMCHARGE
            if (status_booking == 2) {
                event.preventDefault();
                $.ajax({
                    type: "get",
                    url: "{{route('rv-check-before-checkout')}}",
                    data: {
                        detail_id:detail_id,
                    },
                    dataType: "json",
                    success: function (response) {
                        if (response.data_count < 1 && response.jumlah_malam >= 1 ) {

                            callModalAlert("Can't checkout, because the roomcharge haven't yet generate")

                            // RESET
                            $("#form_booking_status").find('#id_booking').val(null);
                            $("#form_booking_status").find('#status_booking').val(null);
                            $("#form_booking_status").find('#hotel_id').val(null);
                            $("#form_booking_status").find('#detail_id').val(null);
                            console.log('DAIDJAs')


                            // RETURN
                            return false

                        }else{
                            $("#form_booking_status").submit() // ====> SUBMIT
                        }
                    }
                });
            }else{
                $("#form_booking_status").submit() // ====> SUBMIT
            }

		}

		$( document ).ready(function() {

			var $select = $('.form-control-select2').select2();
			var $select_border_red = $('.form-control-select2-red').each(function(){
				$(this).siblings('.select2-container').css('border', '1px solid red');
			});

	        // 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 ($errors->any())
				@foreach ($errors->all() as $error)
					new PNotify({
						title: 'Error',
						text: '{{ $error }}.',
						icon: 'icon-blocked',
						type: 'error'
					});
				@endforeach
			@endif

		});

        function addArrangement(idx, dummy, btn){
            let jumlah_malam    = parseInt($('#jml_malam'+idx+'_0').val());
            let ratecode_price  = $('#rate_code'+idx+'_0 option:selected').data('harga');
            let rate_code_id    = $('#rate_code'+idx+'_0 option:selected').data('id');
            let ratecode_tipe   = null;
            let inpDate         = $('#inpDatePicker'+idx+'_0').data('daterangepicker');
            let start           = inpDate.startDate.format('YYYY-MM-DD');
            let end             = inpDate.endDate.format('YYYY-MM-DD');

            // TO MAKE ARRAY OF DATE
            var getDaysBetweenDates = function(startDate, endDate) {
                var now = startDate.clone(), dates = [];

                while (now.isSameOrBefore(endDate)) {
                    dates.push(now.format('DD-MM-YYYY'));
                    now.add(1, 'days');
                }
                return dates;
            };

            var startDate   = moment(start);
            var endDate     = moment(end).add(jumlah_malam, 'days');
            var dateList    = getDaysBetweenDates(startDate, endDate);

            if (btn == 1) {
                let id      = jumlah_malam - 1;
                if (document.getElementById('input_localrate'+idx+'_'+id)) {
                    id = jumlah_malam;
                    $('#arr_row'+idx+'_'+id).remove();
                }else{
                    let html =`
                            <tr id="arr_row${idx}_${id}">
                                <td style="text-align:center">${dateList[id]}
                                    <input type="hidden" name="date_now[${idx}][${id}]" id="date_now${idx}_${id}" value="${dateList[id]}">
                                </td>
                                <td style="text-align:center">${moment(dateList[id], "DD-MM-YYYY").add(1, 'days').format('DD-MM-YYYY')}</td>
                                <td id="roomrate${idx}_${id}"style="text-align:right">${ ratecode_price ? ratecode_price.toLocaleString('ID') : 0}</td>
                                <td id="localrate${idx}_${id}" style="text-align:right">
                                    <input type="text" class="per_item_new local_room${idx} form-control format_mask" style="text-align: right;" id="input_localrate${idx}_${id}" name="per_item[${idx}][${id}]" value="${ formatRibuanID(ratecode_price) }" onchange="recount(${idx}, ${id})">
                                </td>
                                <td style="text-align:center">
                                    <select name="arrangement_codes[${idx}][${id}]"
                                            id="arrangement_code${idx}_${id}"
                                            data-group="${idx}"
                                            data-idx="${id}"
                                            onchange="getPrice(this.getAttribute('data-idx'), this.getAttribute('data-group'), 0), removeWarningButton(this.getAttribute('data-group'))"
                                            class="arrangement_cols${idx} form-control form-control-select2 form-arrangements"
                                            required
                                    >
                                        <option value="" data-harga="0">-- Pilih Arrangement --</option>
                                        @foreach($arrangements as $arrangement)
											@php
											$harga_arrangement = 0;
											$service_arrangement = 0;
											$tax_arrangement = 0;
											@endphp

											@if($arrangement->arrangementCodeDetail)
												@foreach($arrangement->arrangementCodeDetail as $arrangement_detail)
													@php
													// $service_arrangement_temp = $arrangement_detail->harga * ($arrangement_detail->shop ? ($arrangement_detail->shop->services/100) : 0);
													// $service_arrangement += $service_arrangement_temp;
													// $tax_arrangement_temp = ($service_arrangement_temp * ($arrangement_detail->shop ? ($arrangement_detail->shop->ppn/100) : 0)) + $service_arrangement_temp;
													// $tax_arrangement += $tax_arrangement_temp;
													// $harga_arrangement += $arrangement_detail->harga;
													$tax_shop = $arrangement_detail->shop ? $arrangement_detail->shop->ppn : 0;
													$service_shop = $arrangement_detail->shop ? $arrangement_detail->shop->services : 0;

													$tax_arrangement_temp = ($arrangement_detail->harga * $tax_shop)/(100+$tax_shop);
													$tax_arrangement += $tax_arrangement_temp;

													$harga_exclude_tax = $arrangement_detail->harga - $tax_arrangement_temp;
													$service_arrangement_temp = ($harga_exclude_tax * $service_shop)/(100+$service_shop);
													$service_arrangement += $service_arrangement_temp;

													$harga_arrangement += $arrangement_detail->harga;
													@endphp
												@endforeach
											@endif

											<option value="{{ $arrangement->arrangement_code }}"
													data-id="{{ $arrangement->id }}"
													data-harga="{{ $harga_arrangement }}"
													data-service="{{ $service_arrangement }}"
													data-tax="{{ $tax_arrangement }}"
											>{{$arrangement->arrangement_code}}</option>
											{{--
												<option value="{{$arrangement->arrangement_code}}"
														data-id="{{$arrangement->id}}"
														data-harga="{{$arrangement->totalHarga->total ?? 0}}"
														data-service="0"
														data-tax="0"
												>{{$arrangement->arrangement_code}}</option>
											--}}
                                        @endforeach
                                    </select>
                                    <input type="hidden" name="arrangement_id[${idx}][${id}]" id="per_arrangement_id${idx}_${id}">
                                    <input type="hidden" name="amount_item_total[${idx}][${id}]" id="per_item_total${idx}_${id}">
                                    <input type="hidden" name="amount_item_services[${idx}][${id}]" id="per_item_services${idx}_${id}">
                                    <input type="hidden" name="amount_item_tax[${idx}][${id}]" id="per_item_tax${idx}_${id}">
                                    <input type="hidden" name="amount_item_arr[${idx}][${id}]" id="per_item_arr${idx}_${id}">
									<input type="hidden" name="amount_item_arr_service[${idx}][${id}]" id="per_item_arr_service${idx}_${id}" />
									<input type="hidden" name="amount_item_arr_tax[${idx}][${id}]" id="per_item_arr_tax${idx}_${id}" />
                                </td>
                            </tr>
                    `;

                    $('#arrangement_list_'+idx).append(html)
                }
            }else if(btn == 0){
             $.ajax({
                type: "get",
                url: "{{{url('/getinforatecode')}}}",
                data: {id:rate_code_id},
                dataType: "json",
                async: false,
                cache: false,
                timeout: 30000,
                success: function (rate) {
                    ratecode_tipe = rate.tipe_rate_code
                }
             });

             if(ratecode_tipe == 2){
                // alert('test:flat')
                //  $('#arrangement_list_'+idx).html(null)
                var id = 0;
                if (document.getElementById('input_localrate'+idx+'_'+id)) {
                    // alert('ada input localrate'+idx+'_'+id)
                }else{
                    // alert('tidak ada input localrate'+idx+'_'+id)
                    let html =`
                            <tr id="arr_row${idx}_${id}">
                                <td style="text-align:center">${dateList[id]}
                                    <input type="hidden" name="date_now[${idx}][${id}]" id="date_now${idx}_${id}" value="${dateList[id]}">
                                </td>
                                <td style="text-align:center">${moment(dateList[id], "DD-MM-YYYY").add(1, 'days').format('DD-MM-YYYY')}</td>
                                <td id="roomrate${idx}_${id}" style="text-align:right">${ ratecode_price ? ratecode_price.toLocaleString('ID') : 0}</td>
                                <td id="localrate${idx}_${id}" style="text-align:right">
                                    <input type="text" class="per_item_new local_room${idx} form-control format_mask" style="text-align: right;" id="input_localrate${idx}_${id}" name="per_item[${idx}][${id}]" value="${ formatRibuanID(ratecode_price) }" onchange="recount(${idx}, ${id})">
                                </td>
                                <td style="text-align:center">
                                    <select name="arrangement_codes[${idx}][${id}]"
                                            id="arrangement_code${idx}_${id}"
                                            data-group="${idx}"
                                            data-idx="${id}"
                                            onchange="getPrice(this.getAttribute('data-idx'), this.getAttribute('data-group'), 0), removeWarningButton(this.getAttribute('data-group')), removeWarningButton(this.getAttribute('data-group'))"
                                            class="arrangement_cols${idx} form-control form-control-select2 form-arrangements"
                                            required
                                    >
                                        <option value="" data-harga="0">-- Pilih Arrangement --</option>
                                        @foreach($arrangements as $arrangement)
                                            @php
                                            $harga_arrangement = 0;
                                            $service_arrangement = 0;
                                            $tax_arrangement = 0;
                                            @endphp

                                            @if($arrangement->arrangementCodeDetail)
                                                @foreach($arrangement->arrangementCodeDetail as $arrangement_detail)
                                                    @php
                                                    // $service_arrangement_temp = $arrangement_detail->harga * ($arrangement_detail->shop ? ($arrangement_detail->shop->services/100) : 0);
                                                    // $service_arrangement += $service_arrangement_temp;
                                                    // $tax_arrangement_temp = ($service_arrangement_temp * ($arrangement_detail->shop ? ($arrangement_detail->shop->ppn/100) : 0)) + $service_arrangement_temp;
                                                    // $tax_arrangement += $tax_arrangement_temp;
                                                    // $harga_arrangement += $arrangement_detail->harga;
                                                    $tax_shop = $arrangement_detail->shop ? $arrangement_detail->shop->ppn : 0;
                                                    $service_shop = $arrangement_detail->shop ? $arrangement_detail->shop->services : 0;

                                                    $tax_arrangement_temp = ($arrangement_detail->harga * $tax_shop)/(100+$tax_shop);
                                                    $tax_arrangement += $tax_arrangement_temp;

                                                    $harga_exclude_tax = $arrangement_detail->harga - $tax_arrangement_temp;
                                                    $service_arrangement_temp = ($harga_exclude_tax * $service_shop)/(100+$service_shop);
                                                    $service_arrangement += $service_arrangement_temp;

                                                    $harga_arrangement += $arrangement_detail->harga;
                                                    @endphp
                                                @endforeach
                                            @endif
                                            <option value="{{$arrangement->arrangement_code}}"
                                                    data-id="{{$arrangement->id}}"
                                                    data-harga="{{$harga_arrangement}}"
                                                    data-service="{{$service_arrangement}}"
                                                    data-tax="{{$tax_arrangement}}"
                                            >{{$arrangement->arrangement_code}}</option>
                                            {{--
                                                <option value="{{$arrangement->arrangement_code}}"
                                                        data-id="{{$arrangement->id}}"
                                                        data-harga="{{$arrangement->totalHarga->total ?? 0}}"
                                                        data-service="0"
                                                        data-tax="0"
                                                >{{$arrangement->arrangement_code}}</option>
                                            --}}
                                        @endforeach
                                    </select>
                                    <input type="hidden" name="arrangement_id[${idx}][${id}]" id="per_arrangement_id${idx}_${id}">
                                    <input type="hidden" name="amount_item_total[${idx}][${id}]" id="per_item_total${idx}_${id}">
                                    <input type="hidden" name="amount_item_services[${idx}][${id}]" id="per_item_services${idx}_${id}">
                                    <input type="hidden" name="amount_item_tax[${idx}][${id}]" id="per_item_tax${idx}_${id}">
                                    <input type="hidden" name="amount_item_arr[${idx}][${id}]" id="per_item_arr${idx}_${id}">
                                    <input type="hidden" name="amount_item_arr_services[${idx}][${id}]" id="per_item_arr_service${idx}_${id}" />
                                    <input type="hidden" name="amount_item_arr_tax[${idx}][${id}]" id="per_item_arr_tax${idx}_${id}" />
                                </td>
                            </tr>
                    `;
                    $('#arrangement_list_'+idx).append(html)
                }
             }else{
                // alert('test:daily')
                for (let id = 0; id < jumlah_malam; id++) {
                    if (document.getElementById('input_localrate'+idx+'_'+id)) {
                        console.log('ADA trus remove')
                        let ind = jumlah_malam;
                        $('#arr_row'+idx+'_'+ind).remove();
                    }else{
                        let html =`
                                <tr id="arr_row${idx}_${id}">
                                    <td style="text-align:center">${dateList[id]}
                                        <input type="hidden" name="date_now[${idx}][${id}]" id="date_now${idx}_${id}" value="${dateList[id]}">
                                    </td>
                                    <td style="text-align:center">${moment(dateList[id], "DD-MM-YYYY").add(1, 'days').format('DD-MM-YYYY')}</td>
                                    <td id="roomrate${idx}_${id}" style="text-align:right">${ ratecode_price ? ratecode_price.toLocaleString('ID') : 0}</td>
                                    <td id="localrate${idx}_${id}" style="text-align:right">
                                        <input type="text" class="per_item_new local_room${idx} form-control format_mask" style="text-align: right;" id="input_localrate${idx}_${id}" name="per_item[${idx}][${id}]" value="${ formatRibuanID(ratecode_price) }" onchange="recount(${idx}, ${id})">
                                    </td>
                                    <td style="text-align:center">
                                        <select name="arrangement_codes[${idx}][${id}]"
                                                id="arrangement_code${idx}_${id}"
                                                data-group="${idx}"
                                                data-idx="${id}"
                                                onchange="getPrice(this.getAttribute('data-idx'), this.getAttribute('data-group'), 0), removeWarningButton(this.getAttribute('data-group')), removeWarningButton(this.getAttribute('data-group'))"
                                                class="arrangement_cols${idx} form-control form-control-select2 form-arrangements"
                                                required
                                        >
                                            <option value="" data-harga="0">-- Pilih Arrangement --</option>
                                            @foreach($arrangements as $arrangement)
												@php
												$harga_arrangement = 0;
												$service_arrangement = 0;
												$tax_arrangement = 0;
												@endphp

												@if($arrangement->arrangementCodeDetail)
													@foreach($arrangement->arrangementCodeDetail as $arrangement_detail)
														@php
														// $service_arrangement_temp = $arrangement_detail->harga * ($arrangement_detail->shop ? ($arrangement_detail->shop->services/100) : 0);
														// $service_arrangement += $service_arrangement_temp;
														// $tax_arrangement_temp = ($service_arrangement_temp * ($arrangement_detail->shop ? ($arrangement_detail->shop->ppn/100) : 0)) + $service_arrangement_temp;
														// $tax_arrangement += $tax_arrangement_temp;
														// $harga_arrangement += $arrangement_detail->harga;
														$tax_shop = $arrangement_detail->shop ? $arrangement_detail->shop->ppn : 0;
														$service_shop = $arrangement_detail->shop ? $arrangement_detail->shop->services : 0;

														$tax_arrangement_temp = ($arrangement_detail->harga * $tax_shop)/(100+$tax_shop);
														$tax_arrangement += $tax_arrangement_temp;

														$harga_exclude_tax = $arrangement_detail->harga - $tax_arrangement_temp;
														$service_arrangement_temp = ($harga_exclude_tax * $service_shop)/(100+$service_shop);
														$service_arrangement += $service_arrangement_temp;

														$harga_arrangement += $arrangement_detail->harga;
														@endphp
													@endforeach
												@endif
												<option value="{{$arrangement->arrangement_code}}"
														data-id="{{$arrangement->id}}"
														data-harga="{{$harga_arrangement}}"
														data-service="{{$service_arrangement}}"
														data-tax="{{$tax_arrangement}}"
												>{{$arrangement->arrangement_code}}</option>
												{{--
													<option value="{{$arrangement->arrangement_code}}"
															data-id="{{$arrangement->id}}"
															data-harga="{{$arrangement->totalHarga->total ?? 0}}"
															data-service="0"
															data-tax="0"
													>{{$arrangement->arrangement_code}}</option>
												--}}
                                            @endforeach
                                        </select>
                                        <input type="hidden" name="arrangement_id[${idx}][${id}]" id="per_arrangement_id${idx}_${id}">
                                        <input type="hidden" name="amount_item_total[${idx}][${id}]" id="per_item_total${idx}_${id}">
                                        <input type="hidden" name="amount_item_services[${idx}][${id}]" id="per_item_services${idx}_${id}">
                                        <input type="hidden" name="amount_item_tax[${idx}][${id}]" id="per_item_tax${idx}_${id}">
                                        <input type="hidden" name="amount_item_arr[${idx}][${id}]" id="per_item_arr${idx}_${id}">
										<input type="hidden" name="amount_item_arr_services[${idx}][${id}]" id="per_item_arr_service${idx}_${id}" />
										<input type="hidden" name="amount_item_arr_tax[${idx}][${id}]" id="per_item_arr_tax${idx}_${id}" />
                                    </td>
                                </tr>
                        `;
                        console.log('ADA trus append')
                        $('#arrangement_list_'+idx).append(html)
                    }
                }
             }
            }

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

		function multipleArrangement(idx, idx_sebelumnya = null){
            let rate_value_id   = $('#rate_code'+idx_sebelumnya+'_0 option:selected').data('id')
            var ratecode_tipe = null;
            $.ajax({
                type: "get",
                url: "{{{url('/getinforatecode')}}}",
                data: {id:rate_value_id},
                dataType: "json",
                async: false,
                cache: false,
                timeout: 30000,
                success: function (rate) {
                    ratecode_tipe = rate.tipe_rate_code
                }
            });

            let jumlah_malam    = $('#jml_malam'+idx+'_0').val();

            let ratecode_price  = $('#rate_code'+idx+'_0 option:selected').data('harga');

            let cek_idx_sebelumnya = idx_sebelumnya ?? idx

            let inpDate         = $('#inpDatePicker'+ cek_idx_sebelumnya +'_0').data('daterangepicker');
            let start           = inpDate.startDate.format('YYYY-MM-DD');
            let end             = inpDate.endDate.format('YYYY-MM-DD');

            let group           = idx;

            // TO MAKE ARRAY OF DATE
            var getDaysBetweenDates = function(startDate, endDate) {
                var now = startDate.clone(), dates = [];

                while (now.isSameOrBefore(endDate)) {
                    dates.push(now.format('DD-MM-YYYY'));
                    now.add(1, 'days');
                }
                return dates;
            };

            var startDate = moment(start);
            var endDate = moment(end).add(jumlah_malam, 'days');
            var dateList = getDaysBetweenDates(startDate, endDate);

            var startDate = moment(start);
            var endDate = moment(end).add(jumlah_malam, 'days');
            var dateList = getDaysBetweenDates(startDate, endDate);

            if ( document.getElementById('arrangement_list_'+group) ) {
                console.log('Ada');
            }else{
                console.log('Tidak Ada');

                let html = `<tbody id="arrangement_list_${group}" class="table_arrs" style="display:none;">`;

                for (let index = 0; index < jumlah_malam; index++) {
                    if(ratecode_tipe == 2){
                        if (index!=0) {
                            continue
                        }
                    }
                    html +=`
                            <tr id="arr_row${group}_${index}">
                                <td style="text-align:center">${dateList[index]}
                                    <input type="hidden" name="date_now[${group}][${index}]" id="date_now${group}_${index}" value="${dateList[index]}">
                                </td>
                                <td style="text-align:center">${moment(dateList[index], "DD-MM-YYYY").add(1, 'days').format('DD-MM-YYYY')}</td>
                                <td id="roomrate${group}_${index}" style="text-align:right">${ ratecode_price ? ratecode_price.toLocaleString('ID') : 0}</td>
                                <td id="localrate${group}_${index}" style="text-align:right">
                                    <input type="text" class="per_item_new local_room${group} form-control format_mask" style="text-align: right;" id="input_localrate${group}_${index}" name="per_item[${group}][${index}]" value="${ formatRibuanID(ratecode_price) }" onchange="recount(${group}, ${index})">
                                </td>
                                <td style="text-align:center">
                                    <select name="arrangement_codes[${group}][${index}]"
                                            id="arrangement_code${group}_${index}"
                                            data-group="${group}"
                                            data-idx="${index}"
                                            onchange="getPrice(this.getAttribute('data-idx'), this.getAttribute('data-group'), 0), removeWarningButton(this.getAttribute('data-group'))"
                                            class="arrangement_cols${group} form-control form-control-select2 form-arrangements"
                                            required
                                    >
                                        <option value="" data-harga="0">-- Pilih Arrangement --</option>
										@foreach($arrangements as $arrangement)
											@php
											$harga_arrangement = 0;
											$service_arrangement = 0;
											$tax_arrangement = 0;
											@endphp

											@if($arrangement->arrangementCodeDetail)
												@foreach($arrangement->arrangementCodeDetail as $arrangement_detail)
													@php
													// $service_arrangement_temp = $arrangement_detail->harga * ($arrangement_detail->shop ? ($arrangement_detail->shop->services/100) : 0);
													// $service_arrangement += $service_arrangement_temp;
													// $tax_arrangement_temp = ($service_arrangement_temp * ($arrangement_detail->shop ? ($arrangement_detail->shop->ppn/100) : 0)) + $service_arrangement_temp;
													// $tax_arrangement += $tax_arrangement_temp;
													// $harga_arrangement += $arrangement_detail->harga;
													$tax_shop = $arrangement_detail->shop ? $arrangement_detail->shop->ppn : 0;
													$service_shop = $arrangement_detail->shop ? $arrangement_detail->shop->services : 0;

													$tax_arrangement_temp = ($arrangement_detail->harga * $tax_shop)/(100+$tax_shop);
													$tax_arrangement += $tax_arrangement_temp;

													$harga_exclude_tax = $arrangement_detail->harga - $tax_arrangement_temp;
													$service_arrangement_temp = ($harga_exclude_tax * $service_shop)/(100+$service_shop);
													$service_arrangement += $service_arrangement_temp;

													$harga_arrangement += $arrangement_detail->harga;
													@endphp
												@endforeach
											@endif

											<option value="{{$arrangement->arrangement_code}}"
													data-id="{{$arrangement->id}}"
													data-harga="{{$harga_arrangement}}"
													data-service="{{$service_arrangement}}"
													data-tax="{{$tax_arrangement}}"
											>{{$arrangement->arrangement_code}}</option>

											{{--
												<option value="{{$arrangement->arrangement_code}}"
														data-id="{{$arrangement->id}}"
														data-harga="{{$arrangement->totalHarga->total ?? 0}}"
														data-service="0"
														data-tax="0"
												>{{$arrangement->arrangement_code}}</option>
											--}}
										@endforeach
                                    </select>
                                    <input type="hidden" name="arrangement_id[${group}][${index}]" id="per_arrangement_id${group}_${index}">
                                    <input type="hidden" name="amount_item_total[${group}][${index}]" id="per_item_total${group}_${index}">
                                    <input type="hidden" name="amount_item_services[${group}][${index}]" id="per_item_services${group}_${index}">
                                    <input type="hidden" name="amount_item_tax[${group}][${index}]" id="per_item_tax${group}_${index}">
                                    <input type="hidden" name="amount_item_arr[${group}][${index}]" id="per_item_arr${group}_${index}">
									<input type="hidden" name="amount_item_arr_services[${group}][${index}]" id="per_item_arr_service${group}_${index}" />
									<input type="hidden" name="amount_item_arr_tax[${group}][${index}]" id="per_item_arr_tax${group}_${index}" />
                                </td>
                            </tr>
                    `;
                }

                html += `</tbody>`;

                $('#table_arrangement_list').append(html)
            }

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

            // Re-initiliaze class format mask
            $('.format_mask').on('input', function(){
                $('.format_mask').mask("#.##0", {reverse: true});//set separator number
            })
        }

        function openArrangementDialog(idx, id){
            $('.table_arrs').hide();

            let jumlah_malam    = $('#jml_malam').val();

            let ratecode_price  = $('#rate_code'+idx+'_'+id+' option:selected').data('harga');
            let rate_code_id     = $('#rate_code'+idx+' option:selected').data('id');
            let ratecode_tipe   = '';
            $.ajax({
                type: "get",
                url: "{{{url('/getinforatecode')}}}",
                data: {id:rate_code_id},
                dataType: "json",
                async: false,
                cache: false,
                timeout: 30000,
                success: function (rate) {
                   ratecode_tipe = rate.tipe_rate_code
                }
            });

            console.log(idx+','+id)
            let inpDate         = $('#inpDatePicker'+idx+'_'+id).data('daterangepicker');
            let start           = inpDate.startDate.format('YYYY-MM-DD');
            let end             = inpDate.endDate.format('YYYY-MM-DD');

            let group           = idx;

            // TO MAKE ARRAY OF DATE
            var getDaysBetweenDates = function(startDate, endDate) {
                var now = startDate.clone(), dates = [];

                while (now.isSameOrBefore(endDate)) {
                    dates.push(now.format('DD-MM-YYYY'));
                    now.add(1, 'days');
                }
                return dates;
            };

            var startDate = moment(start);
            var endDate = moment(end).add(jumlah_malam, 'days');
            var dateList = getDaysBetweenDates(startDate, endDate);

            if ( document.getElementById('arrangement_list_'+group) ) {

                $('#arrangement_list_'+group).show()

            }else{

                let html = `<tbody id="arrangement_list_${group}" class="table_arrs">`;

                for (let index = 0; index < jumlah_malam; index++) {
                 if(ratecode_tipe == 2){
                    if (index == 0) {
                        html +=`
                                <tr id="arr_row${group}_${index}">
                                    <td style="text-align:center">${dateList[index]}
                                        <input type="hidden" name="date_now[${group}][${index}]" id="date_now${group}_${index}" value="${dateList[index]}">
                                    </td>
                                    <td style="text-align:center">${moment(dateList[index], "DD-MM-YYYY").add(1, 'days').format('DD-MM-YYYY')}</td>
                                    <td id="roomrate${group}_${index}" style="text-align:right">${ ratecode_price ? ratecode_price.toLocaleString('ID') : 0}</td>
                                    <td id="localrate${group}_${index}" style="text-align:right">
                                        <input type="text" class="per_item_new local_room${group} form-control format_mask" style="text-align: right;" id="input_localrate${group}_${index}" name="per_item[${group}][${index}]" value="${ formatRibuanID(ratecode_price) }" onchange="recount(${group}, ${index})">
                                    </td>
                                    <td style="text-align:center">
                                        <select name="arrangement_codes[${group}][${index}]"
                                                id="arrangement_code${group}_${index}"
                                                data-group="${group}"
                                                data-idx="${index}"
                                                onchange="getPrice(this.getAttribute('data-idx'), this.getAttribute('data-group'), 0), removeWarningButton(this.getAttribute('data-group'))"
                                                class="arrangement_cols${group} form-control form-control-select2 form-arrangements"
                                                required
                                        >
                                            <option value="" data-harga="0">-- Pilih Arrangement --</option>
                                            @foreach($arrangements as $arrangement)
                                                @php
                                                $harga_arrangement = 0;
                                                $service_arrangement = 0;
                                                $tax_arrangement = 0;
                                                @endphp

                                                @if($arrangement->arrangementCodeDetail)
                                                    @foreach($arrangement->arrangementCodeDetail as $arrangement_detail)
                                                        @php
                                                        // $service_arrangement_temp = $arrangement_detail->harga * ($arrangement_detail->shop ? ($arrangement_detail->shop->services/100) : 0);
                                                        // $service_arrangement += $service_arrangement_temp;
                                                        // $tax_arrangement_temp = ($service_arrangement_temp * ($arrangement_detail->shop ? ($arrangement_detail->shop->ppn/100) : 0)) + $service_arrangement_temp;
                                                        // $tax_arrangement += $tax_arrangement_temp;
                                                        // $harga_arrangement += $arrangement_detail->harga;
                                                        $tax_shop = $arrangement_detail->shop ? $arrangement_detail->shop->ppn : 0;
                                                        $service_shop = $arrangement_detail->shop ? $arrangement_detail->shop->services : 0;

                                                        $tax_arrangement_temp = ($arrangement_detail->harga * $tax_shop)/(100+$tax_shop);
                                                        $tax_arrangement += $tax_arrangement_temp;

                                                        $harga_exclude_tax = $arrangement_detail->harga - $tax_arrangement_temp;
                                                        $service_arrangement_temp = ($harga_exclude_tax * $service_shop)/(100+$service_shop);
                                                        $service_arrangement += $service_arrangement_temp;

                                                        $harga_arrangement += $arrangement_detail->harga;
                                                        @endphp
                                                    @endforeach
                                                @endif

                                                <option value="{{$arrangement->arrangement_code}}"
                                                        data-id="{{$arrangement->id}}"
                                                        data-harga="{{$harga_arrangement}}"
                                                        data-service="{{$service_arrangement}}"
                                                        data-tax="{{$tax_arrangement}}"
                                                >{{$arrangement->arrangement_code}}</option>

                                                {{--
                                                    <option value="{{$arrangement->arrangement_code}}"
                                                            data-id="{{$arrangement->id}}"
                                                            data-harga="{{$arrangement->totalHarga->total ?? 0}}"
                                                            data-service="0"
                                                            data-tax="0"
                                                    >{{$arrangement->arrangement_code}}</option>
                                                --}}
                                            @endforeach
                                        </select>
                                        <input type="hidden" name="arrangement_id[${group}][${index}]" id="per_arrangement_id${group}_${index}">
                                        <input type="hidden" name="amount_item_total[${group}][${index}]" id="per_item_total${group}_${index}">
                                        <input type="hidden" name="amount_item_services[${group}][${index}]" id="per_item_services${group}_${index}">
                                        <input type="hidden" name="amount_item_tax[${group}][${index}]" id="per_item_tax${group}_${index}">
                                        <input type="hidden" name="amount_item_arr[${group}][${index}]" id="per_item_arr${group}_${index}">
                                        <input type="hidden" name="amount_item_arr_services[${group}][${index}]" id="per_item_arr_service${group}_${index}" />
                                        <input type="hidden" name="amount_item_arr_tax[${group}][${index}]" id="per_item_arr_tax${group}_${index}" />
                                    </td>
                                </tr>
                        `;
                    }
                 }else{
                    html +=`
                            <tr id="arr_row${group}_${index}">
                                <td style="text-align:center">${dateList[index]}
                                    <input type="hidden" name="date_now[${group}][${index}]" id="date_now${group}_${index}" value="${dateList[index]}">
                                </td>
                                <td style="text-align:center">${moment(dateList[index], "DD-MM-YYYY").add(1, 'days').format('DD-MM-YYYY')}</td>
                                <td id="roomrate${group}_${index}" style="text-align:right">${ ratecode_price ? ratecode_price.toLocaleString('ID') : 0}</td>
                                <td id="localrate${group}_${index}" style="text-align:right">
                                    <input type="text" class="per_item_new local_room${group} form-control format_mask" style="text-align: right;" id="input_localrate${group}_${index}" name="per_item[${group}][${index}]" value="${ formatRibuanID(ratecode_price) }" onchange="recount(${group}, ${index})">
                                </td>
                                <td style="text-align:center">
                                    <select name="arrangement_codes[${group}][${index}]"
                                            id="arrangement_code${group}_${index}"
                                            data-group="${group}"
                                            data-idx="${index}"
                                            onchange="getPrice(this.getAttribute('data-idx'), this.getAttribute('data-group'), 0), removeWarningButton(this.getAttribute('data-group'))"
                                            class="arrangement_cols${group} form-control form-control-select2 form-arrangements"
                                            required
                                    >
                                        <option value="" data-harga="0">-- Pilih Arrangement --</option>
										@foreach($arrangements as $arrangement)
											@php
											$harga_arrangement = 0;
											$service_arrangement = 0;
											$tax_arrangement = 0;
											@endphp

											@if($arrangement->arrangementCodeDetail)
												@foreach($arrangement->arrangementCodeDetail as $arrangement_detail)
													@php
													// $service_arrangement_temp = $arrangement_detail->harga * ($arrangement_detail->shop ? ($arrangement_detail->shop->services/100) : 0);
													// $service_arrangement += $service_arrangement_temp;
													// $tax_arrangement_temp = ($service_arrangement_temp * ($arrangement_detail->shop ? ($arrangement_detail->shop->ppn/100) : 0)) + $service_arrangement_temp;
													// $tax_arrangement += $tax_arrangement_temp;
													// $harga_arrangement += $arrangement_detail->harga;
													$tax_shop = $arrangement_detail->shop ? $arrangement_detail->shop->ppn : 0;
													$service_shop = $arrangement_detail->shop ? $arrangement_detail->shop->services : 0;

													$tax_arrangement_temp = ($arrangement_detail->harga * $tax_shop)/(100+$tax_shop);
													$tax_arrangement += $tax_arrangement_temp;

													$harga_exclude_tax = $arrangement_detail->harga - $tax_arrangement_temp;
													$service_arrangement_temp = ($harga_exclude_tax * $service_shop)/(100+$service_shop);
													$service_arrangement += $service_arrangement_temp;

													$harga_arrangement += $arrangement_detail->harga;
													@endphp
												@endforeach
											@endif

											<option value="{{$arrangement->arrangement_code}}"
													data-id="{{$arrangement->id}}"
													data-harga="{{$harga_arrangement}}"
													data-service="{{$service_arrangement}}"
													data-tax="{{$tax_arrangement}}"
											>{{$arrangement->arrangement_code}}</option>

											{{--
												<option value="{{$arrangement->arrangement_code}}"
														data-id="{{$arrangement->id}}"
														data-harga="{{$arrangement->totalHarga->total ?? 0}}"
														data-service="0"
														data-tax="0"
												>{{$arrangement->arrangement_code}}</option>
											--}}
										@endforeach
                                    </select>
                                    <input type="hidden" name="arrangement_id[${group}][${index}]" id="per_arrangement_id${group}_${index}">
                                    <input type="hidden" name="amount_item_total[${group}][${index}]" id="per_item_total${group}_${index}">
                                    <input type="hidden" name="amount_item_services[${group}][${index}]" id="per_item_services${group}_${index}">
                                    <input type="hidden" name="amount_item_tax[${group}][${index}]" id="per_item_tax${group}_${index}">
                                    <input type="hidden" name="amount_item_arr[${group}][${index}]" id="per_item_arr${group}_${index}">
									<input type="hidden" name="amount_item_arr_services[${group}][${index}]" id="per_item_arr_service${group}_${index}" />
									<input type="hidden" name="amount_item_arr_tax[${group}][${index}]" id="per_item_arr_tax${group}_${index}" />
                                </td>
                            </tr>
                    `;
                 }
                }

                html += `</tbody>`;

                $('#table_arrangement_list').append(html)

            }

            $('#modal_arrangement_codes').modal('show')

        }

        $("#modal_arrangement_codes").on("hidden.bs.modal", function (e) {
            $('.table_arrs').hide()
            console.log(new_idx);
        });

        // same input value to all group name
        // function sameValueGroup(val, idx){
        //     $('.group_names_'+idx).val(val)
        // }

        // // same input value to all group name
        // function sameValueNoKamar(val, idx){
        //     $('.nomor_kamar_'+idx).val(val)
        // }

        // same input value to all group name
        function sameValueRate(val, idx){
            $('.rate_codes_'+idx).val(val)
        }

        function checkNomor(id) {
            let nomor = $('#'+id).val()

            // make it check to prevent maximum callstack
            if (nomor) {
                if(arrays_kamarss.includes(nomor)) {
                    $('#'+id).val('').select2()

                    callModalAlert("You can't selected same room number!")

                    return;
                }
            }

            // to fill array container room number
            let all_nomors = $('.nomor_kamars')
            $.each(all_nomors, function(key, val){
                if ($(val).find(":selected").val() != '') {
                    // arrays_kamarss[key] = $(val).find(":selected").val();
                    let nomor_kamar_multiple_room = $(val).val()
                    let idx_multiple_room = $(val).data('idx')
                    let group_multiple_room = $(val).data('group')
                    let checkin_multiple_room = $('#start_date'+group_multiple_room+'_'+idx_multiple_room).val()
                    let checkout_multiple_room = $('#end_date'+group_multiple_room+'_'+idx_multiple_room).val()

                    if (!arrays_kamarss.hasOwnProperty(key)) {
                        arrays_kamarss[key] = []
                    }

                    arrays_kamarss[key]['nomor_kamar'] = nomor_kamar_multiple_room
                    arrays_kamarss[key]['checkin'] = checkin_multiple_room
                    arrays_kamarss[key]['checkout'] = checkout_multiple_room
                }
            });


            // ======== Hidden After Add Room ========
                hiddenSelectedNomorKamar();
            // ======== Hidden After Add Room ========
        }

        // function to call modal and this additional param
        function callModalAlert(text) {
            $('#text-alert').html("<h3>"+text+"</h3>")
            $('#alert_modal').modal('show')
        }

        // function for call/show specific row
        function openSpecificRow(idx, id){
            $('.rows_details'+idx).show();
        }

        //function onchange negara to input same value to kewarganegaraan
        $('#negara').on('change', function() {
            $('#kewarganegaraan').val($(this).val())
        })

        // function format ribuan js
        function formatRibuanID(params) {
            let ribuan = params.toLocaleString('ID');
            return ribuan;
        }

        // function for hidden selected nomor kamar in another option nomor kamar.
        function hiddenSelectedNomorKamar(){
            // console.log('hidden nomor executed: '+ a)

            let all_select_kamars = $('.nomor_kamars')

            $.each(all_select_kamars, function (index_kamars, value_kamars) {

                let this_id = $(value_kamars).attr('id')
                let this_group = $(value_kamars).data('group')
                let this_idx = $(value_kamars).data('idx')
                let this_checkin = $('#start_date'+this_group+'_'+this_idx).val()
                let this_checkout = $('#end_date'+this_group+'_'+this_idx).val()
                $("#"+this_id+" option").prop('disabled', false)

                $.each(arrays_kamarss, function(a_indexed, a_valued){
                    // console.log('el:'+$("#"+this_id).val(), 'a_val:'+a_valued)
                    // New Prototype
                    if (a_valued) {
                        let boolean_checkin = a_valued['checkin'] < this_checkin || a_valued['checkin'] < this_checkout
                        let boolean_checkout = a_valued['checkout'] > this_checkin || a_valued['checkout'] > this_checkout

                        if ($("#"+this_id).val() != a_valued['nomor_kamar']) {
                            if (boolean_checkin && boolean_checkout) {
                                $("#"+this_id+" option[value='"+a_valued['nomor_kamar']+"']").prop('disabled', true)
                                return;
                            }else{
                                $("#"+this_id+" option[value='"+a_valued['nomor_kamar']+"']").prop('disabled', false)
                            }
                        }else{
                            $("#"+this_id+" option[value='"+a_valued['nomor_kamar']+"']").prop('disabled', false)
                        }
                    }
                });

            })

            $('.nomor_kamars').select2();
        }

        document.querySelector(".number_only").addEventListener("keypress", function (evt) {
            if (evt.which != 8 && evt.which != 0 && evt.which < 48 || evt.which > 57)
            {
                evt.preventDefault();
            }
        });

	</script>

@endsection