@extends('layouts.admin')
@section('title')
Departure
@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>Departure
            </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</th>
            <th>CheckOut
                <div class="pms-sorting">
                    <a href="{{route('admin.checkout', ['order' => 'ASC'])}}">
                        <i class="small material-icons white-text">arrow_drop_up</i>
                    </a>
                    <a href="{{route('admin.checkout', ['order' => 'DESC'])}}">
                        <i class="small material-icons white-text">arrow_drop_down</i>
                    </a>
                </div>
            </th>
            <th>Status</th>
            <th>Action</th>
        </tr>
        </thead>
        <tbody>
        @foreach($bookings as $i => $booking)
        <tr>
            {{--<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>{{$booking->bookingStatus->BookingStatus}}</td>
            <td>
                <button data-id="{{$booking->BookingId}}" data-status="Checked Out" class="btn cyan darken-3 btn-small waves-effect waves-light changeStatus">Check Out</button>
            </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>
    $(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+'/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
                    });
                },
                success: function(res) {
                    M.toast({
                        html:res.msg,
                        displayLength:1000
                    });
                    if(res.initialStatus ==  "Checked Out"){
                        btn.parent().parent().remove();
                    }
                },
                complete: function(){
                    $('#loader').removeClass('active');
                }
            });
        });
    });
</script>
@endsection

{{--

@section('js')
<script>
    $(document).ready(function(){
        $('.status').change(function(e){
            var checked = $(e.target).val();
            var id = $(e.target).attr('data-id');

            changeStatus(checked,id);
        });

        $('#per-page').change(function(){
            $('#per-page-form').submit();
        });
    });

    /**
     * Toggle roomtype status.
     *
     * @param {*} checked
     * @param {*} id
     */
    function changeStatus(checked,id)
    {

        $('#loader').addClass('active');

        fetch('/admin/users/'+id+'/status',{
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-Token': $('meta[name=csrf-token]').attr('content')
            },
            body: JSON.stringify({
                status: checked
            })
        })
            .then(function(res){
                return res.json()
            })
            .then(function(res){
                $('#loader').removeClass('active');
                if (res.status) {
                    M.toast({
                        html:res.msg,
                        displayLength:1000
                    });
                } else {
                    M.toast({
                        html:'Please try again',
                        displayLength:1000
                    })
                }
            })
            .catch(function(err){
                console.log(err)
            });
    }
</script>
@endsection
--}}