@extends('admin.layout')

@section('title', 'Newsletter - Popup')
@section('header', 'Newsletter')

@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>
    <a href="{{ route('admin.newsletter.index') }}" class="text-slate-500 hover:text-slate-900 text-sm">Abonnés</a>
    <span class="text-slate-400">/</span>
    <a href="{{ route('admin.newsletter.campaigns') }}" class="text-slate-500 hover:text-slate-900 text-sm">Campagnes</a>
    <span class="text-slate-400">/</span>
    <span class="text-slate-900 font-medium text-sm">Popup</span>
</nav>

<div class="flex gap-2 mb-6">
    <a href="{{ route('admin.newsletter.index') }}" class="px-4 py-2 rounded-xl text-slate-600 hover:bg-slate-100 text-sm">Abonnés</a>
    <a href="{{ route('admin.newsletter.campaigns') }}" class="px-4 py-2 rounded-xl text-slate-600 hover:bg-slate-100 text-sm">Campagnes</a>
    <a href="{{ route('admin.newsletter.settings') }}" class="px-4 py-2 rounded-xl font-medium text-sm bg-primary-500 text-white">Popup</a>
</div>

@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

<div class="bg-white rounded-2xl border border-slate-200 overflow-hidden max-w-2xl">
    <div class="p-6 border-b border-slate-200">
        <h2 class="text-lg font-semibold text-slate-800">Paramètres de la popup newsletter</h2>
        <p class="text-slate-500 text-sm mt-1">Personnalisez l'apparence et le comportement de la popup d'inscription.</p>
    </div>
    <form method="POST" action="{{ route('admin.newsletter.settings.store') }}" enctype="multipart/form-data" class="p-6 space-y-6">
        @csrf
        <div class="flex items-center gap-3">
            <input type="checkbox" name="newsletter_popup_enabled" id="newsletter_popup_enabled" value="1" {{ ($settings['newsletter_popup_enabled'] ?? '1') === '1' ? 'checked' : '' }} class="rounded border-slate-300">
            <label for="newsletter_popup_enabled" class="font-medium text-slate-700">Activer la popup newsletter</label>
        </div>
        <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Mode d'affichage</label>
            <div class="flex gap-6">
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="radio" name="newsletter_popup_mode" value="auto" {{ ($settings['newsletter_popup_mode'] ?? 'auto') === 'auto' ? 'checked' : '' }} class="border-slate-300">
                    <span>Automatique</span>
                </label>
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="radio" name="newsletter_popup_mode" value="manual" {{ ($settings['newsletter_popup_mode'] ?? '') === 'manual' ? 'checked' : '' }} class="border-slate-300">
                    <span>Manuel</span>
                </label>
            </div>
            <p class="text-xs text-slate-500 mt-1">Automatique : la popup s'affiche selon les règles. Manuel : la popup s'ouvre uniquement au clic sur un lien (ex. dans le footer).</p>
        </div>
        <div id="newsletter-manual-options" class="{{ ($settings['newsletter_popup_mode'] ?? 'auto') === 'manual' ? '' : 'hidden' }}">
            <label for="newsletter_popup_trigger_text" class="block text-sm font-medium text-slate-700 mb-1">Texte du lien d'ouverture</label>
            <input type="text" name="newsletter_popup_trigger_text" id="newsletter_popup_trigger_text" value="{{ old('newsletter_popup_trigger_text', $settings['newsletter_popup_trigger_text'] ?? 'Newsletter') }}" class="w-full px-4 py-2 border border-slate-200 rounded-xl">
            <p class="text-xs text-slate-500 mt-1">Ce lien apparaît dans le footer. Au clic, la popup s'ouvre.</p>
        </div>
        <div>
            <label for="newsletter_popup_title" class="block text-sm font-medium text-slate-700 mb-1">Titre</label>
            <input type="text" name="newsletter_popup_title" id="newsletter_popup_title" value="{{ old('newsletter_popup_title', $settings['newsletter_popup_title'] ?? 'Restez informé') }}" class="w-full px-4 py-2 border border-slate-200 rounded-xl">
        </div>
        <div>
            <label for="newsletter_popup_content" class="block text-sm font-medium text-slate-700 mb-1">Texte de description</label>
            <textarea name="newsletter_popup_content" id="newsletter_popup_content" rows="3" class="w-full px-4 py-2 border border-slate-200 rounded-xl">{{ old('newsletter_popup_content', $settings['newsletter_popup_content'] ?? '') }}</textarea>
        </div>
        <div>
            <label for="newsletter_popup_cta" class="block text-sm font-medium text-slate-700 mb-1">Texte du bouton</label>
            <input type="text" name="newsletter_popup_cta" id="newsletter_popup_cta" value="{{ old('newsletter_popup_cta', $settings['newsletter_popup_cta'] ?? "S'inscrire") }}" class="w-full px-4 py-2 border border-slate-200 rounded-xl">
        </div>
        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">Image (optionnel)</label>
            @if(!empty($settings['newsletter_popup_image'] ?? ''))
                <div class="mb-2 flex items-center gap-3">
                    <img src="{{ asset('storage/'.$settings['newsletter_popup_image']) }}" alt="" class="h-20 w-20 object-cover rounded-lg border">
                    <label class="flex items-center gap-2 text-sm text-slate-600">
                        <input type="checkbox" name="newsletter_popup_image_remove" value="1"> Supprimer l'image
                    </label>
                </div>
            @endif
            <input type="file" name="newsletter_popup_image" accept="image/*" class="block w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-slate-100 file:text-slate-700" data-admin-compress-image>
        </div>
        <div class="grid grid-cols-2 gap-4">
            <div>
                <label for="newsletter_popup_delay_seconds" class="block text-sm font-medium text-slate-700 mb-1">Délai d'affichage (secondes)</label>
                <input type="number" name="newsletter_popup_delay_seconds" id="newsletter_popup_delay_seconds" value="{{ old('newsletter_popup_delay_seconds', $settings['newsletter_popup_delay_seconds'] ?? 3) }}" min="0" class="w-full px-4 py-2 border border-slate-200 rounded-xl">
                <p class="text-xs text-slate-500 mt-1">0 = immédiatement au chargement</p>
            </div>
            <div>
                <label for="newsletter_popup_repeat_days" class="block text-sm font-medium text-slate-700 mb-1">Réafficher après (jours)</label>
                <input type="number" name="newsletter_popup_repeat_days" id="newsletter_popup_repeat_days" value="{{ old('newsletter_popup_repeat_days', $settings['newsletter_popup_repeat_days'] ?? 7) }}" min="0" class="w-full px-4 py-2 border border-slate-200 rounded-xl">
                <p class="text-xs text-slate-500 mt-1">0 = ne plus jamais afficher après fermeture</p>
            </div>
        </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</button>
        </div>
    </form>
</div>
<script>
document.querySelectorAll('input[name="newsletter_popup_mode"]').forEach(function(r) {
    r.addEventListener('change', function() {
        var isManual = this.value === 'manual';
        document.getElementById('newsletter-manual-options').classList.toggle('hidden', !isManual);
    });
});
var mode = document.querySelector('input[name="newsletter_popup_mode"]:checked');
if (mode) mode.dispatchEvent(new Event('change'));
</script>
@endsection
