@extends('layouts.admin')

@section('title', 'Registration Links - ' . $event->name)

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <div class="flex items-center justify-between">
                <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Registration Links</h1>
                <a href="{{ route('admin.events.index') }}" 
                   class="btn btn-light btn-md">
                    Back to Events
                </a>
            </div>
        </div>

        <div class="p-6">
            <!-- Event Information -->
            <div class="mb-8">
                <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">{{ $event->name }}</h2>
                <p class="text-gray-600 dark:text-gray-300 mb-4">{!! $event->description !!}</p>
                
                <div class="flex items-center space-x-4 mb-4">
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
                        👥 {{ $event->users->count() }} users
                    </span>
                </div>

                <div class="flex space-x-3">
                    <a href="{{ route('admin.events.manage-users', $event) }}" 
                       class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md transition duration-150 ease-in-out">
                        Manage Users
                    </a>
                    <a href="{{ route('admin.events.show', $event) }}" 
                       class="inline-flex items-center px-4 py-2 bg-orange-600 hover:bg-orange-700 text-white text-sm font-medium rounded-md transition duration-150 ease-in-out">
                        View Event Details
                    </a>
                </div>
            </div>

            @if($event->allow_registration)
                <!-- Registration Status -->
                <div class="mb-8">
                    <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4">
                        <h3 class="text-lg font-medium text-green-800 dark:text-green-200 mb-2">Registration Enabled</h3>
                        <p class="text-green-700 dark:text-green-300">Users can register for this event using the links below.</p>
                    </div>
                </div>

                <!-- Registration Links -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
                    <!-- New User Registration -->
                    <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-6">
                        <h3 class="text-lg font-medium text-blue-800 dark:text-blue-200 mb-4">New User Registration</h3>
                        <p class="text-blue-700 dark:text-blue-300 mb-4">For users who don't have an account yet:</p>
                        
                        <div class="space-y-4">
                            <!-- Registration Link Input -->
                            <div class="flex">
                                <input type="text" 
                                       id="registration-link" 
                                       value="{{ url('/register/event/' . $event->registration_token) }}" 
                                       readonly 
                                       class="flex-1 px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-l-md text-sm text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                <button onclick="copyToClipboard('registration-link')" 
                                        class="btn btn-primary btn-sm rounded-r-md">
                                    Copy
                                </button>
                            </div>

                            <!-- QR Code for Registration -->
                            <div class="flex flex-col items-center space-y-2">
                                <div class="bg-white p-4 rounded-lg border border-gray-200 dark:border-gray-600">
                                    {!! QrCode::size(150)->generate(url('/register/event/' . $event->registration_token)) !!}
                                </div>
                                <p class="text-xs text-blue-600 dark:text-blue-400 text-center">Scan to register for this event</p>
                            </div>

                            <!-- Test Link -->
                            <div>
                                <a href="{{ url('/register/event/' . $event->registration_token) }}" 
                                   target="_blank" 
                                   class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md transition duration-150 ease-in-out">
                                    Test Registration Link
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Existing User Login -->
                    <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-6">
                        <h3 class="text-lg font-medium text-green-800 dark:text-green-200 mb-4">Existing User Login</h3>
                        <p class="text-green-700 dark:text-green-300 mb-4">For users who already have an account:</p>
                        
                        <div class="space-y-4">
                            <!-- Login Link Input -->
                            <div class="flex">
                                <input type="text" 
                                       id="login-link" 
                                       value="{{ url('/login/event/' . $event->registration_token) }}" 
                                       readonly 
                                       class="flex-1 px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-l-md text-sm text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500">
                                <button onclick="copyToClipboard('login-link')" 
                                        class="btn btn-success btn-sm rounded-r-md">
                                    Copy
                                </button>
                            </div>

                            <!-- QR Code for Login -->
                            <div class="flex flex-col items-center space-y-2">
                                <div class="bg-white p-4 rounded-lg border border-gray-200 dark:border-gray-600">
                                    {!! QrCode::size(150)->generate(url('/login/event/' . $event->registration_token)) !!}
                                </div>
                                <p class="text-xs text-green-600 dark:text-green-400 text-center">Scan to login and join this event</p>
                            </div>

                            <!-- Test Link -->
                            <div>
                                <a href="{{ url('/login/event/' . $event->registration_token) }}" 
                                   target="_blank" 
                                   class="inline-flex items-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm font-medium rounded-md transition duration-150 ease-in-out">
                                    Test Login Link
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Registration Token Information -->
                <div class="bg-gray-50 dark:bg-gray-900/20 border border-gray-200 dark:border-gray-700 rounded-lg p-6 mb-8">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">Registration Token Information</h3>
                    <div class="flex items-center justify-between">
                        <div>
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Token:</span>
                            <code class="ml-2 px-2 py-1 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded text-sm">{{ $event->registration_token }}</code>
                        </div>
                        </form>
                    </div>
                </div>

                <!-- How to Use These Links -->
                <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-6">How to Use These Links</h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <div>
                            <h4 class="text-base font-medium text-blue-600 dark:text-blue-400 mb-3">Registration Link</h4>
                            <ul class="space-y-2 text-gray-600 dark:text-gray-300">
                                <li class="flex items-start">
                                    <span class="flex-shrink-0 w-1.5 h-1.5 bg-blue-500 rounded-full mt-2 mr-3"></span>
                                    Share with new users who need to create an account
                                </li>
                                <li class="flex items-start">
                                    <span class="flex-shrink-0 w-1.5 h-1.5 bg-blue-500 rounded-full mt-2 mr-3"></span>
                                    Automatically associates them with this event
                                </li>
                                <li class="flex items-start">
                                    <span class="flex-shrink-0 w-1.5 h-1.5 bg-blue-500 rounded-full mt-2 mr-3"></span>
                                    If email already exists for same client, logs them in
                                </li>
                                <li class="flex items-start">
                                    <span class="flex-shrink-0 w-1.5 h-1.5 bg-blue-500 rounded-full mt-2 mr-3"></span>
                                    Prevents cross-client account conflicts
                                </li>
                            </ul>
                        </div>
                        
                        <div>
                            <h4 class="text-base font-medium text-green-600 dark:text-green-400 mb-3">Login Link</h4>
                            <ul class="space-y-2 text-gray-600 dark:text-gray-300">
                                <li class="flex items-start">
                                    <span class="flex-shrink-0 w-1.5 h-1.5 bg-green-500 rounded-full mt-2 mr-3"></span>
                                    Share with existing users who have accounts
                                </li>
                                <li class="flex items-start">
                                    <span class="flex-shrink-0 w-1.5 h-1.5 bg-green-500 rounded-full mt-2 mr-3"></span>
                                    Automatically associates them with this event
                                </li>
                                <li class="flex items-start">
                                    <span class="flex-shrink-0 w-1.5 h-1.5 bg-green-500 rounded-full mt-2 mr-3"></span>
                                    Only works for users in the same client organization
                                </li>
                                <li class="flex items-start">
                                    <span class="flex-shrink-0 w-1.5 h-1.5 bg-green-500 rounded-full mt-2 mr-3"></span>
                                    Maintains existing user data and progress
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            @else
                <!-- Registration Disabled -->
                <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-6">
                    <h3 class="text-lg font-medium text-yellow-800 dark:text-yellow-200 mb-2">Registration Disabled</h3>
                    <p class="text-yellow-700 dark:text-yellow-300 mb-4">Registration is currently disabled for this event. Enable registration in the event settings to generate registration links.</p>
                    <a href="{{ route('admin.events.edit', $event) }}" 
                       class="inline-flex items-center px-4 py-2 bg-orange-600 hover:bg-orange-700 text-white text-sm font-medium rounded-md transition duration-150 ease-in-out">
                        Edit Event Settings
                    </a>
                </div>
            @endif
        </div>
    </div>
</div>

<script>
function copyToClipboard(elementId) {
    const element = document.getElementById(elementId);
    element.select();
    element.setSelectionRange(0, 99999); // For mobile devices
    
    try {
        document.execCommand('copy');
        
        // Show success feedback
        const button = event.target.closest('button');
        const originalText = button.innerHTML;
        button.innerHTML = 'Copied!';
        button.classList.add('bg-green-600', 'hover:bg-green-700');
        button.classList.remove('bg-blue-600', 'hover:bg-blue-700', 'bg-green-600', 'hover:bg-green-700');
        
        setTimeout(() => {
            button.innerHTML = originalText;
            button.classList.remove('bg-green-600', 'hover:bg-green-700');
            if (elementId.includes('registration')) {
                button.classList.add('bg-blue-600', 'hover:bg-blue-700');
            } else {
                button.classList.add('bg-green-600', 'hover:bg-green-700');
            }
        }, 2000);
    } catch (err) {
        console.error('Failed to copy: ', err);
        alert('Failed to copy to clipboard. Please copy manually.');
    }
}
</script>
@endsection