@extends('layouts.admin')

@section('title', 'Branding - Admin')

@section('content')
    <header class="mb-12">
        <h1 class="text-4xl sm:text-5xl font-black tracking-tight mb-2 text-slate-900">Branding</h1>
        <p class="text-slate-500 text-lg">Personnalise l'identité visuelle.</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.branding.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>
            <label class="block text-xs font-black uppercase tracking-widest text-slate-400 mb-2">URL du logo</label>
            <input name="branding_logo_url" value="{{ old('branding_logo_url', $settings['branding_logo_url'] ?? '') }}" placeholder="https://..."
                   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" />
            <p class="text-xs text-slate-400 mt-2">Plus tard, on peut remplacer par un upload.</p>
        </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">Couleur primaire</label>
                <input name="branding_primary_color" value="{{ old('branding_primary_color', $settings['branding_primary_color'] ?? '#4f46e5') }}" placeholder="#4f46e5"
                       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">Couleur secondaire</label>
                <input name="branding_secondary_color" value="{{ old('branding_secondary_color', $settings['branding_secondary_color'] ?? '#0ea5e9') }}" placeholder="#0ea5e9"
                       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