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

@section('title', 'Guest Lost & Found')

@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">Guest Lost & Found -</span> List</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">
                    <a  data-toggle="modal"
                        data-target="#modal_form_item">
                        <button type="button" class="btn btn-success rounded-round">
                            <i class="icon-add mr-2"></i> Add
                        </button>
                    </a>
                </div>

				<table id="tabel_kamar" class="table datatable-basic table-hover">
					<thead>
						<tr>
							<th class="d-none"></th>
							<th style="width:15%">Room Number</th>
							<th style="width:25%">Note</th>
							<th style="width:15%">Date</th>
							<th style="width:15%">Time</th>
							<th style="width:15%">Status</th>
							<th style="width:10%" class="text-center">Actions</th>
						</tr>
					</thead>
					<tbody>

                        @if (count($datas) > 0)
                            @foreach ($datas as $item)
                                @php
                                    if ($item->status == 1) {
                                        $color = 'text-danger';
                                    }elseif ($item->status == 2) {
                                        $color = 'text-success';
                                    }else{
                                        $color = 'text-warning';
                                    }
                                @endphp
                                <tr class="{{$color}}">
                                    <td class="d-none"></td>
                                    <td style="font-weight: bold;">{{$item->nomor_kamar}}</td>
                                    <td style="">{{$item->note}}</td>
                                    <td style="font-weight: bold;">{{dateFormat($item->date,'d-m-Y')}}</td>
                                    <td style="font-weight: bold;">{{dateFormat($item->losttime,'H:i:s')}}</td>
                                    <td style="font-weight: bold;"><span class="{{$item->status == 1 ? 'text-danger' : ($item->status == 2 ? 'text-success' : 'text-warning') }}" style="font-weight: bold">{{$item->status?config('custom.lostfound_status')[$item->status] : ''}}</span></td>
                                    <td style="text-align: center">
                                        <div class="row">
                                            {{-- <form action="{{route('lost_found.change_status')}}" method="POST">
                                                @csrf
                                                @method('post') --}}
                                                <input type="hidden" name="id" value="{{$item->id}}">
                                                <button type="button"
                                                        class="btn btn-info btn-icon"
                                                        title="Status"
                                                        onclick="setModalStatus({{$item->id}}, {{$item->status}})"
                                                        data-toggle="modal"
                                                        data-target="#modal_status"
                                                >
                                                    <i class="fas fa-pencil-alt"></i>
                                                </button>
                                            {{-- </form> --}}
                                            <a class="delbutton ml-1"
                                                data-toggle="modal"
                                                data-target="#modal_theme_danger"
                                                data-uri="guest-lost-found/{{$item->id}}"
                                            >
                                                <button type="button"
                                                        class="btn btn-danger btn-icon"
                                                        title="Delete"
                                                >
                                                    <i class="icon-x"></i>
                                                </button>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        @endif

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

</div>

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

<!-- Modal -->

<!-- Form modal -->
    <div id="modal_form_item" class="modal fade">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-primary" align="center">
                    <h6 class="modal-title"><i class="fas fa-user mr-1"></i>Form Guest Lost & Found</h6>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <form class="form-validate-jquery" action="{{ route('guest-lost-found.store')}}" method="post" id="myform" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="_method" id="method" value="post">
                    <div class="modal-body">
                        <legend class="text-uppercase font-size-sm font-weight-bold" id="formtitle">Add Lost & Found</legend>
                        <div class="form-group row">
                            <label class="col-form-label col-lg-3">Room Number</label>
                            <div class="col-lg-9">
                                <select name="nomor_kamar" id="nomor_kamar" class="form-control form-control-select2">
                                    @foreach ($rooms as $room)
                                        <option value="{{$room->no_kamar}}">{{$room->no_kamar}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-form-label col-lg-3">Note</label>
                            <div class="col-lg-9">
                                <textarea name="note" id="note" class="form-control"></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save <i class="icon-paperplane ml-2"></i></button>
                    </div>
                </form>

            </div>
        </div>
    </div>
<!-- /Form modal -->

<!-- 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">
                        <h3> Are you sure? You will not be able to recover this data. </h3>
                    </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 -->

<!--MODAL-->
<div id="modal_status" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-info" align="center">
                <h6 class="modal-title">Change Status</span></h6>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

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

                <input type="hidden" name="_method" id="method" value="post">
                <input type="hidden" name="id" id="status_id">
                <div class="modal-body">
                    <div class="form-group">
                        <select name="status_to" id="status_to" class="form-control form-control-select2">
                            @foreach (config('custom.lostfound_status') as $k => $item)
                            <option value="{{$k}}">{{$item}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-link"  data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-info">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!--/MODAL-->


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

    //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: [ 0 ]
	            }],
	            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

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

    function setModalStatus(id, status){
        $('#status_id').val(id)
        $('#status_to').val(status).trigger('change').select2()
    }
</script>
@endsection