@extends('app-admin.layout')
@section('title', 'Aktivasi Akun — Wavora Admin')

@section('content')
<div class="login-wrap">
    <div class="login-card">
        {{-- Brand --}}
        <div style="text-align:center;margin-bottom:32px">
            <div style="width:52px;height:52px;border-radius:14px;background:#bfff5a;color:#111;display:grid;place-items:center;font-weight:800;font-size:22px;margin:0 auto 14px">W</div>
            <h1 style="font-size:22px;font-weight:700;color:#1d2130;letter-spacing:-.4px">Aktivasi Akun</h1>
            <p style="font-size:13px;color:#7c84a0;margin-top:4px">Masukkan kode OTP yang dikirim ke WhatsApp Anda</p>
        </div>

        {{-- Card --}}
        <div class="card" style="padding:28px">
            @if(session('info'))
            <div style="background:#dbeafe;border:1px solid #bfdbfe;border-radius:10px;padding:12px 14px;margin-bottom:18px;display:flex;gap:8px;align-items:center">
                <span class="ms" style="color:#1e40af;font-size:16px">info</span>
                <span style="font-size:13px;color:#1e40af">{{ session('info') }}</span>
            </div>
            @endif

            @if($errors->any())
            <div style="background:#fee2e2;border:1px solid #fecaca;border-radius:10px;padding:12px 14px;margin-bottom:18px;display:flex;gap:8px;align-items:flex-start">
                <span class="ms" style="color:#dc2626;font-size:16px;flex-shrink:0;margin-top:1px">error</span>
                <div>
                    @foreach($errors->all() as $err)
                    <div style="font-size:13px;color:#991b1b">{{ $err }}</div>
                    @endforeach
                </div>
            </div>
            @endif

            <form method="POST" action="{{ route('app-admin.activate.post') }}" style="display:flex;flex-direction:column;gap:16px">
                @csrf
                <div class="form-group">
                    <label class="form-label" for="otp">Kode OTP</label>
                    <input id="otp" class="form-input" type="text" name="otp" required autofocus placeholder="••••" style="text-align:center;font-size:24px;letter-spacing:8px;padding:12px" maxlength="4">
                </div>

                <button class="btn btn-apple" type="submit" style="width:100%;justify-content:center;padding:11px">
                    <span class="ms">check_circle</span> Aktifkan Akun
                </button>

                <div style="text-align:center;font-size:13px;color:#7c84a0;margin-top:4px">
                    Tidak menerima kode? <a href="#" onclick="alert('Fitur resend OTP belum diimplementasikan.')" style="color:#1a67fd;font-weight:600">Kirim Ulang</a>
                </div>
                
                <a href="{{ route('app-admin.login') }}" style="text-align:center;font-size:13px;color:#7c84a0;margin-top:4px;display:block">
                    Kembali ke Login
                </a>
            </form>
        </div>

        <p style="text-align:center;font-size:12px;color:#7c84a0;margin-top:20px">
            Wavora Platform &mdash; Authorized access only
        </p>
    </div>
</div>
@endsection