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

@section('title', 'Room | Add 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> Add 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.store')}}" method="post" enctype="multipart/form-data">
						@csrf
						<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 --}}
							<div class="form-group row">
								<label class="col-form-label col-lg-2">Input Type <span class="text-danger">*</span> </label>
								<div class="col-lg-10">
									<div class="form-check form-check-inline">
										<label class="form-check-label">
											<input type="radio" class="form-check-input-styled typeinput" name="type" id="tipe-single" value="single" checked data-fouc>
											Single Input
										</label>
									</div>
									<div class="form-check form-check-inline">
										<label class="form-check-label">
											<input type="radio" class="form-check-input-styled typeinput" name="type" id="tipe-multiple" value="multiple" data-fouc>
											Multiple Input
										</label>
									</div>
								</div>
							</div>

							<div class="form-group row" id="singlecreate">
								<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="ex:101" required autofocus autocomplete="off" value="{{ old('no_kamar') }}">
									<span class="text-danger" id="warning-nomorkamar"></span>
								</div>
							</div>

							<div id="multiplecreate" style="display:none">
								<div class="form-group row">
									<label class="col-form-label col-lg-2">Total Room <span class="text-danger">*</span> </label>
									<div class="col-lg-10">
										<input type="number" id="total_room" name="total_room" class="hitungroom form-control border-teal border-1 @error('total_room') is-invalid @enderror" placeholder="ex:10" autofocus autocomplete="off" value="{{ old('total_room') }}">
									</div>
								</div>

								<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-5">
										<div class="input-group">
											<span class="input-group-prepend">
												<span class="input-group-text">Start</span>
											</span>
											<input type="text" id="no_kamar_start" name="no_kamar_start" class="hitungroom form-control border-teal border-1 @error('no_kamar_start') is-invalid @enderror" placeholder="ex:101" autofocus autocomplete="off" value="{{ old('no_kamar_start') }}">
										</div>
										<span class="text-danger" id="warning-nomorkamarmulti"></span>
									</div>
									<div class="col-lg-5">
										<div class="input-group">
											<span class="input-group-prepend">
												<span class="input-group-text">End</span>
											</span>
											<input type="text" id="no_kamar_end" disabled class="form-control border-teal border-1 @error('no_kamar_end') is-invalid @enderror" placeholder="ex:101" autofocus autocomplete="off" value="{{ old('no_kamar_end') }}">
										</div>
										<span class="text-danger" id="warning-nomorkamarmulti2"></span>
									</div>
								</div>
							</div>

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

						<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="1" name="lantai" id="lantai" class="form-control border-teal border-1" placeholder="ex:1" required autofocus autocomplete="off" >
							</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') }}">
							</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') }}">
							</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 = '';
								@endphp

								@foreach(config('custom.status_kamar') as $key => $val)
								@php
								if(explode(' ', $val)[0] == 'Vacant'){ //Vacant
									$vacant_options .= '<option value="'.$key.'">'.$val.'</option>';
								}
								elseif(explode(' ', $val)[0] == 'Occupied'){ //Occupied
									$occupied_options .= '<option value="'.$key.'">'.$val.'</option>';
								}
								else{
									$other_options .= '<option value="'.$key.'">'.$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" id="connectingroom">
						<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 $kamar)
									<option value="{{$kamar->no_kamar}}">Floor {{$kamar->lantai}} / No. {{$kamar->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 $kamar)
									<option value="{{$kamar->no_kamar}}">Floor {{$kamar->lantai}} / No. {{$kamar->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"></textarea>
						</div>
					</div>

					<div style="display: none" id="keterangan_outoforder">
						<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"></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" type="text" class="form-control daterange-single">
								</div>
							</div>
						</div>
					</div>

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

	$(document).on('change', '.typeinput', function() {
		var tipe = $('input[type=radio][name=type]:checked').val();
		if(tipe=='multiple'){
			$('#singlecreate').hide()
			$('#multiplecreate').show()
			$('#connectingroom').hide()
			$('#no_kamar').prop("required", false);
            $('#no_kamar').val(null);
			$('#total_room').prop("required", true);
			$('#no_kamar_start').prop("required", true);
			$('#no_kamar_end').prop("required", true);

		} else {
			$('#singlecreate').show()
			$('#multiplecreate').hide()
			$('#connectingroom').show()
			$('#no_kamar').prop("required", true);
			$('#total_room').prop("required", false);
            $('#total_room').val(null);
			$('#no_kamar_start').prop("required", false);
            $('#no_kamar_start').val(null);
			$('#no_kamar_end').prop("required", false);
            $('#no_kamar_end').val(null);
		}

        $('#no_kamar').trigger('change');
        $('.hitungroom').trigger('change');
	})

	$(document).on('change', '.hitungroom', function() {
		let totalroom = parseInt($('#total_room').val())
		let startno = parseInt($('#no_kamar_start').val())
		let endno = parseInt(totalroom + (startno-1))
		console.log(totalroom, startno, endno)
		if(endno>0){
			$('#no_kamar_end').val(endno)
		} else {
			$('#no_kamar_end').val("")
		}

        $.ajax({
            type: 'GET',
            url: "{{ url('/cek-nomorkamar/')}}/"+startno+"/"+endno,
            success: function (data) {
                $('#warning-nomorkamarmulti').html(data.text);
                $('#warning-nomorkamarmulti2').html(data.text);

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

	})

	// JS Multiple Jenis Kamar
	let new_idx = 1;

	function tambahJenisKamar(){
		let jenis_kamar_options = $('#jns_kamar0').html();
		let html = `<div class="row mb-2" data-idx="${new_idx}" id="row_${new_idx}">
						<div class="col-lg-9">
							<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-2 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;
							<button type="button" onclick="tambahJenisKamar()" class="btn btn-success">
								<i class="fas fa-plus-circle"></i>
							</button>
							</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)
        // e.preventDefault();

        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 = parseInt($(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: 'Please fill this input'
							},
							email: {
								required: 'Please fill this input'
							},
							no_telp: {
								required: 'Please fill this input'
							},
							kamarname: {
								required: 'Please fill this input'
							},
							password: {
								required: 'Please fill this input'
							},
							role: {
								required: 'Please fill this input'
							},
							cabang_id: {
								required: 'Please fill this input'
							},
						},
					});

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