@extends('admin.layout')

@section('title', 'Apparence')
@section('header', 'Apparence')

@section('content')
<div class="mb-6">
    <a href="{{ route('admin.pages.edit-home') }}" class="inline-flex items-center gap-2 px-4 py-2.5 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition font-medium text-sm">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
        Modifier la page d'accueil du theme
    </a>
</div>
<form method="POST" action="{{ route('admin.appearance.store') }}" enctype="multipart/form-data" class="space-y-6 sm:space-y-8 w-full max-w-2xl">
    @csrf

    <div class="bg-white rounded-2xl border border-slate-200 p-4 sm:p-6">
        <h2 class="font-semibold text-slate-800 mb-4">Général</h2>
        <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Nom du site</label>
            <input type="text" name="site_name" value="{{ old('site_name', $settings['site_name']) }}" required class="w-full border border-slate-200 rounded-xl px-4 py-2.5 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition">
        </div>
    </div>

    <div class="bg-white rounded-2xl border border-slate-200 p-4 sm:p-6">
        <h2 class="font-semibold text-slate-800 mb-4">Couleurs</h2>
        <div class="grid sm:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">Couleur primaire</label>
                <div class="flex items-center gap-3">
                    <input type="color" name="primary_color" value="{{ old('primary_color', $settings['primary_color']) }}" class="h-11 w-14 rounded-lg cursor-pointer border border-slate-200" id="primary_color">
                    <span class="text-sm font-mono text-slate-500">{{ old('primary_color', $settings['primary_color']) }}</span>
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">Couleur secondaire</label>
                <div class="flex items-center gap-3">
                    <input type="color" name="secondary_color" value="{{ old('secondary_color', $settings['secondary_color']) }}" class="h-11 w-14 rounded-lg cursor-pointer border border-slate-200">
                    <span class="text-sm font-mono text-slate-500">{{ old('secondary_color', $settings['secondary_color']) }}</span>
                </div>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-2xl border border-slate-200 p-4 sm:p-6">
        <h2 class="font-semibold text-slate-800 mb-4">Logo</h2>
        <p class="text-sm text-slate-500 mb-4">Le logo est utilisé dans la navigation et dans l'onglet du navigateur (favicon).</p>
        @if($settings['logo'] ?? null)
            <img src="{{ asset('storage/'.$settings['logo']) }}" alt="Logo" class="h-16 mb-4 rounded-lg object-contain">
        @endif
        <x-admin.file-upload-button name="logo" accept="image/*" />
        <p class="text-xs text-slate-500 mt-2">Cliquez sur l'icône pour choisir un fichier depuis votre ordinateur.</p>
    </div>

    <div class="bg-white rounded-2xl border border-slate-200 p-4 sm:p-6">
        <h2 class="font-semibold text-slate-800 mb-4">SEO</h2>
        <p class="text-sm text-slate-500 mb-4">Référencement et partage sur les réseaux sociaux.</p>
        <div class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">Meta description</label>
                <textarea name="meta_description" rows="3" maxlength="320" class="w-full border border-slate-200 rounded-xl px-4 py-2.5 focus:ring-2 focus:ring-primary-500 focus:border-primary-500" placeholder="Bref résumé de votre site (max 320 caractères)">{{ old('meta_description', $settings['meta_description'] ?? '') }}</textarea>
                <p class="text-xs text-slate-500 mt-2">Apparaît dans les résultats de recherche Google.</p>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">Mots-clés</label>
                <input type="text" name="meta_keywords" value="{{ old('meta_keywords', $settings['meta_keywords'] ?? '') }}" class="w-full border border-slate-200 rounded-xl px-4 py-2.5 focus:ring-2 focus:ring-primary-500 focus:border-primary-500" placeholder="mot1, mot2, mot3">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">Image de partage (Open Graph)</label>
                @php $ogImg = $settings['og_image'] ?? null; @endphp
                @if($ogImg)
                    <img src="{{ str_starts_with($ogImg, 'http') || str_starts_with($ogImg, '/') ? $ogImg : asset('storage/'.$ogImg) }}" alt="OG" class="h-20 mb-2 rounded-lg object-cover">
                @endif
                <x-admin.image-input name="og_image_url" :value="old('og_image_url', $ogImg ?? '')" placeholder="URL ou cliquer pour uploader" input-class="w-full border border-slate-200 rounded-xl px-4 py-2.5 focus:ring-2 focus:ring-primary-500 focus:border-primary-500" />
                <p class="text-xs text-slate-500 mt-2">Image affichée lors du partage sur Facebook, LinkedIn, etc. Si vide, le logo est utilisé.</p>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-2xl border border-slate-200 p-4 sm:p-6">
        <h2 class="font-semibold text-slate-800 mb-4">Animation de chargement</h2>
        <p class="text-sm text-slate-500 mb-4">Affiche une animation entre les pages lors de la navigation. L'image tourne pendant le chargement.</p>
        <div class="space-y-4">
            <label class="flex items-center gap-3 cursor-pointer">
                <input type="checkbox" name="page_loader_enabled" value="1" {{ ($settings['page_loader_enabled'] ?? false) ? 'checked' : '' }} class="rounded border-slate-300 text-primary-500 focus:ring-primary-500">
                <span class="font-medium text-slate-700">Activer l'animation de chargement</span>
            </label>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">Image du loader (tourne pendant le chargement)</label>
                @php $loaderImg = $settings['page_loader_image'] ?? ''; @endphp
                @if($loaderImg)
                    <img src="{{ str_starts_with($loaderImg, 'http') || str_starts_with($loaderImg, '/') ? $loaderImg : asset('storage/'.$loaderImg) }}" alt="Loader" class="h-16 w-16 mb-2 rounded-lg object-contain animate-spin" style="animation-duration: 1.5s;">
                @endif
                <x-admin.image-input name="page_loader_image" :value="old('page_loader_image', $loaderImg)" placeholder="URL ou cliquer sur l'icône pour uploader" input-class="w-full border border-slate-200 rounded-xl px-4 py-2.5 focus:ring-2 focus:ring-primary-500 focus:border-primary-500" />
                <p class="text-xs text-slate-500 mt-2">Image carrée recommandée (ex. logo, icône). Si vide, le logo du site est utilisé.</p>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-2xl border border-slate-200 p-4 sm:p-6">
        <h2 class="font-semibold text-slate-800 mb-4">Thème</h2>
        <div>
            <select name="active_theme" class="w-full border border-slate-200 rounded-xl px-4 py-2.5 focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
                @foreach($availableThemes ?? [] as $slug => $theme)
                    <option value="{{ $slug }}" {{ ($settings['active_theme'] ?? '') == $slug ? 'selected' : '' }}>
                        {{ $theme['name'] ?? $slug }}
                        @if(($theme['source'] ?? '') === 'custom')
                            — Personnalisé
                        @elseif(($theme['price'] ?? 0) > 0)
                            — Premium
                        @else
                            — Gratuit
                        @endif
                    </option>
                @endforeach
            </select>
            <a href="{{ route('admin.marketplace.index') }}" class="text-primary-600 text-sm mt-2 inline-block hover:underline">Voir le marketplace</a>
        </div>
    </div>

    <div class="bg-white rounded-2xl border border-slate-200 p-6">
        <h2 class="font-semibold text-slate-800 mb-4">Fond du thème Classic</h2>
        <p class="text-sm text-slate-500 mb-4">Personnalise l'arriere-plan global du thème Classic (accueil + pages).</p>
        <div class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">Image de fond</label>
                <x-admin.image-input name="classic_background_image" :value="old('classic_background_image', $settings['classic_background_image'] ?? '')" placeholder="URL ou cliquer pour uploader" input-class="w-full border border-slate-200 rounded-xl px-4 py-2.5 focus:ring-2 focus:ring-primary-500 focus:border-primary-500" />
                <p class="text-xs text-slate-500 mt-2">URL ou cliquez sur l'icône pour uploader depuis votre ordinateur.</p>
            </div>
            <div class="grid sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-2">Mode d'affichage</label>
                    <select name="classic_background_size" class="w-full border border-slate-200 rounded-xl px-4 py-2.5 focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
                        <option value="cover" {{ old('classic_background_size', $settings['classic_background_size']) === 'cover' ? 'selected' : '' }}>Couvrir</option>
                        <option value="contain" {{ old('classic_background_size', $settings['classic_background_size']) === 'contain' ? 'selected' : '' }}>Contenir</option>
                        <option value="auto" {{ old('classic_background_size', $settings['classic_background_size']) === 'auto' ? 'selected' : '' }}>Auto</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-2">Opacité overlay sombre (%)</label>
                    <input type="number" min="0" max="80" step="1" name="classic_background_overlay" value="{{ old('classic_background_overlay', $settings['classic_background_overlay']) }}" class="w-full border border-slate-200 rounded-xl px-4 py-2.5 focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
                </div>
            </div>
            <div class="pt-4 border-t border-slate-100">
                <div class="flex items-center gap-3 mb-2">
                    <input type="checkbox" name="classic_hero_eyebrow_enabled" id="classic_hero_eyebrow_enabled" value="1" {{ ($settings['classic_hero_eyebrow_enabled'] ?? true) ? 'checked' : '' }} class="rounded border-slate-300">
                    <label for="classic_hero_eyebrow_enabled" class="text-sm font-medium text-slate-700">Afficher la barre d'accroche (au-dessus du titre)</label>
                </div>
                <input type="text" name="classic_hero_eyebrow" value="{{ old('classic_hero_eyebrow', $settings['classic_hero_eyebrow'] ?? 'Bienvenue') }}" class="w-full border border-slate-200 rounded-xl px-4 py-2.5 focus:ring-2 focus:ring-primary-500 focus:border-primary-500" placeholder="Bienvenue">
                <p class="text-xs text-slate-500 mt-2">Ex. : Bienvenue, Découvrez, Nouveau, etc.</p>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-2xl border border-slate-200 p-4 sm:p-6">
        <h2 class="font-semibold text-slate-800 mb-4">Menu de navigation</h2>
        <p class="text-sm text-slate-500 mb-4">Le label est en langue par défaut. @if(!empty($multilang['locales'])) Cliquez sur « Traductions » pour saisir le label dans les autres langues. @endif <strong>Ordre du menu :</strong> flèches ↑ ↓ à gauche de chaque ligne, puis enregistrez.</p>
        <div id="appearance-menu-list" class="flex flex-col gap-3">
            @foreach($menuItems as $miIndex => $item)
                <div class="appearance-menu-row flex gap-2 sm:gap-3 items-stretch border border-slate-200 rounded-xl p-3 bg-slate-50/30 hover:border-slate-300 transition-shadow">
                    <div class="flex flex-col items-center justify-center gap-0.5 shrink-0 self-stretch py-0.5">
                        <button type="button" class="appearance-menu-move-up w-9 py-1.5 text-xs font-semibold text-slate-500 hover:text-slate-800 hover:bg-slate-100 border border-slate-200 rounded-md bg-white leading-none" title="Monter" aria-label="Monter ce lien">↑</button>
                        <button type="button" class="appearance-menu-move-down w-9 py-1.5 text-xs font-semibold text-slate-500 hover:text-slate-800 hover:bg-slate-100 border border-slate-200 rounded-md bg-white leading-none" title="Descendre" aria-label="Descendre ce lien">↓</button>
                    </div>
                    <div class="flex-1 min-w-0 space-y-3">
                        <input type="hidden" name="menu_items[{{ $miIndex }}][id]" value="{{ $item->id }}">
                        <div class="flex gap-3 items-center flex-wrap">
                            <input type="text" name="menu_items[{{ $miIndex }}][label]" value="{{ $item->label }}" placeholder="Label" class="flex-1 min-w-[120px] border border-slate-200 rounded-xl px-4 py-2.5 text-sm">
                            <input type="text" name="menu_items[{{ $miIndex }}][url]" value="{{ $item->url }}" placeholder="/page ou https://" class="flex-1 min-w-[120px] border border-slate-200 rounded-xl px-4 py-2.5 text-sm">
                            <select name="menu_items[{{ $miIndex }}][target]" class="border border-slate-200 rounded-xl px-4 py-2.5 text-sm w-40">
                                <option value="_self" {{ $item->target == '_self' ? 'selected' : '' }}>Même fenêtre</option>
                                <option value="_blank" {{ $item->target == '_blank' ? 'selected' : '' }}>Nouvel onglet</option>
                            </select>
                        </div>
                        @if(!empty($multilang['locales']))
                        <details class="mt-1">
                            <summary class="cursor-pointer text-sm text-primary-600 hover:text-primary-700 font-medium list-none">Traductions</summary>
                            <div class="mt-3 pt-3 border-t border-slate-100 space-y-2">
                            @foreach($multilang['locales'] as $loc)
                                <div class="flex items-center gap-2">
                                    <label class="text-sm text-slate-600 w-24 shrink-0">{{ $multilang['labels'][$loc] ?? strtoupper($loc) }}</label>
                                    <input type="text" name="menu_items[{{ $miIndex }}][translations][{{ $loc }}]" value="{{ $item->translations[$loc] ?? '' }}" placeholder="Label en {{ $multilang['labels'][$loc] ?? $loc }}" class="flex-1 border border-slate-200 rounded-lg px-3 py-2 text-sm">
                                </div>
                            @endforeach
                            </div>
                        </details>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
            <div class="flex gap-3 items-center pt-2">
                <input type="text" name="menu_items[{{ count($menuItems) }}][label]" placeholder="Nouveau lien" class="flex-1 border border-dashed border-slate-300 rounded-xl px-4 py-2.5 text-sm text-slate-500">
                <input type="text" name="menu_items[{{ count($menuItems) }}][url]" placeholder="URL" class="flex-1 border border-dashed border-slate-300 rounded-xl px-4 py-2.5 text-sm text-slate-500">
                <select name="menu_items[{{ count($menuItems) }}][target]" class="border border-slate-200 rounded-xl px-4 py-2.5 text-sm w-40">
                    <option value="_self">Même fenêtre</option>
                    <option value="_blank">Nouvel onglet</option>
                </select>
            </div>
    </div>

    <div class="bg-white rounded-2xl border border-slate-200 p-4 sm:p-6">
        <h2 class="font-semibold text-slate-800 mb-4">Footer (personnalisation complete)</h2>
        <div class="space-y-5">
            <div class="grid sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-2">Couleur de fond</label>
                    <input type="color" name="footer_bg_color" value="{{ old('footer_bg_color', $settings['footer_bg_color'] ?? '#3d2a1f') }}" class="h-11 w-16 rounded-lg cursor-pointer border border-slate-200">
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-2">Couleur du texte</label>
                    <input type="color" name="footer_text_color" value="{{ old('footer_text_color', $settings['footer_text_color'] ?? '#faf8f5') }}" class="h-11 w-16 rounded-lg cursor-pointer border border-slate-200">
                </div>
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">Titre footer (colonne gauche)</label>
                <input type="text" name="footer_heading" value="{{ old('footer_heading', $settings['footer_heading'] ?? '') }}" class="w-full border border-slate-200 rounded-xl px-4 py-2.5" placeholder="Laisser vide pour utiliser le nom du site">
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">Description footer</label>
                <textarea name="footer_description" rows="3" class="w-full border border-slate-200 rounded-xl px-4 py-2.5">{{ old('footer_description', $settings['footer_description'] ?? '') }}</textarea>
            </div>

            <div class="grid sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-2">Titre colonne navigation</label>
                    <input type="text" name="footer_nav_title" value="{{ old('footer_nav_title', $settings['footer_nav_title'] ?? 'Navigation') }}" class="w-full border border-slate-200 rounded-xl px-4 py-2.5">
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-2">Titre colonne reseaux</label>
                    <input type="text" name="footer_social_title" value="{{ old('footer_social_title', $settings['footer_social_title'] ?? 'Reseaux sociaux') }}" class="w-full border border-slate-200 rounded-xl px-4 py-2.5">
                </div>
            </div>

            <div class="grid sm:grid-cols-3 gap-4">
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-2">URL Facebook</label>
                    <input type="text" name="footer_facebook_url" value="{{ old('footer_facebook_url', $settings['footer_facebook_url'] ?? '') }}" class="w-full border border-slate-200 rounded-xl px-4 py-2.5" placeholder="https://facebook.com/...">
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-2">URL Instagram</label>
                    <input type="text" name="footer_instagram_url" value="{{ old('footer_instagram_url', $settings['footer_instagram_url'] ?? '') }}" class="w-full border border-slate-200 rounded-xl px-4 py-2.5" placeholder="https://instagram.com/...">
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-2">URL Google Maps</label>
                    <input type="text" name="footer_maps_url" value="{{ old('footer_maps_url', $settings['footer_maps_url'] ?? '') }}" class="w-full border border-slate-200 rounded-xl px-4 py-2.5" placeholder="https://maps.google.com/...">
                </div>
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">Liens legaux / footer (ajoutables et supprimables)</label>
                <div class="space-y-3">
                    @foreach(($settings['footer_links'] ?? []) as $i => $link)
                        <div class="flex flex-col sm:flex-row gap-2 sm:gap-3 sm:items-center">
                            <input type="text" name="footer_links[{{ $i }}][label]" value="{{ $link['label'] ?? '' }}" placeholder="Libelle du lien" class="flex-1 border border-slate-200 rounded-xl px-4 py-2.5 text-sm">
                            <input type="text" name="footer_links[{{ $i }}][url]" value="{{ $link['url'] ?? '' }}" placeholder="/mentions-legales ou https://" class="flex-1 border border-slate-200 rounded-xl px-4 py-2.5 text-sm">
                        </div>
                    @endforeach
                    <div class="flex flex-col sm:flex-row gap-2 sm:gap-3 sm:items-center pt-2">
                        <input type="text" name="footer_links[{{ count($settings['footer_links'] ?? []) }}][label]" placeholder="Nouveau lien footer" class="flex-1 border border-dashed border-slate-300 rounded-xl px-4 py-2.5 text-sm text-slate-500">
                        <input type="text" name="footer_links[{{ count($settings['footer_links'] ?? []) }}][url]" placeholder="URL" class="flex-1 border border-dashed border-slate-300 rounded-xl px-4 py-2.5 text-sm text-slate-500">
                    </div>
                </div>
                <p class="text-xs text-slate-500 mt-2">Pour supprimer un lien, videz son libelle ou son URL puis enregistrez.</p>
                <p class="text-xs text-slate-500 mt-1">Le credit GdevStudio reste fixe et n'est pas modifiable.</p>
            </div>
        </div>
    </div>

    <div class="flex flex-wrap gap-3">
        <button type="submit" class="px-6 py-2.5 bg-primary-500 text-white rounded-xl hover:bg-primary-600 transition font-medium">
            Enregistrer les modifications
        </button>
        <a href="{{ route('admin.dashboard') }}" class="px-6 py-2.5 border border-slate-200 rounded-xl hover:bg-slate-50 transition font-medium text-slate-700">
            Annuler
        </a>
    </div>
