@extends('layouts.app')

@section('content')
    <div class="auth-shell">
        <div class="auth-card auth-page-red">
            <div class="auth-panel">
                <div class="auth-showcase">
                    <div class="auth-logo-wrap">
                        <img src="{{ asset('images/Logo.png') }}" alt="Logo i4 Bakery" class="auth-logo">
                    </div>

                    <h1 class="auth-showcase-title">i4 Bakery</h1>
                    <p class="auth-showcase-text">
                        Tambahkan akun baru untuk mengakses sistem pencatatan keuangan dengan tampilan yang sama seperti halaman login.
                    </p>
                </div>

                <div class="auth-form-side">
                    <div class="auth-form-wrap">
                        <h2 class="auth-form-title">Buat Akun</h2>
                        <p class="auth-form-subtitle">Isi data akun baru di bawah ini.</p>

                        <form method="POST" action="{{ route('register.post') }}">
                            @csrf

                            <div class="mb-3">
                                <input type="text" name="nama_lengkap" class="form-control" value="{{ old('nama_lengkap') }}" placeholder="Masukkan nama lengkap">
                            </div>

                            <div class="mb-3">
                                <input type="text" name="username" class="form-control" value="{{ old('username') }}" placeholder="Masukkan username" required>
                            </div>

                            <div class="mb-4">
                                <input type="password" name="password" class="form-control" placeholder="Masukkan password" required>
                            </div>

                            <button class="btn auth-submit-btn w-100" type="submit">Buat Akun</button>
                        </form>

                        <div class="mt-3 text-center">
                            <a href="{{ route('login') }}" class="auth-link">Sudah punya akun? Login</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection