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

@section('title', 'Room Type | Add Room Type')

@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 Type</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-lg-12">
						<form id="submitjenis_kamar" class="form-validate-jquery" action="{{ route('jenis_kamar.store')}}" method="post" enctype="multipart/form-data">
							@csrf
							<fieldset class="mb-3">
								<legend class="text-uppercase font-size-sm font-weight-bold">Data Room Type</legend>

								{{-- @if(Auth::user()->role == 1)

								<div class="form-group row">
									<label class="col-form-label col-lg-2">Hotel</label>
									<div class="col-lg-10">

										@if (\Session::get('hotel_id') != null)

											<div class="form-control-plaintext">
												{{$sessionhotel->nama}}
											</div>
											<input type="hidden" name="hotel_id" value="{{\Session::get('hotel_id')}}" />

										@else

										<select name="hotel_id" id="hotel_id" class="form-control form-control-select2" data-container-css-class="border-teal" data-dropdown-css-class="border-teal" required>
											<option value="">-- Pilih Hotel --</option>
											@foreach($hotels as $hotel)
												<option value="{{$hotel->id}}">{{$hotel->nama}}</option>
											@endforeach

										</select>
										@endif
									</div>
								</div>
								@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">Name <span class="text-danger">*</span> </label>
									<div class="col-lg-10">
										<input type="text" name="nama" class="form-control border-teal border-1 @error('no_jenis_kamar') is-invalid @enderror" placeholder="Name" required autofocus autocomplete="off" value="{{ old('nama') }}">
									</div>
								</div>

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

								<div class="form-group row">
									<label class="col-form-label col-lg-2">Capacity <span class="text-danger">*</span> </label>
									<div class="col-lg-10">
										<input type="text" name="kapasitas" class="form-control border-teal border-1 @error('kapasitas') is-invalid @enderror" placeholder="Capacity" required autocomplete="off" min="1" value="{{ old('kapasitas') }}">
									</div>
								</div>

								<!-- <div class="form-group row">
									<label class="col-form-label col-lg-2">Harga</label>
									<div class="col-lg-10">
										<input type="text" name="harga" class="form-control border-teal border-1 @error('harga') is-invalid @enderror" placeholder="Harga" required autocomplete="off" value="{{ old('harga') }}">
									</div>
								</div> -->
                                <input type="hidden" name="fasilitas[]" value="">
								<div class="form-group row">
									<label class="col-form-label col-lg-2">Facility</label>
									<div class="col-lg-10">
										<div class="row" id="divfasilitas">
											@foreach($fasilitas as $fas)
												<div class="col-lg-4">
													<div class="form-check">
														<label class="form-check-label">
															<input type="checkbox" name="fasilitas[]" value="{{$fas->id}}" class="form-check-input-styled-info" data-fouc>
															<i class="{{$fas->icon}} mr-2"></i>{{$fas->nama}}
														</label>
													</div>
												</div>
											@endforeach
										</div>
									</div>
								</div>

								<div class="form-group row">
									<label class="col-form-label col-lg-2">Description</label>
									<div class="col-lg-10">
										<textarea name="deskripsi" rows="3" cols="3" class="form-control border-teal border-1 @error('deskripsi') is-invalid @enderror" placeholder="Description">{{old('deskripsi')}}</textarea>
									</div>
								</div>

								{{--
									<div class="form-group row">
										<label class="col-form-label col-lg-2">Rate Kamar</label>
										<div class="col-lg-10" id="form-rate-kamar">
											<div class="row">
												<div class="col-lg-5">
													Rate Code:
												</div>
												<div class="col-lg-5">
													Harga:
												</div>
											</div>
											<div class="row mb-2" data-idx="0" id="row_0">
												<div class="col-lg-5">
													<input type="text"
														   class="form-control"
														   name="rate_code[]"
														   id="rate_code0"
														   data-idx="0"
													>
												</div>
												<div class="col-lg-5">
													<input type="number"
														   class="form-control"
														   name="harga[]"
														   id="harga0"
														   data-idx="0"
													>
												</div>
												<div class="col-lg-2">
													<button type="button" onclick="tambahRateKamar()" 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">Status <span class="text-danger">*</span> </label>
									<div class="col-lg-10">
										<select id="status" name="status" class="form-control form-control-select2" data-container-css-class="border-teal" data-dropdown-css-class="border-teal" required>
											<option value="1">Active</option>
											<option value="2">Deactive</option>
										</select>
									</div>
								</div>
								<div class="form-group row">
									<label class="col-form-label col-lg-2">Main image (for landing page)</label>
									<div class="col-lg-10">
										<input name="gambar" type="file" class="form-control-uniform" accept="image/*" data-fouc="" />
										<span class="form-text text-muted">Recommend size : 500px * 500px</span>
                                        <span class="form-text text-muted">Max file size : 1MB</span>
										<br>
										<img id="showgambar" src="" style="display: none" height="150px">
									</div>
								</div>
								<div class="form-group row">
									<label class="col-form-label col-lg-2">Sub image (for landing page)</label>
									<div class="col-lg-10">
										<div class="row after-add-more">
											<div class="col-lg-10">
												<input name="gambartambah[]" type="file" class="form-control-uniform" accept="image/*" data-fouc="" />
												<span class="form-text text-muted">Recommend size : 500px * 500px</span>
												<span class="form-text text-muted">Max file size : 1MB</span>
												<br>
												<img id="showgambar" src="" style="display: none" height="150px">
											</div>
											<div class="col-lg-2">
												<button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
											</div>
										</div>

										<div class="copy" style="display: none">
											<div class="row control-group">
												<div class="col-lg-10">
													<input name="gambartambah[]" type="file" class="form-control-uniform2" accept="image/*" data-fouc="" />
													<span class="form-text text-muted">Recommend size : 500px * 500px</span>
													<br>
													<img id="showgambar" src="" style="display: none" height="150px">
												</div>
												<div class="col-lg-2">
													<button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
												</div>
											</div>
										</div>
									</div>
								</div>

                                <div class="form-group row">
                                    <label class="col-form-label col-lg-2">Connect to OTA?:</label>
                                    <div class="col-lg-10">
                                        <div class="form-check form-check-inline">
                                            <label class="form-check-label">
                                                <input type="radio"
                                                        name="send_availability"
                                                        class="form-check-input-styled send_availability"
                                                        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="send_availability"
                                                        class="form-check-input-styled send_availability"
                                                        style="border-color: red"
                                                        value="1"
                                                        data-fouc
                                                >
                                                Yes
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <div id="send-availibity-form">

                                <legend>For setup room availability on OTA</legend>

                                <div class="form-group row">
									<label class="col-form-label col-lg-2">RoomTypeID BnL</label>
									<div class="col-lg-10">
										<input name="room_type_bnl" class="form-control border-teal border-1 @error('room_type_bnl') is-invalid @enderror" placeholder="Room Type BnL" value="{{old('room_type_bnl')}}">
									</div>
								</div>

                                {{-- <div class="form-group row">
                                    <label class="col-form-label col-lg-2">Availibilty Type OTA</label>
                                    <div class="col-lg-10">
                                        <div class="text-danger col-form-label ">*Sell All Availability Room to OTA(*same availability for OTA and Hotely)</div>
                                    </div>
                                </div> --}}

                                <div class="form-group row">
                                    <label class="col-form-label col-lg-2">Availibilty Type OTA</label>
                                    <div class="col-lg-10">
                                        <div class="form-check form-check-inline">
                                            <label class="form-check-label">
                                                <input type="radio"
                                                        name="type_ota_sell"
                                                        class="form-check-input-styled type_ota_sell"
                                                        style="border-color: red"
                                                        value="0"
                                                        data-fouc
                                                        checked
                                                >
                                                Sell All Availability to OTA
                                            </label>
                                        </div>

                                        {{-- <div class="form-check form-check-inline">
                                            <label class="form-check-label">
                                                <input type="radio"
                                                        name="type_ota_sell"
                                                        class="form-check-input-styled type_ota_sell text-muted"
                                                        style="border-color: red"
                                                        value="1"
                                                        data-fouc
                                                        disabled
                                                >
                                                Partial Sell
                                            </label>
                                        </div> --}}
                                    </div>
                                </div>

                                {{-- <div id="partial_detail" class="form-group row" style="{{$jenis_kamar->type_ota_sell == 1 ? '' : 'display:none'}}">
                                    <div class="col-form-label col-lg-2"></div>
                                    <div class="col-lg-4">
                                        <span class="text-danger text-weight-bold">Total Room : {{$jenis_kamar->kamars_count}}, Non OTA => <span id="remaining-to-pms">{{$jenis_kamar->kamars_count - $jenis_kamar->max_ota_room}}</span></span>
                                        <input id="max_ota_room" max="{{$jenis_kamar->kamars_count}}" name="max_ota_room" class="form-control border-teal border-1 @error('max_ota_room') is-invalid @enderror" placeholder="Sell to Ota" value="{{old('max_ota_room')  ?? $jenis_kamar->max_ota_room}}" {{$jenis_kamar->type_ota_sell == 1 ? '' : 'disabled'}}>
                                    </div>
                                    <div class="col-lg-4 text-danger" style="font-weight:bold">
                                        @php
                                            $test1 = new Datetime($jenis_kamar->change_to_date);
                                            $test2 = new Datetime(getSystemDate());
                                            $diff = $test2->diff($test1)->format("%a");
                                            // dump($diff);
                                        @endphp
                                        @if ( $diff <= 2 &&  $diff >= 0)
                                            <h4>Current Update to OTA {{ $diff }} day remaining!, please update the date to more update on OTA availability</h4>
                                        @endif
                                    </div>
                                </div> --}}

                                <div class="form-group row">
                                    <div class="col-form-label col-lg-2">Change Availability OTA until:</div>
                                    <div class="col-lg-4">
                                        <input type="text" name="change_to_date" id="change_to_date" class="form-control" value="{{dateFormat(getSystemDate(),'d-m-Y')}}">
                                    </div>
                                </div>

{{--
                                <div class="form-group row">
									<label class="col-form-label col-lg-2">Max Room OTA/BnL</label>
									<div class="col-lg-10">
										<input name="max_ota_room" class="form-control border-teal border-1 @error('max_ota_room') is-invalid @enderror" placeholder="Room Type BnL" value="{{old('max_ota_room')}}">
									</div>
								</div> --}}
                                </div>

							</fieldset>
							<div class="text-right">
								<a href="{{ url('/jenis_kamar')}}" class="btn btn-light">Back <i class="icon-undo"></i></a>
								<button type="submit" class="btn btn-primary submitBtn">Save <i class="icon-paperplane ml-2"></i></button>
							</div>
						</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/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">

	// JS Multiple Jenis Kamar
	let new_idx = 1;

	function tambahRateKamar(){
		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-5">
							<input type="text"
								   class="form-control"
								   name="rate_code[]"
								   id="rate_kamar${new_idx}"
								   data-idx="${new_idx}"
							>
						</div>
						<div class="col-lg-5">
							<input type="number"
								   class="form-control"
								   name="harga[]"
								   id="harga${new_idx}"
								   data-idx="${new_idx}"
							>
						</div>
						<div class="col-lg-2">
							<div class="btn-group">
								<button type="button" onclick="removeRate(${new_idx})" class="btn btn-danger">
									<i class="fas fa-times-circle"></i>
								</button>&nbsp;
								<button type="button" onclick="tambahRateKamar()" class="btn btn-success">
									<i class="fas fa-plus-circle"></i>
								</button>
							</div>
						</div>
					</div>`;
					new_idx++;
		$('#form-rate-kamar').append(html);
	}

	function removeRate(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').click(function(){
				let input = $('#submitjenis_kamar').find(':input').not(':input[type=submit],:hidden')
				console.log(input)
				if(input.val()){
					$(".submitBtn").attr("disabled", true);
					$('#submitjenis_kamar').submit()
				}

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

			})
		});

		//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('/getjenisjenis_kamar/')}}/"+id,
				success: function (data) {
					$('#jns_jenis_kamar').html(data);
				}
			});
		}

		function selectFasilitas(id){
			$.ajax({
				type: 'GET',
				url: "{{ url('/getfasilitas/')}}/"+id,
				success: function (data) {
					$('#divfasilitas').html(data);
					//$('.form-check-input-styled-info').uniform();
					//setTimeout( function()
					//{
						$('.form-check-input-styled-info').uniform({
							wrapperClass: 'border-info-600 text-info-800'
						});
					//}, 1000)
				}
			});
		}

        // 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 the input.'
		                },
		                email: {
		                    required: 'Please fill the input.'
		                },
		                no_telp: {
		                    required: 'Please fill the input.'
		                },
		                jenis_kamarname: {
		                    required: 'Please fill the input.'
		                },
		                password: {
		                    required: 'Please fill the input.'
		                },
		                role: {
		                    required: 'Please fill the input.'
		                },
		                cabang_id: {
		                    required: 'Please fill the 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]);
		}

		$( document ).ready(function() {

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

            $('#send-availibity-form').hide()
            $('#send-availibity-form input').prop('disabled', true)

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

		});

        //Send availability
        $('.send_availability').on('change', function() {
            if (this.value == '1') {
                // alert('partial_detail')
                $('#send-availibity-form').show()
                $('#send-availibity-form input').prop('disabled', false)
            }else if(this.value == '0'){
                // alert('all')
                $('#send-availibity-form').hide()
                $('#send-availibity-form input').prop('disabled', true)
            }
        })
        //Send availability

        //type ota sell
        $('.type_ota_sell').on('change', function() {
            if (this.value == '1') {
                // alert('partial_detail')
                $('#partial_detail').show()
                $('#partial_detail input').prop('disabled', false)
            }else if(this.value == '0'){
                // alert('all')
                $('#partial_detail').hide()
                $('#partial_detail input').prop('disabled', true)
            }
        })
        //type ota sell

        $('#change_to_date').daterangepicker({
            singleDatePicker:true,
            applyClass: 'btn-success',
            cancelClass: 'btn-danger',
            minDate: "{{ date('d-m-Y', strtotime(getSystemDate())) }}",
            startDate: "{{ date('d-m-Y', strtotime(getSystemDate())) }}",
            locale: {
                format: 'DD-MM-YYYY'
            }
        });
	</script>
@endsection