</form>

<script>
(function () {
    var listId = 'appearance-menu-list';

    function reindexAppearanceMenuRows() {
        document.querySelectorAll('#' + listId + ' .appearance-menu-row').forEach(function (row, i) {
            row.querySelectorAll('[name^="menu_items["]').forEach(function (input) {
                input.name = input.name.replace(/^menu_items\[\d+\]/, 'menu_items[' + i + ']');
            });
        });
    }

    function moveMenuRow(row, direction) {
        var root = document.getElementById(listId);
        if (!root || !row || !row.classList.contains('appearance-menu-row')) return;
        var prev = row.previousElementSibling;
        var next = row.nextElementSibling;
        if (direction === 'up' && prev && prev.classList.contains('appearance-menu-row')) {
            root.insertBefore(row, prev);
            reindexAppearanceMenuRows();
        } else if (direction === 'down' && next && next.classList.contains('appearance-menu-row')) {
            root.insertBefore(next, row);
            reindexAppearanceMenuRows();
        }
    }

    document.addEventListener('click', function (e) {
        var up = e.target.closest('.appearance-menu-move-up');
        var down = e.target.closest('.appearance-menu-move-down');
        if (!up && !down) return;
        e.preventDefault();
        var row = (up || down).closest('.appearance-menu-row');
        moveMenuRow(row, up ? 'up' : 'down');
    });
})();
</script>
@endsection
