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

@section('title', 'Room Status')

@section('css')
<style type="text/css">
	.datatable-column-width {
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 200px;
		max-height: 90px;
	}
	.datatable-column-status-kamar {
		overflow: hidden;
		text-overflow: ellipsis;
		width: 150px;
		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 Status -</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">

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

					@if (!$kamars->isEmpty())
					@php
						$systemdate = date('Y-m-d', strtotime(getSystemDate()));
					@endphp


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


					@foreach ($kamars as $kamar)
						@if (in_array($kamar->status,['OS','OOO']))

						@if (($kamar->tanggal_deadline != null) && ($kamar->tanggal_deadline <= $systemdate))

							@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">
										{{$kamar->no_kamar}}
										{{-- @if (!$kamar->gambarClean->isEmpty())
											@foreach ($kamar->gambarClean as $gambar)
												<a href="{{ $gambar->url_file }}" class="ml-1" data-popup="lightbox"><i class="fas fa-search-plus"></i></a>
											@endforeach
										@endif --}}
									</div>
								</td>
								<td>
								@if(count($kamar->jenisKamars))
									@foreach($kamar->jenisKamars as $jenis_kamar)
									-{{$jenis_kamar->nama}} <br>
									@endforeach
								@else
								-
								@endif
								</td>
								<td>
									<div class="datatable-column-status-kamar">
										<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

											{{-- <form action="{{route('status-kamar.updatekamar')}}" id="form_kamar_{{$kamar->id}}" method="post">
												@csrf
												<input type="hidden" name="id_kamar" value="{{$kamar->id}}">

												<select name="status_kamar" id="status_kamar_{{$kamar->id}}" data-id="{{$kamar->id}}" class="form-control select-status" >
													@foreach(config('custom.status_kamar') as $key => $val)
														<option value="{{$key}}" {{$key == $kamar->status ? 'selected' : ''}}>{{$val}}</option>
													@endforeach
												</select>
											</form> --}}
										</span>

									</div>
								</td>

								<td align="center" style="white-space: nowrap; text-align:right;">
                                    @if (count($kamar->gambarClean)>0)
									<button type="button" class="btn btn-light" data-toggle="modal" data-target="#modal_bukti_clean_{{$kamar->id}}" title="Lihat Gambar"><i class="fas fa-image"></i></button>
									@endif
                                    @if (count($kamar->data_housekeep)>0)
                                    <button type="button" class="btn btn-light" data-toggle="modal" data-target="#log_housekeep" onclick="logKeep({{$kamar->id}})"><i class="fas fa-info"></i></button>
                                    @endif

                                    @if (in_array(\Auth::user()->role, [50]))
                                        @if (in_array(@dataHotel()->opsi_change_kamar, [0,2]))
									        <button type="button" class="btn btn-primary ubah-status" data-toggle="modal" data-target="#modal_ubah_status" data-keterangan="{{ $kamar->keterangan }}" data-id="{{$kamar->id}}" data-status_kamar="{{$kamar->status}}" data-nomor_kamar="{{ $kamar->no_kamar }}" data-tanggal_deadline="{{ $kamar->tanggal_deadline ?? getSystemDate() }}" title="Edit Status"><i class="icon-pencil7"></i></button>
                                        @endif
                                    @else
									    <button type="button" class="btn btn-primary ubah-status" data-toggle="modal" data-target="#modal_ubah_status" data-keterangan="{{ $kamar->keterangan }}" data-id="{{$kamar->id}}" data-status_kamar="{{$kamar->status}}" data-nomor_kamar="{{ $kamar->no_kamar }}" data-tanggal_deadline="{{ $kamar->tanggal_deadline ?? getSystemDate() }}" title="Edit Status"><i class="icon-pencil7"></i></button>
                                    @endif

								</td>
							</tr>
                            {{-- Modal Lihat Gambar --}}
                                <div id="modal_bukti_clean_{{$kamar->id}}" class="modal fade" tabindex="-1">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header text-default font-weight-bold bg-light">
                                                <h5 class="modal-title">Room Proof Image</h5>
                                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                            </div>

                                            <div class="modal-body">
                                                @if (!$kamar->gambarClean->isEmpty())
                                                    <div class="card-img-to-modal col-lg-12" id="card-kamar-id-{{$kamar->id}}">
                                                        <div class="row">
                                                            @foreach ($kamar->gambarClean as $gambar)
                                                                <div class="card-img-actions col-lg-3 my-2">
                                                                    <img class="card-img-top img-fluid" src="{{ asset($gambar->url_file) }}" alt="">
                                                                    <div class="card-img-actions-overlay card-img-top">
                                                                        <a href="{{ $gambar->url_file }}" class="btn btn-outline bg-white text-white border-white border-2" data-popup="lightbox">
                                                                            Preview
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                @else
                                                    <div class="col-lg-12 text-center">There is no report from Housekeeping!</div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {{-- /Modal Lihat Gambar --}}

						@endif
						@endif
					@endforeach



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

					@foreach ($kamars as $kamar)
						@if (in_array($kamar->status,['OS','OOO']))
							@if (($kamar->tanggal_deadline != null) && ($kamar->tanggal_deadline <= $systemdate))
								@continue
							@endif
						@endif

							@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">
										{{$kamar->no_kamar}}
										{{-- @if (!$kamar->gambarClean->isEmpty())
											@foreach ($kamar->gambarClean as $gambar)
												<a href="{{ $gambar->url_file }}" class="ml-1" data-popup="lightbox"><i class="fas fa-search-plus"></i></a>
											@endforeach
										@endif --}}
									</div>
								</td>
								<td>
								@if(count($kamar->jenisKamars))
									@foreach($kamar->jenisKamars as $jenis_kamar)
									-{{$jenis_kamar->nama}} <br>
									@endforeach
								@else
								-
								@endif
								</td>
								<td>
									<div class="datatable-column-status-kamar">
										<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

											{{-- <form action="{{route('status-kamar.updatekamar')}}" id="form_kamar_{{$kamar->id}}" method="post">
												@csrf
												<input type="hidden" name="id_kamar" value="{{$kamar->id}}">

												<select name="status_kamar" id="status_kamar_{{$kamar->id}}" data-id="{{$kamar->id}}" class="form-control select-status" >
													@foreach(config('custom.status_kamar') as $key => $val)
														<option value="{{$key}}" {{$key == $kamar->status ? 'selected' : ''}}>{{$val}}</option>
													@endforeach
												</select>
											</form> --}}
										</span>

									</div>
								</td>

								<td align="center" style="white-space: nowrap;text-align:right;">
                                    @if (count($kamar->gambarClean)>0)
									<button type="button" class="btn btn-light" data-toggle="modal" data-target="#modal_bukti_clean_{{$kamar->id}}" title="Lihat Gambar"><i class="fas fa-image"></i></button>
                                    @endif
                                    @if (count($kamar->data_housekeep)>0)
                                    <button type="button" class="btn btn-light" data-toggle="modal" data-target="#log_housekeep" onclick="logKeep({{$kamar->id}})"><i class="fas fa-info"></i></button>
                                    @endif
                                        @if (in_array(\Auth::user()->role, [50]))
                                        @if (in_array(@dataHotel()->opsi_change_kamar, [0,2]))
                                        <button type="button" class="btn btn-primary ubah-status" data-toggle="modal" data-target="#modal_ubah_status"
                                            data-keterangan="{{ $kamar->keterangan }}" data-id="{{$kamar->id}}" data-status_kamar="{{$kamar->status}}"
                                            data-nomor_kamar="{{ $kamar->no_kamar }}" data-tanggal_deadline="{{ $kamar->tanggal_deadline ?? getSystemDate() }}"
                                            title="Edit Status"><i class="icon-pencil7"></i></button>
                                        @endif
                                        @else
                                        <button type="button" class="btn btn-primary ubah-status" data-toggle="modal" data-target="#modal_ubah_status"
                                            data-keterangan="{{ $kamar->keterangan }}" data-id="{{$kamar->id}}" data-status_kamar="{{$kamar->status}}"
                                            data-nomor_kamar="{{ $kamar->no_kamar }}" data-tanggal_deadline="{{ $kamar->tanggal_deadline ?? getSystemDate() }}"
                                            title="Edit Status"><i class="icon-pencil7"></i></button>
                                        @endif
								</td>
							</tr>
                                {{-- Modal Lihat Gambar --}}
                                <div id="modal_bukti_clean_{{$kamar->id}}" class="modal fade" tabindex="-1">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header text-default font-weight-bold bg-light">
                                                <h5 class="modal-title">Room Proof Image</h5>
                                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                            </div>

                                            <div class="modal-body">
                                                @if (!$kamar->gambarClean->isEmpty())
                                                    <div class="card-img-to-modal col-lg-12" id="card-kamar-id-{{$kamar->id}}">
                                                        <div class="row">
                                                            @foreach ($kamar->gambarClean as $gambar)
                                                                <div class="card-img-actions col-lg-3 my-2">
                                                                    <img class="card-img-top img-fluid" src="{{ asset($gambar->url_file) }}" alt="">
                                                                    <div class="card-img-actions-overlay card-img-top">
                                                                        <a href="{{ $gambar->url_file }}" class="btn btn-outline bg-white text-white border-white border-2" data-popup="lightbox">
                                                                            Preview
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                @else
                                                    <div class="col-lg-12 text-center">There is no report from Housekeeping!</div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- /Modal Lihat Gambar --}}
					@endforeach

					@endif

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

