@extends('frontend.layouts.app')

@section('title', 'Masukkan OTP — ' . $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 Name --}}
        <div class="text-center mb-8 animate-fade-in-up">
            <h2 style="font-family:'Fustat',sans-serif; font-size:clamp(20px,4vw,26px); font-weight:800; color:#0F172A; line-height:1.2; letter-spacing:-0.5px;">{{ $event->name }}</h2>
        </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(22,163,74,0.08); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; box-shadow:0 0 0 8px rgba(22,163,74,0.06);">
                    <iconify-icon icon="ph:shield-check" width="30" style="color:#16A34A;"></iconify-icon>
                </div>
                <h3 style="font-family:'Fustat',sans-serif; font-size:20px; font-weight:800; color:#0F172A; margin-bottom:8px;">Masukkan Kode OTP</h3>
                <p style="font-size:14px; color:#64748B; line-height:1.6;">
                    Kami telah mengirimkan 6 digit kode ke email<br>
                    <strong style="color:#0F172A;">{{ session('otp_email') }}</strong>
                </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

            {{-- OTP Form --}}
            <form action="{{ route('frontend.otp.check', $event->slug) }}" method="POST" id="verifyOtpForm">
                @csrf
                <div style="margin-bottom:28px;">
                    <label for="otp" class="sr-only">Kode OTP</label>
                    <input
                        type="text" name="otp" id="otp"
                        class="input-field"
                        style="font-size:36px; font-weight:800; text-align:center; letter-spacing:0.6em; padding:16px; font-family:'Fustat',sans-serif; color:#0F172A;"
                        maxlength="6"
                        placeholder="——————"
                        autocomplete="off"
                        inputmode="numeric"
                        pattern="[0-9]*"
                        required autofocus
                    >
                </div>

                <button type="submit" id="btnSubmit" class="btn-primary w-full gap-2 mb-4" style="font-size:16px; justify-content:center; padding:12px 24px;">
                    <iconify-icon icon="ph:shield-check" width="18"></iconify-icon>
                    Verifikasi OTP
                </button>
            </form>

            {{-- Resend --}}
            <div class="text-center">
                <form action="{{ route('frontend.otp.send', $event->slug) }}" method="POST" class="inline">
                    @csrf
                    <input type="hidden" name="email" value="{{ session('otp_email') }}">
                    <button type="submit" style="font-size:14px; font-weight:600; color:#0084FF; background:none; border:none; cursor:pointer; text-decoration:none; transition:color 200ms;"
                            onmouseover="this.style.color='#319AFF'" onmouseout="this.style.color='#0084FF'">
                        Kirim Ulang Kode OTP
                    </button>
                </form>
            </div>
        </div>

        {{-- Back link --}}
        <div class="text-center mt-8">
            <a href="{{ route('frontend.otp.request', $event->slug) }}" 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>
                Gunakan Email Lain
            </a>
        </div>
    </div>
</div>
@endsection

@section('page-script')
<script>
    // Only allow numbers
    const otpInput = document.getElementById('otp');
    otpInput.addEventListener('input', function () {
        this.value = this.value.replace(/[^0-9]/g, '').slice(0, 6);
    });

    document.getElementById('verifyOtpForm').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> Memverifikasi...';
        btn.style.opacity = '0.7';
    });
</script>
@endsection