@extends('layouts.app')

@section('title', 'Reservation Details')
@section('page_title', $reservation['booking_no'])
@section('page_subtitle', 'Reservation details for ' . $reservation['guest_name'])

@section('nav_reservations', 'bg-teal-50 text-teal-700 font-semibold')

@section('content')

@if (session('success'))
<div class="mb-5 flex items-center gap-3 bg-teal-50 border-[0.5px] border-teal-200 rounded-xl px-5 py-3.5">
    <svg class="w-4 h-4 text-teal-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
    </svg>
    <p class="text-teal-700 text-sm font-medium">{{ session('success') }}</p>
</div>
@endif

@if (session('error'))
<div class="mb-5 flex items-center gap-3 bg-red-50 border-[0.5px] border-red-200 rounded-xl px-5 py-3.5">
    <svg class="w-4 h-4 text-red-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
    </svg>
    <p class="text-red-700 text-sm font-medium">{{ session('error') }}</p>
</div>
@endif

@php
    $statusBadge = [
        'pending'     => 'bg-amber-50 text-amber-700 border-[0.5px] border-amber-200',
        'confirmed'   => 'bg-teal-50 text-teal-700 border-[0.5px] border-teal-200',
        'checked_in'  => 'bg-green-50 text-green-700 border-[0.5px] border-green-200',
        'checked_out' => 'bg-gray-50 text-gray-500 border-[0.5px] border-gray-200',
        'cancelled'   => 'bg-red-50 text-red-600 border-[0.5px] border-red-200',
        'no_show'     => 'bg-orange-50 text-orange-600 border-[0.5px] border-orange-200',
    ];
    $statusLabel = [
        'pending'     => 'Pending',
        'confirmed'   => 'Confirmed',
        'checked_in'  => 'Checked In',
        'checked_out' => 'Checked Out',
        'cancelled'   => 'Cancelled',
        'no_show'     => 'No Show',
    ];
@endphp

