{{-- resources/views/guests/show.blade.php --}}
<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            Guest Details
        </h2>
    </x-slot>

    <div class="py-6 max-w-4xl mx-auto px-4">
        {{-- ✅ Guest Details --}}
        <div class="bg-white dark:bg-gray-800 shadow rounded-lg">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Guest Details</h2>
            </div>
            <div class="px-6 py-4 space-y-2 text-gray-700 dark:text-gray-200">
                <h5 class="text-xl font-bold">{{ $guest->name }}</h5>
                <p><strong>Email:</strong> {{ $guest->email }}</p>
                <p><strong>Phone:</strong> {{ $guest->phone }}</p>
                <p><strong>Property:</strong> {{ $guest->property->name ?? 'N/A' }}</p>
                <p><strong>Check-in:</strong> {{ $guest->check_in_date }}</p>
                <p><strong>Check-out:</strong> {{ $guest->check_out_date }}</p>

                {{-- ✅ Magic Link with Tailwind Copy Button --}}
                <div class="flex items-center space-x-2">
                    <span class="font-semibold">Magic Link:</span>
                    <a id="magicLink"
                       href="{{ route('guest.checkin.show', $guest->magic_link_token) }}"
                       target="_blank"
                       class="text-blue-600 hover:underline break-all">
                        {{ route('guest.checkin.show', $guest->magic_link_token) }}
                    </a>
                    <button onclick="copyMagicLink()"
                            class="ml-2 px-3 py-1 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded shadow">
                        Copy
                    </button>
                </div>

                {{-- ✅ Copy Confirmation (hidden by default) --}}
                <p id="copyMsg" class="hidden text-green-600 text-sm mt-2">Copied to clipboard!</p>
            </div>
        </div>

        <div class="mt-4">
            <a href="{{ route('guests.index') }}"
               class="bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded shadow">
                Back to Guests
            </a>
        </div>
    </div>

    {{-- ✅ Copy Script --}}
    <script>
        function copyMagicLink() {
            const magicLink = document.getElementById("magicLink").href;
            navigator.clipboard.writeText(magicLink).then(() => {
                const msg = document.getElementById("copyMsg");
                msg.classList.remove("hidden");
                setTimeout(() => msg.classList.add("hidden"), 2000);
            }).catch(err => {
                console.error("Failed to copy: ", err);
            });
        }
    </script>
</x-app-layout>