@extends('layouts.app')
@section('title', 'Daftar')

@section('content')
<div class="max-w-md mx-auto px-4 py-16">
    <div class="bg-white rounded-3xl border border-slate-100 p-8 shadow-soft">
        <h1 class="text-2xl font-extrabold text-center">Buat Akun Baru</h1>
        <p class="text-slate-500 text-sm text-center mt-1">Simpan desain, lacak pesanan, & lebih banyak lagi.</p>

        <form method="POST" action="{{ route('register.submit') }}" class="mt-6 space-y-4">
            @csrf
            @php
                $refCode = old('ref', request('ref') ?? session('referral_code') ?? request()->cookie(config('affiliate.cookie_name', 'ref_code')));
            @endphp
            @if ($refCode)
                <input type="hidden" name="ref" value="{{ $refCode }}">
                <p class="text-xs text-center text-brand-700 bg-brand-50 rounded-lg px-3 py-2">Daftar via referral: <strong>{{ strtoupper($refCode) }}</strong></p>
            @endif
            <div>
                <label class="text-sm font-medium text-slate-600">Nama lengkap</label>
                <input name="name" value="{{ old('name') }}" required autofocus class="mt-1 w-full rounded-lg border border-slate-200 px-3 py-2.5 text-sm">
            </div>
            <div>
                <label class="text-sm font-medium text-slate-600">Email</label>
                <input name="email" type="email" value="{{ old('email') }}" required class="mt-1 w-full rounded-lg border border-slate-200 px-3 py-2.5 text-sm">
            </div>
            <div>
                <label class="text-sm font-medium text-slate-600">No. HP</label>
                <input name="phone" value="{{ old('phone') }}" class="mt-1 w-full rounded-lg border border-slate-200 px-3 py-2.5 text-sm">
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="text-sm font-medium text-slate-600">Password</label>
                    <input name="password" type="password" required class="mt-1 w-full rounded-lg border border-slate-200 px-3 py-2.5 text-sm">
                </div>
                <div>
                    <label class="text-sm font-medium text-slate-600">Ulangi password</label>
                    <input name="password_confirmation" type="password" required class="mt-1 w-full rounded-lg border border-slate-200 px-3 py-2.5 text-sm">
                </div>
            </div>
            <button class="w-full bg-brand-600 hover:bg-brand-700 text-white font-bold py-3 rounded-xl">Daftar</button>
        </form>
        <p class="text-center text-sm text-slate-500 mt-5">Sudah punya akun? <a href="{{ route('login') }}" class="text-brand-600 font-semibold hover:underline">Masuk</a></p>
    </div>
</div>
@endsection