@extends(!in_array(\Auth::user()->role, [10, 15]) ? 'layout' : 'layoutfrontdesk')

@section('title', 'History Room Change')

@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 {{ !in_array(\Auth::user()->role, [10, 15]) ? '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">Report Room OOO</span> - Data</h4>
                <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">

        <!-- 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="date">Filter Date</label>
                                    <input type="text" name="transaction_date" id="transaction_date"
                                        class="form-control daterange-single">
                                </div>
                            </div>
                            <div class="col-lg-2">
                                <div class="form-group">
                                    <label for=""> &nbsp;</label>
                                    <button type="submit" class="btn btn-primary btn-block" formaction="">Filter</button>
                                </div>
                            </div>
                            <div class="col-lg-2">
                                <div class="form-group">
                                    <label for=""> &nbsp;</label>
                                    <a href="/history-room-change"><button type="button"
                                            class="btn btn-success btn-block">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 btn-block cetakBtn" formaction="{{url('cetak-history-room-change')}}" formtarget="_blank">
                                        <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 btn-block cetakBtn" formaction="{{url('cetak-excel-history-room-change')}}" formtarget="_blank">
                                        <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>Start Date</th>
                        <th>End Date</th>
                        <th>Reason</th>
                        <th>User</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>

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

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

    <!-- 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/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')
                : $start_date . ' - ' . $end_date,
        ) !!}
        tanggal = tanggal.split(" - ");

        $('#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: "{{ Request::fullUrl() }}",
                        type: "GET",
                    },
                    columns: [{
                            data: 'DT_RowIndex',
                            name: 'no'
                        },
                        @if (\Auth::user()->role == 1)
                            {data:null, render:function(data, type, row){
                                if (data.nomor){
                                    return data.kamar.hotel ? data.kamar.hotel.nama : '-';
                                } else {
                                    return data.hotel ? data.hotel.nama : '-';
                                }
                            }},
                        @endif
                        {data:null, render:function(data, type, row){
                            if (data.nomor){
                                return data.nomor ?? '-';
                            } else {
                                return data.booking ? data.booking.no_kamar : '-';
                            }
						}},
                        {data:null, render:function(data, type, row){
                            if (data.nomor){
                                return data.start ?? '-';
                            } else {
                                return data.start_date ?? '-';
                            }
						}},
                        {data:null, render:function(data, type, row){
                            if (data.nomor){
                                return data.end ?? '-';
                            } else {
                                return data.end_date ?? '-';
                            }
						}},
                        {data:null, render:function(data, type, row){
                            if (data.nomor){
                                return data.reason ?? '-';
                            } else {
                                return data.keterangan ?? '-';
                            }
						}},
                        {data:null, render:function(data, type, row){
                            return data.user ? data.user.nama : '-';
						}}
                    ]
                });

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

            $('.cetakBtn').click(function(){
                // Wait 10 seconds before reloading
                setTimeout(function () {
                    location.reload();
                }, 10000); // Adjust the delay if needed
			})
        });
    </script>
@endsection