@extends('layouts.auth')

@section('title', 'Register')
@section('auth-title', 'Buat Akun Baru')
@section('auth-subtitle', 'Daftar untuk mengakses sistem akademik')

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

    <div class="form-group">
        <label for="name">Nama Lengkap</label>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="fa fa-user"></i></span>
            </div>
            <input type="text" name="name" id="name" class="form-control @error('name') is-invalid @enderror" 
                   value="{{ old('name') }}" placeholder="Masukkan nama lengkap" required autofocus>
            @error('name')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>
    </div>

    <div class="form-group">
        <label for="email">Alamat Email</label>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="fa fa-envelope"></i></span>
            </div>
            <input type="email" name="email" id="email" class="form-control @error('email') is-invalid @enderror" 
                   value="{{ old('email') }}" placeholder="Masukkan email" required>
            @error('email')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>
    </div>

    <div class="form-group">
        <label for="password">Kata Sandi</label>
        <div class="input-group" style="position: relative;">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="fa fa-lock"></i></span>
            </div>
            <input type="password" name="password" id="password" class="form-control @error('password') is-invalid @enderror" 
                   placeholder="Minimal 8 karakter" required>
            <span class="password-toggle" style="position: absolute; right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer; z-index: 10; color: #888;">
                <i class="fa fa-eye"></i>
            </span>
            @error('password')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>
    </div>

    <div class="form-group">
        <label for="password_confirmation">Konfirmasi Kata Sandi</label>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="fa fa-check-circle"></i></span>
            </div>
            <input type="password" name="password_confirmation" id="password_confirmation" class="form-control" 
                   placeholder="Konfirmasi kata sandi" required>
        </div>
    </div>

    <button type="submit" class="btn btn-login">
        <i class="fa fa-user-plus"></i> Daftar
    </button>

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