@extends('admin.layout')

@section('heading', 'Brand & appearance')

@section('content')
@php
    $flat = $settings->flatten()->keyBy('key');
    $logoAssets = [
        'main_logo' => 'Header logo',
        'footer_logo' => 'Footer logo',
        'dark_logo' => 'Dark-mode logo',
        'favicon' => 'Favicon / app icon',
    ];
@endphp

<form method="POST" action="{{ route('admin.cms.settings.update') }}" enctype="multipart/form-data" class="max-w-5xl space-y-7">
    @csrf
    @method('PUT')

    <section class="rounded-2xl bg-white p-7 shadow-sm">
        <h2 class="display text-xl font-bold text-[#271044]">Logo assets</h2>
        <p class="mt-1 text-sm text-slate-500">Upload assets for each public placement.</p>
        <div class="mt-6 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
            @foreach($logoAssets as $key => $label)
                @php($asset = $flat->get($key))
                <label class="rounded-xl border-2 border-dashed border-slate-200 p-4 text-center transition hover:border-violet-400">
                    <span class="grid h-20 place-items-center overflow-hidden rounded-lg bg-slate-50">
                        @if($asset && $asset->value)
                            <img src="{{ asset('storage/'.$asset->value) }}" class="max-h-16 max-w-full object-contain" alt="{{ $label }}">
                        @else
                            <span class="text-2xl text-slate-300">▧</span>
                        @endif
                    </span>
                    <span class="mt-3 block text-sm font-bold">{{ $label }}</span>
                    <input name="{{ $key }}" type="file" accept="image/*,.svg" class="mt-3 block w-full text-xs">
                </label>
            @endforeach
        </div>
    </section>

    <section class="rounded-2xl bg-white p-7 shadow-sm">
        <h2 class="display text-xl font-bold text-[#271044]">Website content & theme</h2>
        <div class="mt-6 grid gap-5 md:grid-cols-2">
            @foreach($flat as $setting)
                @if(!in_array($setting->key, array_keys($logoAssets), true))
                    <label class="text-sm font-semibold">
                        {{ str($setting->key)->replace('_', ' ')->title() }}
                        <input name="settings[{{ $setting->key }}]" value="{{ $setting->value }}" class="mt-2 w-full rounded-lg border border-slate-200 p-3 font-normal">
                    </label>
                @endif
            @endforeach
        </div>
    </section>

    <button class="rounded-lg bg-red-600 px-7 py-3 text-xs font-bold text-white shadow-lg shadow-red-100">SAVE BRAND SETTINGS</button>
</form>
@endsection