@extends('layouts.main-layout')
@section('title')
    Departures
@endsection
@section('content')
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <!--begin::Post-->
    <div class="post d-flex flex-column-fluid" id="kt_post">
        <!--begin::Container-->
        <div id="kt_content_container" class="container-xxl">
            <div class="card mb-5 mb-xl-8">

                <!--begin::Header-->
                <div class="card-header border-0 pt-5">
                    <p class="alert alert-success" id="msg" style="display: none;"></p>
                    <h3 class="card-title atrgn-items-start flex-column">
                        <span class="text-center card-label fw-bolder fs-3 mb-1"> Check Out</span>

                    </h3>
                </div>
                <div class="card-body py-3 ">
          <div class="row-fluid">
            <div class="span12">
              <div class="grid simple ">
              <div class="grid-title">

                  <div class="tools">
                    <a href="javascript:;" class="collapse"></a>
                    <a href="#grid-config" data-toggle="modal" class="config"></a>
                    <a href="javascript:;" class="reload"></a>
                    <a href="javascript:;" class="remove"></a>
                  </div>
                </div>
                <div class="grid-body ">

                    <table class="table mt-10 table-row-bordered table-row-gray-100 align-middle gs-0 gy-3 " id="myTable">
                        <thead>
                        <tr class="fw-bolder text-muted ">
                            {{--<th>#</th>--}}
                            <th>Booking No</th>
                            <th>Booking Date</th>
                            <th>Guest Name</th>
                            <th>Room No</th>
                            <th>CheckIn</th>
                            <th>CheckOut

                                    <a href="{{route('admin.checkout', ['order' => 'ASC'])}}">
                                        <i class=" fa fa-arrow-down small material-icons white-text"></i>
                                    </a>
                                    <a href="{{route('admin.checkout', ['order' => 'DESC'])}}">
                                        <i class=" fa fa-arrow-up small material-icons white-text"></i>
                                    </a>

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