</div>

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

{{-- Modal Info Kamar --}}
	<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>
{{-- /Modal Info Kamar --}}

{{-- Modal Ubah Status --}}
<div id="modal_ubah_status" class="modal fade" tabindex="-1">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header bg-primary">
				<h6 class="modal-title">Edit Room Status No. <span class="nomor_kamar"></span></h6>
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>

			<form action="{{route('status-kamar.updatekamar')}}" id="" method="post">
				@csrf
				<div class="modal-body text-left text-default font-weight-normal">
					{{-- <div class="form-group row">

						<div class="col-lg-4">Status kamar saat ini:</div>

						<div class="col-lg-8 select-status-kamar">

						</div>
					</div> --}}

					<div class="form-group row">
						<input type="hidden" name="id_kamar" class="id-kamar" value="">

						<label class="col-form-label col-lg-4">Room Status:</label>

						<div class="col-lg-8">
							<select id="change_status_kamar" name="status_kamar" class="form-control select-status" onchange='changeStatus(this.value, "{{getSystemDate()}}", "")'>
                                @if(\Auth::user()->role != 50)
                                    <option value="">-- Pilih Status Kamar --</option>
                                    @foreach(config('custom.status_kamar') as $key => $val)
                                        <option value="{{$key}}">{{$val}}</option>
                                    @endforeach
                                @endif
							</select>
						</div>
					</div>

                    <div id="keterangan_outoforder" style="display: none">
                        <div class="form-group row">
                            <label class="col-form-label col-lg-4">Keterangan Out Of Order</label>
                            <div class="col-lg-8">
                                <textarea class="form-control" name="keterangan" id="keterangan" cols="30" rows="5"></textarea>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-form-label col-lg-4">Tanggal Deadline</label>
                            <div class="col-lg-8">
                                <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" id="tanggal_deadline" value="" type="text" class="form-control daterange-single">
                                </div>
                            </div>
                        </div>
                    </div>
				</div>

				<div class="modal-footer">
					<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
					<button type="submit" class="btn bg-primary">Save</button>
				</div>
			</form>
		</div>
	</div>
