@extends('layouts.main-layout')
@section('title')
All Reservations
@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">


            {{-- <p class="alert alert-danger" id="msg1" style="display: none;"></p> --}}


            <!--begin::Row-->

            <!--end::Row-->
            <!--begin::Tables Widget 9-->

            <!--end::Tables Widget 9-->
            <!--begin::Tables Widget 10-->

            <!--end::Tables Widget 10-->

            <!--begin::Tables Widget 12-->

            <!--end::Tables Widget 12-->
            <!--begin::Tables Widget 13-->
            <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 align-items-start flex-column">
                        <span class="card-label fw-bolder fs-3 mb-1">All Reservations</span>

                    </h3>
                </div>
                   <div class="d-flex justify-content-end mr-5" data-kt-customer-table-toolbar="base">
                            <!--begin::Filter-->

                            <!--begin::Add customer-->
                            <a class="mr-5" href="{{route('admin.reservations.create')}}"><button type="button" class="btn btn-primary mr-5" data-bs-toggle="modal" data-bs-target="#kt_modal_add_customer">Add Reservation</button></a>
                            <!--end::Add customer-->
                        </div>
                <div class="card-body py-3">
{{--   @comp
<div class="d-flex justify-content-end" data-kt-customer-table-toolbar="base">
                            <!--begin::Filter-->

                            <!--begin::Add customer-->
                            <a href="{{route('admin.users.create')}}"><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_add_customer">Add User</button></a>
                            <!--end::Add customer-->
                        </div>onent('admin.includes.per-page')
@endcomponent  --}}
<div class="table-responsive">
                        <!--begin::Table-->
                        <table class="table 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 class="min-w-140px width">Booking No</th>
<th class="min-w-150px width">Guest Name</th>

<th class="min-w-100px ">Booking Date

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

</th>
<th class="min-w-80px">Room No</th>
<th class="min-w-100px">CheckIn</th>
<th class="min-w-80px">CheckOut</th>
<th class="min-w-150px">Status</th>
<th class="min-w-120px">Total Price</th>
<th class="min-w-80px">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>
        <span class="text-dark  text-hover-primary d-block mb-1 fs-6">{{$booking->BookingId}}</span></td>
    <td>

        <span class="text-dark  text-hover-primary d-block mb-1 fs-6">{{$booking->BookerFirstName}} {{$booking->BookerLastName}}</span></td>
    <td>
        <span class="text-dark  text-hover-primary d-block mb-1 fs-6">{{(new Carbon\Carbon($booking->BookingDate))->format('d-m-Y')}}</span></td>
    @if($room)
        <td>
            <span class="text-dark  text-hover-primary d-block mb-1 fs-6">
            {{$room->RoomName}} </span></td>
    @else
        <td>-</td>
    @endif
    <td> <span class="text-dark  text-hover-primary d-block mb-1 fs-6">{{(new Carbon\Carbon($booking->BeginDate))->format('d-m-Y')}} </span></td>
    <td> <span class="text-dark  text-hover-primary d-block mb-1 fs-6">{{(new Carbon\Carbon($booking->EndDate))->format('d-m-Y')}}</span></td>
    <td style="width:100px !important" class="status-col">
        @if($booking->BookingStatusId == 2)
            <button data-id="{{ $booking->BookingId }}" data-status="Confirmed" class="btn btn-danger  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 }}" class="form-select">
               @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><span class="text-dark  text-hover-primary d-block mb-1 fs-6"> {{round($booking->TotalPrice,2)}}</span></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="fas fa-eye" style="color:#50cd89; font-size:24px;"></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')}}  --}}
{{$bookings->links()}}
</div>
</div>
</div>
</div></div></div>
    @component('admin.includes.loader')
    @endcomponent
@endsection

@section('js')
    <script src="{{asset('js/calendar.js')}}"></script>
    <script>
        $(document).ready(function(){
            $('.status').change(function(e){
                $("#msg").show();
                $("#msg1").show();
                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() {
                    var url ="{{ route('admin.reservations.index') }}"; //the url I want to redirect to
                       $(location).attr('href', url);
                    $("#msg1").html("Something went wrong. Please refresh and try again.");
                $("#msg1").fadeOut(5000);

                    M.toast({
                        html: "Something went wrong. Please refresh and try again.",
                        displayLength:5000
                    });
                },

                success: function(res) {
                    $("#msg").fadeOut(3000);
                    $("#msg").html(res.msg);
                    var url ="{{ route('admin.reservations.index') }}"; //the url I want to redirect to
                    // $(location).attr('href', url);
                    setTimeout("window.location.href='{{ route('admin.reservations.index') }}';",4000);
                    // header("Refresh: 3; {{ route('admin.reservations.index') }}");
                    M.toast({
                        html:res.msg,
                        displayLength:5000
                    });


                    if(checked == " Cancelled "){
                        $("#msg").html("Successfully Cancelled Booking");
                $("#msg").fadeOut(3000);
                        var url ="{{ route('admin.reservations.index') }}"; //the url I want to redirect to
                       $(location).attr('href', url);


                        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"){
                        $("#msg").html("Booking Confirmed");
                $("#msg").fadeOut(3000);


                        var url ="{{ route('admin.reservations.index') }}"; //the url I want to redirect to
                       $(location).attr('href', url);
                        container.hide();

                    }
                    if(checked == " NoShow "){
                        $("#msg").html("Status Change to No show");
                $("#msg").fadeOut(3000);
                        var url ="{{ route('admin.reservations.index') }}"; //the url I want to redirect to
                       $(location).attr('href', url);


                        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


<style>
.undo-cancel{
    width:120px !important;
    padding:5px 0px !important;
}


</style>