@extends('layouts.app')
@section('title', 'Branding')
@section('content')
@include('partials.admin-nav')
@include('partials.cms-tabs')
<form method="POST" action="{{ route('admin.cms.branding.update') }}" enctype="multipart/form-data" class="space-y-6">
    @csrf
    <div class="card">
        <h2 class="card-title">Brand</h2>
        <div class="grid gap-4 md:grid-cols-2">
            <div><label class="label">Site name</label><input name="site_name" class="input" maxlength="60" value="{{ old('site_name', $brand['site_name']) }}"><p class="mt-1 text-xs text-slate-500">Shown in the header, emails' page titles and footer.</p></div>
            <div><label class="label">Primary colour</label>
                <div class="flex items-center gap-2"><input type="color" id="pc" value="{{ old('primary_color', $brand['primary_color']) }}" class="h-10 w-14 rounded border border-slate-300" oninput="document.getElementById('pch').value=this.value">
                <input id="pch" name="primary_color" class="input font-mono" maxlength="7" value="{{ old('primary_color', $brand['primary_color']) }}" oninput="if(/^#[0-9a-fA-F]{6}$/.test(this.value))document.getElementById('pc').value=this.value"></div>
                <p class="mt-1 text-xs text-slate-500">Buttons and highlights. Pick a colour dark enough for white text.</p></div>
            <div class="md:col-span-2"><label class="label">Tagline (also used for search-engine description)</label><input name="tagline" class="input" maxlength="160" value="{{ old('tagline', $brand['tagline']) }}"></div>
            <div class="md:col-span-2"><label class="label">Extra footer text</label><textarea name="footer_text" rows="2" maxlength="500" class="input">{{ old('footer_text', $brand['footer_text']) }}</textarea></div>
        </div>
    </div>

    <div class="card">
        <h2 class="card-title">Logos</h2>
        <p class="mb-4 text-sm text-slate-500">PNG, JPG or WebP, up to 2 MB. A wide logo about 40–60 px tall works best. SVG is not accepted for security reasons.</p>
        <div class="grid gap-6 md:grid-cols-3">
            @foreach(['logo' => ['Logo (light backgrounds)', 'bg-white', false], 'logo_dark' => ['Logo (dark backgrounds — site header)', 'bg-slate-900', true], 'favicon' => ['Favicon (square PNG)', 'bg-slate-100', false]] as $f => [$label, $bg, $dark])
                <div>
                    <label class="label">{{ $label }}</label>
                    <div class="mb-2 flex h-20 items-center justify-center rounded-lg border {{ $bg }} p-2">
                        @php $u = $f === 'favicon' ? \App\Services\Cms::faviconUrl() : \App\Services\Cms::mediaUrl($brand[$f] ?? null); @endphp
                        @if($u)<img src="{{ $u }}" class="max-h-full max-w-full" alt="">@else<span class="text-xs text-slate-400">none</span>@endif
                    </div>
                    <input type="file" name="{{ $f }}" accept="image/png,image/jpeg,image/webp" class="input">
                    @if($brand[$f] ?? null)<label class="mt-2 flex items-center gap-2 text-xs text-slate-600"><input type="checkbox" name="remove_{{ $f }}" value="1"> Remove current</label>@endif
                </div>
            @endforeach
        </div>
    </div>

    <div class="card">
        <h2 class="card-title">Company details (shown in the footer, About and Contact)</h2>
        <p class="mb-3 rounded bg-amber-50 p-2 text-xs text-amber-900">Only enter a regulator or licence you actually hold. If "Regulation" is empty the footer states that the service is not regulated.</p>
        <div class="grid gap-4 md:grid-cols-2">
            @foreach(['legal_name' => 'Legal name', 'registration' => 'Registration number / country', 'regulator' => 'Regulation statement', 'address' => 'Address', 'support_email' => 'Support email', 'restricted_countries' => 'Restricted countries (comma separated)'] as $k => $label)
                <div class="{{ in_array($k, ['regulator', 'address', 'restricted_countries']) ? 'md:col-span-2' : '' }}"><label class="label">{{ $label }}</label><input name="company[{{ $k }}]" class="input" value="{{ old("company.$k", $company[$k] ?? '') }}"></div>
            @endforeach
        </div>
    </div>
    <button class="btn-primary">Save</button>
</form>
@endsection