@extends('admin.layout')

@section('title', 'Multilingue - Paramètres')
@section('header', 'Multilingue')

@section('content')
<nav class="mb-6 flex flex-wrap gap-2">
    <a href="{{ route('admin.dashboard') }}" class="text-slate-500 hover:text-slate-900 text-sm">← Tableau de bord</a>
    <span class="text-slate-400">/</span>
    <span class="text-slate-900 font-medium text-sm">Paramètres</span>
</nav>

@if(session('success'))
    <div class="mb-6 p-4 bg-green-50 border border-green-200 text-green-800 rounded-xl">
        <p>{{ session('success') }}</p>
    </div>
@endif
@if(session('error'))
    <div class="mb-6 p-4 bg-red-50 border border-red-200 text-red-800 rounded-xl">
        <p>{{ session('error') }}</p>
    </div>
@endif
@if(session('info'))
    <div class="mb-6 p-4 bg-blue-50 border border-blue-200 text-blue-800 rounded-xl">
        <p>{{ session('info') }}</p>
    </div>
@endif

<div class="space-y-6 max-w-2xl">
    {{-- Choix des langues --}}
    <div class="bg-white rounded-2xl border border-slate-200 overflow-hidden">
        <div class="p-6 border-b border-slate-200">
            <h2 class="text-lg font-semibold text-slate-800">Langues du site</h2>
            <p class="text-slate-500 text-sm mt-1">Choisissez les langues proposées aux visiteurs. Un sélecteur de langue apparaîtra dans la navbar.</p>
        </div>
        <form method="POST" action="{{ route('admin.multilang.settings.store') }}" class="p-6 space-y-6">
            @csrf
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-3">Langues activées</label>
                <div class="flex flex-wrap gap-4">
                    @foreach($available as $code => $label)
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="checkbox" name="multilang_languages[]" value="{{ $code }}" {{ in_array($code, $enabled) ? 'checked' : '' }} class="rounded border-slate-300">
                            <span>{{ $label }} ({{ strtoupper($code) }})</span>
                        </label>
                    @endforeach
                </div>
            </div>
            <div>
                <label for="multilang_default" class="block text-sm font-medium text-slate-700 mb-2">Langue par défaut</label>
                <select name="multilang_default" id="multilang_default" class="w-full px-4 py-2 border border-slate-200 rounded-xl">
                    @foreach($enabled as $code)
                        <option value="{{ $code }}" {{ $code === $defaultLocale ? 'selected' : '' }}>{{ $available[$code] ?? $code }}</option>
                    @endforeach
                </select>
                <p class="text-xs text-slate-500 mt-1">Contenu saisi par défaut. Les autres langues se remplissent via les onglets de traduction.</p>
            </div>
            <div class="pt-4">
                <button type="submit" class="px-6 py-2.5 bg-primary-500 text-white rounded-xl font-medium hover:bg-primary-600 transition">Enregistrer les langues</button>
            </div>
        </form>
    </div>

    {{-- Traductions manuelles / auto --}}
    @if(count($enabled) > 1)
    <div class="bg-white rounded-2xl border border-slate-200 overflow-hidden">
        <div class="p-6 border-b border-slate-200">
            <h2 class="text-lg font-semibold text-slate-800">Traductions</h2>
            <p class="text-slate-500 text-sm mt-1">Où modifier les textes selon la langue :</p>
            <ul class="text-sm text-slate-600 mt-2 space-y-1 list-disc list-inside">
                <li><strong>Pages</strong> — En modifiant une page, un bloc « Traductions » avec un onglet par langue apparaît sous les sections.</li>
                <li><strong>Menu</strong> — Dans Apparence → Menu, chaque lien a un bloc « Traductions » pour saisir le libellé dans chaque langue.</li>
                <li><strong>Réservation</strong> — Si le plugin Réservation est actif, les services ont un bloc « Traductions » (nom + description) dans le formulaire d’édition.</li>
            </ul>
        </div>
        @if($translationAvailable ?? false)
        <div class="p-6 border-t border-slate-100">
            <p class="text-sm text-slate-700 mb-3">Traduction automatique gratuite (sans clé API) :</p>
            <form method="POST" action="{{ route('admin.multilang.translate-all') }}" class="inline" onsubmit="return confirm('Traduire toutes les pages et menus automatiquement ? Cela peut prendre quelques minutes.');">
                @csrf
                <button type="submit" class="px-6 py-2.5 bg-amber-500 text-white rounded-xl font-medium hover:bg-amber-600 transition">Traduire tout le site automatiquement</button>
            </form>
            <p class="text-xs text-slate-500 mt-2">Vous pourrez ensuite ajuster manuellement les traductions dans chaque formulaire.</p>
        </div>
        @endif
    </div>
    @endif
</div>
@endsection
