@extends('layouts.admin')
@section('title')
All Reservations
@endsection
@section('content')
    <div class="pms-container mb-3">
        <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>Hotel Reservations
                </h4>
            </div>
        </div>
        @component('admin.includes.per-page')
        @endcomponent
        <table class="responsive-table centered">
            <thead>
                <tr>
                    {{--<th>#</th>--}}
                    <th>Booking No</th>
                    <th>Guest Name</th>
                    <th>Booking Date
                        <div class="pms-sorting">
                            <a href="{{route('admin.reservations.index', ['order' => 'ASC'])}}">
                                <i class="small material-icons white-text">arrow_drop_up</i>
                            </a>
                            <a href="{{route('admin.reservations.index', ['order' => 'DESC'])}}">
                                <i class="small material-icons white-text">arrow_drop_down</i>
                            </a>
                        </div>
                    </th>
                    <th>Room No.</th>
                    <th>CheckIn</th>
                    <th>CheckOut</th>
                    <th>Status</th>
                    <th>Total Price</th>
                    <th>View</th>
                </tr>
            </thead>
            <tbody>
                @foreach($bookings as $booking)
                    @php
                        $bookingDetail = $booking->bookingDetails->first();
                        if ($bookingDetail) {
                            $room = $rooms->where('RoomId', $bookingDetail->RoomId)
                                ->where('RoomTypeId', $bookingDetail->RoomTypeId)
                                ->first();
                        } else {
                            $room = null;
                        }
                    @endphp
                    <tr>
                        {{--<td>{{$i + $bookings->firstItem()}}</td>--}}
                        <td>{{$booking->BookingId}}</td>
                        <td>{{$booking->BookerFirstName}} {{$booking->BookerLastName}}</td>
                        <td>{{(new Carbon\Carbon($booking->BookingDate))->format('d-m-Y')}}</td>
                        @if($room)
                            <td>{{$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 style="width:100px !important" class="status-col">
                            @if($booking->BookingStatusId == 2)
                                <button data-id="{{ $booking->BookingId }}" data-status="Confirmed" class="btn red btn-small waves-effect waves-light undo-cancel booking-status">Undo Cancel</button>
                            @elseif( $booking->BookingStatusId == 3 )
                                <span class="no-show booking-status">No Show</span>
                            @else
                                <select name="" class="status booking-status" data-id="{{ $booking->BookingId }}">
                                   @foreach($bookingStatus as $status)
                                        <option value="{{ $status->BookingStatusId }}" data-status="{{ $status->BookingStatus }}" {{ ( $booking->bookingStatus->BookingStatus == $status->BookingStatus ) ? 'selected' : ''}}> {{$status->BookingStatus}} </option>
                                   @endforeach
                                </select>
                            @endif
                        </td>
                        <td>{{round($booking->TotalPrice,2)}}</td>
                        @if(count($booking->folios) && $booking->_InitialBookingStatus != 'cancelled' && count($booking->bookingDetails))
                            @php
                                $booking->setAttribute('_RoomName', ($room ? $room->RoomName : ''));
                            @endphp
                            <td>
                                @if($room)
                                    <a href="#view-{{$booking->BookingId}}" class="modal-trigger btn-floating btn-small">
                                        <i class="material-icons">visibility</i>
                                    </a>
                                    @component('admin.reservations.includes.booking-details',[
                                        'roomId'             => $room->RoomId,
                                        'roomTypeId'         => $room->RoomTypeId,
                                        'booking'            => $booking,
                                        'cellWidth'          => 0,
                                        'displayDate'        => null,
                                        'folioChargeTypes'   => $folioChargeTypes,
                                        'folioPaymentTypes'  => $folioPaymentTypes,
                                        'folioCardTypes'     => $folioCardTypes,
                                        'isCalendar'         => false,
                                    ])
                                    @endcomponent
                                @endif
                            </td>
                        @else
                            <td>-</td>
                        @endif
                    </tr>
                @endforeach
            </tbody>
        </table>
        <div class="center-align mt-3 mb-3">
            {{$bookings->appends(request()->query())->links('vendor.pagination.default')}}
        </div>
    </div>
    @hasAccess('Create Reservation')
        <div class="fixed-action-btn">
            <a href="{{route('admin.reservations.create')}}" class="btn-floating btn-large red waves-effect waves-light">
                <i class="material-icons">add</i>
            </a>
        </div>
    @endhasAccess
    @component('admin.includes.loader')
    @endcomponent
@endsection

@section('js')
    <script src="{{asset('js/calendar.js')}}"></script>
    <script>
        $(document).ready(function(){
            $('.status').change(function(e){
                var checked = $(e.target).children('option:selected').text();
                var id = $(e.target).attr('data-id');
                var container = $(this);
                changeStatus(checked, id, container);
            });

            $('.undo-cancel').click(function(){
                var status = $(this).attr('data-status');
                var id = $(this).attr('data-id');
                var container = $(this);
                changeStatus(status, id, container);
            });
        });

        /**
         * Toggle roomtype status.
         *
         * @param {*} checked
         * @param {*} id
         * @param container
         */
        function changeStatus(checked, id, container)
        {
            $('#loader').addClass('active');

            $.ajax({
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-Token': $('meta[name=csrf-token]').attr('content')
                },
                url: '/admin/reservations/'+id+'/status',
                type: 'POST',
                dataType: 'json',
                data: JSON.stringify({
                    booking_status: checked,
                    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(checked == " Cancelled "){
                        container.hide();
                        container.siblings().hide();
                        container.closest('.status-col').html('<button data-id="'+ id +'" data-status="Confirmed" class="btn red btn-small waves-effect waves-light undo-cancel booking-status">Undo Cancel</button>');
                    }

                    if(checked == "Confirmed"){
                        container.hide();

                    }
                    if(checked == " NoShow "){
                        container.hide();
                        container.siblings().hide();
                        container.closest('.status-col').html('<span class="no-show booking-status">No Show</span>');
                    }
                },
                complete: function(){
                    $('#loader').removeClass('active');
                }
            });
        }
    </script>
@endsection