@extends('layouts.admin')

@section('title', 'Paramètres notifications - Admin')

@section('content')
    <header class="mb-12">
        <h1 class="text-4xl sm:text-5xl font-black tracking-tight mb-2 text-slate-900">Notifications</h1>
        <p class="text-slate-500 text-lg">Configure l'envoi des notifications (email).</p>
    </header>

    @if(!empty($migrationRequired))
        <div class="mb-8 p-5 bg-amber-50 border border-amber-100 rounded-2xl text-amber-800 font-medium flex items-center gap-3">
            <i class="fa-solid fa-triangle-exclamation"></i>
            <div>
                <div class="font-black">Migration requise</div>
                <div class="text-sm text-amber-700">Lance <span class="font-black">php artisan migrate</span> pour créer la table <span class="font-black">settings</span>.</div>
            </div>
        </div>
    @endif
 
    @if(session('success'))
        <div class="mb-8 p-5 bg-green-50 border border-green-100 rounded-2xl text-green-700 font-medium flex items-center gap-3">
            <i class="fa-solid fa-circle-check"></i>
            {{ session('success') }}
        </div>
    @endif

    @if($errors->any())
        <div class="mb-8 p-5 bg-red-50 border border-red-100 rounded-2xl text-red-700 font-medium">
            {{ $errors->first() }}
        </div>
    @endif

    <form method="POST" action="{{ route('admin.settings.notifications.store') }}" class="bg-white border border-slate-100 p-8 sm:p-10 rounded-3xl shadow-xl shadow-slate-200 space-y-8">
        @csrf

        <div class="flex items-center gap-3">
            <input id="notifications_email_enabled" type="checkbox" name="notifications_email_enabled" value="1"
                   {{ old('notifications_email_enabled', (int)($settings['notifications_email_enabled'] ?? 0)) ? 'checked' : '' }}
                   class="w-5 h-5 text-blue-700 border-slate-300 rounded focus:ring-blue-600" />
            <label for="notifications_email_enabled" class="text-sm font-bold text-slate-700">Activer les notifications email</label>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <div>
                <label class="block text-xs font-black uppercase tracking-widest text-slate-400 mb-2">Nom expéditeur</label>
                <input name="notifications_sender_name" value="{{ old('notifications_sender_name', $settings['notifications_sender_name'] ?? 'Sciences Afrique') }}"
                       class="w-full px-5 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-slate-900 font-medium focus:outline-none focus:ring-2 focus:ring-blue-500" />
            </div>
            <div>
                <label class="block text-xs font-black uppercase tracking-widest text-slate-400 mb-2">Email expéditeur</label>
                <input type="email" name="notifications_sender_email" value="{{ old('notifications_sender_email', $settings['notifications_sender_email'] ?? '') }}"
                       class="w-full px-5 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-slate-900 font-medium focus:outline-none focus:ring-2 focus:ring-blue-500" />
            </div>
        </div>

        <div class="pt-2">
            <button type="submit" class="w-full py-4 bg-blue-700 hover:bg-blue-800 text-white font-black rounded-2xl transition-all shadow-xl shadow-blue-700/20">
                Enregistrer
            </button>
        </div>
    </form>
@endsection