@extends('layouts.nova')

@section('meta-description', $meta['description'] ?? '')

@push('head')
    <title>{{ $meta['title'] ?? 'Card Challenges - Skinbase Nova' }}</title>
    <link rel="canonical" href="{{ $meta['canonical'] ?? route('cards.challenges') }}" />
@endpush

@section('content')
    <section class="px-6 pt-8 md:px-10">
        <div class="rounded-[34px] border border-white/10 bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.14),transparent_38%),linear-gradient(180deg,rgba(15,23,42,0.96),rgba(2,6,23,0.88))] p-6 shadow-[0_24px_70px_rgba(2,6,23,0.32)] md:p-8">
            <p class="text-[11px] font-semibold uppercase tracking-[0.28em] text-sky-200/75">Nova Cards</p>
            <h1 class="mt-3 text-3xl font-semibold tracking-[-0.04em] text-white md:text-5xl">{{ $heading }}</h1>
            <p class="mt-4 max-w-3xl text-sm leading-7 text-slate-300 md:text-base">{{ $subheading }}</p>
        </div>
    </section>

    @if(!empty($challengeEntryItems ?? []))
        <section class="px-6 pt-8 md:px-10">
            <div class="rounded-[28px] border border-white/10 bg-white/[0.04] p-5">
                <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                    <h2 class="text-2xl font-semibold tracking-[-0.03em] text-white">Entries</h2>
                    @auth
                        @if(!empty($challenge ?? null))
                            <button type="button" data-report-target-type="nova_card_challenge" data-report-target-id="{{ $challenge->id }}" class="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.05] px-4 py-3 text-sm font-semibold text-white transition hover:bg-white/[0.08]">
                                <i class="fa-solid fa-flag"></i>
                                Report challenge
                            </button>
                        @endif
                    @endauth
                </div>
                <div class="mt-4 grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
                    @foreach($challengeEntryItems as $entry)
                        <div class="space-y-3">
                            @include('cards.partials.tile', ['card' => $entry['card']])
                            @auth
                                <button type="button" data-report-target-type="nova_card_challenge_entry" data-report-target-id="{{ $entry['id'] }}" class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.05] px-3 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-white transition hover:bg-white/[0.08]">
                                    <i class="fa-solid fa-flag"></i>
                                    Report entry
                                </button>
                            @endauth
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    <section class="px-6 py-8 md:px-10">
        <div class="grid gap-4 xl:grid-cols-2">
            @foreach(($challenges ?? collect()) as $challengeItem)
                <article class="rounded-[28px] border border-white/10 bg-white/[0.04] p-5 transition hover:border-sky-300/30 hover:bg-white/[0.06]">
                    <div class="flex items-center justify-between gap-3">
                        <div>
                            <div class="text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-500">{{ strtoupper($challengeItem->status) }}</div>
                            <h2 class="mt-2 text-2xl font-semibold text-white">{{ $challengeItem->title }}</h2>
                        </div>
                        @if($challengeItem->featured)
                            <span class="rounded-full border border-amber-300/25 bg-amber-300/10 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-amber-100">Featured</span>
                        @endif
                    </div>
                    @if($challengeItem->prompt)
                        <p class="mt-4 text-sm leading-7 text-slate-300">{{ $challengeItem->prompt }}</p>
                    @endif
                    @if($challengeItem->description)
                        <p class="mt-3 text-sm leading-7 text-slate-400">{{ $challengeItem->description }}</p>
                    @endif
                    <div class="mt-4 flex items-center justify-between text-xs text-slate-400">
                        <span>{{ number_format((int) $challengeItem->entries_count) }} entries</span>
                        <span>{{ optional($challengeItem->starts_at)->format('M j, Y') ?: 'Open date TBD' }}</span>
                    </div>
                    <div class="mt-4 flex flex-wrap gap-3">
                        <a href="{{ route('cards.challenges.show', ['slug' => $challengeItem->slug]) }}" class="inline-flex items-center gap-2 rounded-2xl border border-sky-300/20 bg-sky-400/10 px-4 py-3 text-sm font-semibold text-sky-100 transition hover:bg-sky-400/15">
                            <i class="fa-solid fa-arrow-right"></i>
                            View challenge
                        </a>
                        @auth
                            <button type="button" data-report-target-type="nova_card_challenge" data-report-target-id="{{ $challengeItem->id }}" class="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.05] px-4 py-3 text-sm font-semibold text-white transition hover:bg-white/[0.08]">
                                <i class="fa-solid fa-flag"></i>
                                Report challenge
                            </button>
                        @endauth
                    </div>
                </article>
            @endforeach
        </div>
    </section>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const reportButtons = document.querySelectorAll('[data-report-target-type][data-report-target-id]')
            const csrf = document.querySelector('meta[name="csrf-token"]')?.content || ''

            reportButtons.forEach((button) => {
                button.addEventListener('click', () => {
                    const reason = window.prompt('Why are you reporting this Nova Cards item?')
                    if (!reason || !reason.trim()) {
                        return
                    }

                    const details = window.prompt('Add extra details for moderators (optional)')

                    fetch(@json(route('api.reports.store')), {
                        method: 'POST',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'X-CSRF-TOKEN': csrf,
                            'Accept': 'application/json',
                            'Content-Type': 'application/json',
                        },
                        credentials: 'same-origin',
                        body: JSON.stringify({
                            target_type: button.dataset.reportTargetType,
                            target_id: Number(button.dataset.reportTargetId),
                            reason: reason.trim(),
                            details: details && details.trim() ? details.trim() : null,
                        }),
                    }).then(async (response) => {
                        if (!response.ok) {
                            return
                        }

                        window.alert('Report submitted. Thank you.')
                    }).catch(() => {})
                })
            })
        })
    </script>
@endpush