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

@section('title', 'Room')

@section('css')
<style type="text/css">
	.datatable-column-width {
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 200px;
		max-height: 90px;
	}
</style>
@endsection


@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">
            <h3 class="font-weight-bold"><span class="font-weight-light">Room -</span> Data</h3>
            <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">

	<div class="row">
		<div class="col-md-12">
			<!-- Hover rows -->
			<div class="card">
				<div class="card-header header-elements-inline">
                    @if (!in_array(\Auth::user()->role, [10,40]))
					<a href="{{ route('kamars.create')}}"><button type="button"
						class="btn btn-primary rounded-round"><i class="icon-plus3 mr-2"></i> Add</button>
					</a>
					<span class="float-right p-1 ">
                        <a href="{{ route('download.rooms') }}" class="m-1"><button class="btn btn-light" type="button"> <i class="fas fa-download"></i>Download Excel Default Template</button></a>
						<button class="btn btn-success m-1" data-toggle="modal" data-target="#modal_upload"> <i class="far fa-file-excel"></i>Upload or import data new input only</button>
					</span>
                    @endif
				</div>

				<table id="tabel_kamar" class="table datatable-basic table-hover">
					<thead>
						<tr>
							<th class="d-none"></th>
							<th>Floor</th>
							<th>Room Number</th>
							<th>Room Type</th>
							<th>Room Size</th>
							<th>Bed Size</th>
							<th>Status</th>
							{{--
								<th>Status Cleaning</th>
							--}}
							<th class="text-center">Actions</th>
						</tr>
					</thead>
					<tbody>

						{{-- /* -------------------------------------------------------------------------- */
						/*                              KAMAR MAINTENANCE                             */
						/* -------------------------------------------------------------------------- */ --}}

					@if (count($all_kamars_maintenance) > 0)
                    @foreach ($all_kamars_maintenance as $kamars_maintenances)

					@foreach ($kamars_maintenances as $kamar_maintenance)
                    @php
                        $color_text = '';
                        if( ( in_array($kamar_maintenance->status, ['OD']) ) ){
                            $color_text = 'text-warning font-weight-bold';
                        }else if ( ( in_array($kamar_maintenance->status, ['VD']) ) ) {
                            $color_text = 'text-danger font-weight-bold';
                        }else if ( ( in_array($kamar_maintenance->status, ['VC']) ) ){
                            $color_text = 'text-success font-weight-bold';
                        }
                    @endphp
					<tr class="{{$color_text}}">
                        <td class="d-none"></td>
                        <td>
                            {{$kamar_maintenance->lantai}}
                        </td>
						<td>
							<div class="datatable-column-width"> <i class="{{@$kamar_maintenance->connecting_room_1||@$kamar_maintenance->connecting_room_1?'icon-link text-warning':''}}" title="Have Connecting Room"></i>{{$kamar_maintenance->no_kamar}}</div>
						</td>
						<td>
						@if(count($kamar_maintenance->jenisKamars))
							@foreach($kamar_maintenance->jenisKamars as $jenis_kamar)
							-{{$jenis_kamar->nama}} <br>
							@endforeach
						@else
						-
						@endif
						</td>
						<td>{{$kamar_maintenance->ukuran_kamar?$kamar_maintenance->ukuran_kamar:'-'}}</td>
						<td>{{$kamar_maintenance->ukuran_bed?$kamar_maintenance->ukuran_bed:'-'}}</td>
						<td>
							<div class="datatable-column-width">
								<span>
									@if ($kamar_maintenance->status == 'OOO' || $kamar_maintenance->status == 'OS')
										<a id="show_outoforder"
										data-target="#modal_outoforder"
										data-toggle="modal"
										data-status="{{config('custom.status_kamar.'.$kamar_maintenance->status)}}"
										data-tanggal_dead="{{$kamar_maintenance->tanggal_deadline}}"
										data-lantai="{{$kamar_maintenance->lantai}}"
										data-no_kamar="{{$kamar_maintenance->no_kamar}}"
										data-keterangan="{{$kamar_maintenance->keterangan}}"
										href="#modal_outoforder">
											<i class="icon-search4 text-warning"></i></a>
									@endif
									{{config('custom.status_kamar.'.$kamar_maintenance->status)}}

									@if ($kamar_maintenance->tanggal_deadline != null && ($kamar_maintenance->status == 'OOO'||$kamar_maintenance->status == 'OS'))
										@if (getSystemDate() >= $kamar_maintenance->tanggal_deadline)
										<br>
										<span class="text-warning">
										<i class="icon-warning"></i> <span style="font-style: italic"> This room is past the deadline </span>
										</span>
										@endif
									@endif
								</span>

							</div>
						</td>
						<td align="center">
							<a href="{{ url('schedule-room').'/'.$kamar_maintenance->id}}"><button type="button" class="btn btn-light btn-icon"><i class="icon-calendar2" title="Schedule room"></i></button></a>
                            @if (!in_array(\Auth::user()->role, [10,40]))
							<a class="duplicatebtn" data-toggle="modal" data-target="#modal_theme_duplicate" data-id="{{$kamar_maintenance->id}}" >
								<button type="button" class="btn btn-warning btn-icon"
							   			title="Duplicate"><i class="icon-copy4"></i></button>
						    </a>
							<a href="{{ route('kamars.edit',$kamar_maintenance->id)}}"><button type="button" class="btn btn-primary btn-icon"><i class="icon-pencil7" title="Edit"></i></button></a>
							<a class="delbutton"
							   data-toggle="modal"
							   data-target="#modal_theme_danger"
							   data-uri="kamars/{{$kamar_maintenance->id}}"
							>
								<button type="button" class="btn btn-danger btn-icon"
							   			title="Delete"><i class="icon-x"></i></button>
						    </a>
                            @endif
						</td>
					</tr>
					@endforeach
                    @endforeach

					@endif



					{{-- /* -------------------------------------------------------------------------- */
					/*                                KAMAR NORMAL                                */
					/* -------------------------------------------------------------------------- */ --}}

					@if (count($all_kamars) > 0)
                    @foreach ($all_kamars as $kamars)

					@foreach ($kamars as $kamar)
                    @php
                        $color_text = '';
                        if( ( in_array($kamar->status, ['OD']) ) ){
                            $color_text = 'text-warning font-weight-bold';
                        }else if ( ( in_array($kamar->status, ['VD']) ) ) {
                            $color_text = 'text-danger font-weight-bold';
                        }else if ( ( in_array($kamar->status, ['VC']) ) ){
                            $color_text = 'text-success font-weight-bold';
                        }
                    @endphp
					<tr class="{{$color_text}}">
                        <td class="d-none"></td>
                        <td>
                            {{$kamar->lantai}}
                        </td>
						<td>
							<div class="datatable-column-width"> <i class="{{@$kamar->connecting_room_1||@$kamar->connecting_room_1?'icon-link text-warning':''}}" title="Have Connecting Room"></i>{{$kamar->no_kamar}}</div>
						</td>
						<td>
						@if(count($kamar->jenisKamars))
							@foreach($kamar->jenisKamars as $jenis_kamar)
							-{{$jenis_kamar->nama}} <br>
							@endforeach
						@else
						-
						@endif
						</td>
						<td>{{$kamar->ukuran_kamar?$kamar->ukuran_kamar:'-'}}</td>
						<td>{{$kamar->ukuran_bed?$kamar->ukuran_bed:'-'}}</td>
						<td>
							<div class="datatable-column-width">
								<span>
									@if ($kamar->status == 'OOO' || $kamar->status == 'OS')
										<a id="show_outoforder"
										data-target="#modal_outoforder"
										data-toggle="modal"
										data-status="{{config('custom.status_kamar.'.$kamar->status)}}"
										data-tanggal_dead="{{$kamar->tanggal_deadline}}"
										data-lantai="{{$kamar->lantai}}"
										data-no_kamar="{{$kamar->no_kamar}}"
										data-keterangan="{{$kamar->keterangan}}"
										href="#modal_outoforder">
											<i class="icon-search4 text-warning"></i></a>
									@endif
									{{config('custom.status_kamar.'.$kamar->status)}}

									@if ($kamar->tanggal_deadline != null && ($kamar->status == 'OOO'||$kamar->status == 'OS'))
										@if (getSystemDate() >= $kamar->tanggal_deadline)
										<br>
										<span class="text-warning">
										<i class="icon-warning"></i> <span style="font-style: italic"> This room is past the deadline </span>
										</span>
										@endif
									@endif
								</span>

							</div>
						</td>
						{{--<td>{{config('custom.status_cleaning')[$kamar->status_clean]}}</td>--}}
						<td align="center">
							<a href="{{ url('schedule-room').'/'.$kamar->id}}"><button type="button" class="btn btn-light btn-icon"><i class="icon-calendar2" title="Schedule room"></i></button></a>
                            @if (!in_array(\Auth::user()->role, [10,40]))
							<a class="duplicatebtn" data-toggle="modal" data-target="#modal_theme_duplicate" data-id="{{$kamar->id}}" >
								<button type="button" class="btn btn-warning btn-icon"
							   			title="Duplicate"><i class="icon-copy4"></i></button>
						    </a>
							<a href="{{ route('kamars.edit',$kamar->id)}}"><button type="button" class="btn btn-primary btn-icon"><i class="icon-pencil7" title="Edit"></i></button></a>
							@if(!$kamar->is_used)
								<a class="delbutton"
								data-toggle="modal"
								data-target="#modal_theme_danger"
								data-uri="kamars/{{$kamar->id}}"
								>
									<button type="button" class="btn btn-danger btn-icon"
											title="Delete"><i class="icon-x"></i></button>
								</a>
							@endif
                            @endif
						</td>
					</tr>
					@endforeach
                    @endforeach

					@endif

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

