{{--
    brafa Systems — guest room / check-out (public QR page).
    Livewire backing: App\Http\Livewire\RoomShow. Bindings preserved:
    Livewire.emit('checkOut') via confirmCheckOut(), the swal:toast listener,
    $noBooking / $guestName / $roomDetails / $unitName / $propertyDetails.
--}}
@php
    /* beds24 / godo store the last NIGHT as the booking EndDate; the actual
       checkout is the following day. Add +1 for those APIs so the guest sees
       the date they actually leave (consistent with the property dashboard). */
    $brafaApi = strtolower((string) data_get($propertyDetails, 'API', ''));
    $brafaCheckoutPlusOne = in_array($brafaApi, ['beds24', 'godo'], true);

    /* Friendly date formatter. Falls back to the raw value if it can't parse. */
    $brafaDate = function ($value, $addDay = false) {
        if (empty($value)) {
            return null;
        }
        try {
            $date = \Carbon\Carbon::parse($value);
            if ($addDay) {
                $date = $date->copy()->addDay();
            }
            return $date->format('D, d M Y');
        } catch (\Throwable $e) {
            return $value;
        }
    };

    $brafaCheckIn = $brafaDate($startDate);
    $brafaCheckOut = $brafaDate($endDate, $brafaCheckoutPlusOne);
@endphp
<div class="brafa-guest">
    <div class="brafa-guest__card">
        <div class="brafa-guest__head">
            <img class="brafa-guest__logo"
                 src="{{ asset('storage/assets/img') }}/{{ Str::slug($propertyDetails->PropertyName) }}.png"
                 alt="{{ $propertyDetails->PropertyName }}"
                 onerror="this.src='{{ asset('storage/assets/img/placeholder.png') }}'">
            <span class="brafa-guest__name">{{ $propertyDetails->PropertyName }}</span>
        </div>
        <div class="brafa-guest__body">
            @if ($noBooking)
                <span class="brafa-guest__eyebrow">Check-out</span>
                <h1 class="brafa-guest__title">No booking found</h1>
                <p class="brafa-guest__subtitle">There are no current bookings for this room.</p>
            @else
                <span class="brafa-guest__eyebrow">Check-out</span>
                <h1 class="brafa-guest__title">Your stay</h1>
                @if ($guestName)
                    <p class="brafa-guest__subtitle">Please review your booking details before checking out.</p>
                    <div class="brafa-guest__kv">
                        <div class="kv"><span class="k">Guest</span><span class="v">{{ $guestName }}</span></div>
                        <div class="kv"><span class="k">Room type</span><span class="v">{{ $roomDetails->RoomName }}</span></div>
                        <div class="kv"><span class="k">Room number</span><span class="v">{{ $unitName }}</span></div>
                        @if ($brafaCheckIn)
                            <div class="kv"><span class="k">Check-in</span><span class="v">{{ $brafaCheckIn }}</span></div>
                        @endif
                        @if ($brafaCheckOut)
                            <div class="kv"><span class="k">Check-out</span><span class="v">{{ $brafaCheckOut }}</span></div>
                        @endif
                    </div>
                    <button class="btn" onclick="confirmCheckOut()">Check out</button>
                @else
                    <p class="brafa-guest__subtitle">No guest information found.</p>
                @endif
            @endif
        </div>
    </div>
</div>

@push('js')
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function confirmCheckOut() {
        Swal.fire({
            title: 'Are you sure?',
            text: "Do you really want to check out?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, check out!',
            cancelButtonText: 'No, cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                Livewire.emit('checkOut');
            }
        });
    }

    window.addEventListener('swal:toast', event => {
        Swal.fire({
            icon: event.detail.type,
            title: event.detail.message,
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 3000,
            timerProgressBar: true,
        });
    });
</script>
@endpush