@extends('layouts.admin')
@section('content')
    
    <div class="pms-container">
        <div class="row">
            <div class="col s12">
                <h4 class="black-text">
                    <i class="small material-icons left red-text">brightness_1</i>Dashboard
                </h4>
            </div>
        </div>
        <div class="row">
            <a class="col s6 m3 pms-dashboard-links" href="{{route('admin.reservations.create')}}">
                <div class="center-align grey-text white pb-2 pms-default-div-hover">
                    <i class="dashboard-icon material-icons blue-text center-align">settings</i>
                    <span>Add New Reservation</span>
                </div>
            </a>
            <a class="col s6 m3 pms-dashboard-links" href="{{route('admin.reservations.calendar')}}">
                <div class="center-align grey-text white pms-default-div-hover pb-2">
                    <i class="dashboard-icon material-icons blue-text center-align">airline_seat_individual_suite</i>
                    <span>Rooms View</span>
                </div>
            </a>
            <a class="col s6 m3 pms-dashboard-links" href="{{route('admin.checkin')}}">
                <div class="center-align grey-text white pb-2 pms-default-div-hover">
                    <i class="dashboard-icon material-icons blue-text center-align">location_on</i>
                    <span>Check In</span>
                </div>
            </a>
            <a class="col s6 m3 pms-dashboard-links" href="{{route('admin.checkout')}}">
                <div class="center-align grey-text white pb-2 pms-default-div-hover">
                    <i class="dashboard-icon material-icons blue-text center-align">location_off</i>
                    <span>Check Out</span>
                </div>
            </a>
            <a class="col s6 m3 pms-dashboard-links" href="{{route('admin.arrivals.reports')}}">
                <div class="center-align grey-text white pb-2 pms-default-div-hover">
                    <i class="dashboard-icon material-icons blue-text center-align">date_range</i>
                    <span>Arrival Report</span>
                </div>
            </a>
            <a class="col s6 m3 pms-dashboard-links" href="#">
                <div class="center-align grey-text white pb-2 pms-default-div-hover">
                    <i class="dashboard-icon material-icons blue-text center-align">location_off</i>
                    <span>In-House Report</span>
                </div>
            </a>
            <a class="col s6 m3 pms-dashboard-links" href="{{route('admin.departure.reports')}}">
                <div class="center-align grey-text white pb-2 pms-default-div-hover">
                    <i class="dashboard-icon material-icons blue-text center-align">data_exploration</i>
                    <span>Departure Report</span>
                </div>
            </a>
        </div>
        <!-- <div class="row">
            <div class="col xs12 s12 m6 l6">
                <div class="panel white">
                    <h6 class="heading">Today's Arrival <span class="right">{{ \Carbon\Carbon::now()->format('jS F') }}</span></h6>
                    <table class="table">
                        <thead class="theme-bg white-text">
                            <tr>
                                <th>Booking No.</th>
                                <th>Booking Name</th>
                                <th>Telephone</th>
                                <th>Check In</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($todaysArrival as $i => $arrival)
                                <tr>
                                    <td>{{$arrival->BookingId}}</td>
                                    <td>{{$arrival->BookerFirstName. " ".$arrival->BookerLastName}}</td>
                                    <td>{{$arrival->BookerTelephone}}</td>
                                    <td><button data-id="{{$arrival->BookingId}}" data-status="Check In" class="btn red btn-small waves-effect waves-light changeStatus">Check In</button></td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col xs12 s12 m6 l6">
                <div class="panel white">
                    <h6 class="heading">Today's Departure <span class="right">{{ \Carbon\Carbon::now()->format('jS F') }}</span></h6>
                    <table class="table">
                        <thead class="theme-bg white-text">
                        <tr>
                            <th>Booking No.</th>
                            <th>Booking Name</th>
                            <th>Telephone</th>
                            <th>Check Out</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($todaysDeparture as $i => $departure)
                            <tr>
                                <td>{{$departure->BookingId}}</td>
                                <td>{{$departure->BookerFirstName. " ".$departure->BookerLastName}}</td>
                                <td>{{$departure->BookerTelephone}}</td>
                                <td><button data-id="{{$departure->BookingId}}" data-status="Check Out" class="btn red btn-small waves-effect waves-light changeStatus">Check Out</button></td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div> -->
        <div class="row">
            <div class="col xs12 s12 m12 l12">
                <div class="panel white">
                    <h6 class="heading">Booking Logs</h6>
                    <input type="hidden" value="10" id="skipRecords">
                    <table class="table" id="logs">
                        <thead class="theme-bg white-text">
                            <tr>
                                <th>Status</th>
                                <th>Detail</th>
                            </tr>
                        </thead>
                        <tbody>
                           @foreach ($bookingLogFiltered as $i => $log)
                               <tr>
                                   <td class="status-col"><span class="{{$log['color']}} status-label">{{$log['status']}}</span></td>
                                   <td>{!! $log['msg'] !!} <span class="log-time">{{$log['time']}}</span></td>
                               </tr>
                           @endforeach
                        </tbody>
                    </table>
                    @component('admin.includes.loader')
                    @endcomponent
                </div>
            </div>
        </div>
    </div>