</div>

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

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

			<form action="" method="post" id="delform">
				@csrf
				@method('DELETE')
				<div class="modal-body" align="center">
					<h2> Delete Data? </h2>
				</div>

				<div class="modal-footer">
					<a type="button" class="btn btn-link" data-dismiss="modal">Cancel</a>
					<button type="submit" class="btn bg-danger">Delete</button>
				</div>
			</form>
		</div>
	</div>
</div>
<!-- /default modal -->

<!-- Danger modal -->
<div id="modal_outoforder" class="modal fade" tabindex="-1">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header bg-warning" align="center">
				<h5 class="modal-title"><i class="icon-bed2 mr-1"></i> Info Kamar</h5>
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>

			<div class="modal-body">
				<fieldset class="mb-3">

					<div class="form-group row">
						<label class="col-form-label col-lg-3 font-weight-semibold">Lt / No. Kamar</label>
						<div class="col-lg-9">
							<div id="ltno_kamar" class="form-control-plaintext"></div>
						</div>
					</div>

					<div class="form-group row">
						<label class="col-form-label col-lg-3 font-weight-semibold">Status Kamar</label>
						<div class="col-lg-9">
							<div id="status_kamar" class="form-control-plaintext"></div>
						</div>
					</div>

					<div class="form-group row">
						<label class="col-form-label col-lg-3 font-weight-semibold">Tanggal Deadline Kamar</label>
						<div class="col-lg-9">
							<div id="tanggal_deadline_kamar" class="form-control-plaintext"></div>
						</div>
					</div>

					<div class="form-group row">
						<label class="col-form-label col-lg-3 font-weight-semibold">Keterangan</label>
						<div class="col-lg-9">
							<div id="keterangan_status" class="form-control-plaintext"></div>
						</div>
					</div>

				</fieldset>
			</div>

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

