@extends('layouts.admin')
@section('title')
    Arrivals
@endsection
@section('content')
    <div class="pms-container">
        <div class="row pms-view-header">
            <div class="col s12">
                <h4 class="black-text">
                    <i class="small material-icons left red-text">brightness_1</i>Arrivals
                </h4>
            </div>
        </div>
        @component('admin.includes.per-page')
        @endcomponent
        <table class="responsive-table centered mt-2 mb-3">
            <thead>
            <tr>
                {{--<th>#</th>--}}
                <th>Booking No.</th>
                <th>Booking Date</th>
                <th>Guest Name</th>
                <th>Room No.</th>
                <th>CheckIn
                    <div class="pms-sorting">
                        <a href="{{route('admin.checkin', ['order' => 'ASC'])}}">
                            <i class="small material-icons white-text">arrow_drop_up</i>
                        </a>
                        <a href="{{route('admin.checkin', ['order' => 'DESC'])}}">
                            <i class="small material-icons white-text">arrow_drop_down</i>
                        </a>
                    </div>
                </th>
                <th>CheckOut</th>
                <th>Status</th>
                <th>Action</th>
            </tr>
            </thead>
            <tbody>
                @foreach($bookings as $i => $booking)
                    <tr>
                        {{-- not using because rows are being deleted from ajax --}}
                        {{--<td>{{$i + $bookings->firstItem()}}</td>--}}
                        <td>{{$booking->BookingId}}</td>
                        <td>{{(new Carbon\Carbon($booking->BookingDate))->format('d-m-Y')}}</td>
                        <td>{{$booking->BookerFirstName}} {{$booking->BookerLastName}}</td>
                        @if($booking->room)
                            <td>{{$booking->room->RoomName}}</td>
                        @else
                            <td>-</td>
                        @endif
                        <td>{{(new Carbon\Carbon($booking->BeginDate))->format('d-m-Y')}}</td>
                        <td>{{(new Carbon\Carbon($booking->EndDate))->format('d-m-Y')}} </td>
                        <td class="status-col">{{$booking->bookingStatus->BookingStatus}}</td>
                        <td>
                            @if($booking->bookingStatus->BookingStatusId == 1)
                                <button data-id="{{$booking->BookingId}}" data-status="NoShow" class="btn amber darken-3 btn-small waves-effect waves-light changeStatus">No Show</button>
                                <button data-id="{{$booking->BookingId}}" data-status="Checked In" class="btn light-blue btn-small waves-effect waves-light changeStatus">Check In</button>
                            @endif
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>

        <div class="center-align mb-3">
            {{$bookings->appends(request()->query())->links('vendor.pagination.default')}}
        </div>
    </div>
    @component('admin.includes.loader')
    @endcomponent
@endsection

@section('js')
    <script>
        $('.changeStatus').click(function(e){
            var btn = $(this);
            showLoader();
            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+'/status',
                type: 'POST',
                dataType: 'json',
                data: JSON.stringify({
                    booking_status: status,
                    booking_status_type : 'update',
                    _method: 'PUT'
                }),
                error: function() {
                    M.toast({
                        html: "Something went wrong. Please refresh and try again.",
                        displayLength:1000
                    });
                    hideLoader();
                },
                success: function(res) {
                    M.toast({
                        html:res.msg,
                        displayLength:1000
                    });
                    if(res.initialStatus ==  "Checked In"){
                        btn.parent().parent().remove();
                    }
                    if(res.initialStatus ==  "NoShow"){
                        btn.parent().siblings('.status-col').text(res.initialStatus);
                        btn.siblings('.changeStatus').remove();
                        btn.remove();
                    }
                },
                complete: function(){
                    hideLoader();
                }
            });
        });
    </script>
@endsection