@extends('frontend.layouts.app')

@section('title', 'Verifikasi Peserta — ' . $event->name)

@section('content')
<div class="flex flex-col items-center justify-center py-16 px-4" style="min-height: calc(100vh - 200px);">

    <div style="width:100%; max-width:460px;">

        {{-- Event Badge --}}
        <div class="text-center mb-8 animate-fade-in-up">
            <div style="display:inline-flex; align-items:center; gap:6px; padding:4px 14px; background:rgba(0,132,255,0.08); border:1px solid rgba(0,132,255,0.15); border-radius:999px; margin-bottom:16px;">
                <span style="width:7px; height:7px; background:#0084FF; border-radius:50%;"></span>
                <span style="font-size:13px; font-weight:600; color:#0084FF;">Event Aktif</span>
            </div>
            <h2 style="font-family:'Fustat',sans-serif; font-size:clamp(22px,4vw,28px); font-weight:800; color:#0F172A; line-height:1.15; margin-bottom:6px; letter-spacing:-0.5px;">{{ $event->name }}</h2>
            <p style="font-size:14px; color:#64748B;">Oleh: {{ $event->organization->name }}</p>
        </div>

        {{-- Glass Card --}}
        <div class="animate-fade-in-up" style="animation-delay:100ms; background:rgba(255,255,255,0.7); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border-radius:24px; border:1px solid rgba(255,255,255,0.8); box-shadow:0 8px 48px rgba(0,132,255,0.07), inset 0 1px 0 rgba(255,255,255,0.9); padding:36px 32px;">

            {{-- Icon + Title --}}
            <div class="text-center mb-8">
                <div style="width:64px; height:64px; background:rgba(0,132,255,0.08); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; box-shadow:0 0 0 8px rgba(0,132,255,0.06);">
                    <iconify-icon icon="ph:envelope-open" width="30" style="color:#0084FF;"></iconify-icon>
                </div>
                <h3 style="font-family:'Fustat',sans-serif; font-size:20px; font-weight:800; color:#0F172A; margin-bottom:8px;">Verifikasi Peserta</h3>
                <p style="font-size:14px; color:#64748B; line-height:1.6; max-width:320px; margin:0 auto;">Masukkan alamat email yang terdaftar pada panitia untuk menerima kode OTP.</p>
            </div>

            {{-- Errors --}}
            @if ($errors->any())
                <div style="margin-bottom:20px; padding:14px 16px; background:rgba(220,38,38,0.07); border:1px solid rgba(220,38,38,0.2); border-radius:12px; color:#991b1b; font-size:14px;">
                    <ul style="list-style:disc; padding-left:16px; margin:0;">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            {{-- Form --}}
            <form action="{{ route('frontend.otp.send', $event->slug) }}" method="POST" id="requestOtpForm">
                @csrf
                <div style="margin-bottom:20px;">
                    <label for="email" style="display:block; font-size:14px; font-weight:600; color:#0F172A; margin-bottom:8px;">Alamat Email</label>
                    <input
                        type="email" name="email" id="email"
                        class="input-field"
                        style="font-size:16px; text-align:center; letter-spacing:0.02em;"
                        placeholder="nama@email.com"
                        required autofocus
                    >
                </div>

                <button type="submit" id="btnSubmit" class="btn-primary w-full gap-2" style="font-size:16px; justify-content:center; padding:12px 24px;">
                    <iconify-icon icon="ph:paper-plane-tilt" width="18"></iconify-icon>
                    Kirim Kode OTP
                </button>
            </form>
        </div>

        {{-- Back link --}}
        <div class="text-center mt-8">
            <a href="{{ route('landing') }}#events" style="font-size:14px; font-weight:500; color:#64748B; text-decoration:none; display:inline-flex; align-items:center; gap:6px; transition:color 200ms ease;"
               onmouseover="this.style.color='#0084FF'" onmouseout="this.style.color='#64748B'">
                <iconify-icon icon="ph:arrow-left" width="16"></iconify-icon>
                Kembali ke Daftar Event
            </a>
        </div>
    </div>
</div>
@endsection

@section('page-script')
<script>
    document.getElementById('requestOtpForm').addEventListener('submit', function () {
        const btn = document.getElementById('btnSubmit');
        btn.disabled = true;
        btn.innerHTML = '<iconify-icon icon="ph:spinner-gap" class="animate-spin" width="18"></iconify-icon> Mengirim...';
        btn.style.opacity = '0.7';
    });
</script>
@endsection