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

@section('title', 'Report 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 justify-between">
                <h4> <span class="font-weight-semibold">Housekeeping</span> - Proof & Report</h4>
                <a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
            </div>
            <div class="d-flex">
                {{-- <form action="{{ url('cetak-report-housekeeping?kategori='.request()->get('kategori').'&transaction_date='.request()->get('transaction_date')) }}" target="_blank" class="m-1">
                    <input type="hidden" name="tanggal" id="hTanggal">

                </form> --}}
                {{-- <form action="" id="exportFile" class="">
                    <select name="tahun" id="tahun" class="form-control">
                        @foreach (range(date('Y') - 3 , date('Y')) as $item)
                            <option value="{{$item}}" @if ($item == date('Y'))
                                selected
                            @endif>{{ $item }}</option>
                        @endforeach
                    </select>
                </form> --}}

                {{-- <button id="btn_cetak_pdf" class="btn btn-danger mx-2" onclick="submitThis('cetak-report-housekeeping')">
                    <i class="far fa-file-pdf"></i>&nbsp;&nbsp;&nbsp;Download PDF
                </button> --}}
                {{-- <a href="{{url('cetak-report-housekeeping?kategori='.request()->get('kategori').'&transaction_date='.request()->get('transaction_date'))}}" target="_blank">
                </a> --}}
                {{-- <form action="{{ route('daily-revenue-report.cetak_excel') }}" target="_blank" class="m-1">
                    <input type="hidden" name="tanggal" id="excelTanggal">
                    <button id="btn_cetak_excel" class="btn btn-success">
                        <i class="far fa-file-excel"></i>&nbsp;Download Excel
                    </button>
                </form> --}}
                {{-- <button id="btn_cetak_excel" class="btn btn-success" onclick="submitThis('cetak-report-excel-housekeeping')">
                    <i class="far fa-file-excel"></i>&nbsp;Download Excel
                </button> --}}
                {{-- <a href="{{url('cetak-report-excel-housekeeping?kategori='.request()->get('kategori').'&transaction_date='.request()->get('transaction_date'))}}" target="_blank">
                </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">
            <div class="card-body row">
                <div class="col-lg-12">
                    <form>
                        <h4>Filter Data</h4>
                        <div class="row">
                            <div class="col-lg-2">
                                <div class="form-group">
                                    <label for="kategori">Category</label>
                                    <select class="form-control" id="kategori" name="kategori">
                                        <option value="all" @if (request()->get('kategori') == 'all') selected @endif>All
                                            Category
                                        </option>
                                        <option value="rusak" @if (request()->get('kategori') == 'rusak') selected @endif>Rusak
                                        </option>
                                        <option value="normal" @if (request()->get('kategori') == 'normal') selected @endif>Normal
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-2">
                                <div class="form-group">
                                    <label for="date">Filter Date</label>
                                    <input type="text" name="transaction_date" id="transaction_date"
                                        class="form-control daterange-single">
                                </div>
                            </div>
                            <div class="col-lg-1">
                                <div class="form-group">
                                    <label for=""> &nbsp;</label>
                                    <button type="submit" class="btn btn-primary form-control" formaction="">Filter</button>
                                </div>
                            </div>
                            <div class="col-lg-1">
                                <div class="form-group">
                                    <label for=""> &nbsp;</label>
                                    <a href="/report-housekeeping"><button type="button"
                                            class="btn btn-success form-control">Reset Filter</button></a>
                                </div>
                            </div>
                            <div class="col-lg-2">&nbsp;</div>
                            <div class="col-lg-2">
                                <div class="form-group">
                                    <label for=""> &nbsp;</label>
                                    <button id="btn_cetak_pdf" class="btn btn-danger form-control" formaction="{{url('cetak-report-housekeeping')}}">
                                        <i class="far fa-file-pdf"></i>&nbsp;&nbsp;&nbsp;Download PDF
                                    </button>
                                </div>
                            </div>
                            <div class="col-lg-2">
                                <div class="form-group">
                                    <label for=""> &nbsp;</label>
                                    <button id="btn_cetak_excel" class="btn btn-success form-control" formaction="{{url('cetak-report-excel-housekeeping')}}">
                                        <i class="far fa-file-excel"></i>&nbsp;Download Excel
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <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>Category</th>
                        <th>Note</th>
                        <th>Date Status</th>
                        {{-- <th class="text-center">Actions</th> --}}
                    </tr>
                </thead>
                <tbody>

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

@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="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.12/pdfmake.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>
        let tanggal = {!! json_encode(
            \Request::get('transaction_date')
                ? \Request::get('transaction_date')
                : date('d-m-Y', strtotime(getSystemDate())) . ' - ' . date('d-m-Y'),
        ) !!}
        tanggal = tanggal.split(" - ");

        //submit filter export
        function submitThis(link){
            $("#exportFile").attr('action', link)
            $("#exportFile").submit();
        }
        //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);
        });

        $('#transaction_date').daterangepicker({
            // singleDatePicker:true,
            showDropdowns: true,
            startDate: tanggal[0] ? tanggal[0] : '{{ dateFormat(getSystemDate(), 'd-m-Y') }}',
            endDate: tanggal[1] ? tanggal[1] : moment(),
            applyClass: 'btn-primary',
            cancelClass: 'btn-light',
            locale: {
                format: 'DD/MM/YYYY'
            }
        });

        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: [4]
                    }],
                    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({
                    processing: true,
                    serverSide: true,
                    ajax: {
                        // url: "{{ url('/peserta-datatable?q=' . request()->get('q')) }}",
                        url: "{{ Request::fullUrl() }}",
                        type: "GET",
                    },
                    columns: [{
                            data: 'DT_RowIndex',
                            name: 'no'
                        },
                        @if (\Auth::user()->role == 1)
                            {
                                data: 'nama_hotel',
                                name: 'nama_hotel'
                            },
                        @endif {
                            data: 'no_kamar',
                            name: 'no_kamar'
                        },
                        {
                            data: 'kategori',
                            name: 'kategori'
                        },
                        {
                            data: 'note',
                            name: 'note'
                        },
                        {
                            data: 'date',
                            name: 'date'
                        }
                    ]
                });

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