@endsection

@section('js')
    <script>
        var hasData = true;
        $(document).ready(function(){
            $('.changeStatus').click(function(e){
                var btn = $(this);
                $('#loader').addClass('active');
                var bookingId = btn.data('id');
                var status = btn.attr('data-status');
                $.ajax({
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-Token': $('meta[name=csrf-token]').attr('content')
                    },
                    url: '/admin/reservations/'+bookingId+'/update-booking-status',
                    type: 'post',
                    dataType: 'json',
                    data: JSON.stringify({
                        bookingId: bookingId,
                        status : status,
                        _method:'PUT'
                    }),
                    error: function() {
                        M.toast({
                            html: "Something went wrong. Please refresh and try again.",
                            displayLength:1000
                        });
                    },
                    success: function(res) {
                        if(res.success == true){
                            M.toast({
                                html:res.msg,
                                displayLength:1000
                            });
                            btn.parent().parent().remove();
                        } else {
                            M.toast({
                                html:res.msg,
                                displayLength:5000
                            });
                        }
                    },
                    complete: function(){
                        $('#loader').removeClass('active');
                    }
                });
            });

            $(window).scroll(function() {

                    if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
                        loadMoreData();
                    }

            });
        });

        function loadMoreData(){
            if(hasData == false) {
                return
            }
            var records = $("#skipRecords").val();
            $('#loader').addClass('active');
            $.ajax({
                url: '{{route('admin.dashboard.logs')}}',
                type: "get",
                dataType: 'json',
                data: {
                    'skipRecords' : records,
                },
                error: function() {
                    M.toast({
                        html: "Something went wrong. Please refresh and try again.",
                        displayLength:1000
                    });
                },
                success: function(data) {
                    if(data[0].original != undefined){
                        hasData = false;

                    } else {
                        $.each(data[0], function(key, val) {
                            var tr = $("<tr />");
                            tr.append(
                                '<td class="status-col"><span class="'+ val.color +' status-label">'+ val.status +'</span></td>'+
                                '<td>'+ val.msg +'<span class="log-time">'+ val.time +'</span></td>'
                                /*'<td class="center-align">' +
                                    '<a href="#" class="btn-floating btn-small waves-effect waves-light" >' +
                                        '<i class="material-icons">visibility</i>' +
                                    '</a>' +
                                '</td>'*/
                            );
                            $("#logs tbody").append(tr)
                        });
                        records = parseInt(records) + 10;
                        $("#skipRecords").val(records);
                    }

                },
                complete: function(){
                    $('#loader').removeClass('active');
                }
            });
        }
    </script>
@endsection