@extends('admin.layout')
@section('heading','Homepage builder')
@section('content')
<div class="mx-auto max-w-6xl space-y-7">
    <section class="rounded-2xl bg-gradient-to-r from-violet-950 to-violet-700 p-7 text-white shadow-sm"><div class="flex flex-col justify-between gap-5 md:flex-row md:items-center"><div><p class="text-xs font-bold tracking-[.18em] text-violet-200">LIVE PAGE COMPOSER</p><h2 class="display mt-2 text-2xl font-bold">Control every homepage section</h2><p class="mt-2 max-w-xl text-sm text-violet-100">Edit copy, display order, background, animation, and device visibility. Save a card to publish its new configuration.</p></div><form method="POST" action="{{route('admin.cms.sections.initialize')}}">@csrf<button class="rounded-lg bg-white px-5 py-3 text-xs font-bold text-violet-900">ADD DEFAULT SECTIONS</button></form></div></section>
    <section class="rounded-2xl bg-white p-6 shadow-sm"><h2 class="display text-lg font-bold text-[#271044]">Add custom section</h2><form method="POST" action="{{route('admin.cms.sections.store')}}" class="mt-4 grid gap-3 md:grid-cols-[1fr_1fr_auto]">@csrf<input name="name" required placeholder="Section name, e.g. DJ Nights" class="rounded-lg border p-3 text-sm"><input name="key" required placeholder="unique-key, e.g. dj-nights" class="rounded-lg border p-3 text-sm"><button class="rounded-lg bg-red-600 px-5 py-3 text-xs font-bold text-white">ADD SECTION</button></form></section>
    @forelse($sections as $section)
        @php($content=$section->content ?? [])
        @php($config=$section->settings ?? [])
        <form method="POST" action="{{route('admin.cms.sections.update',$section)}}" class="rounded-2xl bg-white p-6 shadow-sm">@csrf @method('PATCH')
            <div class="flex flex-col justify-between gap-4 border-b border-slate-100 pb-5 md:flex-row md:items-center"><div><p class="text-xs font-bold uppercase tracking-wide text-violet-500">{{$section->key}}</p><input name="name" value="{{$section->name}}" class="display mt-1 w-full border-0 p-0 text-xl font-bold text-[#271044] focus:ring-0"></div><div class="flex flex-wrap gap-4 text-sm"><label><input name="is_enabled" type="checkbox" value="1" @checked($section->is_enabled)> Enabled</label><label><input name="desktop_visible" type="checkbox" value="1" @checked($section->desktop_visible)> Desktop</label><label><input name="mobile_visible" type="checkbox" value="1" @checked($section->mobile_visible)> Mobile</label></div></div>
            <div class="mt-5 grid gap-4 md:grid-cols-2"><label class="text-sm font-semibold">Section title<input name="content[title]" value="{{$content['title']??''}}" class="mt-2 w-full rounded-lg border p-3 font-normal"></label><label class="text-sm font-semibold">Subtitle<input name="content[subtitle]" value="{{$content['subtitle']??''}}" class="mt-2 w-full rounded-lg border p-3 font-normal"></label><label class="text-sm font-semibold">Background / image URL<input name="settings[background]" value="{{$config['background']??''}}" placeholder="#ffffff or image URL" class="mt-2 w-full rounded-lg border p-3 font-normal"></label><label class="text-sm font-semibold">Animation<select name="settings[animation]" class="mt-2 w-full rounded-lg border p-3 font-normal">@foreach(['none','fade-up','fade-in','slide-up','zoom-in'] as $animation)<option value="{{$animation}}" @selected(($config['animation']??'fade-up')===$animation)>{{$animation}}</option>@endforeach</select></label><label class="text-sm font-semibold">Padding<select name="settings[padding]" class="mt-2 w-full rounded-lg border p-3 font-normal">@foreach(['py-8','py-12','py-16','py-24'] as $padding)<option value="{{$padding}}" @selected(($config['padding']??'py-16')===$padding)>{{$padding}}</option>@endforeach</select></label><label class="text-sm font-semibold">Display order<input name="sort_order" type="number" min="0" value="{{$section->sort_order}}" class="mt-2 w-full rounded-lg border p-3 font-normal"></label></div>
            <div class="mt-5 flex justify-end"><button class="rounded-lg bg-violet-900 px-5 py-3 text-xs font-bold text-white">SAVE SECTION</button></div>
        </form>
    @empty
        <section class="rounded-2xl border-2 border-dashed border-slate-200 bg-white p-12 text-center"><h2 class="display text-xl text-[#271044]">No homepage sections yet</h2><p class="mt-2 text-sm text-slate-500">Click “Add Default Sections” above to start with a full homepage structure.</p></section>
    @endforelse
</div>
@endsection