@extends('layouts.shell')
@section('title', 'Pilih Minat')
@section('bare', true)

@section('content')
<div class="mx-auto max-w-md py-6">
    <div class="text-center mb-7">
        <span class="mx-auto mb-3 grid h-14 w-14 place-items-center rounded-2xl bg-primary/10"><x-icon name="sparkles" class="w-7 h-7 text-primary"/></span>
        <h1 class="text-h1">Pilih minat Anda</h1>
        <p class="text-body text-muted mt-1.5 prose-body mx-auto">Pilih topik yang Anda sukai agar kami rekomendasikan konten paling relevan. Bisa diubah nanti.</p>
    </div>

    <form method="POST" action="{{ route('onboarding.store') }}" x-data="{ picked: {{ \Illuminate\Support\Js::from($selected) }} }">
        @csrf
        <div class="grid grid-cols-2 gap-3">
            @foreach($categories as $c)
            <label class="cursor-pointer">
                <input type="checkbox" name="interests[]" value="{{ $c->slug }}" x-model="picked" class="peer sr-only">
                <div class="card p-4 transition-all peer-checked:border-primary peer-checked:bg-primary/5 peer-checked:shadow-glow">
                    <div class="flex items-center justify-between">
                        <span class="grid h-10 w-10 place-items-center rounded-xl bg-primary/10"><x-icon name="film" class="w-5 h-5 text-primary"/></span>
                        <span class="grid h-6 w-6 place-items-center rounded-full border border-outline peer-checked:hidden" :class="picked.includes('{{ $c->slug }}') && 'hidden'"></span>
                        <span class="hidden h-6 w-6 place-items-center rounded-full bg-primary text-on-primary" :class="picked.includes('{{ $c->slug }}') ? '!grid' : ''"><x-icon name="check" class="w-4 h-4"/></span>
                    </div>
                    <h3 class="text-h4 mt-3">{{ $c->name }}</h3>
                </div>
            </label>
            @endforeach
        </div>

        <button class="btn-filled mt-7 w-full" x-text="picked.length ? `Lanjut (${picked.length} dipilih)` : 'Lanjut'"></button>
        <button type="submit" class="mt-3 w-full text-center text-small text-muted hover:text-ink">Lewati untuk sekarang</button>
    </form>
</div>
@endsection