@extends('layouts.dashboard')

@section('title', 'Paramètres généraux - Admin')
@section('page-title', 'Paramètres généraux')
@section('page-subtitle', 'Configure les informations principales du site.')

@section('content')
@if(!empty($migrationRequired))
    <x-alert-banner type="warning" class="mb-6">
        <div class="font-bold">Migration requise</div>
        <div class="text-sm">Lancez <span class="font-bold">php artisan migrate</span> pour créer la table <span class="font-bold">settings</span>.</div>
    </x-alert-banner>
@endif

@if(session('success'))
    <x-alert-banner type="success" class="mb-6">
        {{ session('success') }}
    </x-alert-banner>
@endif

@if($errors->any())
    <x-alert-banner type="error" class="mb-6">
        {{ $errors->first() }}
    </x-alert-banner>
@endif

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

    <h2 class="text-xl font-display font-bold text-gray-900 flex items-center gap-3 mb-6">
        <span class="w-2 h-6 bg-royal-blue rounded-full"></span>
        Informations principales
    </h2>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Site Name -->
        <div>
            <label class="block text-sm font-bold text-gray-700 mb-2">Nom du site *</label>
            <input name="site_name" required value="{{ old('site_name', $settings['site_name'] ?? 'Sciences Afrique') }}"
                   class="w-full px-5 py-4 bg-gray-50 border border-gray-200 rounded-xl focus:ring-4 focus:ring-royal-blue/10 focus:border-royal-blue outline-none transition-all text-gray-700 font-medium @error('site_name') border-red-500 @enderror" />
            @error('site_name')
                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <!-- Site Tagline -->
        <div>
            <label class="block text-sm font-bold text-gray-700 mb-2">Slogan</label>
            <input name="site_tagline" value="{{ old('site_tagline', $settings['site_tagline'] ?? '') }}"
                   class="w-full px-5 py-4 bg-gray-50 border border-gray-200 rounded-xl focus:ring-4 focus:ring-royal-blue/10 focus:border-royal-blue outline-none transition-all text-gray-700 font-medium @error('site_tagline') border-red-500 @enderror" />
            @error('site_tagline')
                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Support Email -->
        <div>
            <label class="block text-sm font-bold text-gray-700 mb-2">Email support</label>
            <input type="email" name="support_email" value="{{ old('support_email', $settings['support_email'] ?? '') }}"
                   class="w-full px-5 py-4 bg-gray-50 border border-gray-200 rounded-xl focus:ring-4 focus:ring-royal-blue/10 focus:border-royal-blue outline-none transition-all text-gray-700 font-medium @error('support_email') border-red-500 @enderror" />
            @error('support_email')
                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <!-- Currency -->
        <div>
            <label class="block text-sm font-bold text-gray-700 mb-2">Devise</label>
            <input name="default_currency" placeholder="XOF" value="{{ old('default_currency', $settings['default_currency'] ?? 'XOF') }}"
                   class="w-full px-5 py-4 bg-gray-50 border border-gray-200 rounded-xl focus:ring-4 focus:ring-royal-blue/10 focus:border-royal-blue outline-none transition-all text-gray-700 font-medium @error('default_currency') border-red-500 @enderror" />
            @error('default_currency')
                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <!-- Timezone -->
        <div>
            <label class="block text-sm font-bold text-gray-700 mb-2">Timezone</label>
            <input name="timezone" placeholder="Africa/Abidjan" value="{{ old('timezone', $settings['timezone'] ?? config('app.timezone')) }}"
                   class="w-full px-5 py-4 bg-gray-50 border border-gray-200 rounded-xl focus:ring-4 focus:ring-royal-blue/10 focus:border-royal-blue outline-none transition-all text-gray-700 font-medium @error('timezone') border-red-500 @enderror" />
            <p class="text-xs text-gray-400 mt-2">Ex: <span class="font-bold">Africa/Abidjan</span>, <span class="font-bold">Africa/Dakar</span>.</p>
            @error('timezone')
                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>
    </div>

    <!-- Submit -->
    <div class="pt-6 border-t border-gray-100">
        <button type="submit" class="w-full py-4 bg-royal-blue text-white font-bold rounded-xl shadow-lg shadow-royal-blue/20 hover:bg-royal-blue-dark transition-all flex items-center justify-center gap-2">
            <i class="fa-solid fa-check"></i>
            Enregistrer
        </button>
    </div>
</form>
@endsection