<!-- Danger modal -->
<div id="modal_preview" class="modal fade" tabindex="-1">
	<div class="modal-dialog modal-xl">
		<div class="modal-content">
			<div class="modal-header" align="center">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>
			<div class="modal-body p-0" id="preview" align="center">

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


<!-- upload excel modal -->
<div id="modal_upload" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header" align="center">
				<h6 class="modal-title" id="formTitle">Upload Rooms Excel</span></h6>
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>

			<form action="{{ route('upload.rooms') }}" method="post" id="upload-form" enctype="multipart/form-data">
				@csrf

				<input type="hidden" name="_method" id="method" value="post">
				<div class="modal-body">
					<div class="form-group">
						<input class="form-control-uniform" id="file" name="file" type="file" accept=".xls,.xlsx,.csv">
						<span class="form-text text-muted">Accepted format: .xls .xlsx .csv</span>
					</div>
                    {{-- <a href="{{ route('download.rooms') }}" class="m-1"><button class="btn btn-sm btn-light" type="button"> <i class="fas fa-download"></i>Download Excel Default Template</button></a> --}}
					{{-- <span><a href="{{ route('download.rooms') }}">Download template</a> default format</span> --}}
				</div>

				<div class="modal-footer">
					<button type="button" class="btn btn-link"  data-dismiss="modal">Close</button>
					<button type="submit" class="btn btn-success" id="submit-upload">Submit</button>
				</div>
			</form>
		</div>
	</div>
