@extends('layouts.admin')

@section('title', 'Gestion de la Homepage')

@section('content')
<div class="p-6">
    <div class="mb-8">
        <h1 class="text-2xl font-black text-gray-900">Administration de la Page d'Accueil</h1>
        <p class="text-gray-500">Modifiez les textes, images et statistiques de la home sans coder.</p>
    </div>

    <form action="{{ route('admin.homepage.update') }}" method="POST">
        @csrf
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            
            <!-- Hero Section -->
            <div class="bg-white p-6 rounded-3xl shadow-sm border border-gray-100">
                <h2 class="text-lg font-bold mb-6 flex items-center gap-2">
                    <span class="w-8 h-8 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center">1</span>
                    Hero Section (En-tête)
                </h2>
                
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-1">Titre principal</label>
                        <input type="text" name="settings[hero_title]" value="{{ $settings['hero_title'] ?? '' }}" class="w-full border-gray-200 rounded-xl focus:ring-blue-500">
                        <p class="text-[10px] text-gray-400 mt-1 uppercase font-bold tracking-wider">Note : les mots "avenir" ou "future" seront automatiquement colorés.</p>
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-1">Description</label>
                        <textarea name="settings[hero_description]" rows="3" class="w-full border-gray-200 rounded-xl focus:ring-blue-500">{{ $settings['hero_description'] ?? '' }}</textarea>
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-1">Badge du haut</label>
                        <input type="text" name="settings[hero_badge]" value="{{ $settings['hero_badge'] ?? '' }}" class="w-full border-gray-200 rounded-xl focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-1">URL Image (Hero)</label>
                        <input type="text" name="settings[hero_image]" value="{{ $settings['hero_image'] ?? '' }}" class="w-full border-gray-200 rounded-xl focus:ring-blue-500">
                    </div>
                </div>
            </div>

            <!-- Stats Bar -->
            <div class="bg-white p-6 rounded-3xl shadow-sm border border-gray-100">
                <h2 class="text-lg font-bold mb-6 flex items-center gap-2">
                    <span class="w-8 h-8 bg-green-100 text-green-600 rounded-lg flex items-center justify-center">2</span>
                    Compteurs Statistiques
                </h2>
                
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-1">Étudiants</label>
                        <input type="number" name="settings[stat_students]" value="{{ $settings['stat_students'] ?? '' }}" class="w-full border-gray-200 rounded-xl focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-1">Formations</label>
                        <input type="number" name="settings[stat_courses]" value="{{ $settings['stat_courses'] ?? '' }}" class="w-full border-gray-200 rounded-xl focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-1">% Réussite</label>
                        <input type="number" name="settings[stat_success_rate]" value="{{ $settings['stat_success_rate'] ?? '' }}" class="w-full border-gray-200 rounded-xl focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-1">Pays</label>
                        <input type="number" name="settings[stat_countries]" value="{{ $settings['stat_countries'] ?? '' }}" class="w-full border-gray-200 rounded-xl focus:ring-blue-500">
                    </div>
                </div>
            </div>

            <!-- Features (Textes uniquement ici, les cartes se gèrent via leur CRUD) -->
            <div class="bg-white p-6 rounded-3xl shadow-sm border border-gray-100">
                <h2 class="text-lg font-bold mb-6 flex items-center gap-2">
                    <span class="w-8 h-8 bg-purple-100 text-purple-600 rounded-lg flex items-center justify-center">3</span>
                    La Méthode (Textes)
                </h2>
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-1">Titre de section</label>
                        <input type="text" name="settings[features_title]" value="{{ $settings['features_title'] ?? '' }}" class="w-full border-gray-200 rounded-xl focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-1">Sous-titre</label>
                        <textarea name="settings[features_subtitle]" rows="2" class="w-full border-gray-200 rounded-xl focus:ring-blue-500">{{ $settings['features_subtitle'] ?? '' }}</textarea>
                    </div>
                </div>
            </div>

            <!-- Footer Section -->
            <div class="bg-white p-6 rounded-3xl shadow-sm border border-gray-100">
                <h2 class="text-lg font-bold mb-6 flex items-center gap-2">
                    <span class="w-8 h-8 bg-slate-100 text-slate-600 rounded-lg flex items-center justify-center">4</span>
                    Pied de page
                </h2>
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-1">Description (Branding)</label>
                        <textarea name="settings[footer_description]" rows="3" class="w-full border-gray-200 rounded-xl focus:ring-blue-500">{{ $settings['footer_description'] ?? '' }}</textarea>
                    </div>
                </div>
            </div>
        </div>

        <div class="mt-8 flex justify-end">
            <button type="submit" class="bg-blue-600 text-white px-10 py-4 rounded-2xl font-black hover:bg-blue-700 transition-all shadow-xl shadow-blue-500/30">
                Enregistrer les modifications
            </button>
        </div>
    </form>
</div>
@endsection