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

@section('title', 'Housekeeping')

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

@section('content')

	<!-- Page header -->
	<div class="page-header {{\Auth::user()->role != 10 ? 'page-header-light' : ''}}">
		<div class="page-header-content header-elements-md-inline">
			<div class="page-title d-flex">
				<h4>  <span class="font-weight-semibold">Cleaning Service</span> - Proof & Report</h4>
				<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
			</div>

			{{-- <div>
				<a href="#"
				   id="btn-extrabed"
				   class="btn btn-success"
				   data-toggle="modal"
				   data-target="#modal_extra_bed_position"
				   data-date="{{ getSystemDate() }}"
				   date-indo="{{ tanggalIndo(getSystemDate()) }}"
				>
					<i class="fas fa-search"></i>&nbsp;Extra Bed Position
				</a>
			</div> --}}
		</div>
	</div>
	<!-- /page header -->

	<!-- Content area -->
	<div class="content">

		<!-- Hover rows -->
		<div class="card">

			<table class="table datatable-basic table-hover">
				<thead>
					<tr>
						<th>#</th>
                        @if(\Auth::user()->role == 1)
						<th>Hotel</th>
						@endif
						<th>Room Number</th>
						<th>Room Type</th>
						<th>Status</th>
						<th>Date Status</th>
						<th class="text-center">Report</th>
					</tr>
				</thead>
				<tbody>
                @php
                $no=1;
                @endphp

                @foreach($kamars as $kamar)
                    <tr>
                        <td>{{$no}}</td>
                        @if(\Auth::user()->role == 1)
						<td>{{$kamar->hotel->nama}}</td>
						@endif
                        <td>{{$kamar->no_kamar}}</td>
                        <td>
                        	@if(count($kamar->jenisKamars))
								@foreach($kamar->jenisKamars as $jenis_kamar)
								-{{$jenis_kamar->nama}} <br>
								@endforeach
							@endif
                        </td>
                        <td>{{ array_key_exists( $kamar->status, config('custom.status_kamar') ) ? config('custom.status_kamar')[$kamar->status] : '-'}}</td>
                        <td>{{dateFormat(@$kamar->date_system_house_keeping, "d-m-Y")}}</td>
                        <td style="text-align:center">
                            <button class="btn btn-danger btn-clean"
                                    title="Upload Image"
                                    {{-- data-toggle="modal"
                                    data-target="#modal_bukti_clean" --}}
                                    data-hotel="{{$kamar->hotel->nama}}"
                                    data-nokamar="{{$kamar->no_kamar}}"
                                    data-id="{{$kamar->id}}"
                            >
                                <i class="fas fa-exclamation"></i>
                            </button>
                        </td>
                    </tr>
                    @php
                    $no++;
                    @endphp
                @endforeach
				</tbody>
			</table>

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

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

	<!-- Modal bukti clean -->
	<div id="modal_bukti_clean" class="modal fade" tabindex="-1">
        <form id="form_bukti_clean" action="{{route('update-clean')}}" method="post" enctype="multipart/form-data">
            @csrf
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header bg-danger">
                        <span id="title-modal" class="font-weight-bold"></span>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="kamar_id" id="kamar_id">
						<div class="form-group row">
                            <label class="col-lg-3">Kategori</label>
                            <div class="col-lg-9">
                                <select name="kategori" id="kategori" class="form-control" type="">
									<option value="normal" selected>Normal</option>
									<option value="rusak">Rusak</option>
								</select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-3">Note</label>
                            <div class="col-lg-9">
                                <textarea name="note" id="note" class="form-control" cols="20" rows="3"></textarea>
                            </div>
                        </div>
                        <div id="div-gambars" class="card-img-to-modal col-lg-12 row">

                        </div>
                        <legend></legend>
                        <div class="form-group row">
    						<div class="col-lg-11">
    							<input type="file" name="file_lampiran[]" id="lampiran1" class="form-control">
    						</div>
    						<div class="col-lg-1">
    							<button type="button"
    											class="btn btn-sm btn-success"
    											id="add_new_lampiran"
    							>
    								<i class="icon-add"></i>
    							</button>
    						</div>
    					</div>
    					<div id="another_file">

    					</div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-success btn-block submit-report" disabled>Submit Report</button>
                    </div>
                </div>
            </div>
        </form>
	</div>
	<!-- /default modal -->

	<!-- VIEW DETAIL EXTRABED -->
	<!-- Form modal -->
	<div id="modal_extra_bed_position" class="modal fade">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header bg-success" align="center">
					<h6 class="modal-title"><i class="fas fa-user mr-1"></i> <b>Extra Bed Position <span id="extrabed_position_date"></span></b></h6>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<div class="modal-body">
					<table class="table table-bordered table-stripped">
						<thead>
							<tr>
								<th style="width: 15%">Room Number</th>
								<th>Name</th>
							</tr>
						</thead>
						<tbody id="table_extrabed_position">

						</tbody>
					</table>
				</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/buttons/ladda.min.js')}}"></script>
    <script src="{{asset('global_assets/js/plugins/media/fancybox.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/forms/styling/uniform.min.js')}}"></script>

	<!-- JS Date Picker -->
	<!-- <script src="{{asset('/')}}/global_assets/js/plugins/ui/moment/moment.min.js"></script>
	<script src="{{asset('/')}}/global_assets/js/plugins/pickers/daterangepicker.js"></script>
	<script src="{{asset('/')}}/global_assets/js/plugins/pickers/anytime.min.js"></script>
	<script src="{{asset('/')}}/global_assets/js/plugins/pickers/pickadate/picker.js"></script>
	<script src="{{asset('/')}}/global_assets/js/plugins/pickers/pickadate/picker.date.js"></script>
	<script src="{{asset('/')}}/global_assets/js/plugins/pickers/pickadate/picker.time.js"></script>
	<script src="{{asset('/')}}/global_assets/js/plugins/pickers/pickadate/legacy.js"></script> -->
	<script src="{{asset('/')}}/global_assets/js/plugins/notifications/jgrowl.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/gallery_library.js')}}"></script>
	<script>

	//Extrabed
	$('#btn-extrabed').on('click', function(){
		let tanggal = $(this).attr('data-date');
		let tanggal_text = $(this).attr('date-indo');

		$('#extrabed_position_date').html(', '+tanggal_text);
		$('#table_extrabed_position').html('');
		$.ajax({
			type: 'GET',
			url: "{{ url('extrabed-position') }}/"+tanggal,
			success: function(data){
				// console.log(data);
				let html = "";
				$.each(data, function(idx, booking){
					if(booking.booking_details){
						// console.log(booking);
						$.each(booking.booking_details, function(idx_detail, booking_detail){
							html += `<tr>
										<td style="text-align: center">${booking_detail.nomor_kamar}</td>
										<td>${booking.nama}</td>
									</tr>`;
						});
					}
				});

				$('#table_extrabed_position').html(html);
			}
		});
	});

	// Ketika belum memilih gambar, maka disabled tombol submit
	$('[name="file_lampiran[]"]').on('change', function(){
        let value = $(this).val();
		if (value != '') {
			$('.submit-report').attr('disabled', false)
		} else {
			$('.submit-report').attr('disabled', true)
		}
	});

    $('.btn-clean').on('click', function(){
        let kamar_id = $(this).data('id');
        let hotel = $(this).data('hotel');
        let no_kamar = $(this).data('nokamar');

        $('#title-modal').html(hotel+' | '+no_kamar);
        $('#kamar_id').val(kamar_id);
        $("#div-gambars").html(null);
        $('#note').html(null)

        $.ajax({
            type: "get",
            url: "{{url('get-gambar-hk-report')}}",
            data: {
                kamar_id:kamar_id
            },
            dataType: "json",
            success: function (response) {
                var pics = response.pics
                var datas = response.housekeep_datas
                if (datas) {
                    $('#note').html(datas.note)
                }

                if (pics.length > 0) {
                    no_file = pics.length;
                    // var this_html = "";
                    $.each(pics, function (i, pic) {
                         var html = `
                            <div class="card-img-actions col-lg-3 my-2">
                                <img id="frame${i}" class="card-img-top img-fluid" src="" alt="">
                                <div class="card-img-actions-overlay card-img-top">
                                    <a href="${pic.url_file}" class="btn btn-outline bg-white text-white border-white border-2" data-popup="lightbox">
                                        Preview
                                    </a>
                                </div>
                            </div>
                        `
                        $("#div-gambars").append(html);
                        $('#frame'+i).attr('src', pic.url_file ?? "{{asset('global_assets/images/placeholders/placeholder.jpg')}}" );
                    });
                }else{
                    $("#div-gambars").html(null);
                }

                $('#modal_bukti_clean').modal('show')
            }
        });
    });

    $('#modal_bukti_clean').on('hidden.bs.modal', function () {
        $('#form_bukti_clean')[0].reset();
        $('#another_file').html('');
        $('.submit-report').attr('disabled', true);
    });

    //Hapus Input File
    function removeInputFile(id_input){
        $("#file"+id_input).remove();
    }

    //Tambah input file baru
    var panjang = $('[name="file_lampiran[]"]').length;
    var no_file = parseInt(panjang);

    $("#add_new_lampiran").on('click', function(){
        no_file++;
        var html = "";
        html += '<div class="form-group row" id="file'+no_file+'">'
        html += '<div class="col-lg-11">'
        html += '<input type="file" name="file_lampiran[]" id="lampiran'+no_file+'" class="form-control">'
        html += '</div>'
        html += '<div class="col-lg-1">'
        html += '<button onclick="removeInputFile('+no_file+')" type="button" class="btn btn-danger btn-sm"><i class="icon-bin"></i></button>'
        html += '</div>'
        html += '</div>'

        $("#another_file").append(html);
    });

		//modal delete
		$(document).on("click", ".delbutton", function () {
		     var url = $(this).data('uri');
		     $("#delform").attr("action", url);
		});

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


		    //
		    // Return objects assigned to module
		    //

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


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

		document.addEventListener('DOMContentLoaded', function() {
		    DatatableBasic.init();
		});
	</script>
	<script type="text/javascript">
		$( document ).ready(function() {
	        // 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

		});
	</script>
@endsection