</div>

<!-- duplicate modal -->
<div id="modal_theme_duplicate" class="modal fade" tabindex="-1">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header bg-warning" align="center">
				<h5 class="modal-title"><i class="icon-bed2 mr-1"></i> Duplicate Rooms</h5>
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>

			<div class="modal-body">
				<fieldset class="mb-3">

					<form action="{{ route('duplicate.rooms') }}" method="post" id="upload-form" enctype="multipart/form-data">
						@csrf

						<input type="hidden" name="_method" id="method" value="post">
						<input type="hidden" name="copy_code" id="copy_code" value="">
						<div class="modal-body">
							<div class="form-group">
                                <label style="font-weight: bold">Room number:</label>
								<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 class="modal-body">
							<div class="form-group">
                                <label style="font-weight: bold">Floor:</label>
								<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="modal-footer">
							<button type="button" class="btn btn-link"  data-dismiss="modal">Close</button>
							<button type="submit" class="btn btn-success submitBtn">Submit</button>
						</div>
					</form>

				</fieldset>
			</div>

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


@endsection

@section('js')
<!-- Theme JS files -->
<script src="{{asset('global_assets/js/plugins/notifications/pnotify.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/notifications/bootbox.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/tables/datatables/datatables.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/buttons/spin.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/editors/summernote/summernote.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/buttons/ladda.min.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/components_modals.js')}}"></script>
<script src="{{asset('global_assets/js/demo_pages/form_inputs.js')}}"></script>

