@extends('layouts.auth')
@section('title', 'Daftar Akun')

@section('content')

<style>
    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=DM+Sans:wght@300;400;500;600&display=swap');
    .edu-font-display { font-family: 'Playfair Display', serif; }
    .edu-font-body { font-family: 'DM Sans', sans-serif; }
    :root { --navy:#0f1e38; --gold:#c9a84c; --gold-light:#f5e9cc; --cream:#faf8f4; --text-muted:#6b7280; --border:#e8e4dc; }
    .auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--cream); padding:2rem 1rem; }
    .auth-card { background:white; border:1px solid var(--border); border-radius:28px; padding:2.5rem; width:100%; max-width:460px; box-shadow:0 4px 32px rgba(15,30,56,.09); }
    .form-label { display:block; font-size:13px; font-weight:600; margin-bottom:.5rem; color:var(--navy); }
    .req { color:#ef4444; font-weight:400; }
    .form-input { width:100%; border:1.5px solid var(--border); border-radius:14px; padding:.875rem 1rem; font-size:13px; font-family:'DM Sans',sans-serif; color:var(--navy); background:var(--cream); outline:none; transition:border-color .15s,background .15s; box-sizing:border-box; }
    .form-input:focus { border-color:var(--navy); background:white; }
    .form-input.error { border-color:#dc2626; }
    .form-select { width:100%; border:1.5px solid var(--border); border-radius:14px; padding:.875rem 1rem; font-size:13px; font-family:'DM Sans',sans-serif; color:var(--navy); background:var(--cream); outline:none; transition:border-color .15s; box-sizing:border-box; appearance:none; }
    .form-select:focus { border-color:var(--navy); background:white; }
    .btn-submit { width:100%; background:var(--navy); color:white; font-size:14px; font-weight:600; padding:.875rem; border-radius:16px; border:none; cursor:pointer; font-family:'DM Sans',sans-serif; transition:opacity .2s; }
    .btn-submit:hover { opacity:.87; }
    .btn-login { width:100%; background:white; color:var(--navy); font-size:14px; font-weight:500; padding:.875rem; border-radius:16px; border:1.5px solid var(--border); cursor:pointer; font-family:'DM Sans',sans-serif; transition:background .15s; text-align:center; display:block; text-decoration:none; }
    .btn-login:hover { background:var(--cream); }
    .logo-circle { width:64px; height:64px; border-radius:20px; background:var(--navy); display:flex; align-items:center; justify-content:center; margin:0 auto 1.25rem; }
    .error-msg { font-size:12px; color:#dc2626; margin-top:.375rem; }
    .error-box { background:#fee2e2; border:1px solid #fca5a5; border-radius:14px; padding:.875rem 1rem; font-size:13px; color:#dc2626; margin-bottom:1.25rem; }
    .divider { display:flex; align-items:center; gap:.75rem; margin:.75rem 0; }
    .divider::before, .divider::after { content:''; flex:1; height:1px; background:var(--border); }
    .divider span { font-size:11px; color:var(--text-muted); }
    .step-badge { display:inline-flex; align-items:center; gap:.5rem; font-size:11px; font-weight:600; padding:.375rem .875rem; border-radius:100px; background:var(--gold-light); color:#92742a; margin-bottom:1.25rem; }
</style>

<div class="auth-wrap edu-font-body">
    <div class="auth-card">

        {{-- Logo --}}
        <div class="text-center mb-7">
            <div class="logo-circle">
                <span class="edu-font-display font-bold text-white" style="font-size:18px; letter-spacing:.05em;">LMS</span>
            </div>
            <h1 class="edu-font-display text-2xl font-bold" style="color:var(--navy);">Buat Akun Baru</h1>
            <p class="text-sm mt-1" style="color:var(--text-muted);">Daftarkan diri kamu untuk mulai belajar</p>
        </div>

        {{-- Error Summary --}}
        @if($errors->any())
        <div class="error-box">
            <i class="fa fa-exclamation-circle mr-1.5"></i>
            <strong>Terdapat kesalahan:</strong>
            <ul class="mt-1 space-y-0.5" style="list-style:disc; padding-left:1.25rem;">
                @foreach($errors->all() as $err) <li>{{ $err }}</li> @endforeach
            </ul>
        </div>
        @endif

        {{-- Form --}}
        <form method="POST" action="{{ route('register.post') }}" class="space-y-4">
            @csrf

            {{-- Nama --}}
            <div>
                <label class="form-label">Nama Lengkap <span class="req">*</span></label>
                <input type="text" name="name" value="{{ old('name') }}" required
                       class="form-input {{ $errors->has('name') ? 'error' : '' }}"
                       placeholder="Nama lengkap sesuai kartu identitas">
                @error('name') <p class="error-msg">{{ $message }}</p> @enderror
            </div>

            {{-- Email --}}
            <div>
                <label class="form-label">Email <span class="req">*</span></label>
                <input type="email" name="email" value="{{ old('email') }}" required
                       class="form-input {{ $errors->has('email') ? 'error' : '' }}"
                       placeholder="email@smkmuh1bantul.sch.id">
                @error('email') <p class="error-msg">{{ $message }}</p> @enderror
            </div>

            {{-- NIS / NIP --}}
            <div>
                <label class="form-label">NIS / NIP</label>
                <input type="text" name="nis_nip" value="{{ old('nis_nip') }}"
                       class="form-input"
                       placeholder="Nomor Induk Siswa atau Pegawai">
                @error('nis_nip') <p class="error-msg">{{ $message }}</p> @enderror
            </div>

            {{-- Kelas (untuk siswa) --}}
            <div>
                <label class="form-label">Kelas</label>
                <input type="text" name="kelas" value="{{ old('kelas') }}"
                       class="form-input"
                       placeholder="Contoh: X RPL 1">
                @error('kelas') <p class="error-msg">{{ $message }}</p> @enderror
            </div>

            {{-- Role --}}
            <div>
                <label class="form-label">Daftar Sebagai <span class="req">*</span></label>
                <div style="position:relative;">
                    <select name="role" class="form-select {{ $errors->has('role') ? 'error' : '' }}">
                        <option value="">— Pilih Role —</option>
                        <option value="siswa" {{ old('role') === 'siswa' ? 'selected' : '' }}>Siswa</option>
                        <option value="guru"  {{ old('role') === 'guru'  ? 'selected' : '' }}>Guru</option>
                    </select>
                    <i class="fa fa-chevron-down" style="position:absolute; right:1rem; top:50%; transform:translateY(-50%); font-size:11px; color:var(--text-muted); pointer-events:none;"></i>
                </div>
                @error('role') <p class="error-msg">{{ $message }}</p> @enderror
            </div>

            {{-- Nomor Telepon --}}
            <div>
                <label class="form-label">Nomor Telepon</label>
                <input type="text" name="phone" value="{{ old('phone') }}"
                       class="form-input" placeholder="Contoh: 08800342445">
                @error('phone') <p class="error-msg">{{ $message }}</p> @enderror
            </div>

            {{-- Password --}}
            <div>
                <label class="form-label">Password <span class="req">*</span></label>
                <div style="position:relative;">
                    <input type="password" name="password" id="pwd-input" required
                           class="form-input {{ $errors->has('password') ? 'error' : '' }}"
                           placeholder="Minimal 8 karakter" style="padding-right:3rem;">
                    <button type="button" onclick="togglePwd('pwd-input','pwd-icon')"
                            style="position:absolute; right:1rem; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--text-muted);">
                        <i class="fa fa-eye" id="pwd-icon" style="font-size:14px;"></i>
                    </button>
                </div>
                @error('password') <p class="error-msg">{{ $message }}</p> @enderror
            </div>

            {{-- Konfirmasi Password --}}
            <div>
                <label class="form-label">Konfirmasi Password <span class="req">*</span></label>
                <div style="position:relative;">
                    <input type="password" name="password_confirmation" id="pwd2-input" required
                           class="form-input"
                           placeholder="Ulangi password" style="padding-right:3rem;">
                    <button type="button" onclick="togglePwd('pwd2-input','pwd2-icon')"
                            style="position:absolute; right:1rem; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--text-muted);">
                        <i class="fa fa-eye" id="pwd2-icon" style="font-size:14px;"></i>
                    </button>
                </div>
            </div>

            {{-- Info --}}
            <div style="background:var(--gold-light); border:1px solid #e8d4a0; border-radius:14px; padding:.875rem 1rem;">
                <div class="flex gap-2">
                    <i class="fa fa-info-circle mt-0.5 flex-shrink-0" style="color:#92742a; font-size:13px;"></i>
                    <p class="text-xs leading-relaxed" style="color:#92742a;">Akun akan aktif setelah diverifikasi oleh admin. Pastikan data yang diisi sudah benar.</p>
                </div>
            </div>

            <button type="submit" class="btn-submit">
                <i class="fa fa-user-plus mr-2" style="font-size:12px;"></i>Daftar Sekarang
            </button>

            <div class="divider"><span>sudah punya akun?</span></div>

            <a href="{{ route('login') }}" class="btn-login">Masuk</a>
        </form>

        <p class="text-center text-xs mt-6" style="color:var(--text-muted);">© {{ date('Y') }} Course Bantul. All rights reserved.</p>
    </div>
</div>

<script>
function togglePwd(inputId, iconId) {
    const input = document.getElementById(inputId);
    const icon  = document.getElementById(iconId);
    if (input.type === 'password') {
        input.type = 'text';
        icon.className = 'fa fa-eye-slash';
    } else {
        input.type = 'password';
        icon.className = 'fa fa-eye';
    }
}
</script>
@endsection