<x-app-layout>
    <x-slot name="header">
        <div>
            <p class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-400">Growth & Marketing</p>
            <h2 class="mt-1 text-2xl font-bold text-slate-950 dark:text-white">Homepage Content</h2>
        </div>
    </x-slot>

    <div class="space-y-8">
        <form method="POST" action="{{ route('admin.homepage-content.sections.update') }}" class="space-y-4">
            @csrf
            @method('PATCH')
            @foreach ($sections as $section)
                <section class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
                    <div class="flex items-center justify-between gap-4">
                        <h3 class="text-lg font-black text-slate-950 dark:text-white">{{ ucfirst(str_replace('_', ' ', $section->key)) }} Section</h3>
                        <label class="flex items-center gap-2 text-sm font-semibold text-slate-600 dark:text-slate-300">
                            <input type="checkbox" name="sections[{{ $loop->index }}][is_active]" value="1" @checked($section->is_active) class="rounded border-gray-300 text-blue-600">
                            Active
                        </label>
                    </div>
                    <input type="hidden" name="sections[{{ $loop->index }}][id]" value="{{ $section->id }}">
                    <div class="mt-5 grid gap-4 md:grid-cols-2">
                        <div>
                            <x-input-label value="Title" />
                            <x-text-input name="sections[{{ $loop->index }}][title]" class="mt-1 block w-full" value="{{ $section->title }}" />
                        </div>
                        <div>
                            <x-input-label value="Slogan / Eyebrow" />
                            <x-text-input name="sections[{{ $loop->index }}][slogan]" class="mt-1 block w-full" value="{{ $section->slogan }}" />
                        </div>
                        <div>
                            <x-input-label value="CTA Text" />
                            <x-text-input name="sections[{{ $loop->index }}][cta_text]" class="mt-1 block w-full" value="{{ $section->cta_text }}" />
                        </div>
                        <div>
                            <x-input-label value="CTA Link" />
                            <x-text-input name="sections[{{ $loop->index }}][cta_link]" class="mt-1 block w-full" value="{{ $section->cta_link }}" />
                        </div>
                        <div>
                            <x-input-label value="Sort Order" />
                            <x-text-input name="sections[{{ $loop->index }}][sort_order]" type="number" class="mt-1 block w-full" value="{{ $section->sort_order }}" />
                        </div>
                        <div class="md:col-span-2">
                            <x-input-label value="Subtitle" />
                            <textarea name="sections[{{ $loop->index }}][subtitle]" rows="3" class="mt-1 block w-full rounded-lg border-gray-300 bg-white text-slate-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-slate-700 dark:bg-slate-900 dark:text-white">{{ $section->subtitle }}</textarea>
                        </div>
                        <div class="md:col-span-2">
                            <x-input-label value="Extra Content" />
                            <textarea name="sections[{{ $loop->index }}][content]" rows="3" class="mt-1 block w-full rounded-lg border-gray-300 bg-white text-slate-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-slate-700 dark:bg-slate-900 dark:text-white">{{ $section->content }}</textarea>
                        </div>
                    </div>
                </section>
            @endforeach
            <button class="rounded-lg bg-blue-600 px-5 py-3 text-sm font-bold text-white hover:bg-blue-700">Save Homepage Sections</button>
        </form>

        <section class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
            <h3 class="text-lg font-black text-slate-950 dark:text-white">Create Feature Card</h3>
            <form method="POST" action="{{ route('admin.homepage-content.features.store') }}" class="mt-4 grid gap-4 md:grid-cols-5">
                @csrf
                <x-text-input name="title" placeholder="Feature title" class="md:col-span-1" required />
                <x-text-input name="description" placeholder="Description" class="md:col-span-2" />
                <x-text-input name="icon" placeholder="Icon name" />
                <x-text-input name="sort_order" type="number" value="10" />
                <label class="flex items-center gap-2 text-sm font-semibold text-slate-600 dark:text-slate-300"><input type="checkbox" name="is_active" value="1" checked class="rounded border-gray-300 text-blue-600"> Active</label>
                <button class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-bold text-white md:col-span-5">Add Feature</button>
            </form>
        </section>

        <section class="grid gap-4 xl:grid-cols-2">
            @foreach ($features as $feature)
                <div class="rounded-lg border border-blue-100 bg-white p-5 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
                    <form method="POST" action="{{ route('admin.homepage-content.features.update', $feature) }}" class="grid gap-3">
                        @csrf
                        @method('PATCH')
                        <x-text-input name="title" value="{{ $feature->title }}" required />
                        <textarea name="description" rows="3" class="rounded-lg border-gray-300 bg-white text-slate-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-slate-700 dark:bg-slate-900 dark:text-white">{{ $feature->description }}</textarea>
                        <div class="grid gap-3 sm:grid-cols-3">
                            <x-text-input name="icon" value="{{ $feature->icon }}" />
                            <x-text-input name="sort_order" type="number" value="{{ $feature->sort_order }}" />
                            <label class="flex items-center gap-2 text-sm font-semibold text-slate-600 dark:text-slate-300"><input type="checkbox" name="is_active" value="1" @checked($feature->is_active) class="rounded border-gray-300 text-blue-600"> Active</label>
                        </div>
                        <button class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-bold text-white">Update</button>
                    </form>
                    <form method="POST" action="{{ route('admin.homepage-content.features.destroy', $feature) }}" onsubmit="return confirm('Delete this feature?')">
                        @csrf
                        @method('DELETE')
                        <button class="mt-3 rounded-lg bg-red-600 px-4 py-2 text-sm font-bold text-white">Delete</button>
                    </form>
                </div>
            @endforeach
        </section>
    </div>
</x-app-layout>
