<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">Lead Magnets</h2>
        </div>
    </x-slot>

    <div class="space-y-6">
        <section class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
            <form method="POST" action="{{ route('admin.lead-magnets.store') }}" enctype="multipart/form-data" class="grid gap-4 md:grid-cols-2">
                @csrf
                <x-text-input name="title" placeholder="Lead magnet title" required />
                <input type="file" name="download_file" accept=".pdf,application/pdf" class="rounded-lg border border-blue-100 bg-white px-3 py-2 text-sm text-slate-700 dark:border-blue-900 dark:bg-slate-950 dark:text-slate-200">
                <textarea name="description" rows="3" placeholder="Description" class="rounded-lg border-gray-300 bg-white text-slate-900 shadow-sm dark:border-slate-700 dark:bg-slate-900 dark:text-white md:col-span-2"></textarea>
                <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">Create Lead Magnet</button>
            </form>
        </section>

        <section class="grid gap-4 xl:grid-cols-2">
            @foreach ($leadMagnets as $leadMagnet)
                <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.lead-magnets.update', $leadMagnet) }}" enctype="multipart/form-data" class="grid gap-3">
                        @csrf
                        @method('PATCH')
                        <x-text-input name="title" value="{{ $leadMagnet->title }}" required />
                        <textarea name="description" rows="3" class="rounded-lg border-gray-300 bg-white text-slate-900 shadow-sm dark:border-slate-700 dark:bg-slate-900 dark:text-white">{{ $leadMagnet->description }}</textarea>
                        <input type="file" name="download_file" accept=".pdf,application/pdf" class="rounded-lg border border-blue-100 bg-white px-3 py-2 text-sm text-slate-700 dark:border-blue-900 dark:bg-slate-950 dark:text-slate-200">
                        <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($leadMagnet->is_active) 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">Update</button>
                    </form>
                    <form method="POST" action="{{ route('admin.lead-magnets.destroy', $leadMagnet) }}" class="mt-3" onsubmit="return confirm('Delete this lead magnet?')">
                        @csrf
                        @method('DELETE')
                        <button class="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>
