@extends('layouts.site')

@section('title', $faculty->name . ' - Sciences Afrique')

@section('content')
 <section class="relative pt-28 pb-20 overflow-hidden">
     <div class="absolute inset-0 z-0">
         <div class="absolute top-0 right-0 -mr-20 -mt-20 w-96 h-96 rounded-full bg-blue-100/50 blur-3xl"></div>
         <div class="absolute bottom-0 left-0 -ml-20 -mb-20 w-80 h-80 rounded-full bg-orange-100/50 blur-3xl"></div>
     </div>

     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
         <div class="mb-12">
             <a href="{{ route('faculties.index') }}" class="inline-flex items-center gap-2 text-slate-500 hover:text-blue-700 transition-colors font-bold text-sm mb-6">← Retour</a>
             <h1 class="text-3xl sm:text-4xl font-black text-brand-dark mb-4">{{ $faculty->name }}</h1>
             <p class="text-lg text-slate-500 max-w-3xl leading-relaxed">{{ $faculty->description }}</p>
         </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
            <div class="lg:col-span-2 space-y-12">
                @foreach($faculty->departments as $department)
                    <section>
                        <div class="flex items-center gap-3 mb-6">
                            <h2 class="text-2xl font-black text-brand-dark">{{ $department->name }}</h2>
                            <span class="px-3 py-1 bg-blue-50 text-blue-700 text-xs font-black rounded-full uppercase tracking-wider border border-blue-100">
                                {{ $department->courses->count() }} Cours
                            </span>
                        </div>

                        <div class="grid grid-cols-1 gap-4">
                            @foreach($department->courses as $course)
                                <div class="bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl transition-all duration-300 relative overflow-hidden group">
                                    @if($course->is_certification)
                                        <div class="absolute top-0 right-0 bg-amber-400 text-amber-900 text-[10px] font-black px-4 py-1 rounded-bl-lg uppercase tracking-widest shadow-sm">
                                            Certification
                                        </div>
                                    @endif
                                    
                                    <h3 class="text-lg font-black text-brand-dark mb-2 group-hover:text-blue-700 transition-colors">
                                        {{ $course->title }}
                                    </h3>
                                    <p class="text-slate-500 text-sm mb-4">
                                        {{ $course->content }}
                                    </p>
                                    
                                    @auth
                                        <form action="{{ route('enroll') }}" method="POST" class="inline-block">
                                            @csrf
                                            <input type="hidden" name="course_id" value="{{ $course->id }}">
                                            <input type="hidden" name="user_id" value="{{ Auth::id() }}">
                                            <button type="submit" class="text-sm font-bold {{ $course->is_certification ? 'text-amber-600 hover:text-amber-700' : 'text-blue-600 hover:text-blue-700' }} transition-colors">
                                                S'inscrire au cours →
                                            </button>
                                        </form>
                                    @else
                                        <a href="{{ route('login') }}" class="text-sm font-bold text-slate-400 hover:text-blue-700 transition-colors">
                                            Connectez-vous pour vous inscrire →
                                        </a>
                                    @endauth

                                </div>
                            @endforeach
                        </div>
                    </section>
                @endforeach
            </div>

            <div class="space-y-8">
                <div class="bg-blue-600 rounded-3xl p-8 text-white shadow-xl shadow-blue-600/20">
                    <h3 class="text-xl font-bold mb-4">Besoin d'aide ?</h3>
                    <p class="text-blue-100 text-sm mb-6 leading-relaxed">
                        Nos conseillers académiques sont disponibles pour vous orienter dans le choix de votre parcours et de vos certifications.
                    </p>
                    <button class="w-full bg-white text-blue-600 font-bold py-3 rounded-xl hover:bg-blue-50 transition-colors">
                        Contacter un conseiller
                    </button>
                </div>

                <div class="bg-white rounded-3xl p-8 border border-slate-100 shadow-sm">
                    <h3 class="text-lg font-black text-brand-dark mb-6">Départements</h3>
                    <ul class="space-y-4">
                        @foreach($faculty->departments as $department)
                            <li class="flex items-center gap-3 text-sm text-slate-600">
                                <span class="w-1.5 h-1.5 bg-blue-600 rounded-full"></span>
                                {{ $department->name }}
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
 </section>

 @if(session('success'))
     <div class="fixed bottom-8 right-8 bg-green-600 text-white px-6 py-4 rounded-2xl shadow-2xl flex items-center gap-4">
         <span class="font-bold">{{ session('success') }}</span>
     </div>
 @endif

 @if(session('error'))
     <div class="fixed bottom-8 right-8 bg-red-600 text-white px-6 py-4 rounded-2xl shadow-2xl flex items-center gap-4">
         <span class="font-bold">{{ session('error') }}</span>
     </div>
 @endif
@endsection