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

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

@section('content')

<!-- Page header -->
<div class="page-header page-header-light">
	<div class="page-header-content header-elements-md-inline">
		<div class="page-title d-flex">
			<h4> Edit Room</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>
		<div class="card-body">
			<div class="row">
				<div class="col-md-12">
					<form id="submitkamar" class="form-validate-jquery" action="{{ route('kamars.update', $kamar->id)}}" method="post" enctype="multipart/form-data">
						@csrf
						@method('PUT')
						<fieldset class="mb-3">
							<legend class="text-uppercase font-size-sm font-weight-bold">Data Room</legend>

							@if(Auth::user()->role == 1)
								<input type="hidden" name="hotel_id" value="{{ Session::get('hotel_id') }}" />
							@else
								<input type="hidden" name="hotel_id" value="{{ Auth::user()->hotel_id }}" />
							@endif

							@if (!$multikamar->isEmpty())
									<div class="form-group row">
										<label class="col-form-label col-lg-2">Room Type <span class="text-danger">*</span> </label>
										<div class="col-lg-9" id="form-jenis-kamar">

											<div style="display: none">
											<input type="hidden" id="jumlahmulti" value="{{count($multikamar)}}">
												<select id="jns_kamar_option">
													<option value="">-- Select Room Type --</option>
													@foreach($jenis as $jns)
													<option value="{{$jns->id}}">{{$jns->nama}}</option>
													@endforeach
												</select>
											</div>

                                            @php
                                                $checkthisfirst     = @$check_edited_multi[$multikamar[0]->jenis_kamar_id] ?? false;
                                                $disabledthisfirst  = $checkthisfirst ? 'disabled' : null;
                                            @endphp
											<div class="row mb-2" data-idx="0" id="row_0">
												<div class="col-lg-10">
                                                    <input type="hidden" name="jns_kamar[]" value="{{@$multikamar[0]->jenis_kamar_id}}">
													<select name="jns_kamar[]"
														id="jns_kamar0"
														data-idx="0"
														class="opt-jnskamar form-control form-control-select2"
														data-container-css-class="border-teal"
														data-dropdown-css-class="border-teal"
														required
                                                        {{$disabledthisfirst}}
														>
														<option value="">-- Select Room Type --</option>
														@foreach($jenis as $jns)
														<option value="{{$jns->id}}" {{$multikamar[0]->jenis_kamar_id == $jns->id ? 'selected' : ''}}>{{$jns->nama}}</option>
														@endforeach
													</select>
												</div>
												<div class="col-lg-2">
													<button type="button" onclick="tambahJenisKamar()" class="btn btn-success">
														<i class="fas fa-plus-circle"></i>
													</button>
												</div>
											</div>

											@if (count($multikamar) > 1)
											@php
												$countdata = 1;
											@endphp
												@foreach ($multikamar as $multi)
													@if ($loop->first)
														@continue
													@endif
                                                    @php
                                                       $checkthis = @$check_edited_multi[$multi->jenis_kamar_id] ?? false;
                                                       $disabledthis = $checkthis ? 'disabled' : null;
                                                    @endphp
													<div class="row mb-2" data-idx="{{$countdata}}" id="row_{{$countdata}}">
														<div class="col-lg-10">
                                                            <input type="hidden" name="jns_kamar[]" value="{{@$multikamar[$countdata]->jenis_kamar_id}}">
															<select name="jns_kamar[]"
																	id="jns_kamar{{$countdata}}"
																	data-idx="{{$countdata}}"
																	class="opt-jnskamar form-control form-control-select2"
																	data-container-css-class="border-teal"
																	data-dropdown-css-class="border-teal"
																	required
                                                                    {{$disabledthis}}
															>
																<option value="">-- Select Room Type --</option>
																@foreach($jenis as $jns)
																<option value="{{$jns->id}}" {{$multikamar[$countdata]->jenis_kamar_id == $jns->id?'selected' : ''}}>{{$jns->nama}}</option>
																@endforeach
															</select>
														</div>
														<div class="col-lg-1 text-right">
															<div class="btn-group">
															<button type="button" onclick="removeKamar({{$countdata}})" class="btn btn-danger" {{$disabledthis}}>
																<i class="fas fa-times-circle"></i>
															</button>&nbsp;
															{{-- <button type="button" onclick="tambahJenisKamar()" class="btn btn-success">
																<i class="fas fa-plus-circle"></i>
															</button> --}}
															</div>
														</div>
													</div>
													@php
														$countdata++;
													@endphp
												@endforeach
											@endif


										</div>
									</div>

							{{-- Kalo data Multikamar empty --}}
							@else
									<div style="display: none">
									<input type="hidden" id="jumlahmulti" value="1">
										<select id="jns_kamar_option">
											<option value="">-- Select Room Type --</option>
											@foreach($jenis as $jns)
											<option value="{{$jns->id}}">{{$jns->nama}}</option>
											@endforeach
										</select>
									</div>

									<div class="form-group row">
										<label class="col-form-label col-lg-2">Room Type</label>
										<div class="col-lg-9" id="form-jenis-kamar">
											<div class="row mb-2" data-idx="0" id="row_0">
												<div class="col-lg-10">
													<select name="jns_kamar[]"
													id="jns_kamar0"
													data-idx="0"
													class="opt-jnskamar form-control form-control-select2"
													data-container-css-class="border-teal"
													data-dropdown-css-class="border-teal"
													required
													>
													<option value="">-- Select Room Type --</option>
													@foreach($jenis as $jns)
													<option value="{{$jns->id}}">{{$jns->nama}}</option>
													@endforeach
												</select>
											</div>
											<div class="col-lg-2">
												<button type="button" onclick="tambahJenisKamar()" class="btn btn-success">
													<i class="fas fa-plus-circle"></i>
												</button>
											</div>
										</div>
									</div>
								</div>
							@endif

						<div class="form-group row">
							<label class="col-form-label col-lg-2">Room Number <span class="text-danger">*</span> </label>
							<div class="col-lg-10">
								<input type="text" id="no_kamar" name="no_kamar" class="form-control border-teal border-1 @error('no_kamar') is-invalid @enderror" placeholder="No Kamar" required autofocus autocomplete="off" value="{{ old('no_kamar')?old('no_kamar'):$kamar->no_kamar }}">
                                <span class="text-danger" id="warning-nomorkamar"></span>
							</div>
						</div>


						<div class="form-group row">
							<label class="col-form-label col-lg-2">Floor <span class="text-danger">*</span> </label>
							<div class="col-lg-10">
								<input type="number" min="1" value="{{ old('lantai')?old('lantai'):$kamar->lantai }}" name="lantai" id="lantai" class="form-control border-teal border-1" placeholder="ex: 1" required autofocus autocomplete="off" value="{{$kamar->no_kamar}}">
							</div>
						</div>


						<div class="form-group row">
							<label class="col-form-label col-lg-2">Room Size <span class="text-danger">*</span> </label>
							<div class="col-lg-10">
								<input type="text" name="ukuran_kamar" class="form-control border-teal border-1 @error('ukuran_kamar') is-invalid @enderror" placeholder="Room Size" required autofocus autocomplete="off" value="{{ old('ukuran_kamar')?old('ukuran_kamar'):$kamar->ukuran_kamar }}">
							</div>
						</div>

						<div class="form-group row">
							<label class="col-form-label col-lg-2">Bed Size <span class="text-danger">*</span> </label>
							<div class="col-lg-10">
								<input type="text" name="ukuran_bed" class="form-control border-teal border-1 @error('ukuran_bed') is-invalid @enderror" placeholder="Bed Size" required autofocus autocomplete="off" value="{{ old('ukuran_bed')?old('ukuran_bed'):$kamar->ukuran_bed }}">
							</div>
						</div>

						<div class="form-group row">
							<label class="col-form-label col-lg-2">Status <span class="text-danger">*</span> </label>
							<div class="col-lg-10">
								@php
								$vacant_options = '';
								$occupied_options = '';
								$other_options = '';
								$selected = '';
								@endphp

								@foreach(config('custom.status_kamar') as $key => $val)
									@php
									if ($key == $kamar->status) {
										$selected = 'selected';
									} else {
										$selected = '';
									}

									if(explode(' ', $val)[0] == 'Vacant'){ //Vacant
										$vacant_options .= '<option value="'.$key.'" '.$selected.'>'.$val.'</option>';
									}
									elseif(explode(' ', $val)[0] == 'Occupied'){ //Occupied
										$occupied_options .= '<option value="'.$key.'" '.$selected.'>'.$val.'</option>';
									}
									else{
										$other_options .= '<option value="'.$key.'" '.$selected.' '.(in_array(@$kamar->status, ['OC','OD']) ? "disabled" : null ).' >'.$val.'</option>';
									}
									@endphp
								@endforeach

								<select name="status"
								id="status"
								class="form-control form-control-select2"
								data-container-css-class="border-teal"
								data-dropdown-css-class="border-teal"
								required
								>
								<option value="">-- Select Room Status --</option>
								<optgroup label="Vacant">
									{!! $vacant_options !!}
								</optgroup>
								<optgroup label="Occupied">
									{!! $occupied_options !!}
								</optgroup>

								<optgroup label="Other">
									{!! $other_options !!}
								</optgroup>
							</select>
						</div>
					</div>

					<hr>

					<div class="form-group row">
						<label class="col-form-label col-lg-2">Connecting Room 1</label>
						<div class="col-lg-4">
							<select class="form-control form-control-select2 border-teal border-1" name="connecting_room_1" id="connecting_room_1">
								<option value="">--Select No. Room--</option>
								@foreach ($allkamars as $kam)
									<option value="{{$kam->no_kamar}}" {{$kam->no_kamar==$kamar->connecting_room_1?'selected' : ''}}>Floor {{$kam->lantai}} / No. {{$kam->no_kamar}}</option>
								@endforeach
							</select>
						</div>
						<label class="col-form-label col-lg-2">Connecting Room 2</label>
						<div class="col-lg-4">
							<select class="form-control form-control-select2 border-teal border-1" name="connecting_room_2" id="connecting_room_2">
								<option value="">--Select No. Room--</option>
								@foreach ($allkamars as $kam)
									<option value="{{$kam->no_kamar}}" {{$kam->no_kamar==$kamar->connecting_room_2?'selected' : ''}}>Floor {{$kam->lantai}} / No. {{$kam->no_kamar}}</option>
								@endforeach
							</select>
						</div>
					</div>
					<div class="form-group row">
						<label class="col-form-label col-lg-2">Description</label>
						<div class="col-lg-10">
							<textarea class="form-control" name="keterangan_connecting" cols="30" rows="5">{{$kamar->keterangan_connecting}}</textarea>
						</div>
					</div>


					@if ($kamar->status == 'OOO' || $kamar->status == 'OS')
						<div id="keterangan_outoforder">
					@else
						<div id="keterangan_outoforder" style="display: none">
					@endif
						<div class="form-group row">
							<label class="col-form-label col-lg-2">Out Of Order Note</label>
							<div class="col-lg-10">
								<textarea class="form-control" name="keterangan" cols="30" rows="5">{{$kamar->keterangan}}</textarea>
							</div>
						</div>

						<div class="form-group row">
							<label class="col-form-label col-lg-2">Deadline Date</label>
							<div class="col-lg-10">
								<div class="input-group">
									<span class="input-group-prepend">
										<span class="input-group-text"><i class="icon-calendar22"></i></span>
									</span>
									<input name="tanggal_deadline" value="{{$kamar->tanggal_deadline}}" type="text" class="form-control daterange-single">
								</div>
							</div>
						</div>
					</div>

					@if (!$kamar->gambarClean->isEmpty())

						<legend class="font-weight-semibold mt-3">House Keeping Images</legend>

						<div class="row" id="gambarhouseclean">
							@foreach ($kamar->gambarClean as $gclean)
							<div class="col-md-3">
								<div class="card-img-actions">
									<a href="{{asset($gclean->url_file)}}" data-popup="lightbox">
										<img class="img-fluid" src="{{asset($gclean->url_file)}}" style="width: 100%">
										<span class="card-img-actions-overlay">
											<i class="icon-plus3 icon-2x"></i>
										</span>
									</a>
								</div>
								<h6>{{$gclean->nama_file}}</h6>
								<a href="{{asset($gclean->url_file)}}" target="_blank">Open in New Tab</a>
							</div>
							@endforeach
						</div>

					@endif

				</div>
			</div>

		</fieldset>
		<div class="text-right">
			<a href="{{ url('/kamars')}}" 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>

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

						<div class="modal-body" align="center">
							<h3> Are you sure want to save this data?. </h3>
						</div>

						<div class="modal-footer">
							<button type="button" class="btn btn-link" data-dismiss="modal">Cancel</button>
							<button type="submit" class="btn bg-info" id="submit_form_data">Submit</button>
						</div>
					</div>
				</div>
			</div>
		<!-- /alert modal -->

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

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

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

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