<div class="max-w-5xl">

    {{-- Back + Actions --}}
    <div class="flex items-center justify-between mb-6">
        <a href="{{ route('reservations.index') }}"
           class="inline-flex items-center gap-1.5 text-gray-400 hover:text-gray-600 text-sm transition-colors">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
            Back to Reservations
        </a>
        <div class="flex items-center gap-2" x-data="{ moreOpen: false, transferOpen: false }">

            @if ($reservation['status'] === 'pending')
            <form action="{{ route('reservations.confirm', $reservation['id']) }}" method="POST"
                  data-confirm="Confirm reservation for {{ $reservation['guest_name'] }}?">
                @csrf
                <button class="px-3.5 py-1.5 text-sm text-white bg-teal-600 hover:bg-teal-700 rounded-lg transition-colors font-medium">
                    Confirm
                </button>
            </form>
            @endif

            @if (in_array($reservation['status'], ['confirmed', 'pending']))
            <form action="{{ route('reservations.check-in', $reservation['id']) }}" method="POST"
                  data-confirm="Check in {{ $reservation['guest_name'] }} to Room {{ $reservation['room_no'] }}?">
                @csrf
                <button class="px-3.5 py-1.5 text-sm text-white bg-green-600 hover:bg-green-700 rounded-lg transition-colors font-medium">
                    Check In Guest
                </button>
            </form>
            @endif

            @if ($reservation['status'] === 'checked_in')
            <a href="{{ route('reservations.checkout-folio', $reservation['id']) }}"
               class="px-3.5 py-1.5 text-sm text-white bg-amber-500 hover:bg-amber-600 rounded-lg transition-colors font-medium flex items-center gap-1.5">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/>
                </svg>
                Check Out Guest
            </a>
            @endif

            @if ($reservation['status'] === 'checked_in' && $availableRooms->isNotEmpty())
            <button type="button" @click="transferOpen = true"
                    class="px-3.5 py-1.5 text-sm text-indigo-700 bg-indigo-50 border-[0.5px] border-indigo-200 hover:bg-indigo-100 rounded-lg transition-colors font-medium flex items-center gap-1.5">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/>
                </svg>
                Transfer Room
            </button>
            @endif

            <a href="{{ route('reservations.folio', $reservation['id']) }}"
               class="px-3.5 py-1.5 text-sm text-gray-600 border-[0.5px] border-gray-200 hover:bg-gray-50 rounded-lg transition-colors font-medium flex items-center gap-1.5">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l3.5-2 3.5 2 3.5-2 3.5 2z"/>
                </svg>
                Folio
            </a>

            <a href="{{ route('reservations.edit', $reservation['id']) }}"
               class="px-3.5 py-1.5 text-sm text-gray-600 border-[0.5px] border-gray-200 hover:bg-gray-50 rounded-lg transition-colors font-medium">
                Edit
            </a>

            @if (in_array($reservation['status'], ['pending', 'confirmed', 'checked_in']))
            <div class="relative">
                <button type="button" @click="moreOpen = !moreOpen"
                        class="px-3 py-1.5 text-sm text-gray-500 border-[0.5px] border-gray-200 hover:bg-gray-50 rounded-lg transition-colors font-medium flex items-center gap-1">
                    More
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div x-show="moreOpen" @click.outside="moreOpen = false" x-cloak
                     class="absolute right-0 mt-1 w-48 bg-white border-[0.5px] border-gray-200 rounded-xl shadow-lg z-10 py-1 overflow-hidden">
                    @if ($reservation['status'] === 'checked_in')
                    <form action="{{ route('reservations.undo-checkin', $reservation['id']) }}" method="POST"
                          data-confirm="Undo check-in for {{ $reservation['guest_name'] }}? The reservation will go back to Confirmed and Room {{ $reservation['room_no'] }} will be released.">
                        @csrf
                        <button class="w-full text-left px-4 py-2 text-sm text-blue-600 hover:bg-blue-50 transition-colors flex items-center gap-2">
                            <svg class="w-3.5 h-3.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
                            </svg>
                            Undo Check-In
                        </button>
                    </form>
                    <div class="my-1 border-t border-gray-100"></div>
                    @endif
                    @if (in_array($reservation['status'], ['confirmed', 'pending']))
                    <form action="{{ route('reservations.no-show', $reservation['id']) }}" method="POST"
                          data-confirm="Mark {{ $reservation['guest_name'] }} as no-show? This cannot be undone."
                          data-danger="true">
                        @csrf
                        <button class="w-full text-left px-4 py-2 text-sm text-orange-600 hover:bg-orange-50 transition-colors">
                            Mark No-Show
                        </button>
                    </form>
                    @endif
                    <form action="{{ route('reservations.cancel', $reservation['id']) }}" method="POST"
                          data-confirm="Cancel reservation for {{ $reservation['guest_name'] }}? This cannot be undone."
                          data-danger="true">
                        @csrf
                        <button class="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors">
                            Cancel Reservation
                        </button>
                    </form>
                </div>
            </div>
            @endif

            @if ($reservation['status'] === 'checked_out')
            <form action="{{ route('reservations.undo-checkout', $reservation['id']) }}" method="POST"
                  data-confirm="Undo check-out for {{ $reservation['guest_name'] }}? Room {{ $reservation['room_no'] }} will be set back to Occupied.">
                @csrf
                <button class="px-3.5 py-1.5 text-sm font-medium text-blue-700 bg-blue-50 border-[0.5px] border-blue-200 hover:bg-blue-100 rounded-lg transition-colors flex items-center gap-1.5">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
                    </svg>
                    Undo Check-Out
                </button>
            </form>
            @endif

            @if (in_array($reservation['status'], ['cancelled', 'no_show']))
            <form action="{{ route('reservations.restore', $reservation['id']) }}" method="POST"
                  data-confirm="Restore {{ $reservation['guest_name'] }}'s reservation back to Confirmed?">
                @csrf
                <button class="px-3.5 py-1.5 text-sm font-medium text-blue-700 bg-blue-50 border-[0.5px] border-blue-200 hover:bg-blue-100 rounded-lg transition-colors flex items-center gap-1.5">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
                    </svg>
                    Restore Booking
                </button>
            </form>
            @endif

        {{-- Transfer Room Modal --}}
        @if ($reservation['status'] === 'checked_in' && $availableRooms->isNotEmpty())
        @php $roomsByFloor = $availableRooms->groupBy('floor')->sortKeys(); @endphp
        <div x-show="transferOpen" x-cloak
             class="fixed inset-0 z-50 flex items-center justify-center"
             @keydown.escape.window="transferOpen = false">
            <div class="absolute inset-0 bg-black/40" @click="transferOpen = false"></div>
            <div class="relative bg-white rounded-xl shadow-xl w-full max-w-lg mx-4 max-h-[90vh] flex flex-col">

                {{-- Modal header --}}
                <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100 flex-shrink-0">
                    <div>
                        <h3 class="text-gray-900 font-semibold text-sm">Transfer Room</h3>
                        <p class="text-gray-400 text-xs mt-0.5">
                            {{ $reservation['guest_name'] }} — currently in Room {{ $reservation['room_no'] }}
                        </p>
                    </div>
                    <button type="button" @click="transferOpen = false"
                            class="text-gray-300 hover:text-gray-500 transition-colors">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </button>
                </div>

                <form action="{{ route('reservations.transfer-room', $reservation['id']) }}" method="POST"
                      class="flex flex-col flex-1 overflow-hidden">
                    @csrf

                    {{-- Scrollable room list --}}
                    <div class="overflow-y-auto flex-1 px-6 py-4 space-y-4">

                        {{-- Room picker --}}
                        <div>
                            <label class="block text-xs font-semibold text-gray-600 mb-2">Select New Room <span class="text-red-400">*</span></label>
                            <div class="space-y-2">
                                @foreach ($roomsByFloor as $floor => $floorRooms)
                                <div>
                                    <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1.5 flex items-center gap-1.5">
                                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-2 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                                        </svg>
                                        Floor {{ $floor }}
                                    </p>
                                    <div class="grid grid-cols-2 gap-1.5">
                                        @foreach ($floorRooms as $room)
                                        <label class="flex items-center gap-2.5 p-3 border-[0.5px] border-gray-200 rounded-lg cursor-pointer hover:border-indigo-300 hover:bg-indigo-50/40 transition-all has-[:checked]:border-indigo-500 has-[:checked]:bg-indigo-50">
                                            <input type="radio" name="new_room_no" value="{{ $room->no }}" required
                                                   class="accent-indigo-600 flex-shrink-0">
                                            <div class="min-w-0">
                                                <p class="text-gray-800 font-semibold text-xs">Room {{ $room->no }}</p>
                                                <p class="text-gray-400 text-[11px] truncate">{{ $room->type }}</p>
                                                <p class="text-indigo-600 text-[11px] font-bold">&#8369;{{ number_format($room->rate, 0) }}/night</p>
                                            </div>
                                        </label>
                                        @endforeach
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>

                        {{-- Reason --}}
                        <div>
                            <label class="block text-xs font-semibold text-gray-600 mb-1.5">Reason <span class="text-red-400">*</span></label>
                            <select name="reason" required
                                    class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700 bg-white
                                           focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-400">
                                <option value="">Select reason…</option>
                                <option>Maintenance Issue</option>
                                <option>Guest Request</option>
                                <option>Upgrade</option>
                                <option>Downgrade</option>
                                <option>Noise / Disturbance</option>
                                <option>Other</option>
                            </select>
                        </div>

                        {{-- Notes --}}
                        <div>
                            <label class="block text-xs font-semibold text-gray-600 mb-1.5">Notes <span class="text-gray-300 font-normal">(optional)</span></label>
                            <input type="text" name="notes" placeholder="e.g. A/C not working, guest prefers higher floor…"
                                   class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700 placeholder-gray-300
                                          focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-400">
                        </div>

                        {{-- Rate difference notice --}}
                        <div class="bg-amber-50 border-[0.5px] border-amber-200 rounded-lg px-4 py-3 flex items-start gap-2.5">
                            <svg class="w-4 h-4 text-amber-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                            <p class="text-amber-700 text-xs">Room rate and billing are not changed automatically. If there is a rate difference, add a folio charge to the reservation after transferring.</p>
                        </div>

                    </div>

                    {{-- Modal footer --}}
                    <div class="flex items-center justify-end gap-2 px-6 py-4 border-t border-gray-100 flex-shrink-0">
                        <button type="button" @click="transferOpen = false"
                                class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">
                            Cancel
                        </button>
                        <button type="submit"
                                class="px-5 py-2 text-sm font-semibold text-white bg-indigo-600 hover:bg-indigo-700 rounded-lg transition-colors flex items-center gap-1.5">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/>
                            </svg>
                            Confirm Transfer
                        </button>
                    </div>

                </form>
            </div>
        </div>
        @endif

        </div>
    </div>

    {{-- Group Booking Banner --}}
    @if ($reservation->group_id)
    @php
        $group       = $reservation->group;
        $siblings    = $group->reservations->where('id', '!=', $reservation->id);
        $groupNights = $group->check_in->diffInDays($group->check_out);
    @endphp
    <div class="mb-5 bg-purple-50 border-[0.5px] border-purple-200 rounded-xl px-5 py-3.5">
        <div class="flex items-center justify-between gap-4 flex-wrap">
            <div class="flex items-center gap-3">
                <svg class="w-4 h-4 text-purple-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
                </svg>
                <div>
                    <p class="text-purple-800 font-semibold text-xs">
                        Part of Group Booking
                        <a href="{{ route('reservation-groups.show', $group->id) }}"
                           class="font-mono font-bold hover:underline">{{ $group->group_no }}</a>
                    </p>
                    <p class="text-purple-600 text-[11px] mt-0.5">
                        {{ $group->reservations->count() }} rooms total
                        @if ($siblings->count())
                        — other rooms:
                        @foreach ($siblings as $sib)
                        <a href="{{ route('reservations.show', $sib->id) }}" class="font-semibold hover:underline">Room {{ $sib->room_no }}</a>{{ !$loop->last ? ', ' : '' }}
                        @endforeach
                        @endif
                    </p>
                </div>
            </div>
            <a href="{{ route('reservation-groups.show', $group->id) }}"
               class="text-xs font-semibold text-purple-700 hover:text-purple-900 transition-colors whitespace-nowrap">
                View Group →
            </a>
        </div>
    </div>
    @endif

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-5">

        {{-- LEFT: Main (2/3) --}}
        <div class="lg:col-span-2 space-y-4">

            {{-- Overview Card --}}
            <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-6">
                <div class="flex items-start justify-between">
                    <div>
                        <div class="flex items-center gap-2.5 mb-1">
                            <h2 class="text-gray-900 font-bold text-lg font-mono">{{ $reservation['booking_no'] }}</h2>
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold {{ $statusBadge[$reservation['status']] ?? 'bg-gray-50 text-gray-500' }}">
                                {{ $statusLabel[$reservation['status']] ?? $reservation['status'] }}
                            </span>
                        </div>
                        <p class="text-gray-400 text-xs">Booked via <span class="text-gray-600 font-medium">{{ $reservation['source'] }}</span></p>
                    </div>
                    <div class="text-right">
                        <p class="text-gray-400 text-xs mb-1">Total Amount</p>
                        <p class="text-teal-700 font-bold text-2xl">&#8369;{{ number_format($reservation['amount'], 2) }}</p>
                    </div>
                </div>

                <div class="mt-6 grid grid-cols-3 gap-4 pt-5 border-t border-gray-100">
                    @if($reservation->ratePlan)
                    <div class="mb-4 pb-4 border-b border-gray-100">
                        <p class="text-gray-400 text-xs mb-1">Rate Plan</p>
                        <div class="flex items-center gap-2">
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold bg-blue-50 text-blue-700 border-[0.5px] border-blue-200">
                                {{ $reservation->ratePlan->code }}
                            </span>
                            <span class="text-gray-700 text-sm font-medium">{{ $reservation->ratePlan->name }}</span>
                            <span class="text-gray-400 text-xs">— {{ $reservation->ratePlan->modifierLabel() }}</span>
                        </div>
                    </div>
                    @endif
                    <div>
                        <p class="text-gray-400 text-xs">Check-in</p>
                        <p class="text-gray-800 font-semibold text-sm mt-1">
                            {{ \Carbon\Carbon::parse($reservation['check_in'])->format('D, M j, Y') }}
                        </p>
                        <p class="text-gray-400 text-[11px] mt-0.5">After 2:00 PM</p>
                    </div>
                    <div>
                        <p class="text-gray-400 text-xs">Check-out</p>
                        <p class="text-gray-800 font-semibold text-sm mt-1">
                            {{ \Carbon\Carbon::parse($reservation['check_out'])->format('D, M j, Y') }}
                        </p>
                        <p class="text-gray-400 text-[11px] mt-0.5">Before 12:00 PM</p>
                    </div>
                    <div>
                        <p class="text-gray-400 text-xs">Duration</p>
                        <p class="text-gray-800 font-semibold text-sm mt-1">
                            {{ $reservation['nights'] }} Night{{ $reservation['nights'] > 1 ? 's' : '' }}
                        </p>
                        <p class="text-gray-400 text-[11px] mt-0.5">{{ $reservation['pax'] }} Guest{{ $reservation['pax'] > 1 ? 's' : '' }}</p>
                    </div>
                </div>
            </div>

            {{-- Room --}}
            <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-5">
                <p class="text-gray-500 text-xs font-semibold mb-4">Room Details</p>
                <div class="flex items-center gap-4">
                    <div class="w-12 h-12 bg-teal-50 border-[0.5px] border-teal-100 rounded-xl flex items-center justify-center flex-shrink-0">
                        <svg class="w-6 h-6 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
                        </svg>
                    </div>
                    <div>
                        <p class="text-gray-900 font-bold">Room {{ $reservation['room_no'] }}</p>
                        <p class="text-gray-400 text-sm">{{ $reservation['room_type'] }}</p>
                        <p class="text-teal-600 text-sm font-semibold mt-1">&#8369;{{ number_format($reservation['rate'], 0) }} / night</p>
                    </div>
                </div>
            </div>

            {{-- Charges Breakdown --}}
            @php
                $catLabels    = ['food_beverage' => 'Food & Bev.', 'laundry' => 'Laundry', 'telephone' => 'Telephone', 'minibar' => 'Minibar', 'damage' => 'Damage', 'other' => 'Misc.'];
                $canAddCharge = !in_array($reservation['status'], ['cancelled', 'no_show']);
                $totalExtras  = $charges->sum('amount');
                $totalGross   = (float) $reservation['amount'] + $totalExtras;
                $vatPct       = (int) \App\Models\Setting::get('vat_rate', 12);
                $preVatTotal  = $totalGross / (1 + $vatPct / 100);
                $vatOnTotal   = $totalGross - $preVatTotal;
            @endphp
            <div class="bg-white border-[0.5px] border-gray-200 rounded-xl"
                 x-data="{ addingCharge: false }">

                {{-- Header + room line --}}
                <div class="px-5 pt-5 pb-3">
                    <div class="flex items-center justify-between mb-3">
                        <p class="text-gray-500 text-xs font-semibold uppercase tracking-wider">Charges Breakdown</p>
                        @if($canAddCharge)
                        <button type="button" @click="addingCharge = !addingCharge"
                                class="text-teal-600 hover:text-teal-700 text-xs font-semibold flex items-center gap-1 transition-colors">
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                            </svg>
                            Add Charge
                        </button>
                        @endif
                    </div>

                    <div class="space-y-1">
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-700">Room {{ $reservation['room_no'] }} — Accommodation</span>
                            <span class="text-gray-700 font-medium">&#8369;{{ number_format($reservation['amount'], 2) }}</span>
                        </div>
                        <div class="text-xs text-gray-400 pl-2">
                            {{ $reservation['nights'] }} night{{ $reservation['nights'] > 1 ? 's' : '' }}
                            @ &#8369;{{ number_format($reservation['rate'], 0) }}/night
                        </div>
                    </div>
                </div>

                {{-- Extra charges list --}}
                @if($charges->isNotEmpty())
                <div class="border-t border-gray-100 px-5 py-3 space-y-2.5">
                    @foreach($charges as $ch)
                    <div class="flex items-center gap-2 text-sm">
                        <div class="flex-1 min-w-0">
                            <span class="text-gray-700">{{ $ch->description }}</span>
                            <span class="text-gray-400 text-xs ml-1.5">{{ $catLabels[$ch->category] ?? $ch->category }}</span>
                            @if($ch->quantity > 1)
                            <span class="text-gray-400 text-xs">× {{ $ch->quantity }}</span>
                            @endif
                            <span class="text-gray-300 text-xs ml-1">· {{ $ch->charge_date->format('M j') }}</span>
                            @if($ch->fromPos())
                            <a href="{{ route('pos.show', $ch->pos_transaction_id) }}"
                               class="inline-flex items-center gap-0.5 ml-1.5 px-1.5 py-0.5 text-[10px] font-semibold bg-blue-50 text-blue-600 border-[0.5px] border-blue-200 rounded hover:bg-blue-100 transition-colors">
                                POS #{{ $ch->pos_transaction_id }}
                            </a>
                            @endif
                        </div>
                        <span class="text-gray-700 font-medium flex-shrink-0">&#8369;{{ number_format($ch->amount, 2) }}</span>
                        @if($canAddCharge)
                        <form method="POST"
                              action="{{ route('reservations.folio.charges.destroy', [$reservation->id, $ch->id]) }}"
                              data-confirm="Remove {{ $ch->description }} from the folio?"
                              data-danger="true">
                            @csrf @method('DELETE')
                            <button type="submit" class="text-gray-300 hover:text-red-500 transition-colors p-1 rounded flex-shrink-0">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                                </svg>
                            </button>
                        </form>
                        @endif
                    </div>
                    @endforeach
                </div>
                @endif

                {{-- VAT breakdown + total --}}
                <div class="border-t border-gray-100 px-5 py-3 space-y-2">
                    <div class="flex justify-between text-xs text-gray-400">
                        <span>Subtotal (excl. VAT {{ $vatPct }}%)</span>
                        <span>&#8369;{{ number_format($preVatTotal, 2) }}</span>
                    </div>
                    <div class="flex justify-between text-xs text-gray-400">
                        <span>VAT ({{ $vatPct }}%)</span>
                        <span>&#8369;{{ number_format($vatOnTotal, 2) }}</span>
                    </div>
                    <div class="flex justify-between text-sm font-semibold pt-1.5 border-t border-gray-100">
                        <span class="text-gray-800">Total Charges</span>
                        <span class="text-teal-700 font-bold text-base">&#8369;{{ number_format($totalGross, 2) }}</span>
                    </div>
                </div>

                {{-- Add charge form --}}
                @if($canAddCharge)
                <div x-show="addingCharge" x-cloak
                     class="border-t border-gray-100 bg-gray-50/50 px-5 py-4">
                    <p class="text-xs font-semibold text-gray-600 uppercase tracking-wider mb-3">Add Extra Charge</p>
                    <form method="POST"
                          action="{{ route('reservations.folio.charges.store', $reservation->id) }}"
                          class="space-y-3"
                          data-confirm="Add this charge to the folio?">
                        @csrf
                        <input type="text" name="description"
                               placeholder="Description (e.g. Room Service, Laundry)" required
                               class="w-full border-[0.5px] border-gray-200 rounded-lg px-2.5 py-2 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 bg-white">
                        <div class="grid grid-cols-2 gap-3">
                            <select name="category"
                                    class="border-[0.5px] border-gray-200 rounded-lg px-2.5 py-2 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 bg-white">
                                <option value="food_beverage">Food & Beverage</option>
                                <option value="laundry">Laundry</option>
                                <option value="telephone">Telephone</option>
                                <option value="minibar">Minibar</option>
                                <option value="damage">Damage</option>
                                <option value="other" selected>Other</option>
                            </select>
                            <input type="number" name="quantity" value="1" min="1" max="999"
                                   placeholder="Qty"
                                   class="border-[0.5px] border-gray-200 rounded-lg px-2.5 py-2 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 bg-white">
                        </div>
                        <div class="grid grid-cols-2 gap-3">
                            <input type="number" name="amount" placeholder="Total Amount (₱)" required
                                   step="0.01" min="0.01"
                                   class="border-[0.5px] border-gray-200 rounded-lg px-2.5 py-2 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 bg-white">
                            <input type="date" name="charge_date" value="{{ today()->toDateString() }}" required
                                   class="border-[0.5px] border-gray-200 rounded-lg px-2.5 py-2 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 bg-white">
                        </div>
                        <div class="flex items-center gap-2 pt-1">
                            <button type="submit"
                                    class="text-sm font-medium bg-teal-600 hover:bg-teal-700 text-white px-4 py-2 rounded-lg transition-colors">
                                Add to Folio
                            </button>
                            <button type="button" @click="addingCharge = false"
                                    class="text-sm text-gray-400 hover:text-gray-600 transition-colors px-2">
                                Cancel
                            </button>
                        </div>
                    </form>
                </div>
                @endif

            </div>

            {{-- Payments --}}
            @php
                $totalPaid   = $payments->sum('amount');
                $totalCharge = $totalGross; // room + extra charges
                $balance     = max(0, $totalCharge - $totalPaid);
                $paidPct     = $totalCharge > 0 ? min(100, round($totalPaid / $totalCharge * 100)) : 0;
                $canAddPay   = !in_array($reservation['status'], ['checked_out', 'cancelled', 'no_show']);
            @endphp
            <div class="bg-white border-[0.5px] border-gray-200 rounded-xl overflow-hidden"
                 x-data="{
                     adding: false,
                     rows: [{ method: 'Cash', amount: '', reference: '' }],
                     addRow() { this.rows.push({ method: 'Cash', amount: '', reference: '' }); },
                     removeRow(i) { if (this.rows.length > 1) this.rows.splice(i, 1); },
                     total() { return this.rows.reduce((s, r) => s + (parseFloat(r.amount) || 0), 0); },
                     fmt(n) { return '₱' + n.toLocaleString('en-PH', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); }
                 }">

                {{-- Summary bar --}}
                <div class="px-5 pt-5 pb-4">
                    <div class="flex items-center justify-between mb-3">
                        <p class="text-gray-500 text-xs font-semibold uppercase tracking-wider">Payments</p>
                        @if($canAddPay)
                        <button type="button" @click="adding = !adding"
                                class="text-teal-600 hover:text-teal-700 text-xs font-semibold flex items-center gap-1 transition-colors">
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                            </svg>
                            Add Payment
                        </button>
                        @endif
                    </div>

                    {{-- Three-way summary --}}
                    <div class="grid grid-cols-3 gap-3 mb-3">
                        <div class="bg-gray-50 rounded-lg px-3 py-2.5">
                            <p class="text-[10px] font-semibold uppercase tracking-wider text-gray-400 mb-0.5">Charges</p>
                            <p class="text-sm font-bold text-gray-700">&#8369;{{ number_format($totalCharge, 2) }}</p>
                        </div>
                        <div class="bg-teal-50 rounded-lg px-3 py-2.5">
                            <p class="text-[10px] font-semibold uppercase tracking-wider text-teal-500 mb-0.5">Paid</p>
                            <p class="text-sm font-bold text-teal-700">&#8369;{{ number_format($totalPaid, 2) }}</p>
                        </div>
                        <div class="{{ $balance > 0 ? 'bg-red-50' : 'bg-green-50' }} rounded-lg px-3 py-2.5">
                            <p class="text-[10px] font-semibold uppercase tracking-wider {{ $balance > 0 ? 'text-red-400' : 'text-green-500' }} mb-0.5">Balance</p>
                            <p class="text-sm font-bold {{ $balance > 0 ? 'text-red-600' : 'text-green-700' }}">
                                {{ $balance > 0 ? '₱'.number_format($balance, 2) : 'Settled' }}
                            </p>
                        </div>
                    </div>

                    {{-- Progress bar --}}
                    <div class="w-full bg-gray-100 rounded-full h-1">
                        <div class="bg-teal-500 h-1 rounded-full transition-all" style="width: {{ $paidPct }}%"></div>
                    </div>
                </div>

                {{-- Payment records list --}}
                @if($payments->isNotEmpty())
                <div class="border-t border-gray-100">
                    @foreach($payments as $pmt)
                    <div class="flex items-center gap-3 px-5 py-3 {{ !$loop->last ? 'border-b border-gray-50' : '' }}">
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-2">
                                <span class="text-sm font-semibold text-gray-800">&#8369;{{ number_format($pmt->amount, 2) }}</span>
                                <span class="inline-flex text-[10px] font-semibold px-1.5 py-0.5 rounded border-[0.5px] bg-gray-50 text-gray-500 border-gray-200">
                                    {{ $pmt->method }}
                                </span>
                            </div>
                            <div class="flex items-center gap-2 mt-0.5">
                                <span class="text-xs text-gray-400">{{ $pmt->payment_date->format('M j, Y') }}</span>
                                @if($pmt->reference)
                                <span class="text-xs text-gray-300">·</span>
                                <span class="text-xs text-gray-400 font-mono">{{ $pmt->reference }}</span>
                                @endif
                            </div>
                        </div>
                        @if($canAddPay)
                        <form method="POST"
                              action="{{ route('reservations.payments.destroy', [$reservation->id, $pmt->id]) }}"
                              data-confirm="Remove this ₱{{ number_format($pmt->amount, 0) }} {{ $pmt->method }} payment record?"
                              data-danger="true">
                            @csrf
                            @method('DELETE')
                            <button type="submit"
                                    class="text-gray-300 hover:text-red-500 transition-colors p-1 rounded">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                                </svg>
                            </button>
                        </form>
                        @endif
                    </div>
                    @endforeach
                </div>
                @else
                <div class="px-5 pb-4 text-xs text-gray-400 italic">No payments recorded yet.</div>
                @endif

                {{-- Add payment form --}}
                @if($canAddPay)
                <div x-show="adding" x-cloak
                     class="border-t border-gray-100 bg-gray-50/50 px-5 py-4 space-y-4">
                    <p class="text-xs font-semibold text-gray-600 uppercase tracking-wider">Record Payment</p>

                    <form method="POST" action="{{ route('reservations.payments.store', $reservation->id) }}"
                          class="space-y-3"
                          data-confirm="Save payment(s) to this reservation?">
                        @csrf

                        <template x-for="(row, i) in rows" :key="i">
                            <div class="flex items-start gap-2">
                                <select :name="'payments[' + i + '][method]'" x-model="row.method"
                                        class="border-[0.5px] border-gray-200 rounded-lg px-2.5 py-2 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 bg-white">
                                    <option>Cash</option>
                                    <option>GCash</option>
                                    <option>Maya</option>
                                    <option>Credit Card</option>
                                    <option>Debit Card</option>
                                    <option>Bank Transfer</option>
                                    <option>Check</option>
                                </select>
                                <input type="number" :name="'payments[' + i + '][amount]'" x-model="row.amount"
                                       step="0.01" min="0.01" placeholder="Amount" required
                                       class="w-32 border-[0.5px] border-gray-200 rounded-lg px-2.5 py-2 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 bg-white">
                                <input type="text" :name="'payments[' + i + '][reference]'" x-model="row.reference"
                                       placeholder="Ref # (optional)"
                                       class="flex-1 border-[0.5px] border-gray-200 rounded-lg px-2.5 py-2 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 bg-white">
                                <button type="button" @click="removeRow(i)" x-show="rows.length > 1"
                                        class="text-gray-300 hover:text-red-500 transition-colors p-2 rounded flex-shrink-0">
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                                    </svg>
                                </button>
                            </div>
                        </template>

                        {{-- Running total + add row --}}
                        <div class="flex items-center justify-between">
                            <button type="button" @click="addRow()"
                                    class="text-xs text-teal-600 hover:text-teal-700 font-semibold flex items-center gap-1 transition-colors">
                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                                </svg>
                                Split Payment
                            </button>
                            <p class="text-xs text-gray-500">
                                Total: <span class="font-bold text-gray-800" x-text="fmt(total())"></span>
                            </p>
                        </div>

                        <div class="flex items-center gap-2 pt-1">
                            <button type="submit"
                                    class="text-sm font-medium bg-teal-600 hover:bg-teal-700 text-white px-4 py-2 rounded-lg transition-colors">
                                Save Payment
                            </button>
                            <button type="button" @click="adding = false; rows = [{ method: 'Cash', amount: '', reference: '' }]"
                                    class="text-sm text-gray-400 hover:text-gray-600 transition-colors px-2">
                                Cancel
                            </button>
                        </div>
                    </form>
                </div>
                @endif

            </div>

            {{-- Notes --}}
            @if ($reservation['notes'])
            <div class="bg-amber-50 border-[0.5px] border-amber-200 rounded-xl p-4 flex gap-3">
                <svg class="w-4 h-4 text-amber-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"/>
                </svg>
                <div>
                    <p class="text-amber-700 font-semibold text-xs mb-1">Special Request</p>
                    <p class="text-amber-700 text-sm">{{ $reservation['notes'] }}</p>
                </div>
            </div>
            @endif

        </div>

        {{-- RIGHT: Guest + Activity (1/3) --}}
        <div class="space-y-4">

            {{-- Guest Card --}}
            <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-5">
                <p class="text-gray-500 text-xs font-semibold mb-4">Guest Information</p>
                <div class="flex items-center gap-3 mb-4">
                    <div class="w-10 h-10 bg-teal-50 border-[0.5px] border-teal-100 text-teal-700 rounded-full flex items-center justify-center font-bold text-sm flex-shrink-0">
                        {{ strtoupper(substr($reservation['guest_name'], 0, 1)) }}{{ strtoupper(substr(explode(' ', $reservation['guest_name'])[1] ?? 'X', 0, 1)) }}
                    </div>
                    <div>
                        <p class="text-gray-900 font-semibold text-sm">{{ $reservation['guest_name'] }}</p>
                        <p class="text-gray-400 text-xs">Primary Guest</p>
                    </div>
                </div>
                <div class="space-y-2.5">
                    <div class="flex items-center gap-2.5">
                        <svg class="w-3.5 h-3.5 text-gray-300 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                        </svg>
                        <span class="text-gray-500 text-xs">{{ $reservation['guest_email'] }}</span>
                    </div>
                    <div class="flex items-center gap-2.5">
                        <svg class="w-3.5 h-3.5 text-gray-300 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                        </svg>
                        <span class="text-gray-500 text-xs">{{ $reservation['guest_phone'] }}</span>
                    </div>
                    <div class="flex items-center gap-2.5">
                        <svg class="w-3.5 h-3.5 text-gray-300 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
                        </svg>
                        <span class="text-gray-500 text-xs">{{ $reservation['pax'] }} Guest{{ $reservation['pax'] > 1 ? 's' : '' }}</span>
                    </div>
                </div>
            </div>

            {{-- Reminders Card --}}
            <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-5">
                <div class="flex items-center justify-between mb-4">
                    <p class="text-gray-500 text-xs font-semibold">Reminders</p>
                    @if ($reminders->where('status', 'pending')->count() > 0)
                    <span class="bg-amber-100 text-amber-700 text-[10px] font-bold px-2 py-0.5 rounded-full">
                        {{ $reminders->where('status', 'pending')->count() }} pending
                    </span>
                    @endif
                </div>

                {{-- Existing reminders --}}
                @if ($reminders->isEmpty())
                <p class="text-gray-300 text-xs mb-4">No reminders yet.</p>
                @else
                <div class="space-y-2.5 mb-4">
                    @foreach ($reminders as $reminder)
                    <div class="flex items-start gap-2.5 group">
                        <div class="flex-1 min-w-0 bg-gray-50 rounded-lg px-3 py-2 {{ $reminder->status === 'done' ? 'opacity-50' : '' }}">
                            <div class="flex items-center gap-1.5 mb-0.5">
                                @if ($reminder->status === 'done')
                                <svg class="w-3 h-3 text-teal-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/>
                                </svg>
                                @else
                                <svg class="w-3 h-3 text-amber-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                                @endif
                                <span class="text-gray-700 text-xs font-semibold">{{ $reminder->type }}</span>
                            </div>
                            <p class="text-gray-400 text-[11px]">{{ $reminder->remind_at->format('M j, Y g:i A') }}</p>
                            @if ($reminder->notes)
                            <p class="text-gray-500 text-[11px] mt-0.5">{{ $reminder->notes }}</p>
                            @endif
                        </div>
                        <div class="flex-shrink-0 flex flex-col gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                            @if ($reminder->status === 'pending')
                            <form action="{{ route('reservations.reminders.complete', [$reservation->id, $reminder->id]) }}" method="POST">
                                @csrf
                                <button type="submit" title="Mark done"
                                        class="w-6 h-6 flex items-center justify-center text-teal-600 hover:bg-teal-50 rounded transition-colors">
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/>
                                    </svg>
                                </button>
                            </form>
                            @endif
                            <form action="{{ route('reservations.reminders.destroy', [$reservation->id, $reminder->id]) }}" method="POST">
                                @csrf
                                @method('DELETE')
                                <button type="submit" title="Delete"
                                        class="w-6 h-6 flex items-center justify-center text-red-400 hover:bg-red-50 rounded transition-colors">
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                                    </svg>
                                </button>
                            </form>
                        </div>
                    </div>
                    @endforeach
                </div>
                @endif

                {{-- Add reminder form --}}
                <div x-data="{ open: false }">
                    <button @click="open = !open" type="button"
                            class="w-full flex items-center justify-center gap-1.5 text-xs font-semibold text-gray-400 hover:text-gray-600 border border-dashed border-gray-200 hover:border-gray-300 rounded-lg py-2 transition-colors">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                        </svg>
                        Add Reminder
                    </button>
                    <div x-show="open" x-cloak class="mt-3">
                        <form action="{{ route('reservations.reminders.store', $reservation->id) }}" method="POST" class="space-y-2.5">
                            @csrf
                            <div>
                                <label class="block text-[11px] font-semibold text-gray-400 mb-1">Type</label>
                                <select name="type" required
                                        class="w-full border-[0.5px] border-gray-200 rounded-lg text-xs px-3 py-2 focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 outline-none">
                                    <option value="">Select type…</option>
                                    <option value="Wake-up Call">Wake-up Call</option>
                                    <option value="Amenity Delivery">Amenity Delivery</option>
                                    <option value="Transportation Pickup">Transportation Pickup</option>
                                    <option value="Checkout Reminder">Checkout Reminder</option>
                                    <option value="Custom">Custom</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-[11px] font-semibold text-gray-400 mb-1">Date & Time</label>
                                <input type="datetime-local" name="remind_at" required
                                       class="w-full border-[0.5px] border-gray-200 rounded-lg text-xs px-3 py-2 focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 outline-none">
                            </div>
                            <div>
                                <label class="block text-[11px] font-semibold text-gray-400 mb-1">Notes</label>
                                <input type="text" name="notes" placeholder="e.g. Wake guest at 7:00 AM"
                                       class="w-full border-[0.5px] border-gray-200 rounded-lg text-xs px-3 py-2 focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 outline-none">
                            </div>
                            <div class="flex gap-2">
                                <button type="submit"
                                        class="flex-1 bg-amber-500 hover:bg-amber-600 text-white text-xs font-semibold py-2 rounded-lg transition-colors">
                                    Save Reminder
                                </button>
                                <button type="button" @click="open = false"
                                        class="px-3 text-gray-400 hover:text-gray-600 text-xs">Cancel</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            {{-- Activity Log --}}
            <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-5">
                <p class="text-gray-500 text-xs font-semibold mb-4">Activity Log</p>
                @php
                $colorBg  = ['teal'=>'bg-teal-100','blue'=>'bg-blue-100','green'=>'bg-green-100','red'=>'bg-red-100','amber'=>'bg-amber-100','purple'=>'bg-purple-100','gray'=>'bg-gray-100'];
                $colorDot = ['teal'=>'bg-teal-500','blue'=>'bg-blue-500','green'=>'bg-green-500','red'=>'bg-red-400','amber'=>'bg-amber-500','purple'=>'bg-purple-500','gray'=>'bg-gray-400'];
                @endphp
                @if($activityLogs->isEmpty())
                <p class="text-gray-300 text-xs">No activity recorded yet.</p>
                @else
                <div class="space-y-4">
                    @foreach($activityLogs as $log)
                    @php $c = $log->color(); @endphp
                    <div class="flex items-start gap-3 relative">
                        @if(!$loop->last)
                        <div class="absolute left-2 top-5 bottom-0 w-px bg-gray-100"></div>
                        @endif
                        <div class="w-4 h-4 rounded-full flex-shrink-0 flex items-center justify-center mt-0.5 {{ $colorBg[$c] ?? 'bg-gray-100' }}">
                            <div class="w-1.5 h-1.5 rounded-full {{ $colorDot[$c] ?? 'bg-gray-400' }}"></div>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="text-gray-700 text-xs">{{ $log->description }}</p>
                            <p class="text-gray-400 text-[11px] mt-0.5">
                                {{ $log->user_name ?? 'System' }} &middot; {{ $log->created_at->diffForHumans() }}
                            </p>
                        </div>
                    </div>
                    @endforeach
                </div>
                @endif
            </div>

        </div>

    </div>

</div>

@endsection