<script>
	//modal out of order
	$(document).on("click", "#show_outoforder", function () {
	     var status = $(this).data('status');
	     var tanggal_deadline = $(this).data('tanggal_dead');
	     var lantai = $(this).data('lantai');
	     var no_kamar = $(this).data('no_kamar');
	     var keterangan = $(this).data('keterangan');

	     $("#ltno_kamar").text(lantai+' / '+no_kamar);
	     $("#tanggal_deadline_kamar").text(tanggal_deadline);
	     $("#status_kamar").text(status);
	     $("#keterangan_status").text(keterangan);
	});

	//modal duplicate
	$(document).on("click", ".duplicatebtn", function () {
	     var id = $(this).data('id');
	     $("#copy_code").val(id);
	});

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

	// Edit
	function edit(id){
		var nomor = $('#'+id).data('nomor');
		var jenis = $('#'+id).data('jenis');

		var stat = $('#'+id).data('stat');
		var uri = $('#'+id).data('uri');
		var gambar = $('#'+id).data('gambar');
		var statusclean = $('#'+id).data('statusclean');
		var lantai = $('#'+id).data('lantai');
		var html_gambar = "";

		@if(Auth::user()->role == 1)
			var hotel = $('#'+id).data('hotel');
			$("#hotel_id").val(hotel).trigger('change');
		@endif

		$.each(gambar, function(key, val){
			html_gambar += `<a href="#"
							   class="popup-gambar"
							   data-toggle="modal"
							   data-target="#modal_preview"
							   onclick="preview('${val.url_file}')"
							>
								<img src="${val.url_file}"
									 alt="${val.nama_file}"
									 class="img-preview mr-2"
									 width="100"
									 height="100"
									 style="object-fit: cover"
								>
							</a>`
		});

		$("#preview_gambar").html(html_gambar);

		$('#myform').attr("action", uri);
		$('#method').val("put");
		$('#no_kamar').val(nomor);
		$('#lantai').val(lantai);

		if(statusclean == 1){
			$('#frm_status_cleaning').removeAttr('style');
		}

		$('#status_clean').select2().val(statusclean).trigger('change');

		setTimeout( function(){
			let jns_options = $("#jns_kamar0").html();
			let jml_jenis = jenis.length;
			let html_jenisoption = '';
			let btn_remove = '';

			if(jml_jenis > 0){
				$.each(jenis, function(key, val){

					if(key > 0){
						btn_remove = `<button type="button" onclick="removeKamar(${key})" class="btn btn-danger">
										<i class="fas fa-times-circle"></i>
									  </button>&nbsp;`;
					}
					else{
						btn_remove = '';
					}

					html_jenisoption += `<div class="row mb-2" data-idx="${key}" id="row_${key}">
									<div class="col-lg-9">
										<select name="jns_kamar[]"
												 id="jns_kamar${key}"
												 data-idx="${key}"
												 class="opt-jnskamar form-control form-control-select2"
												 data-container-css-class="border-teal"
												 data-dropdown-css-class="border-teal"
												 required
										>
											${jns_options}
										</select>
									</div>
									<div class="col-lg-2">
										<div class="btn-group">
											${btn_remove}
											<button type="button" onclick="tambahJenisKamar()" class="btn btn-success">
												<i class="fas fa-plus-circle"></i>
											</button>
										</div>
									</div>
								</div>`;
				});

				$('#form-jenis-kamar').html(html_jenisoption);

				new_idx = jml_jenis;

				$.each(jenis, function(key, val){
					$("#jns_kamar"+key).select2().val(val.id).trigger('change');
				});

			}

		}, 1000);
		$("#status").val(stat).trigger('change');
		$('#formtitle').html('Ubah Kamar');
	}

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

	//modal delete
	$(document).on("click", ".delbutton", function () {
	     var url = $(this).data('uri');
	     $("#delform").attr("action", url);
	});
	//pilih Coload
	$(document).on("change", "#hotel_id", function () {
		var id = $(this).find(':selected').val();
        selectJenisKamar(id);
	});

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

	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: 180,
	                targets: [ 7 ]
	            }],
                scrollX: true,
	            dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
	            language: {
	                search: '<span>Filter:</span> _INPUT_',
	                searchPlaceholder: 'Type to filter...',
	                lengthMenu: '<span>Show:</span> _MENU_',
	                paginate: { 'first': 'First', 'last': 'Last', 'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;' }
	            }
	        });

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

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

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


	    //
	    // Return objects assigned to module
	    //

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


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


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

	        });

	        // Reset form
	        $('#reset').on('click', function() {
	            validator.resetForm();
	        });
	    };

	    // Return objects assigned to module
	    return {
	        init: function() {
	            _componentValidation();
	        }
	    }
	}();


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

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

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

			//$('.summernote').summernote({
			//	height: 200,
			//	toolbar: []
			//});

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

			//Jika Klik Edit Dari Roomview
			@if($edit_kamars != null)
			$(document).ready(function(){
				let data = {!! json_encode($edit_kamars) !!};
				var html_gambar = "";
				console.log(data);

				@if(Auth::user()->role == 1)
					$("#hotel_id").val(data.hotel_id).trigger('change');
				@endif

				$.each(data.gambar_clean, function(key, val){
					html_gambar += `<a href="#"
									   class="popup-gambar"
									   data-toggle="modal"
									   data-target="#modal_preview"
									   onclick="preview('${val.url_file}')"
									>
										<img src="${val.url_file}"
											 alt="${val.nama_file}"
											 class="img-preview mr-2"
											 width="100"
											 height="100"
											 style="object-fit: cover"
										>
									</a>`
				});

				$("#preview_gambar").html(html_gambar);

				$('#myform').attr("action", "kamars/"+data.id);
				$('#method').val("put");
				$('#no_kamar').val(data.no_kamar);
				$('#lantai').val(data.lantai);

				if(data.status_clean == 1){
					$('#frm_status_cleaning').removeAttr('style');
				}

				$('#status_clean').select2().val(data.status_clean).trigger('change');

				setTimeout( function(){
					let jns_options = $("#jns_kamar0").html();
					let jml_jenis = data.jenis_kamars.length;
					let html_jenisoption = '';
					let btn_remove = '';

					if(jml_jenis > 0){
						$.each(data.jenis_kamars, function(key, val){

							if(key > 0){
								btn_remove = `<button type="button" onclick="removeKamar(${key})" class="btn btn-danger">
												<i class="fas fa-times-circle"></i>
											  </button>&nbsp;`;
							}
							else{
								btn_remove = '';
							}

							html_jenisoption += `<div class="row mb-2" data-idx="${key}" id="row_${key}">
											<div class="col-lg-9">
												<select name="jns_kamar[]"
														 id="jns_kamar${key}"
														 data-idx="${key}"
														 class="opt-jnskamar form-control form-control-select2"
														 data-container-css-class="border-teal"
														 data-dropdown-css-class="border-teal"
														 required
												>
													${jns_options}
												</select>
											</div>
											<div class="col-lg-2">
												<div class="btn-group">
													${btn_remove}
													<button type="button" onclick="tambahJenisKamar()" class="btn btn-success">
														<i class="fas fa-plus-circle"></i>
													</button>
												</div>
											</div>
										</div>`;
						});

						$('#form-jenis-kamar').html(html_jenisoption);

						new_idx = jml_jenis;

						$.each(data.jenis_kamars, function(key, val){
							$("#jns_kamar"+key).select2().val(val.id).trigger('change');
						});

					}

				}, 3000);
				$("#status").val(data.status).trigger('change');
				$('#formtitle').html('Ubah Kamar');
			});
			@endif

			//Reset Form
			$('.resetbutton').on('click', function(){
				$('#myform').attr("action", "{{route( 'kamars.store' )}}");
				$('#method').val("post");
				$('#no_kamar').val("");
				$('#lantai').val("");
				$('#jns_kamar').html('<option value="">-- Pilih Jenis Kamar --</option>');
				$("#status").val("V").trigger('change');
				$('#formtitle').html('Tambah Kamar');
				$('#frm_status_cleaning').removeAttr('style');
				$('#frm_status_cleaning').attr('style', 'display:none');
				$('#status_clean').select2().val('').trigger('change');

				let opt_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="">-- Pilih Jenis Kamar --</option>
											</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>`

				$('#form-jenis-kamar').html(opt_jenis_kamar);
				new_idx = 1;

				@if(Auth::user()->role == 1)
					$("#hotel_id").val('').trigger('change');
				@endif
			});

		});

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