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

@section('title', 'Reservation | Create Reservation Backdate')

@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%);
	}
	.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__option[aria-disabled=true]{
        background-color: darkgray;
        color: white;
        display:none;
    }
    input[type=radio][data-fouc]{
        visibility:visible;
    }
    /* COBA PAKAI YANG DISAMPAIKAN MAS RYNDH */

    .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;
    }
</style>
@endsection

@section('content')

	<!-- Page header -->
	<div class="page-header {{in_array(\Auth::user()->role, [1,2]) ? 'page-header-light' : ''}}">
		<div class="page-header-content header-elements-md-inline">
			<div class="page-title d-flex">
				<h4> Create 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">

		<!-- 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">
				<div class="row">
					<div class="col-md-12">
						<form id="submitbooking"
							  class="form-validate-jquery"
							  action="{{ url('booking-custom-admin-post')}}"
							  method="post"
							  enctype="multipart/form-data"
						>
							@csrf
							<input type="hidden" id="kapasitas_total" value="0">
							<fieldset class="mb-3">
								<legend class="text-uppercase font-size-sm font-weight-bold">Data Reservation|Backdate</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="{{$kode_booking}}" readonly> --}}
										<input type="text" name="kode_booking" id="kode_booking" class="form-control" value="Auto Generate" readonly>
									</div>
								</div>

								@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" data-action-jenis-booking="true" required>
											<option value="">-- Select Reservation Type --</option>
											@foreach(config('custom.jenis_booking') as $key => $jenis_booking)
                                                <option value="{{$key}}">
                                                    {{$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" disabled>
											<option value="">-- Select 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->comp_title}} {{$company->name}}</option>
											@endforeach
										</select>
									</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)"
												required
										>
											<option value="">-- Select Segment --</option>
											@foreach(config('custom.segment_ratecodes') as $key => $val)
											<option value="{{$key}}">{{$val}}</option>
											@endforeach
										</select>
									</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" onchange="removeColorValidation(this.id)" style="border-color: red" required>
											<option value="">-- Select Source --</option>
											@foreach(config('custom.source') as $key => $val)
											<option value="{{$key}}">{{$key}} - {{$val}}</option>
											@endforeach
										</select>
									</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;">
											<option value="">** Title **</option>
											@foreach(config('custom.titles') as $title)
											<option value="{{$title}}" {{ $guest ? ($guest->title == $title ? 'selected' : '') : '' }}>{{$title}}</option>
											@endforeach
										</select>
									</div>
									<div class="col-lg-7 addError">
										<input class="form-control" list="datalistOptions"
											   name="nama" id="nama" placeholder="Please input name here ..."
											   style="border-color: red"
											   value="{{ $guest ? $guest->name : '' }}"
											   autocomplete="off" required>
                                        <input type="hidden" id="guest_id">
										<datalist id="datalistOptions">
										@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">{{ $guest ? $guest->address : '' }}</textarea>
									</div>
								</div>

								<div class="form-group row">
									<label for="negara" class="col-form-label col-lg-2">Country <span class="font-weight-bolder text-danger"></span></label>
									<div class="col-lg-2">
										<input list="negaraList"
											   name="negara"
											   id="negara"
											   class="form-control"
											   style="border-color: red"
											   autocomplete="off"
											   value="{{ $guest ? $guest->country : '' }}"
										>
										<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 text-right">Province <span class="text-danger font-weight-bolder"></span></label>
									<div class="col-lg-3">
										<input type="text"
											   list="provinceList"
											   name="propinsi"
											   id="propinsi"
											   class="form-control"
											   autocomplete="off"
											   value="{{ $guest ? $guest->province : '' }}"
										>
										<datalist id="provinceList">
										</datalist>
									</div>

									<label for="kota" class="col-form-label col-lg-1 text-right">City <span class="text-danger font-weight-bolder"></span></label>
									<div class="col-lg-3">
										<input type="text"
											   list="cityList"
											   name="kota"
											   id="kota"
											   class="form-control"
											   style="border-color: red"
											   autocomplete="off"
											   value="{{ $guest ? $guest->city : '-' }}"
										>
										<datalist id="cityList">
										</datalist>
									</div>
								</div>

								<div class="form-group row">
									<label for="jns_identitas" class="col-form-label col-lg-2">Identity Type</label>
									<div class="col-lg-10">
										<select name="jns_identitas" id="jns_identitas" class="form-control form-control-select2">
											<option value="">-- Select Identity Type --</option>
											@foreach(config('custom.jenis_identitas') as $key => $val)
											<option value="{{$key}}" {{$guest ?  ($guest->id_cardtype == $key ? '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" value="{{ $guest ? $guest->id_cardno : '' }}" class="form-control number_only">
									</div>
								</div>

								<div class="form-group row">
									<label for="kewarganegaraan" class="col-form-label col-lg-2">Nationality <span class="text-danger font-weight-bolder"></span></label>
									<div class="col-lg-10">
										<input  list="kewarganegaraan_list" autocomplete="off" type="text" id="kewarganegaraan" name="kewarganegaraan" class="form-control" style="border-color: red" value="{{ $guest ? $guest->nation : ''}}">
                                        <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">Gender</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"
													   style="border-color: red"
													   {{-- checked --}}
													   data-fouc
													   {{-- required --}}
													   {{$guest ? ($guest->sex == "1" ? 'checked' : '') : ''}}
													   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"
													   style="border-color: red"
													   {{$guest ? ($guest->sex == "2" ? 'checked' : '') : ''}}
													   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</label>
									<div class="col-lg-10">
										<input type="email" id="email" name="email" class="form-control" value="{{$guest ? $guest->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="{{$guest ? $guest->mobile : ''}}">
									</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="{{$guest ? $guest->phone : ''}}">
									</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="{{$guest ? $guest->telefax : ''}}">
									</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="{{$guest ? $guest->plat_nomor : '-'}}">
									</div>
								</div>


								{{-- <div class="form-group row">
									<label for="jml_anak" class="col-form-label col-lg-2">Reservasi <span class="text-danger">*</span></label>
									<div class="col-lg-3">
										<input type="text" id="inpDatePicker" class="form-control daterange-buttons" value=""  style="border-color: red">
									</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="0"
                                               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"
											   class="form-control input-timepicker"
											   id="expected_arrival"
										>
									</div>
									<input type="hidden" id="start_date" name="start_date" value="{{date('d/m/Y', strtotime(getSystemDate()))}}">
									<input type="hidden" id="end_date" name="end_date" value="{{date('d/m/Y', strtotime(getSystemDate()))}}">
								</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)"
												required
										>
											<option value="">-- Select Segmentasi --</option>
											@foreach(config('custom.segment_ratecodes') as $key => $val)
											<option value="{{$key}}">{{$val}}</option>
											@endforeach
										</select>
									</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" onchange="removeColorValidation(this.id)" style="border-color: red" required>
											<option value="">-- Select Source --</option>
											@foreach(config('custom.source') as $key => $val)
											<option value="{{$key}}">{{$key}} - {{$val}}</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" disabled>
											<option value="">-- Select 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->comp_title}} {{$company->name}}</option>
											@endforeach
										</select>
									</div>
									<div class="col-lg-6">
										<span class="text-danger" id="company_danger"></span>
									</div>
								</div> --}}

                                {{-- <div class="form-group row">
									<label for="multiple_room" class="col-form-label col-lg-2">Multiple Room</label>
									<div class="col-lg-3">
										<input type="number" id="multiple_room" name="multiple_room" class="form-control mb-0" value="1" min="1" max="{{$jumlah_total_kamar}}">
										<span class="text-danger m-0">*Reserve More Room</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="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 font-weight-semibold">
												Block?
											</div>
										</div>
                                        <legend></legend>
										<div class="per_rooms mb-2" data-idx="row_0" id="row_0">
                                            <div class="row">

                                                <div class="col-lg-0" id="button_multi_room0" style="display:none">
                                                    <button type="button" onclick="modalMultiRoom(0)" class="btn btn-warning">
                                                        <i class="fas fa-copy"></i>
                                                    </button>
                                                </div>
                                                <div class="col-lg-2 addError wrap-jns_kamar0">
                                                    <select name="jns_kamar[]"
                                                            id="jns_kamar0"
                                                            data-idx="0"
                                                            onchange="getKamar(this.id), removeColorValidation(this.id), checkJenis(this.id)"
                                                            class="form-control form-control-select2-red"
                                                            required
                                                    >
                                                        <option data-id=""
                                                                data-diskon=""
                                                                data-kapasitas=""
                                                                value="">-- Select 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[]" id="diskon0">
                                                    <input type="hidden" name="jenis_kamar_id[]" id="jenis_kamar_id0">
                                                    <input type="hidden" name="pax[]" id="pax0">
                                                </div>
                                                <div class="col-lg-2">
                                                    <select name="nomor_kamar[]"
                                                            id="nomor_kamar0"
                                                            data-idx="0"
                                                            class="form-control form-control-select2-red nomor_kamars"
                                                            style="border-color: red"
                                                            onchange="checkNomor(this.id)"
                                                    >
                                                        <option value="">-- Select Room Number --</option>
                                                    </select>
                                                    <input type="hidden"
                                                        id="jml_kamar0"
                                                        name="jml_kamar[]"
                                                        class="form-control"
                                                        min="1"
                                                        value="1"
                                                    >
                                                </div>
                                                <div class="col-lg-2 addError wrap-rate_code0">
                                                    <select name="rate_codes[]"
                                                            id="rate_code0"
                                                            data-idx="0"
                                                            onchange="getPrice(this.getAttribute('data-idx'), '', 1), removeColorValidation(this.id)"
                                                            class="rate_code_class form-control form-control-select2-red"
                                                            required
                                                            style="border-color: red"
                                                    >
                                                        <option value="" data-id="0" data-harga="0" data-include_breakfast="0">-- Select Rate Code --</option>
                                                    </select>
                                                </div>
                                                <div class="col-lg-1" style="text-align: center;">
                                                    <button type="button" id="open_arr_dialog0" onclick="openArrangementDialog(0)" class="btn btn-primary addError">
                                                        <i class="fas fa-calendar-check"></i>
                                                        <span class=""></span>
                                                    </button> --}}
                                                    {{-- <select name="arrangement_codes[]"
                                                            id="arrangement_code0"
                                                            data-idx="0"
                                                            onchange="getPrice(this.getAttribute('data-idx'), 0)"
                                                            class="form-control form-control-select2"
                                                    >
                                                        <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}}"
                                                        >{{$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="number" min="0" id="per_item0" class="form-control review_harga" placeholder="Total Room"  style="border-color: red" readonly disabled>
                                                    <span class="text-danger" id="ket_diskon0"></span>
                                                </div>
                                                <div class="col-lg-2 m-0 p-0">

                                                    <input class="ml-2 mr-3 rcheckbox" type="checkbox" id="block_kamar0" name="block_kamar[]">

                                                    <button type="button" onclick="tambahKamar()" class="btn btn-success">
                                                        <i class="fas fa-plus-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[]" class="form-control" placeholder="guest name ...">
                                                </div>
                                                <div class="col-lg-2">
                                                    <select name="status_lock[]" id="status_lock" class="form-control-select2-no-search">
                                                        <option value="">-- Select 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[]" value="1" id="incognito">
                                                            <h4><i class="fas fa-user-secret"></i>&nbsp;<b>Incognito</b></h4>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>

										</div>
                                        <legend></legend>
									</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">

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

                                                    <tr class="per_rooms" data-idx="row_0" id="row_0">
                                                        {{-- # --}}
                                                        <td style="text-align:center">
                                                            <button type="button" onclick="tambahKamar()" class="btn btn-success">
                                                                <i class="fas fa-plus-circle"></i>
                                                            </button>
                                                        </td>

                                                        {{-- Multiply --}}
                                                        <td>
                                                            <div id="button_multi_room0" style="display:none">

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

                                                        {{-- Reservation --}}
                                                        <td class="">
                                                            <input type="text" id="inpDatePicker0" class="form-control daterange-buttons" data-idx="0" value=""  style="border-color: red">
                                                        </td>

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

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

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

                                                        {{-- <div id="reset_when_apply_daterangepicker0"> --}}
                                                            {{-- Guest Name Room --}}
                                                            <td class="wrap-guest-room0">
                                                                <input type="text" name="guest_room[0]" id="guest_room0" class="form-control" placeholder="guest name ...">
                                                            </td>

                                                            {{-- Jenis Kamar --}}
                                                            <td class="addError wrap-jns_kamar0 ">
                                                                <select name="jns_kamar[]"
                                                                        id="jns_kamar0"
                                                                        data-idx="0"
                                                                        onchange="getKamar(this.id), removeColorValidation(this.id), checkJenis(this.id)"
                                                                        class="form-control form-control-select2-red"
                                                                        required
                                                                >
                                                                    <option data-id=""
                                                                            data-diskon=""
                                                                            data-kapasitas=""
                                                                            value="">-- Select Room Type --</option>
                                                                    @foreach($jenis_kamars as $jns)
                                                                        @php
                                                                        $diskon_kamar = count($jns->discount) > 0 ? $jns->discount[0]->diskon : 0;
                                                                        $disctype = count($jns->discount) > 0 ? $jns->discount[0]->disctype : 1;
                                                                        @endphp
                                                                        <option data-id="{{$jns->id}}"
                                                                                data-diskon="{{$diskon_kamar}}"
                                                                                data-disctype="{{$disctype}}"
                                                                                data-kapasitas="{{$jns->kapasitas}}"
                                                                                value="{{$jns->nama}}"
                                                                        >{{$jns->nama}} ({{$jns->kapasitas}} Orang)</option>
                                                                    @endforeach
                                                                </select>
                                                                <input type="hidden" name="diskon[0]" id="diskon0">
                                                                <input type="hidden" name="disctype[0]" id="disctype0">
                                                                <input type="hidden" name="jenis_kamar_id[0]" id="jenis_kamar_id0">
                                                                {{-- <input type="hidden" name="pax[0]" id="pax0"> --}}
                                                            </td>

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

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

                                                            {{-- Nomor Kamar --}}
                                                            <td class=" wrap-nomor-kamar0">
                                                                <select name="nomor_kamar[0]"
                                                                        id="nomor_kamar0"
                                                                        data-idx="0"
                                                                        class="form-control form-control-select2-red nomor_kamars"
                                                                        style="border-color: red"
                                                                        onchange="checkNomor(this.id)"
                                                                >
                                                                    <option value="">-- Select Room Number --</option>
                                                                </select>
                                                                <input type="hidden"
                                                                    id="jml_kamar0"
                                                                    name="jml_kamar[0]"
                                                                    class="form-control"
                                                                    min="1"
                                                                    value="1"
                                                                >
                                                            </td>

                                                            {{-- Rate Code --}}
                                                            <td class="addError wrap-rate_code0 ">
                                                                <select name="rate_codes[0]"
                                                                        id="rate_code0"
                                                                        data-idx="0"
                                                                        onchange="getPrice(this.getAttribute('data-idx'), '', 1), removeColorValidation(this.id)"
                                                                        class="rate_code_class form-control form-control-select2-red"
                                                                        required
                                                                        style="border-color: red"
                                                                >
                                                                    <option value="" data-id="0" data-harga="0" data-include_breakfast="0">-- Select Rate Code --</option>
                                                                </select>
                                                                <input type="hidden" id="selratecodeid0" name="selratecodeid[0]">
                                                                <input type="hidden" id="ratecode_id0" name="ratecode_id[0]">
                                                            </td>

                                                            {{-- Arrangement Code --}}
                                                            <td class=" wrap-arrangement-code0">
                                                                <button type="button" id="open_arr_dialog0" onclick="openArrangementDialog(0)" class="btn btn-primary addError">
                                                                    <i class="fas fa-calendar-check"></i>
                                                                    <span class=""></span>
                                                                </button>

                                                                <div id="hidden_arrangement_code_container0">
                                                                </div>
                                                            </td>

                                                            {{-- Harga --}}
                                                            <td class=" wrap-harga0">
                                                                <input type="text" data-idx="0" min="0" id="per_item0" class="form-control review_harga" placeholder="Total Room"  style="border-color: red" readonly disabled>
                                                                <span class="text-danger" id="ket_diskon0"></span>
                                                            </td>

                                                            {{-- Block Kamar --}}
                                                            <td class="wrap-block-kamar0">
                                                                <input class="rcheckbox" type="checkbox" id="block_kamar0" name="block_kamar[0]">
                                                            </td>

                                                            {{-- Billing Instruction --}}
                                                            <td class="wrap-billing-instruction0">
                                                                <select name="status_lock[0]" id="status_lock0" 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-incognito0">
                                                                <input class="rcheckbox" type="checkbox" name="incognito[0]" value="1" id="incognito0">
                                                            </td>
                                                        {{-- </div> --}}
                                                    </tr>
                                                </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)" 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="0" style="border-color: red" required 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="0" required>
									</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"  style="border-color: red" disabled>
										<input type="hidden" id="total_biaya" name="total_biaya" class="total_biaya form-control format_mask"  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-3">
												Nominal
											</div>
										</div>
										<div class="row mb-2" data-idx="0" id="row_deposit_0">
											<div class="col-md-2">
												<select name="jenis_deposit[0]"
														id="jenis_deposit0"
														class="form-control form-control-select2"
														onchange="setJenisDeposit(0)"
												>
													<option value="">-- Select 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"
														disabled
												>
													<option value="">** Select Platform Deposit **</option>
												</select>
											</div>
											<div class="col-md-2">
												<input type="text" name="nama_deposit[0]" list="datalistTransfer0" id="nama_deposit0" class="form-control" onchange="chooseNama(0)" autocomplete="off" placeholder="(Opsional)">
												<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-md-1">
                                                <button id="id_button_tambah_deposit" type="button" onclick="tambahDeposit()" class="btn btn-success">
                                                    <i class="fas fa-plus-circle"></i>
                                                </button>
                                            </div>
										</div>
									</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="">-- Select Jenis Pembayaran --</option>
											@foreach(config('custom.jenis_pembayaran') as $key => $val)
											<option value="{{$key}}">{{$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">
									</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="">-- Select Billing Instruction --</option>
											<option value="1" selected>No</option>
											<option value="0">Yes</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"></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"></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"></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"
                                            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="{{asset('global_assets/images/placeholders/placeholder.jpg')}}"
                                            style="object-fit: cover;" class="mb-1" />
                                    </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">
										  <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>
                                                </table>
                                            </div>

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

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

                            <legend>Payment Section</legend>

                            <div class="form-group row">
                                <label class="col-form-label col-lg-2">Use Payment:</label>
                                <div class="col-lg-10">
                                    <div class="form-check form-check-inline">
                                        <label class="form-check-label">
                                            <input type="radio"
                                                    name="type_payment_book"
                                                    class="form-check-input-styled type_payment_book"
                                                    style="border-color: red"
                                                    value="0"
                                                    data-fouc
                                                    checked
                                            >
                                            No
                                        </label>
                                    </div>

                                    <div class="form-check form-check-inline">
                                        <label class="form-check-label">
                                            <input type="radio"
                                                    name="type_payment_book"
                                                    class="form-check-input-styled type_payment_book"
                                                    style="border-color: red"
                                                    value="1"
                                                    data-fouc
                                            >
                                            Yes
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div id="section_payment_book" style="display: none;">
                                <div class="form-group row">
                                    <label class="col-form-label col-sm-2">Payment Method</label>
                                    <div class="col-sm-9">
                                        <select name="jenis_deposit"
                                                id="jenis_deposit_book"
                                                class="form-control border-teal border-1"
                                        >
                                            <option value="">** Select Payment Method **</option>
                                            @foreach (config('custom.jenis_deposit') as $key => $val)
                                                @if (!in_array($key, [3,5]))
                                                    <option value="{{$key}}">{{$val}}</option>
                                                    @continue
                                                @endif
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

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

                                <div class="form-group row wrap_segmentation_option_book" style="display: none">
                                    <label for="segmentation_book" class="col-form-label col-sm-2">Segmentation</label>
                                    <div class="col-lg-9">
                                        <select name="segmentation"
                                                id="segmentation_book"
                                                class="form-control form-control-select2 border-1 border-1 segmentation-option_book"
                                        >
                                            <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_book">{{$val}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group row" id="deposit_transfer_book" style="display: none">
                                    <label for="daftar_transfer_book" class="col-form-label col-sm-2">Transfer List</label>
                                    <div class="col-lg-9">
                                        <select name="transfer_akunting_id"
                                                id="deposit_transfer_akunting_id_book"
                                                class="form-control form-control-select2 border-1 border-teal"
                                                onchange="insertSelectTransfer();"
                                        >
                                            <option value="">-- Select Data (Opsional) --</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_deposit_transfer_book" class="text-danger"></span>
                                    </div>
                                </div>

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

                                <div class="form-group row" style="display:none" id="not-transfer-book">
                                    <label class="col-form-label col-sm-2">Nominal</label>
                                    <div class="col-sm-9">
                                        <input id="nominal_deposit_book" name="nominal" type="text" class="form-control border-teal border-1 input_comma_custom">
                                        {{-- <span class="text-success" id="nominal_tagihan_book">Total Bill : </span> --}}
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-form-label col-sm-2">Transaction Date</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="transaction_date" id="transaction_date_book" value="{{formatDate(getSystemDate())}}" readonly>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="description_payment_book" class="col-form-label col-lg-2">Description</label>
                                    <div class="col-lg-9">
                                        <input type="text" id="description_payment_book" name="description" class="form-control border-teal border-1">
                                    </div>
                                </div>
                            </div>

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

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

	</div>

    {{--
    --------------------------------------------------------------
    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"></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">0</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">Reservation No. Filter</th>
                                <th class="d-none">Date 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">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!--/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-->

    <!-- 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 --}}

	<!-- /content area -->
@endsection

@section('js')
	<!-- Theme JS files -->
	<script src="{{asset('global_assets/js/plugins/notifications/pnotify.min.js')}}"></script>
    <script src="{{asset('global_assets/js/plugins/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>

	<!-- <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/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/notifications/sweet_alert.min.js')}}"></script>

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

	<script src="{{asset('assets/js/app.js')}}"></script>

	<script src="{{asset('global_assets/js/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/demo_pages/form_inputs.js')}}"></script> --}}
	{{-- <script src="{{asset('global_assets/js/demo_pages/form_checkboxes_radios.js')}}"></script> --}}
	<script type="text/javascript">
        // 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();
        });

        // Json encode config
        let jenis_pembayaran = {!!json_encode(config('custom.jenis_pembayaran')) !!}
        let jenis_deposit = {!!json_encode(config('custom.jenis_deposit')) !!}

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

        var jns_kamar_extend_g = '';
        var rate_codes_extend_g = '';
        var guest_room_extend_g = '';
        var nomor_kamar_extend_g = '';

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

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

		//MULTIPLE DEPOSIT
		//Add Input
		let new_deposit_idx = 1;
		function tambahDeposit(){
			let html = `<div class="row mb-2" data-idx="${new_deposit_idx}" id="row_deposit_${new_deposit_idx}">
							<div class="col-md-2">
								<select name="jenis_deposit[${new_deposit_idx}]"
										id="jenis_deposit${new_deposit_idx}"
										class="form-control form-control-select2"
										onchange="setJenisDeposit(${new_deposit_idx})"
								>
									<option value="">-- Select 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"
                                        disabled
                                >
                                    <option value="">** Select Platform Deposit **</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})" 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}]"
                                       placeholder="0"
									   id="nominal${new_deposit_idx}" class="form-control format_mask ceknominaldepo" data-idx="${new_deposit_idx}" 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();
            }

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

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

		}

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

                $('#id_button_tambah_deposit').show();
            }
		}

		//Set Jenis Deposit
		let platform_pembayarans = {!! json_encode($platforms) !!}
		function setJenisDeposit(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 Platform Pembayaran **</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(platform_pembayarans[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');
			}

		}

        // function untuk jenis deposit add payment new
        $('#jenis_deposit_book').on('change', function(){
            let jenis_deposit = $(this).val();

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

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

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

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

                $('#deposit_platform_pembayaran_id_book').html(option_pembayaran);
                $('#deposit_platform_pembayaran_id_book').attr('required', 'required');
                $('#not-transfer-book').show();

                $('.wrap_segmentation_option_book').hide()
                $('#segmentation_book').attr('required', false)
            }
            //Jika Jenis Deposit Transfer
            else if(jenis_deposit == '3'){
                $('#jenis_deposit_option_book').hide();
                $('#deposit_platform_pembayaran_id_book').removeAttr('required');
                $('#deposit_transfer_book').show();
                // $('#not-transfer-book').hide();
                $('.wrap_segmentation_option_book').hide()
                $('#segmentation_book').attr('required', false)
            }
            else{
                $('#jenis_deposit_option_book').hide();
                $('#deposit_platform_pembayaran_id_book').removeAttr('required');
                $('#deposit_transfer_book').hide();
                $('#not-transfer-book').show();

                if (jenis_deposit == '5') {
                    $('.wrap_segmentation_option_book').show()
                    $('#segmentation_book').attr('required', true)
                }else{
                    $('.wrap_segmentation_option_book').hide()
                    $('#segmentation_book').attr('required', false)
                }
            }
        });

		//Select 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);
                //Set Voucher Transfer
                $('#voucher'+id).val(data_transfer.voucher);
			}
		}

		//MULTIPLE BOOKING
		function multipleBookingDisable(){
			let val = $('#multiple_booking').val();
			if(val > 1){
				$('[name="nomor_kamar[]"]').attr('disabled', 'disabled');
			}
			else{
				$('[name="nomor_kamar[]"]').removeAttr('disabled');
			}
		}

		$('#multiple_booking').on('change', function(){
			multipleBookingDisable();
		});

        // $('#nominal0').on('input', function(){
        //     $('#nominal0').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
        })

		function preview() {
			frame.src = URL.createObjectURL(event.target.files[0]);
		}

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

		$(document).ready(function () {

			// autocompleteNama({{\Auth::user()->hotel_id}});

			// Button class options
			$('#inpDatePicker0').daterangepicker({
				applyClass: 'btn-success',
				cancelClass: 'btn-danger',
          		minDate: "{{ date('d-m-Y', strtotime('-30 days',strtotime(getSystemDate()))) }}",
                startDate: "{{ date('d-m-Y', strtotime(getSystemDate())) }}",
                endDate: "{{ date('d-m-Y', strtotime(getSystemDate())) }}",
				locale: {
					format: 'DD-MM-YYYY'
				}
			});

			$('.submitBtn').click(function(e){
				var jns_kelamin = $("input[type='radio'][name='jns_kelamin']:checked").val()
				console.log(jns_kelamin)

                let form_input = $('#submitbooking').find(':input[required]:visible').not(':input[type=submit],:hidden')
				var jumlah_input_req = form_input.length;
				var input_keisi = 0;

				form_input.each(function() {
					if(this.value == "") {
                        if ($(this).hasClass('ceknominaldepo')) {
                            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 {
                            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 {
                        if ($(this).hasClass('ceknightcount')){
                            var jenis_deposit = $('#jml_malam'+$(this).data('idx')).val()
                            if (jenis_deposit == 0) {
                            }else{
                                input_keisi += 1;
                            }
                        }else{
                            input_keisi += 1;
                        }
					}
				})
				// if (!jns_kelamin) {
				// 	new PNotify({
				// 		title: 'Error',
				// 		text: 'Jenis Kelamin belum diisi',
				// 		icon: 'icon-blocked',
				// 		type: 'error'
				// 	});

				// 	// e.preventDefault()
				// 	return false;
				// }

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

                console.log(jumlah_input_req, input_keisi)
				if (jumlah_input_req == input_keisi) {
                        console.log('masuk')
						// return false;
						// e.preventDefault()
					$(".submitBtn").attr("disabled", true);
					$('#submitbooking').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;
                }
            });

            //New Extend Stay: get guest profile id and booking id
            let queryString = window.location.search;
            let urlParams = new URLSearchParams(queryString);
            let g_id = urlParams.get('g_id');
            let b_id = urlParams.get('b_id');
            if (g_id && b_id) {
                let extend_guests   = {!!json_encode($extend_guests) !!}
                let extend_bookings = {!!json_encode($extend_bookings) !!}
                let extend_bdetail = {!!json_encode($extend_bdetail) !!}
                console.log(extend_guests.id, extend_bookings.id)

				let hotel_id = $('#hotel_id').val();
				$('.form-check-input-styled').uniform();

				//Assign Value
                $('#jenis_booking').select2().val(extend_bookings.jenis_booking).trigger('change');
                $('#company_id').select2().val(extend_bookings.company_id ?? null).trigger('change');

				$('#nama').val(extend_bookings.nama);
				$('#alamat').val(extend_bookings.alamat);
				$('#negara').val(extend_bookings.negara);
				$('#propinsi').val(extend_bookings.propinsi);
				$('#kota').val(extend_bookings.kota);
				$('#jns_identitas').select2().val(extend_bookings.jns_identitas).trigger('change');
				$('#title').val(extend_bookings.title).trigger('change');
				$('#no_identitas').val(extend_bookings.no_identitas);
				$('#kewarganegaraan').val(extend_bookings.kewarganegaraan);

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

                console.log(extend_bookings.jns_kelamin)
                if (extend_bookings.jns_kelamin == 1) {
                    $('#male').prop('checked', true).uniform();
                    console.log('male');
                }else if(extend_bookings.jns_kelamin == 2){
                    $('#female').prop('checked', true).uniform();
                    console.log('female');
                }

				$('#email').val(extend_bookings.email);
				$('#telp').val(extend_bookings.telp);
				$('#telp2').val(extend_bookings.telp2);
				$('#fax').val(extend_bookings.fax);
				$('#plat_nomor').val(extend_bookings.plat_nomor);

				if (extend_bookings.reservation_remark == null || extend_bookings.reservation_remark == undefined){
					// $('#remark').val('-');
                    $('#remark').summernote('destroy');
                    $('#remark').summernote({
                        toolbar: [
                            ['style', ['bold', 'italic', 'underline', 'clear']],
                        ]
                    });
                    $('#remark').summernote('editor.insertText', '-');
				}
				else if (extend_bookings.reservation_remark != ""){
					if(extend_bookings.hotel_id == hotel_id){
						// $('#remark').val(extend_bookings.remark);
                        $('#remark').summernote('destroy');
                        $('#remark').summernote({
                            toolbar: [
                                ['style', ['bold', 'italic', 'underline', 'clear']],
                            ]
                        });
                        $('#remark').summernote('editor.insertText', extend_bookings.reservation_remark);
					}
					else{
						// $('#remark').val('-');
                        $('#remark').summernote('destroy');
                        $('#remark').summernote({
                            toolbar: [
                                ['style', ['bold', 'italic', 'underline', 'clear']],
                            ]
                        });
                        $('#remark').summernote('editor.insertText', '-');
					}
				}

                // company
                setTimeout(() => {
                    $('#company_id').select2().val(extend_bookings.company_id ?? null).trigger('change');
                    $('#segmentasi_rate_code').select2().val(extend_bookings.segmentasi_rate_code ?? null).trigger('change');
                    $('#source').select2().val(extend_bookings.source ?? null).trigger('change');
                }, 3000);

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

                // Guest History Booking
                $.ajax({
                    type: 'GET',
                    url: "{{ url('/guest-history-booking')}}/"+extend_bookings.id,
                    success: function (results) {
                        $('.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
                                let invoice = booking_detail.nomor_kamar ? 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">
                                                                        Kode Booking: ${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>Pembayaran ${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[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();
                    }
                });

                // extend stay date for 1 room
                let extend_start = moment(extend_bdetail.end_date, "YYYY-MM-DD")
                let extend_end = moment(extend_bdetail.end_date, "YYYY-MM-DD").add('days', 1)
                let extend_period = extend_start.format("DD-MM-YYYY")+' - '+extend_end.format("DD-MM-YYYY")
                let extend_diff = extend_end.diff(extend_start, 'days')

                    start_date_extend_g = extend_start;

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

                    $('#jml_malam0').val(extend_diff)
                    extend_date_global = extend_start.format("YYYY-MM-DD")
                    changeJml_Kamar(extend_diff, 0, 1)

                    // insert detail room
                    $('#guest_room0').val(extend_bdetail.guest_room)
                    $('#jns_kamar0').val(extend_bdetail.jns_kamar).trigger('change')
                    $('#rate_code0').val(extend_bdetail.rate_codes).trigger('change')

                    // global var set
                    jns_kamar_extend_g  = extend_bdetail.jns_kamar;
                    rate_codes_extend_g = extend_bdetail.rate_codes;
                    guest_room_extend_g = extend_bdetail.guest_room;
                    nomor_kamar_extend_g = extend_bdetail.nomor_kamar;

                    setTimeout(() => {
                        $('#nomor_kamar0').val(extend_bdetail.nomor_kamar).trigger('change')
                        console.log(extend_bdetail.rate_codes)
                    }, 2000);
                    setTimeout(() => {
                        $('#rate_code0').val(extend_bdetail.rate_codes).trigger('change')
                        console.log(extend_bdetail.nomor_kamar)
                    }, 3000);
                    scrollToInvalid('jml_malam0')
                    applyDateRangePicker('daterange-buttons')
            }

		});

		//pilih Hotel
		// $(document).on("change", "#hotel_id", function () {
		// 	$('[name="jns_kamar[]"]').html('<option data-id="" data-diskon="" data-kapasitas="" value="">-- Select Jenis Kamar --</option>');
		// 	$('[name="nomor_kamar[]"]').html('<option value="">-- Select Room Number --</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');

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

			//Clear Form
			$('#alamat').val('');
			$('#negara').val('');
			$('#propinsi').val('');
			$('#kota').val('');
			$('#jns_identitas').select2().val('').trigger('change');
			// $('#title').val('').trigger('change');
			$('#no_identitas').val('');
			$('#kewarganegaraan').val('');

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

			if(data_text){
                $('[name="jns_kelamin"]').prop('checked', false).uniform();
                $('[value="Laki-laki"]').prop('checked', true)
                                        .uniform();

				let data_json = JSON.parse(data_text);
				// console.log(data_json)
				let hotel_id = $('#hotel_id').val();
				$('.form-check-input-styled').uniform();

				//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);
				$('#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);

                console.log(data_json.id)
                $('#guest_id').val(data_json.id)

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

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

                console.log(data_json.sex)
                if (data_json.sex == 1) {
                    $('#male').prop('checked', true).uniform();
                    console.log('male')
                }else if(data_json.sex == 2){
                    $('#female').prop('checked', true).uniform();
                    console.log('female')
                }else{
                    let this_title = data_json.title
                    if(['Mr', 'Bapak'].includes(this_title)){
                        $('#female').prop('checked', false).uniform();
                        $('#male').prop('checked', true).uniform();
                    }else if(['Mrs', 'Ms', 'Ibu'].includes(this_title)){
                        $('#male').prop('checked', false).uniform();
                        $('#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.codes == null || data_json.codes == undefined){
					// $('#remark').val('-');
                    $('#remark').summernote('destroy');
                    $('#remark').summernote({
                        toolbar: [
                            ['style', ['bold', 'italic', 'underline', 'clear']],
                        ]
                    });
                    $('#remark').summernote('editor.insertText', '-');
				}
				else if (data_json.codes != ""){
					if(data_json.hotel_id == hotel_id){
						// $('#remark').val(data_json.codes);
                        $('#remark').summernote('destroy');
                        $('#remark').summernote({
                            toolbar: [
                                ['style', ['bold', 'italic', 'underline', 'clear']],
                            ]
                        });
                        $('#remark').summernote('editor.insertText', data_json.codes);
					}
					else{
						// $('#remark').val('-');
                        $('#remark').summernote('destroy');
                        $('#remark').summernote({
                            toolbar: [
                                ['style', ['bold', 'italic', 'underline', 'clear']],
                            ]
                        });
                        $('#remark').summernote('editor.insertText', '-');
					}
				}


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

                // Guest History Booking
                $.ajax({
                    type: 'GET',
                    url: "{{ url('/guest-history-booking')}}/"+data_json.id,
                    success: function (results) {
                        $('.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
                                let invoice = booking_detail.nomor_kamar ? 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">
                                                                        Kode Booking: ${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>Pembayaran ${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[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();
                    }
                });

                scrollToInvalid('nama')

			}else{
                $('.datatable-basic').DataTable().destroy();
                $('#tbody_guest_history_booking').html('')
                $('.datatable-basic').DataTable().draw();
            }

            scrollToInvalid('inpDatePicker0')
		});

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

        applyDateRangePicker('daterange-buttons')

        //Index element
        let new_idx = 1;
        let multiple_room = 1;
        // $(document).ready(function () {
        function applyDateRangePicker(element) {
            // Trigger Ketika Ganti Tanggal Checkin / Checkout
            $('.'+element).on('apply.daterangepicker', (e, picker) => {
                console.log('applyDateRange');
                // console.log(e, picker.element[0].id, picker)

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

                a = [];
                // reset total count room
                // new_idx = 1;
                $('#qty_multiple_room').val('1')

                //Menghitung jumlah malam, total biaya, dan ketersediaan kamar
                // var range = $(this).data('daterangepicker');
                var idx_element = $('#'+picker.element[0].id).data('idx');

                if(picker){
                var checkin = picker.startDate;
                var checkout = picker.endDate;

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

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

                //Reset pilihan kamar hotel
                let guest_room_html = `<input id="guest_room${idx_element}" type="text" name="guest_room[${idx_element}]" class="form-control" placeholder="guest name ...">`

                let jenis_kamar_html = `
                                            <select name="jns_kamar[${idx_element}]"
                                                    id="jns_kamar${idx_element}"
                                                    data-idx="${idx_element}"
                                                    onchange="getKamar(this.id), removeColorValidation(this.id), checkJenis(this.id)"
                                                    class="form-control form-control-select2-red"
                                                    required
                                                    style="border-color: red"
                                            >
                                                <option data-id=""
                                                        data-diskon=""
                                                        data-kapasitas=""
                                                        value="">-- Select Jenis Kamar --</option>
                                                    @foreach($jenis_kamars as $jns)
                                                        @php
                                                        $diskon_kamar = count($jns->discount) > 0 ? $jns->discount[0]->diskon : 0;
                                                        $disctype = count($jns->discount) > 0 ? $jns->discount[0]->disctype : 1;
                                                        @endphp
                                                        <option data-id="{{$jns->id}}"
                                                                data-diskon="{{$diskon_kamar}}"
                                                                data-disctype="{{$disctype}}"
                                                                data-kapasitas="{{$jns->kapasitas}}"
                                                                value="{{$jns->nama}}"
                                                        >{{$jns->nama}} ({{$jns->kapasitas}} Orang)</option>
                                                    @endforeach
                                            </select>
                                            <input type="hidden" name="diskon[${idx_element}]" id="diskon${idx_element}">
                                            <input type="hidden" name="disctype[${idx_element}]" id="disctype${idx_element}">
                                            <input type="hidden" name="jenis_kamar_id[${idx_element}]" id="jenis_kamar_id${idx_element}">
                                        `

                let nomor_kamar_html = `
                                        <select name="nomor_kamar[${idx_element}]"
                                                id="nomor_kamar${idx_element}"
                                                data-idx="${idx_element}"
                                                class="form-control form-control-select2-red nomor_kamars"
                                                style="border-color: red"
                                                onchange="checkNomor(this.id)"
                                        >
                                            <option value="">-- Select Room Number --</option>
                                        </select>
                                        <input type="hidden"
                                            id="jml_kamar${idx_element}"
                                            name="jml_kamar[${idx_element}]"
                                            class="form-control"
                                            min="1"
                                            value="1"
                                        >
                                        `

                let rate_code_html = `
                                    <select name="rate_codes[${idx_element}]"
                                            id="rate_code${idx_element}"
                                            data-idx="${idx_element}"
                                            onchange="getPrice(this.getAttribute('data-idx'), '', 1)"
                                            class="rate_code_class form-control form-control-select2-red"
                                            required
                                            style="border-color: red"
                                    >
                                        <option value="" data-id="0" data-harga="0" data-include_breakfast="0">-- Select Rate Code --</option>
                                    </select>
                                    <input type="hidden" id="selratecodeid${idx_element}" name="selratecodeid[${idx_element}]">
                                    <input type="hidden" id="ratecode_id${idx_element}" name="ratecode_id[${idx_element}]">
                                    `

                let arrangement_code_html = `
                                            <button type="button" id="open_arr_dialog${idx_element}" onclick="openArrangementDialog(${idx_element})" class="btn btn-primary addError">
                                                <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" min="0" id="per_item${idx_element}" data-idx="${idx_element}" class="form-control review_harga" placeholder="Total Room"  style="border-color: red" readonly disabled>
                                <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}]">
                                `

                let billing_instruction_html = `
                                                <select name="status_lock[${idx_element}]" id="status_lock${idx_element}" class="form-control-select2-no-search">
                                                    <option value="">-- Select Billing Instruction --</option>
                                                    <option value="1" selected>No</option>
                                                    <option value="0">Yes</option>
                                                </select>
                                                `

                let incognito_html = `
                                        <input class="rcheckbox" type="checkbox" name="incognito[${idx_element}]" value="1" id="incognito${idx_element}">
                                        `

                let pax_html = `
                            <input type="number"
                                        id="pax${idx_element}"
                                        name="pax[${idx_element}]"
                                        class="form-control"
                                        min="0"
                                        value="0"
                                        data-idx="${idx_element}"
                                        onchange="hitungjumlahdewasa(), getPrice(this.getAttribute('data-idx'), '', 1)"
                                        required
                                >
                            `

                $('.wrap-guest-room'+idx_element).html(guest_room_html);
                $('.wrap-jns_kamar'+idx_element).html(jenis_kamar_html);
                $('.wrap-nomor-kamar'+idx_element).html(nomor_kamar_html);
                $('.wrap-pax'+idx_element).html(pax_html);
                $('.wrap-rate_code'+idx_element).html(rate_code_html);
                $('.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);
                $('.wrap-billing-instruction'+idx_element).html(billing_instruction_html);
                $('.wrap-incognito'+idx_element).html(incognito_html);

                // let html = `  <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="display:none">Multiply: </div>
				// 				<div class="col-lg-2">
				// 					Jenis Kamar:
				// 				</div>
				// 				<div class="col-lg-2">
				// 					Nomor Kamar:
				// 				</div>
				// 				<div class="col-lg-2">
				// 					Rate Code:
				// 				</div>
				// 				<div class="col-lg-1" style="text-align: center">
				// 					Arr. Code:
				// 				</div>
				// 				<div class="col-lg-2">
				// 					Harga:
				// 				</div>
				// 				<div class="col-lg-1 pl-0">
				// 					Block?
				// 				</div>
				// 			</div>
                //             <legend></legend>
			  	// 			<div class="per_rooms mb-2" data-idx="row_0" id="row_0">
                //                 <div class=row>
                //                     <div class="col-lg-0" id="button_multi_room0" style="display:none">
                //                             <button type="button" onclick="modalMultiRoom(0)" class="btn btn-warning">
                //                                 <i class="fas fa-copy"></i>
                //                             </button>
                //                     </div>
                //                     <div class="col-lg-2 addError wrap-jns_kamar0">
                //                         <select name="jns_kamar[]"
                //                                 id="jns_kamar0"
                //                                 data-idx="0"
                //                                 onchange="getKamar(this.id), removeColorValidation(this.id), checkJenis(this.id)"
                //                                 class="form-control form-control-select2-red"
                //                                 required
                //                                 style="border-color: red"
                //                         >
                //                             <option data-id=""
                //                                     data-diskon=""
                //                                     data-kapasitas=""
                //                                     value="">-- Select 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[]" id="diskon0">
                //                         <input type="hidden" name="jenis_kamar_id[]" id="jenis_kamar_id0">
                //                         <input type="hidden" name="pax[]" id="pax0">
                //                     </div>
                //                     <div class="col-lg-2">
                //                         <select name="nomor_kamar[]"
                //                                 id="nomor_kamar0"
                //                                 data-idx="0"
                //                                 class="form-control form-control-select2-red nomor_kamars"
                //                                 onchange="checkNomor(this.id)"
                //                         >
                //                             <option value="">-- Select Room Number --</option>
                //                         </select>
                //                         <input type="hidden"
                //                                 id="jml_kamar0"
                //                                 name="jml_kamar[]"
                //                                 class="form-control"
                //                                 min="1"
                //                                 value="1"
                //                         >
                //                     </div>
                //                     <div class="col-lg-2 addError wrap-rate_code0">
                //                         <select name="rate_codes[]" id="rate_code0" data-idx="0" onchange="getPrice(this.getAttribute('data-idx'), '', 1), removeColorValidation(this.id)" class="rate_code_class form-control form-control-select2-red">
                //                             <option value="" data-harga="0" data-include_breakfast="0">-- Select Rate Code --</option>
                //                         </select>
                //                     </div>
                //                     <div class="col-lg-1" style="text-align: center;">
                //                         <button type="button" id="open_arr_dialog0" onclick="openArrangementDialog(0)" class="btn btn-primary addError">
                //                             <i class="fas fa-calendar-check"></i>
                //                             <span class=""></span>
                //                         </button>
                //                     </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 review_harga" placeholder="Total Room"  style="border-color: red" readonly disabled>
                //                         <span class="text-danger" id="ket_diskon0"></span>
                //                     </div>
                //                     <div class="col-lg-2 m-0 p-0">

                //                         <input class="ml-2 mr-3 rcheckbox" type="checkbox" id="block_kamar0" name="block_kamar[]">

                //                         <button type="button" onclick="tambahKamar()" class="btn btn-success">
                //                             <i class="fas fa-plus-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[]" class="form-control" placeholder="guest name ...">
                //                     </div>
                //                     <div class="col-lg-2">
                //                         <select name="status_lock[]" id="status_lock" class="form-control-select2-no-search">
                //                             <option value="">-- Select 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[]" value="1" id="incognito">
                //                                 <h4><i class="fas fa-user-secret"></i>&nbsp;<b>Incognito</b></h4>
                //                             </label>
                //                         </div>
                //                     </div>
                //                 </div>
                //                 <legend></legend>
				// 		    </div>`;

                // $('#form_kamar').html(html);


                //Reset List
                // if (idx_element === 0) {
                    // let 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>
                    //             <tbody id="arrangement_list_0" class="table_arrs" style="display:none;">
                    //             </tbody>`

                    // $('#table_arrangement_list').html(list);
                // }

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

                $('.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');
                });

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

                // kapasitas_total = 0;
                multipleBookingDisable();
                freeCompliment();
                addArrangement(idx_element, '', 0);
                getRoomAvailability(idx_element)

                console.log('applydaterange')
                getPrice(idx_element, '', 0);

                // if extend stay change night count
                if (jns_kamar_extend_g && rate_codes_extend_g && guest_room_extend_g && nomor_kamar_extend_g) {
                    $('#guest_room0').val(guest_room_extend_g)
                    $('#jns_kamar0').val(jns_kamar_extend_g).trigger('change')
                    setTimeout(() => {
                        $('#nomor_kamar0').val(nomor_kamar_extend_g).trigger('change')
                    }, 2000);
                    setTimeout(() => {
                        $('#rate_code0').val(rate_codes_extend_g).trigger('change')
                    }, 3000);
                }
            });
        }

        // Function untuk hitung range tanggal jika ganti jml malam CHANGE NIGHT
        let system_date = {!! json_encode(getSystemDate()) !!}; // ambil function php getsystemdate
        function changeJml_Kamar(jml, idx_element, method){
            //Hotel ID
			let hotel_id = $("#hotel_id").val();

            a = [];
            // reset count room
            // new_idx = 1;
            $('#qty_multiple_room').val('1')

            //Menghitung jumlah malam, total biaya, dan ketersediaan kamar
            if(jml){
                    console.log(extend_date_global)
                    // condition to choose add_date from extend stay or not!
                    if (extend_date_global) {
                        var checkin     = moment(extend_date_global, "YYYY-MM-DD").format("YYYY-MM-DD") // tanggal awal dari datesystem
                        var checkout    = moment(extend_date_global, "YYYY-MM-DD").add(jml, 'days').format("YYYY-MM-DD") //end date dari jml malam tambah tanggal awal
                    } else {
                        if (method === 0) {
                            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
                        }else{
                            var checkin     = moment(extend_date_global, "YYYY-MM-DD").format("YYYY-MM-DD") // tanggal awal dari datesystem
                            var checkout    = moment(extend_date_global, "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).val(checkin); // hidden input checkin
                    $('#end_date'+idx_element).val(checkout); // hidden input checkout

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

                    //Reset pilihan kamar hotel
                    // let html = `  <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="display:none">Multiply: </div>
                    // 					<div class="col-lg-2">
                    // 						Jenis Kamar:
                    // 					</div>
                    // 					<div class="col-lg-2">
                    // 						Nomor Kamar:
                    // 					</div>
                    // 					<div class="col-lg-2">
                    // 						Rate Code:
                    // 					</div>
                    // 					<div class="col-lg-1" style="text-align: center">
                    // 						Arr. Code:
                    // 					</div>
                    // 					<div class="col-lg-2">
                    // 						Harga:
                    // 					</div>
                    // 					<div class="col-lg-1 pl-0">
                    // 						Block?
                    // 					</div>
                    // 				</div>
                    //                 <legend></legend>
                    //   				<div class="per_rooms mb-2" data-idx="row_0" id="row_0">
                    //                     <div class=row>
                    //                         <div class="col-lg-0" id="button_multi_room0" style="display:none">
                    //                                 <button type="button" onclick="modalMultiRoom(0)" class="btn btn-warning">
                    //                                     <i class="fas fa-copy"></i>
                    //                                 </button>
                    //                         </div>
                    //                         <div class="col-lg-2 addError wrap-jns_kamar0">
                    //                             <select name="jns_kamar[]"
                    //                                     id="jns_kamar0"
                    //                                     data-idx="0"
                    //                                     onchange="getKamar(this.id), removeColorValidation(this.id), checkJenis(this.id)"
                    //                                     class="form-control form-control-select2-red"
                    //                                     required
                    //                                     style="border-color: red"
                    //                             >
                    //                                 <option data-id=""
                    //                                         data-diskon=""
                    //                                         data-kapasitas=""
                    //                                         value="">-- Select 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[]" id="diskon0">
                    //                             <input type="hidden" name="jenis_kamar_id[]" id="jenis_kamar_id0">
                    //                             <input type="hidden" name="pax[]" id="pax0">
                    //                         </div>
                    //                         <div class="col-lg-2">
                    //                             <select name="nomor_kamar[]"
                    //                                     id="nomor_kamar0"
                    //                                     data-idx="0"
                    //                                     class="form-control form-control-select2-red nomor_kamars"
                    //                                     onchange="checkNomor(this.id)"
                    //                             >
                    //                                 <option value="">-- Select Room Number --</option>
                    //                             </select>
                    //                             <input type="hidden"
                    //                                     id="jml_kamar0"
                    //                                     name="jml_kamar[]"
                    //                                     class="form-control"
                    //                                     min="1"
                    //                                     value="1"
                    //                             >
                    //                         </div>
                    //                         <div class="col-lg-2 addError wrap-rate_code0">
                    //                             <select name="rate_codes[]" id="rate_code0" data-idx="0" onchange="getPrice(this.getAttribute('data-idx'), '', 1), removeColorValidation(this.id)" class="rate_code_class form-control form-control-select2-red">
                    //                                 <option value="" data-harga="0" data-include_breakfast="0">-- Select Rate Code --</option>
                    //                             </select>
                    //                         </div>
                    //                         <div class="col-lg-1" style="text-align: center;">
                    //                             <button type="button" id="open_arr_dialog0" onclick="openArrangementDialog(0)" class="btn btn-primary addError">
                    //                                 <i class="fas fa-calendar-check"></i>
                    //                                 <span class=""></span>
                    //                             </button>
                    //                         </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 review_harga" placeholder="Total Room"  style="border-color: red" readonly disabled>
                    //                             <span class="text-danger" id="ket_diskon0"></span>
                    //                         </div>
                    //                         <div class="col-lg-2 m-0 p-0">

                    //                             <input class="ml-2 mr-3 rcheckbox" type="checkbox" id="block_kamar0" name="block_kamar[]">

                    //                             <button type="button" onclick="tambahKamar()" class="btn btn-success">
                    //                                 <i class="fas fa-plus-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[]" class="form-control" placeholder="guest name ...">
                    //                         </div>
                    //                         <div class="col-lg-2">
                    //                             <select name="status_lock[]" id="status_lock" class="form-control-select2-no-search">
                    //                                 <option value="">-- Select 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[]" value="1" id="incognito">
                    //                                     <h4><i class="fas fa-user-secret"></i>&nbsp;<b>Incognito</b></h4>
                    //                                 </label>
                    //                             </div>
                    //                         </div>
                    //                     </div>
                    //                     <legend></legend>
                    // 			    </div>`;
                    // $('#form_kamar').html(html);

                    let guest_room_html = `<input id="guest_room${idx_element}" type="text" name="guest_room[${idx_element}]" class="form-control" placeholder="guest name ...">`

                    let jenis_kamar_html = `
                                                <select name="jns_kamar[${idx_element}]"
                                                        id="jns_kamar${idx_element}"
                                                        data-idx="${idx_element}"
                                                        onchange="getKamar(this.id), removeColorValidation(this.id), checkJenis(this.id)"
                                                        class="form-control form-control-select2-red"
                                                        required
                                                        style="border-color: red"
                                                >
                                                    <option data-id=""
                                                            data-diskon=""
                                                            data-kapasitas=""
                                                            value="">-- Select Jenis Kamar --</option>
                                                        @foreach($jenis_kamars as $jns)
                                                            @php
                                                            $diskon_kamar = count($jns->discount) > 0 ? $jns->discount[0]->diskon : 0;
                                                            $disctype = count($jns->discount) > 0 ? $jns->discount[0]->disctype : 1;
                                                            @endphp
                                                            <option data-id="{{$jns->id}}"
                                                                    data-diskon="{{$diskon_kamar}}"
                                                                    data-disctype="{{$disctype}}"
                                                                    data-kapasitas="{{$jns->kapasitas}}"
                                                                    value="{{$jns->nama}}"
                                                            >{{$jns->nama}} ({{$jns->kapasitas}} Orang)</option>
                                                        @endforeach
                                                </select>
                                                <input type="hidden" name="diskon[${idx_element}]" id="diskon${idx_element}">
                                                <input type="hidden" name="disctype[${idx_element}]" id="disctype${idx_element}">
                                                <input type="hidden" name="jenis_kamar_id[${idx_element}]" id="jenis_kamar_id${idx_element}">
                                            `

                    let nomor_kamar_html = `
                                            <select name="nomor_kamar[${idx_element}]"
                                                    id="nomor_kamar${idx_element}"
                                                    data-idx="${idx_element}"
                                                    class="form-control form-control-select2-red nomor_kamars"
                                                    style="border-color: red"
                                                    onchange="checkNomor(this.id)"
                                            >
                                                <option value="">-- Select Room Number --</option>
                                            </select>
                                            <input type="hidden"
                                                id="jml_kamar${idx_element}"
                                                name="jml_kamar[${idx_element}]"
                                                class="form-control"
                                                min="1"
                                                value="1"
                                            >
                                            `

                    let rate_code_html = `
                                        <select name="rate_codes[${idx_element}]"
                                                id="rate_code${idx_element}"
                                                data-idx="${idx_element}"
                                                onchange="getPrice(this.getAttribute('data-idx'), '', 1)"
                                                class="rate_code_class form-control form-control-select2-red"
                                                required
                                                style="border-color: red"
                                        >
                                            <option value="" data-id="0" data-harga="0" data-include_breakfast="0">-- Select Rate Code --</option>
                                        </select>
                                        <input type="hidden" id="selratecodeid${idx_element}" name="selratecodeid[${idx_element}]">
                                        <input type="hidden" id="ratecode_id${idx_element}" name="ratecode_id[${idx_element}]">
                                        `

                    let arrangement_code_html = `
                                                <button type="button" id="open_arr_dialog${idx_element}" onclick="openArrangementDialog(${idx_element})" class="btn btn-primary addError">
                                                    <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" min="0" id="per_item${idx_element}" data-idx="${idx_element}" class="form-control review_harga" placeholder="Total Room"  style="border-color: red" readonly disabled>
                                    <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}]">
                                    `

                    let billing_instruction_html = `
                                                    <select name="status_lock[${idx_element}]" id="status_lock${idx_element}" class="form-control-select2-no-search">
                                                        <option value="">-- Select Billing Instruction --</option>
                                                        <option value="1" selected>No</option>
                                                        <option value="0">Yes</option>
                                                    </select>
                                                    `

                    let incognito_html = `
                                            <input class="rcheckbox" type="checkbox" name="incognito[${idx_element}]" value="1" id="incognito${idx_element}">
                                            `

                    let pax_html = `
                                        <input type="number"
                                                id="pax${idx_element}"
                                                name="pax[${idx_element}]"
                                                class="form-control"
                                                min="0"
                                                value="0"
                                                data-idx="${idx_element}"
                                                onchange="hitungjumlahdewasa(), getPrice(this.getAttribute('data-idx'), '', 1)"
                                                required
                                        >
                                    `

                    $('.wrap-guest-room'+idx_element).html(guest_room_html);
                    $('.wrap-jns_kamar'+idx_element).html(jenis_kamar_html);
                    $('.wrap-nomor-kamar'+idx_element).html(nomor_kamar_html);
                    $('.wrap-pax'+idx_element).html(pax_html);
                    $('.wrap-rate_code'+idx_element).html(rate_code_html);
                    $('.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);
                    $('.wrap-billing-instruction'+idx_element).html(billing_instruction_html);
                    $('.wrap-incognito'+idx_element).html(incognito_html);


                    //Reset List
                    //     let 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>
                    //                 <tbody id="arrangement_list_0" class="table_arrs" style="display:none;">
                    //                 </tbody>`

                    //     $('#table_arrangement_list').html(list);

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

                    $('.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');
                    });

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

            multipleBookingDisable();
            freeCompliment();
            addArrangement(idx_element, '', 0);

            // if extend stay change night count
            if (jns_kamar_extend_g && rate_codes_extend_g && guest_room_extend_g && nomor_kamar_extend_g) {
                $('#guest_room0').val(guest_room_extend_g)
                $('#jns_kamar0').val(jns_kamar_extend_g).trigger('change')
                setTimeout(() => {
                    $('#nomor_kamar0').val(nomor_kamar_extend_g).trigger('change')
                }, 2000);
                setTimeout(() => {
                    $('#rate_code0').val(rate_codes_extend_g).trigger('change')
                }, 3000);
            }
        }

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

            }

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

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

                if (document.getElementById('tbody_room_availability'+idx)) {
                    $('#tbody_room_availability'+idx).html('')
                }else{
                    let tbody =`<tbody id="tbody_room_availability${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)){
                                        // console.log(jenis_kamar.nama+':'+|day+':'+jenis_kamar.kamars_count+'-'+(stocks[jenis_kamar.nama][day] ?? 0)+'-'+(ooo_schedule[jenis_kamar.nama][day]).reduce((a, b) => a + b, 0))
                                        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'+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 idx = $("#"+id_select).data('idx');
			let select_element = "#nomor_kamar"+idx;
			let select_rate_code = "#rate_code"+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');

            var waktucheck = $('#inpDatePicker'+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 Jenis Kamar
			$('#jenis_kamar_id'+idx).val(jenis_kamar)
			// Assign Kapasitas
			$('#pax'+idx).val(pax);

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

			//Assign diskon per kamar
            console.log(diskon)
			$("#diskon"+idx).val(diskon);
			$("#disctype"+idx).val(disctype);
            $("#ket_diskon"+idx).html(null);
            $("#per_item"+idx).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){
				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;
				}
			});

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

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

                    if (!a.hasOwnProperty(key)) {
                        a[key] = []
                    }
                    // console.log(val, 'omo bal')
                    a[key]['nomor_kamar'] = nomor_kamar_multiple_room
                    a[key]['checkin'] = checkin_multiple_room
                    a[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'+idx).data('daterangepicker');
			if(range){
				var checkin = range.startDate;
				var checkout = range.endDate;

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

                $.ajax({
                    type: "GET",
                    url: "{{route('booking.checktyperoom')}}",
                    data: {
                        jenis:jenis_kamar,
                        checkin: moment(checkin).format('YYYY-MM-DD'),
                        checkout: moment(checkout).format('YYYY-MM-DD'),
                    },
                    success: function (response) {
                        // console.log(jenis_kamar, 'ini jenis kamar')
                        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 checkin_multiple_room = $('#start_date'+idx_multiple_room).val()
                        //     let checkout_multiple_room = $('#end_date'+idx_multiple_room).val()

                        //     // console.log(idx_multiple_room, idx)
                        //     if (jenis_kamar_multiple_room == jenis_kamar && idx_multiple_room != idx) {
                        //         console.log()
                        //         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);
                        } else {
                            callModalAlert("There aren't available rooms for this room type.")
                            $('#jns_kamar'+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);
			}
			else{
				selectRateCode(select_rate_code, jenis_kamar, segmentasi, checkin);
			}
		}

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

            // console.log(btn)

            let value_rate_code = '';
            let harga = '';
            let status = ''; // ambil data status breakfast aktiv atau tidak
            let rate_code_id = ''; // ambil data id rate code
            let value_arrangement_code = '';
            let harga_arrangement = '';
			let arrangement_service = 0;
			let arrangement_tax = 0;
            let diskon = '';
            let disctype = '';
            let arrangement_id = null;
            var tipe_rate_code = '';

            if (btn == 0) {

                // Value Rate code
                 value_rate_code = $("#rate_code"+group).val();
                 harga = parseInt($("#rate_code"+group).find('option[value="'+value_rate_code+'"]').attr('data-harga'));

                 status = parseInt($("#rate_code"+group).find('option[value="'+value_rate_code+'"]').attr('data-include_breakfast')); // ambil data status breakfast aktiv atau tidak
                 rate_code_id = parseInt($("#rate_code"+group).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).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))
                //  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).val();
                    arrangement_tax = arrangement_tax * this_pax;
                    arrangement_service = arrangement_service * this_pax;

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

                 // assign ratecode id to hidden selratecode
                 $('#selratecodeid'+group).val(segment_rate_code)
                 $('#ratecode_id'+group).val(rate_code_id)
                 $('#per_arrangement_id'+group+"_"+indeks).val(arrangement_id)

                 console.log(arrangement_id, group, indeks, btn)

            }else{
                // Value Rate code
                 value_rate_code = $("#rate_code"+indeks).val();
                 harga = parseInt($("#rate_code"+indeks).find('option[value="'+value_rate_code+'"]').attr('data-harga'));

                 status = parseInt($("#rate_code"+indeks).find('option[value="'+value_rate_code+'"]').attr('data-include_breakfast')); // ambil data status breakfast aktiv atau tidak
                 rate_code_id = parseInt($("#rate_code"+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"+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))
                //  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).val();
                arrangement_tax = arrangement_tax * this_pax;
                arrangement_service = arrangement_service * this_pax;

                 diskon = parseInt($("#diskon"+indeks).val());
                 disctype = parseInt($("#disctype"+indeks).val());

                 // assign ratecode id to hidden selratecode
                 $('#selratecodeid'+indeks).val(segment_rate_code)
                 $('#ratecode_id'+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_'+indeks).html(null);

                        addArrangement(indeks, '', 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,  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_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)) {

                    $("#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 {

                    $("#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_diskon-harga_arrangement) )
                // $("#localrate"+group+"_"+indeks).html((harga+harga_arrangement).toLocaleString('ID'))
                // $("#input_localrate"+group+"_"+indeks).val( formatRibuanID(harga+harga_arrangement+arrangement_service+arrangement_tax) )
				// $("#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) );

                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+'%');
                    }
                }
            }else{
                //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) );


                if(diskon !== 0){
                    if (disctype == 2) {
                        $("#ket_diskon"+indeks).html('<strike>'+ribuanWithComma(harga)+'</strike> Disc fixed '+ribuanWithComma(diskon));
                    }else{
                        $("#ket_diskon"+indeks).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').val();
            let grand_total = harga_kumulatif * jml_malam;
            if (tipe_rate_code == 2) {
                grand_total = harga_kumulatif;
            }

			if(['10', '11'].includes(segmentasi)){
				$('.total_biaya').val(0);
				$('.total_biaya').attr('readonly', 'readonly');
                $('.review_harga').val(0)
                $('.per_item_new').removeAttr('required').val(0);
			}
			else{
                $('#total_biaya').val(grand_total);
                // $('#total_biaya').removeAttr('readonly');
                $('.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) {
                // alert('masuk sini 1')
                let arrangment_cols = $('.arrangement_cols'+indeks);
                $.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){
                // alert('masuk sini 2')
                let arrangment_cols = $('.arrangement_cols'+indeks);
                // 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) {
            let price = 0;

            $.ajax({
                async: false,
				type: 'GET',
				url: "{{ url('get-arrangement-code/')}}/"+arrangement_id,
				success: function (response) {
                    let pax = $('#pax'+idx).val()
                    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(indeks, group){

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

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

            // new adjustment tax service arr item
                var this_pax = $('#pax'+indeks).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);
            console.log(arr_real, 'ini arr real')
            // Assign value to hidden input
            $("#per_item_services"+indeks+"_"+group).val(services);
            $("#per_item_tax"+indeks+"_"+group).val(tax);
            $("#per_item_total"+indeks+"_"+group).val(harga_item_real);
            $("#per_item_arr"+indeks+"_"+group).val(arr_real);
            $("#per_item_arr_service"+indeks+"_"+group).val(arrangement_service);
            $("#per_item_arr_tax"+indeks+"_"+group).val(arrangement_tax);

			// $("#input_localrate"+indeks+"_"+group).val( formatRibuanID(harga+harga_arrangement+arrangement_service+arrangement_tax) )
			$("#input_localrate"+indeks+"_"+group).val( formatRibuanID(harga) ) //formatted for display

			//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);
                }
            });
            $('#per_item'+indeks).val( formatRibuanID(total_local_rate) );

        }

		//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 = $(val).val();
			// 	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(grand_total);
				// $('#total_biaya').attr('readonly'); //always disable 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);
                }
            });
            $('#per_item'+indeks).val( formatRibuanID(total_local_rate) );
            console.log(total_local_rate)

		}

		function tambahKamar(){
			let jenis_kamar_options = $("#jns_kamar0").html();
			let nomor_kamar_options = $("#nomor_kamar0").html();
			// let html = `<div class="per_rooms mb-2" data-idx="row_${new_idx}" id="row_${new_idx}">
            //                 <div class="row">
            //                     <div class="col-lg-0" id="button_multi_room${new_idx}" 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}"
            //                                 data-idx="${new_idx}"
            //                                 onchange="getKamar(this.id), removeColorValidation(this.id), checkJenis(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}">
            //                         <input type="hidden" name="jenis_kamar_id[${new_idx}]" id="jenis_kamar_id${new_idx}">
            //                         <input type="hidden" name="pax[${new_idx}]" id="pax${new_idx}">
            //                     </div>
            //                     <div class="col-lg-2">
            //                         <select name="nomor_kamar[${new_idx}]"
            //                                 id="nomor_kamar${new_idx}"
            //                                 data-idx="${new_idx}"
            //                                 class="form-control form-control-select2-red nomor_kamars"
            //                                 onchange="checkNomor(this.id)"
            //                         >
            //                             <option value="">-- Select Room Number --</option>
            //                         </select>
            //                         <input type="hidden"
            //                                id="jml_kamar${new_idx}"
            //                                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}" data-idx="${new_idx}" onchange="getPrice(this.getAttribute('data-idx'), '', 1)" class="rate_code_class form-control form-control-select2-red" required>
            //                             <option value="" data-harga="0" data-include_breakfast="0">-- Select 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})" class="btn btn-primary addError">
            //                             <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" data-idx="${new_idx}" id="per_item${new_idx}" class="form-control review_harga" placeholder="Total Room" style="border-color: red" readonly disabled>
            //                         <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" type="checkbox" id="block_kamar${new_idx}" name="block_kamar[${new_idx}]">

            //                         <button type="button" onclick="removeKamar(${new_idx})" 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="">-- Select 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" data-idx="row_${new_idx}" id="row_${new_idx}">
                            {{-- # --}}
                            <td style="text-align:center">
                                <button type="button" onclick="removeKamar(${new_idx})" class="btn btn-danger">
                                    <i class="fas fa-times-circle"></i>
                                </button>
                            </td>

                            {{-- Multiply --}}
                            <td>
                                <div id="button_multi_room${new_idx}" style="display:none">
                                    <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}" class="form-control daterange-buttons" data-idx="${new_idx}" value=""  style="border-color: red">
                            </td>

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

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

                                <input type="hidden" id="start_date${new_idx}" name="start_date[${new_idx}]" value="{{date('d/m/Y', strtotime(getSystemDate()))}}">
                                <input type="hidden" id="end_date${new_idx}" 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" id="guest_room${new_idx}" 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}"
                                        data-idx="${new_idx}"
                                        onchange="getKamar(this.id), removeColorValidation(this.id), checkJenis(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}">
                                <input type="hidden" name="disctype[${new_idx}]" id="disctype${new_idx}">
                                <input type="hidden" name="jenis_kamar_id[${new_idx}]" id="jenis_kamar_id${new_idx}">
                            </td>

                            {{-- Pax --}}
                            <td class="addError wrap-pax${new_idx}">
                                <input type="number"
                                        id="pax${new_idx}"
                                        name="pax[${new_idx}]"
                                        class="form-control"
                                        min="0"
                                        value="0"
                                        data-idx="${new_idx}"
                                        onchange="hitungjumlahdewasa(), getPrice(this.getAttribute('data-idx'), '', 1)"
                                        required
                                        {{-- readonly --}}
                                >
                            </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" onclick="openModalRoomAvailability(${new_idx})">
                                    <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}"
                                        data-idx="${new_idx}"
                                        class="form-control form-control-select2-red nomor_kamars"
                                        style="border-color: red"
                                        onchange="checkNomor(this.id)"
                                >
                                    <option value="">-- Select Room Number --</option>
                                </select>
                                <input type="hidden"
                                    id="jml_kamar${new_idx}"
                                    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}"
                                        data-idx="${new_idx}"
                                        onchange="getPrice(this.getAttribute('data-idx'), '', 1)"
                                        class="rate_code_class form-control form-control-select2-red"
                                        required
                                        style="border-color: red"
                                >
                                    <option value="" data-id="0" data-harga="0" data-include_breakfast="0">-- Select Rate Code --</option>
                                </select>
                                <input type="hidden" id="selratecodeid${new_idx}" name="selratecodeid[${new_idx}]">
                                <input type="hidden" id="ratecode_id${new_idx}" 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})" class="btn btn-primary addError">
                                    <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" min="0" id="per_item${new_idx}" data-idx="${new_idx}" class="form-control review_harga" placeholder="Total Room"  style="border-color: red" readonly disabled>
                                <span class="text-danger" id="ket_diskon${new_idx}"></span>
                            </td>

                            {{-- Block Kamar --}}
                            <td class="wrap-block-kamar${new_idx}">
                                <input class="rcheckbox" type="checkbox" id="block_kamar${new_idx}" name="block_kamar[${new_idx}]">
                            </td>

                            {{-- Billing Instruction --}}
                            <td class="wrap-billing-instruction${new_idx}">
                                <select name="status_lock[${new_idx}]" id="status_lock${new_idx}" 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}">
                                <input class="rcheckbox" type="checkbox" name="incognito[${new_idx}]" value="1" id="incognito${new_idx}">
                            </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');
			});

			//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 = $(val).val();
					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);
			});
            let count_room          = $("#multiple_room").val(new_idx);

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

            // console.log(new_idx, 'ini new idx tambah kamar')
            $('#expected_arrival'+new_idx).AnyTime_noPicker().AnyTime_picker({
                format: '%H:%i'
            });

            applyDateRangePicker('daterange-buttons')
            multipleArrangement(new_idx);

            // ======== Hidden After Add Room ========
                hiddenSelectedNomorKamar();
            // ======== Hidden After Add Room ========
            // console.log(new_idx, 'before new idx plus plus')
            new_idx++;
            multiple_room++;
            // console.log(new_idx, 'ini jumlah ny idx')
		}

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

            // reset room container for check
            a = [];

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

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

            let jenis_value     = $('#jns_kamar'+index+' option:selected').data('id')           // GET VALUE SELECTED JENIS KAMAR FIRST ROW.
            let jenis_nama      = $('#jns_kamar'+index).val()                                   // GET VALUE SELECTED JENIS KAMAR FIRST ROW.
            let rate_value      = $('#rate_code'+index+' option:selected').val()               // GET VaLUE SELECTED RATE CODE FIRST ROW.
			let rate_value_id   = $('#rate_code'+index+' 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).val()
            let rate_kmr        = $('#rate_code'+parse).val()
            let arr_kmr         = $('#arrangement_code'+parse+'_0').val()

			// CONDITION OR PROTECTION CANT CREATE MORE THAN TOTAL ROOM OF HOTEL HAVE IT.
            var range    = $('#inpDatePicker'+index).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).val();
            var expected_arrival = $('#expected_arrival'+index).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++
                }
            });

            // Check available room this type 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
                },
                dataType: "json",
                success: function (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 mb-2" data-idx="row_${new_idx}" id="row_${new_idx}">
                            //                     <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}"
                            //                                     data-idx="${new_idx}"
                            //                                     onchange="getKamar(this.id), removeColorValidation(this.id), checkJenis(this.id)"
                            //                                     class="form-control form-control-select2-red"
                            //                                     required
                            //                             >
                            //                                 ${ $('#jns_kamar'+index).html() }
                            //                             </select>
                            //                             <input type="hidden" name="diskon[${new_idx}]" id="diskon${new_idx}" value="${ $('#diskon'+index).val() }">
                            //                             <input type="hidden" name="jenis_kamar_id[${new_idx}]" id="jenis_kamar_id${new_idx}" value="${ $('#jenis_kamar_id'+index).val() }">
                            //                             <input type="hidden" name="pax[${new_idx}]" id="pax${new_idx}" value="${ $('#pax'+index).val() }">
                            //                         </div>
                            //                         <div class="col-lg-2">
                            //                             <select name="nomor_kamar[${new_idx}]"
                            //                                     id="nomor_kamar${new_idx}"
                            //                                     data-idx="${new_idx}"
                            //                                     class="form-control form-control-select2-red nomor_kamars"
                            //                                     onchange="checkNomor(this.id)"
                            //                             >
                            //                                 ${ $('#nomor_kamar'+index).html() }
                            //                             </select>
                            //                             <input type="hidden"
                            //                                 id="jml_kamar${new_idx}"
                            //                                 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}" data-idx="${new_idx}" onchange="getPrice(this.getAttribute('data-idx'), '', 1)" class="rate_code_class form-control form-control-select2-red" required>
                            //                                 ${ $('#rate_code'+index).html() }
                            //                             </select>
                            //                         </div>
                            //                         <div class="col-lg-1" style="text-align: center;">
                            //                             <button type="button" id="open_arr_dialog${new_idx}" onclick="openArrangementDialog(${new_idx})" class="btn btn-primary addError">
                            //                                 <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" data-idx="${new_idx}" id="per_item${new_idx}" class="form-control review_harga" placeholder="Total Room" style="border-color: red" value="${ $('#per_item'+index).val() }" readonly disabled>
                            //                             <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" type="checkbox" id="block_kamar${new_idx}" name="block_kamar[${new_idx}]">
                            //                             <button type="button" onclick="tambahKamar(${new_idx})" class="btn btn-success" style="${new_idx == 0 ? '' : 'display:none;'}">
                            //                                 <i class="fas fa-plus-circle"></i>
                            //                             </button>
                            //                             <button type="button" onclick="removeKamar(${new_idx})" class="btn btn-danger" style="${new_idx == 0 ? 'display:none;' : ''}">
                            //                                 <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="">-- Select 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" data-idx="row_${new_idx}" id="row_${new_idx}">
                                            {{-- # --}}
                                            <td style="text-align:center">
                                                <button type="button" onclick="removeKamar(${new_idx})" class="btn btn-danger">
                                                    <i class="fas fa-times-circle"></i>
                                                </button>
                                            </td>

                                            {{-- Multiply --}}
                                            <td>
                                                <div 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>
                                            </td>

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

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

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

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

                                            {{-- Guest Name Room --}}
                                            <td class="wrap-guest-room${new_idx}">
                                                <input id="guest_room${new_idx}" 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}"
                                                        data-idx="${new_idx}"
                                                        onchange="getKamar(this.id), removeColorValidation(this.id), checkJenis(this.id)"
                                                        class="form-control form-control-select2-red"
                                                        required
                                                >
                                                    ${ $('#jns_kamar'+index).html() }
                                                </select>
                                                <input type="hidden" name="diskon[${new_idx}]" id="diskon${new_idx}" value="${ $('#diskon'+index).val() }">
                                                <input type="hidden" name="disctype[${new_idx}]" id="disctype${new_idx}" value="${ $('#disctype'+index).val() }">
                                                <input type="hidden" name="jenis_kamar_id[${new_idx}]" id="jenis_kamar_id${new_idx}" value="${ $('#jenis_kamar_id'+index).val() }">
                                            </td>

                                            {{-- Pax --}}
                                            <td class="addError wrap-pax${new_idx}">
                                                <input type="number"
                                                        id="pax${new_idx}"
                                                        name="pax[${new_idx}]"
                                                        class="form-control"
                                                        min="0"
                                                        value="${ $('#pax'+index).val() }"
                                                        data-idx="${new_idx}"
                                                        onchange="hitungjumlahdewasa(), getPrice(this.getAttribute('data-idx'), '', 1)"
                                                        required
                                                        {{-- readonly --}}
                                                >
                                            </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" onclick="openModalRoomAvailability(${new_idx})">
                                                    <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}"
                                                        data-idx="${new_idx}"
                                                        class="form-control form-control-select2-red nomor_kamars"
                                                        style="border-color: red"
                                                        onchange="checkNomor(this.id)"
                                                >
                                                    ${ $('#nomor_kamar'+index).html() }
                                                </select>
                                                <input type="hidden"
                                                    id="jml_kamar${new_idx}"
                                                    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}"
                                                        data-idx="${new_idx}"
                                                        onchange="getPrice(this.getAttribute('data-idx'), '', 1)"
                                                        class="rate_code_class form-control form-control-select2-red"
                                                        required
                                                        style="border-color: red"
                                                >
                                                    ${ $('#rate_code'+index).html() }
                                                </select>
                                            <input type="hidden" id="selratecodeid${new_idx}" name="selratecodeid[${new_idx}]">
                                            <input type="hidden" id="ratecode_id${new_idx}" 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})" class="btn btn-primary addError">
                                                    <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" min="0" id="per_item${new_idx}" data-idx="${new_idx}" class="form-control review_harga" placeholder="Total Room"  style="border-color: red" value="${ $('#per_item'+index).val() }"  readonly disabled>
                                                <span class="text-danger" id="ket_diskon${new_idx}"></span>
                                            </td>

                                            {{-- Block Kamar --}}
                                            <td class="wrap-block-kamar${new_idx}">
                                                <input class="rcheckbox" type="checkbox" id="block_kamar${new_idx}" name="block_kamar[${new_idx}]">
                                            </td>

                                            {{-- Billing Instruction --}}
                                            <td class="wrap-billing-instruction${new_idx}">
                                                <select name="status_lock[${new_idx}]" id="status_lock${new_idx}" 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}">
                                                <input class="rcheckbox" type="checkbox" name="incognito[${new_idx}]" value="1" id="incognito${new_idx}">
                                            </td>
                                        </tr>
                                        `
                            //========================== End html app ==========================//

                            // INSERT VARIABLE HTML TO CONTAINER
                            $('.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);
                            this_jenis_kamar.val(jenis_nama).select2()

                            // CHANGE APPENDED RATECODE WITH COPIED VALUE  WITHOUT TRIGGERING FUNCTION ON IT
                            let this_rate_code  = $('#rate_code'+new_idx);
                            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(".","")) ?? null;
                                    let replace           = $(val).val(copied_rate_night).change();
                                }
                            });

                            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).daterangepicker({
                                applyClass: 'btn-success',
                                cancelClass: 'btn-danger',
                                minDate: "{{ date('d-m-Y', strtotime('-30 days',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).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() != '') {
                                    // a[key] = $(val).find(":selected").val();
                                    let nomor_kamar_multiple_room = $(val).val()
                                    let idx_multiple_room = $(val).data('idx')
                                    let checkin_multiple_room = $('#start_date'+idx_multiple_room).val()
                                    let checkout_multiple_room = $('#end_date'+idx_multiple_room).val()

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

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

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

                    }
                }
            });


		}

        function hitungjumlahdewasa(){
            let jk = 0;
            $.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 checkJenis(idx){

            let val    = $('#'+idx).val()

            let index  = $('#'+idx).attr('data-idx')

            if(val){
                $('#button_multi_room'+index).show()
                $('#label_multiply0').show()
            }else{
                $('#button_multi_room'+index).hide()
                $('#label_multiply0').hide()
            }
        }

		function removeKamar(id){
			// cari jumlah kapasitas kamar yang di remove
			var kapasitasremovedkamar = $("#jns_kamar"+id).find('option:selected').attr('data-kapasitas');
			// console.log(id, kapasitasremovedkamar)

			// ambil jumlah value di field jumlah dewasa
			// var jmldewasa = $('#jml_dewasa').val()

			// kurangi field jumlah dewasa dengan kapasitas kamar yang di remove
			// var newjmldewasa = parseInt(jmldewasa) - parseInt(kapasitasremovedkamar)

			// assign total baru ke field jumlah dewasa
			// $('#jml_dewasa').val(newjmldewasa)

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

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

            // new_idx                 =   new_idx - 1
            multiple_room--
            let count_room          = $("#multiple_room").val(multiple_room);

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

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

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

            getPrice(id, '', 0);
		}

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

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

			// console.log("{{ url('/getnomorkamar')}}/"+hotel_id+"/"+jenis_kamar+"/"+scheckin+"/"+scheckout);

			if(hotel_id != "" && jenis_kamar != "" && scheckin != "" && scheckout != ""){
				$.ajax({
					type: 'GET',
                    data:{
                        nomor_kamars : a, //FOR NOT SHOWING SAME SELECTED ROOM NUMBER!!!
                    },
					url: "{{ url('/getnomorkamar')}}/"+hotel_id+"/"+jenis_kamar+"/"+scheckin+"/"+scheckout,
					success: function (data) {
                        $(select_element).html(data);

                        // ======== Hidden After Add Room ========
                            hiddenSelectedNomorKamar();
                            console.log('test12345')
                        // ======== Hidden After Add Room ========
					}
				});
			}
			else{
				$(select_element).html('<option value="">** Select Room Number **</option>');
			}
		}

		//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);
                    console.log('ratecode')
				},
                error: function (data) {
                    $(select_element).html('<option value="" data-harga="0">-- Select Rate Code --</option>')
                }
			});
		}

		//Select ratecode untuk segmentasi corporate
		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);
                    console.log('ratecode')
				},
                error: function (data) {
                    $(select_element).html('<option value="" data-harga="0">-- Select Rate Code --</option>')
                }
			});
		}

		//Trigger ketika jumlah dewasa diganti
		$("#jml_dewasa").on('change', function(){
			let idx_before = new_idx - 1;
			let jumlah_dewasa = $(this).val();
			let kapasitas_total = null;
			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(kapasitas_total !== null){
			// 	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["]');

            // if (action_jenis_booking == 'false') {
            //     //Ambil Corporate Dengan Segment
            //     getCorporateBySegment(segmentasi);
            // }

            // $('#jenis_booking').data('action-jenis-booking', 'false');
            console.log(segmentasi)
			$.each(jenis_kamars, function(key, val){
                //Ambil Ratecode berdasarkan SEgmentasinya
                let range = $('#inpDatePicker'+key).data('daterangepicker');
                let checkin = moment(range.startDate).format('YYYY-MM-DD') ?? '';
                // console.log(key, val)
				let jenis_kamar_value = $('#jns_kamar'+key).val();
				let jenis_kamar_id = $('#jns_kamar'+key).find('option[value="'+jenis_kamar_value+'"]').attr('data-id');
				if(['2','3','4','5','6','8','9'].includes(segmentasi)){
					selectRateCodeCompany('#rate_code'+key, jenis_kamar_id, company_id, segmentasi, checkin);
				}
				else{
					selectRateCode('#rate_code'+key, 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)){
				$('.total_biaya').val(0);
				$('.total_biaya').attr('readonly', 'readonly');
				$('[name*="rate_code"]').removeAttr('required');
				$('[name*="arrangement_codes"]').removeAttr('required');
                $('.per_item_new').removeAttr('required').val(0);
                $('.review_harga').val(0)
			}
			else{
				$('.total_biaya').val(0);
				// $('#total_biaya').removeAttr('readonly');
				$('[name*="rate_code"]').attr('required', 'required');
				$('[name*="arrangement_codes"]').attr('required', 'required');
                $('.per_item_new').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 = $(this).find('option[value="'+company_val+'"]').attr('data-source');
            let segmentasi_rate_code = $(this).find('option[value="'+company_val+'"]').attr('data-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');
			}
		});

		//Disable submit dengan enter
		$(document).ready(function() {
		  $(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).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;
                }
            });

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

        function scrollToInvalid(id) {
            console.log(id)
            const element = document.getElementById(id);
            element.scrollIntoView({behavior: "smooth",block: "center"});
        };

        // Accessibility labels
        // $('.pickadate-accessibility').pickadate({
        //     labelMonthNext: 'Go to the next month',
        //     labelMonthPrev: 'Go to the previous month',
        //     labelMonthSelect: 'Pick a month from the dropdown',
        //     labelYearSelect: 'Pick a year from the dropdown',
        //     selectMonths: true,
        //     selectYears: true,
        //     format: 'yyyy-mm-dd',
        // });

//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'
        // });
		$('#expected_arrival0').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')) {
							// add warning on button open arrangement
							$('#open_arr_dialog'+element.data('group')).children('span').addClass('circle');
                            scrollToInvalid('open_arr_dialog'+element.data('group'));
		                }

		                // 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.'
						},
		                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[]': {
		                    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.'
						},
                        'rate_codes[]': {
							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();
		        }
		    }
		}();


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

		document.addEventListener('DOMContentLoaded', function() {
		    FormValidation.init();
		});
	</script>
	<script type="text/javascript">



		$( 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

            @if ($direct_from_guest_data == 1)
                scrollToInvalid('inpDatePicker0')
            @endif

		});

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

        function addArrangement(idx, dummy, btn){
            let jumlah_malam    = parseInt($('#jml_malam'+idx).val());
            let ratecode_price  = $('#rate_code'+idx+'_0 option:selected').data('harga');
            let rate_code_id    = $('#rate_code'+idx+' option:selected').data('id');
            let ratecode_tipe   = null;
            let inpDate         = $('#inpDatePicker'+idx).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)) {
                    console.log('btn1')
                    id = jumlah_malam;
                    $('#arr_row'+idx+'_'+id).remove();
                }else{
                    console.log('btn2')
                    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 style="text-align:center">
                                <td>${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; border-color: red;" id="input_localrate${idx}_${id}" name="per_item[${idx}][${id}]" value="${ratecode_price ?? 0}" 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 addError"
                                            required
                                    >
                                        <option value="" data-harga="0">-- Select 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){
                    var id = 0;
                    console.log('MASUK ratecode_tipe 2 ADD ARRANGEMENT:'+idx+'-'+id+' tipe:'+ratecode_tipe);
                    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;  border-color: red;" id="input_localrate${idx}_${id}" name="per_item[${idx}][${id}]" value="${ratecode_price ?? 0}" 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 addError"
                                        required
                                >
                                    <option value="" data-harga="0">-- Select 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)
                    console.log('LINKTANG2: '+ratecode_tipe)
             }else{
                console.log('MASUK ratecode_tipe 1 ADD ARRANGEMENT: test tipe:'+ratecode_tipe);
                for (let id = 0; id < jumlah_malam; id++) {
                    if (document.getElementById('input_localrate'+idx+'_'+id)) {
                        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;  border-color: red;" id="input_localrate${idx}_${id}" name="per_item[${idx}][${id}]" value="${ratecode_price ?? 0}" 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 addError"
                                                required
                                        >
                                            <option value="" data-harga="0">-- Select 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)
                    }
                }
             }
            }

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

        }

		function multipleArrangement(idx, idx_sebelumnya = null){

            let rate_value_id   = $('#rate_code'+idx_sebelumnya+' 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).val();

            let ratecode_price  = $('#rate_code'+idx+' option:selected').data('harga');

            let cek_idx_sebelumnya = idx_sebelumnya ?? idx

            let inpDate         = $('#inpDatePicker'+ cek_idx_sebelumnya).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;  border-color: red;" id="input_localrate${group}_${index}" name="per_item[${group}][${index}]" value="${ratecode_price ?? 0}" 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 addError"
                                            required
                                    >
                                        <option value="" data-harga="0">-- Select 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_service[${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)
            }

		}

        function openArrangementDialog(idx, type_button_arr_dialog=null){

            $('.table_arrs').hide();

            let jumlah_malam    = $('#jml_malam' + idx).val();

            let ratecode_price  = $('#rate_code'+idx+' option:selected').data('harga');
            let rate_code_id     = $('#rate_code'+idx+' option:selected').data('id');

            let inpDate         = $('#inpDatePicker'+idx).data('daterangepicker');
            let start           = inpDate.startDate.format('YYYY-MM-DD');
            let end             = inpDate.endDate.format('YYYY-MM-DD');

            let group           = idx;
            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
                }
            });

            // 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) {
                        console.log('LINKTANG')
                        html +=`
                                <tr>
                                    <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('en-US') : 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; border-color: red;" id="input_localrate${group}_${index}" name="per_item[${group}][${index}]" value="${(ratecode_price ? ratecode_price.toLocaleString('en-US') : 0) ?? 0}" 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 addError"
                                                required
                                        >
                                            <option value="" data-harga="0">-- Select 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_service[${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>
                                 <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; border-color: red;" id="input_localrate${group}_${index}" name="per_item[${group}][${index}]" value="${ratecode_price ?? 0}" 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 addError"
                                             required
                                     >
                                         <option value="" data-harga="0">-- Select 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_service[${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)

            }

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

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

        }

        $("#modal_arrangement_codes").on("hidden.bs.modal", function (e) {
            $('.table_arrs').hide()
        });

        let a = [];
        function checkNomor(id) {
            let nomor = $('#'+id).val()
            let this_idx_check = $('#'+id).data('idx')

            //Untuk mencari ketersediaan nomor kamar
                let checkin = $('#start_date'+this_idx_check).val()
                let checkout = $('#end_date'+this_idx_check).val()
                let nomor_kamar = nomor

                console.log(nomor_kamar, this_idx_check, checkin, checkout)

                $.ajax({
                    async: false,
                    type: "GET",
                    url: "{{route('roomview.check-room-stock')}}",
                    data: {
                        room_no:nomor_kamar,
                        checkin: checkin,
                        checkout: checkout,
                    },
                    success: function (response) {
                        if (response < 1) {
                            callModalAlert("This room number is not available, Please check room number availability for details.")
                            console.log('true room availabilyty');
                            $('#'+id).val('').trigger('change')
                            // $('.submit-quick-booking').attr('disabled', true)
                        }else{
                            console.log('false room availabilyty');
                            // $('.submit-quick-booking').attr('disabled', false)
                        }
                    }
                });
            //Untuk mencari ketersediaan nomor kamar

            // make it check to prevent maximum callstack
            if (nomor) {
                if(a.includes(nomor)) {
                    $('#'+id).val('').trigger('change')

                    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() != '') {
                    // a[key] = $(val).find(":selected").val();
                    let nomor_kamar_multiple_room = $(val).val()
                    let idx_multiple_room = $(val).data('idx')
                    let checkin_multiple_room = $('#start_date'+idx_multiple_room).val()
                    let checkout_multiple_room = $('#end_date'+idx_multiple_room).val()

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

                    a[key]['nomor_kamar'] = nomor_kamar_multiple_room
                    a[key]['checkin'] = checkin_multiple_room
                    a[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 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_idx = $(value_kamars).data('idx')
                let this_checkin = $('#start_date'+this_idx).val()
                let this_checkout = $('#end_date'+this_idx).val()
                $("#"+this_id+" option").prop('disabled', false)

                $.each(a, 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();
        }

        //Payment Section @quickbooking
        $('.type_payment_book').on('change', function() {
            if (this.value == '1') {
                // alert('partial_detail')
                $('#section_payment_book').show()
                $('#nominal_deposit_book').attr('required', 'required');
                $('#jenis_deposit_book').attr('required', 'required');
                // $('#section_payment_book input').prop('disabled', false)
            }else if(this.value == '0'){
                // alert('all')
                $('#section_payment_book').hide()
                $('#nominal_deposit_book').removeAttr('required');
                $('#jenis_deposit_book').removeAttr('required');
                // $('#section_payment_book input').prop('disabled', true)
            }
        })
        //Payment Section @quickbooking

	</script>
@endsection