<script src="{{asset('global_assets/js/plugins/forms/styling/uniform.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/media/fancybox.min.js')}}"></script>

<script src="{{asset('assets/js/app.js')}}"></script>
<script src="{{asset('global_assets/js/demo_pages/form_inputs.js')}}"></script>
<script src="{{asset('global_assets/js/demo_pages/form_checkboxes_radios.js')}}"></script>
<script type="text/javascript">

	$('#lantai').change( function() {
		let lantai = $(this).val();
		$.ajax({
			type: 'GET',
			url: "{{ url('/getnomorkamarberdasarkanlantai')}}/"+lantai,
			success: function (data) {
				console.log(data)
				$('#connecting_room_1').html(data);
				$('#connecting_room_2').html(data);
			}
		});
	})


	$(document).on('change', '#status', function() {
		var status =  $('#status option:selected').val()

		if (status == 'OOO' || status == 'OS') {
			$('#keterangan_outoforder').show()
		} else {
			$('#keterangan_outoforder').hide()
		}
	})


	// JS Multiple Jenis Kamar
	// let new_idx = 1;
	let new_idx = $('#jumlahmulti').val();

	function tambahJenisKamar(){
		let jenis_kamar_options = $('#jns_kamar_option').html();
		let html = `<div class="row mb-2" data-idx="${new_idx}" id="row_${new_idx}">
						<div class="col-lg-10">
							<select name="jns_kamar[]"
									id="jns_kamar${new_idx}"
									data-idx="${new_idx}"
									class="opt-jnskamar form-control form-control-select2"
									data-container-css-class="border-teal"
									data-dropdown-css-class="border-teal"
									required
							>
								${jenis_kamar_options}
							</select>
						</div>
						<div class="col-lg-1 text-right">
							<div class="btn-group">
							<button type="button" onclick="removeKamar(${new_idx})" class="btn btn-danger">
								<i class="fas fa-times-circle"></i>
							</button>&nbsp;
							</div>
						</div>
					</div>`;
		new_idx++;
		$('#form-jenis-kamar').append(html);
		$('.form-control-select2').select2();
	}

	function removeKamar(id){
		$('#row_'+id).remove();
	}

	$(document).ready(function () {

		$(".add-more").click(function(){
			var html = $(".copy").html();
			$(".after-add-more").after(html);
			$('.form-control-uniform2').first().uniform();
		});


		$("body").on("click",".remove",function(){
			$(this).parents(".control-group").remove();
		});

        $('.submitBtn').on('click', function() {
            $('#modal_alert_before_submit').modal('show')
        })

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

			// setTimeout( function() {
			// 	$(".submitBtn").attr("disabled", false);
			// }, 1000)

            var empty = false;
            $('#submitkamar').find('[required]').each(function() {
                if ($(this).val() == '') {
                    empty = true;
                }
            });

            console.log(empty)
            if (empty) {
                e.preventDefault();
                $(".submitBtn").attr("disabled", false);
                $('#modal_alert_before_submit').modal('hide')
                return false;
            } else {
                return true;
            }
		})
	});

	//pilih Coload
	$(document).on("change", "#hotel_id", function () {
		var id = $(this).find(':selected').val();
		selectJenisKamar(id);
		selectFasilitas(id);
	});

	function selectJenisKamar(id){
		$.ajax({
			type: 'GET',
			url: "{{ url('/getjeniskamar/')}}/"+id,
			success: function (data) {
				$('#jns_kamar').html(data);
			}
		});
	}


     //Cek Ratecode
     $('#no_kamar').on('change', function(){
        let nomor = $(this).val();
        $.ajax({
            type: 'GET',
            url: "{{ url('/cek-nomorkamar/')}}/"+nomor,
            success: function (data) {
                $('#warning-nomorkamar').html(data.text);

                if(data.count > 0){
                    $('.submitBtn').attr('disabled', 'disabled');
                }
                else{
                    $('.submitBtn').removeAttr('disabled');
                }
            }
        });
    });


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

		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({
					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);
					},
					unhighlight: function(element, errorClass) {
						$(element).removeClass(errorClass);
					},
					// 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')) {
								error.appendTo( element.parents('.form-check').parent() );
							}

							// Input with icons and Select2
							else if (element.parents().hasClass('form-group-feedback') || element.hasClass('select2-hidden-accessible')) {
								error.appendTo( element.parent() );
							}

							// Input group, styled file input
							else if (element.parent().is('.uniform-uploader, .uniform-select') || element.parents().hasClass('input-group')) {
								error.appendTo( element.parent().parent() );
							}

							// Other elements
							else {
								error.insertAfter(element);
							}
						},
						messages: {
							nama: {
								required: 'Mohon diisi.'
							},
							email: {
								required: 'Mohon diisi.'
							},
							no_telp: {
								required: 'Mohon diisi.'
							},
							kamarname: {
								required: 'Mohon diisi.'
							},
							password: {
								required: 'Mohon diisi.'
							},
							role: {
								required: 'Mohon diisi.'
							},
							cabang_id: {
								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">

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

			function preview(source_img){
			let img_html = '';
			if(source_img != ""){
				img_html = `<img src="${source_img}" alt="preview" style="width:100%; margin:0px;" />`
			}
			$('#preview').html(img_html);
		}

			$( document ).ready(function() {

				var $select = $('.form-control-select2').select2();

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

			});
		</script>

		<script>


var CardsContent = function() {

	var _componentFancybox = function() {
		if (!$().fancybox) {
			console.warn('Warning - fancybox.min.js is not loaded.');
			return;
		}

		// Image lightbox
		$('[data-popup="lightbox"]').fancybox({
			padding: 3
		});
	};

	return {
		init: function() {
			_componentFancybox();
		}
	}
}();

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

		</script>

<script>
	var DateTimePickers = function() {

		// Daterange picker
		var _componentDaterange = function() {
			if (!$().daterangepicker) {
				console.warn('Warning - daterangepicker.js is not loaded.');
				return;
			}

			// Basic initialization
			$('.daterange-basic').daterangepicker({
				applyClass: 'btn-primary',
				cancelClass: 'btn-light'
			});

			// Single picker
			$('.daterange-single').daterangepicker({
				singleDatePicker: true,
				locale: {
					format: 'YYYY-MM-DD'
				}
			});

		};

		return {
			init: function() {
				_componentDaterange();
			}
		}
	}();

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

    // window.addEventListener("beforeunload", function (e) {
    //         var confirmationMessage = 'Perhatian!'
    //                                 + 'Jika anda meninggalkan halaman ini, data yang belum disimpan akan hilang.';

    //         (e || window.event).returnValue = confirmationMessage;
    //         return confirmationMessage;
    //     });

</script>
		@endsection