</div>
{{-- /Modal Ubah Status --}}

<!-- Log file modal -->
    <div id="log_housekeep" class="modal fade">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header bg-warning" align="center">
                    <h6 class="modal-title"><i class="icon-history mr-1"></i>Log Housekeep Report<span class="guest-name"></span></h6>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <div class="modal-body">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Date</th>
                                <th>Note</th>
                            </tr>
                        </thead>

                        <tbody id="tbody_log_file">
                        </tbody>
                    </table>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
<!-- Log file modal -->

@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>
    let custom_status_kamar = {!! json_encode(config('custom.status_kamar')) !!};
	// //JS untuk mensubmit penggantioan status kamar
	// $('.select-status').on('change', function(){
	// 	let id_form = $(this).attr('data-id');
	// 	$('#form_kamar_'+id_form).submit();
	// });

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

	//JS untuk mensubmit penggantian status kamar
	$('.ubah-status').on('click', function(){
		let id = $(this).data('id');
		let status_kamar = $(this).data('status_kamar')
		let no_kamar = $(this).data('nomor_kamar')
        let keterangan = $(this).data('keterangan')
        let tanggal_deadline = $(this).data('tanggal_deadline')


        @if(\Auth::user()->role == 50)
            var html = '';
            if(status_kamar == 'OD' || status_kamar == 'OC'){
                html +=`
                    @foreach(config('custom.status_kamar') as $key => $val)
                        @if (!in_array($key, ['OD', 'OC']))
                            @continue
                        @endif
                            <option value="{{$key}}">{{$val}}</option>
                    @endforeach
                `;
            }else if(status_kamar == 'VD' || status_kamar == 'VC'){
            html +=`
                    @foreach(config('custom.status_kamar') as $key => $val)
                        @if (!in_array($key, ['VD', 'VC', 'OS', 'OOO']))
                            @continue
                        @endif
                            <option value="{{$key}}">{{$val}}</option>
                    @endforeach
                `;
            }else{
                html +=`
                    @foreach(config('custom.status_kamar') as $key => $val)
                        <option value="{{$key}}">{{$val}}</option>
                    @endforeach
                `;
            }
            $('#change_status_kamar').html(html)
        @else
            var html =`
                    @foreach(config('custom.status_kamar') as $key => $val)
                        @if (in_array($key, ['OS', 'OOO']))
                            <option value="{{$key}}" ${((status_kamar == 'OC' || status_kamar == 'OD') ? "disabled" : null)}>{{$val}}</option>
                        @else
                            <option value="{{$key}}">{{$val}}</option>
                        @endif
                    @endforeach
                `;
            $('#change_status_kamar').html(html)
        @endif
		$('.select-status').val(status_kamar).trigger('change').select2()
		$('.nomor_kamar').text(no_kamar)
		$('.id-kamar').val(id)

        changeStatus(status_kamar, tanggal_deadline, keterangan)
	});

    // JS ketika status kamar di ubah
    function changeStatus(status_kamar, tanggal_deadline, keterangan) {
        if (status_kamar == 'OOO' || status_kamar == 'OS') {
            $('#keterangan_outoforder').show()

            $('#keterangan').val(keterangan)

            $('#tanggal_deadline').daterangepicker({
                singleDatePicker : true,
                startDate : tanggal_deadline,
                locale: {
                    format: 'YYYY-MM-DD'
                }
            });
        }else{
            $('#keterangan_outoforder').hide()
            $('#keterangan').val('')

            $('#tanggal_deadline').val('')
        }
    }


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


	// 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: 150,
	                targets: [ 5 ]
	            }],
	            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);
		}

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

        // function log file
        function logKeep(kamar_id) {
            // ajax get data reservation deposit info
            $.ajax({
                type: "GET",
                data:{
                    "kamar_id":kamar_id
                },
                url: "{{url('log-housekeep')}}",
                success: function (data) {
                    // console.log(data)

                    // Define variable
                    let html_log = '';

                    // Check if data is empty
                    if (data.length == 0) {
                        html_log += `<tr>
                                        <td colspan="4" class="text-center">Tidak ada data!</td>
                                    </tr>`
                    }else{
                        // Define varibale no with value 1
                        let no = 1

                        // foreach data logs
                        $.each(data, function(key, val){
                            html_log += `<tr>
                                            <td style="vertical-align: top">${no}</td>
                                            <td style="vertical-align: top">${val.date}</td>
                                            <td style="vertical-align: top">${val.note}</td>
                                        </tr>`
                            no++
                        });
                    }

                    // Insert html log to table
                    $('#tbody_log_file').html(html_log);
                }
            });
        }

</script>
@endsection