@extends('layouts.admin')

@section('title', 'Salons Vidéo Jitsi')

@section('content')
<div class="p-8">
    <div class="max-w-4xl mx-auto">
        <div class="bg-white rounded-3xl shadow-xl overflow-hidden border border-gray-100">
            <div class="royal-gradient p-10 text-white">
                <h1 class="text-3xl font-black mb-2">Salons de Réunion Live</h1>
                <p class="opacity-90">Créez ou rejoignez un salon vidéo instantanément pour vos réunions d'équipe ou cours.</p>
            </div>
            
            <div class="p-10">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <!-- Create Room -->
                    <div class="bg-blue-50 p-8 rounded-2xl border border-blue-100">
                        <div class="w-12 h-12 bg-blue-600 rounded-xl flex items-center justify-center text-white mb-6 shadow-lg shadow-blue-200">
                            <i class="fa-solid fa-plus-circle text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900 mb-4">Nouveau Salon</h3>
                        <form action="{{ route('communication.jitsi.create') }}" method="POST">
                            @csrf
                            <input type="text" name="room_name" placeholder="Nom du salon (ex: Reunion-Hebdo)" 
                                   class="w-full border-gray-200 rounded-xl mb-4 focus:ring-blue-500 py-3">
                            <button type="submit" class="w-full bg-blue-600 text-white py-3 rounded-xl font-bold hover:bg-blue-700 transition-all shadow-lg shadow-blue-500/20">
                                Créer & Rejoindre
                            </button>
                        </form>
                    </div>

                    <!-- Room Info -->
                    <div class="bg-slate-50 p-8 rounded-2xl border border-slate-100">
                        <div class="w-12 h-12 bg-slate-800 rounded-xl flex items-center justify-center text-white mb-6 shadow-lg shadow-slate-200">
                            <i class="fa-solid fa-shield-halved text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900 mb-4">Salons Sécurisés</h3>
                        <ul class="space-y-3 text-gray-600 text-sm">
                            <li class="flex items-center gap-2"><i class="fa-solid fa-check text-green-500"></i> Messagerie chiffrée</li>
                            <li class="flex items-center gap-2"><i class="fa-solid fa-check text-green-500"></i> Partage d'écran HD</li>
                            <li class="flex items-center gap-2"><i class="fa-solid fa-check text-green-500"></i> Pas de limite de temps</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection