@extends('app-admin.layout')
@section('title', 'Registrasi — 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">Registrasi Akun</h1>
            <p style="font-size:13px;color:#7c84a0;margin-top:4px">Buat akun baru untuk mengakses platform</p>
        </div>

        {{-- Card --}}
        <div class="card" style="padding:28px">
            @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.register.post') }}" style="display:flex;flex-direction:column;gap:16px">
                @csrf
                <div class="form-group">
                    <label class="form-label" for="name">Nama Lengkap</label>
                    <input id="name" class="form-input" type="text" name="name" value="{{ old('name') }}" required autofocus placeholder="John Doe">
                </div>
                <div class="form-group">
                    <label class="form-label" for="whatsapp_number">Nomor WhatsApp</label>
                    <input id="whatsapp_number" class="form-input" type="text" name="whatsapp_number" value="{{ old('whatsapp_number') }}" required placeholder="628123456789">
                </div>
                <div class="form-group">
                    <label class="form-label" for="password">Password</label>
                    <input id="password" class="form-input" type="password" name="password" required placeholder="••••••••">
                </div>
                <div class="form-group">
                    <label class="form-label" for="password_confirmation">Konfirmasi Password</label>
                    <input id="password_confirmation" class="form-input" type="password" name="password_confirmation" required placeholder="••••••••">
                </div>
                
                {{-- Captcha --}}
                <div class="form-group">
                    <label class="form-label" for="captcha">Captcha</label>
                    <div style="display:flex;gap:10px;align-items:center">
                        <input id="captcha" class="form-input" type="text" name="captcha" required placeholder="4 digit angka">
                        <img src="{{ route('app-admin.captcha') }}" alt="captcha" style="border-radius:10px;height:40px;cursor:pointer" onclick="this.src='{{ route('app-admin.captcha') }}?'+Math.random()" title="Klik untuk reload">
                    </div>
                    <span class="form-hint">Klik gambar untuk reload captcha</span>
                </div>

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

                <a href="{{ route('landing') }}" class="btn btn-ghost" style="width:100%;justify-content:center;padding:11px">
                    <span class="ms">arrow_back</span> Kembali ke Beranda
                </a>

                <div style="text-align:center;font-size:13px;color:#7c84a0;margin-top:4px">
                    Sudah punya akun? <a href="{{ route('app-admin.login') }}" style="color:#1a67fd;font-weight:600">Sign In</a>
                </div>
            </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