@extends('layouts.auth')

@section('content')
    <div class="row justify-content-center">
        <div class="col-12 col-md-10 col-lg-7 col-xl-6">
            <div class="auth-card">
                <div class="card-body p-4 p-sm-5">
                    <div class="text-center mb-4">
                        <img src="{{ asset('assets/img/logo.png') }}" alt="Tanjoeng Farm Logo" class="auth-header-logo" />
                        <h2 class="fw-bold text-dark h4 mb-1">Buat Akun Baru</h2>
                        <p class="text-muted small">Bergabunglah dan nikmati hasil panen terbaik kami.</p>
                    </div>

                    <form action="{{ route('register.post') }}" method="POST">
                        @csrf
                        <div class="row g-3">
                            <div class="col-12">
                                <label for="username" class="form-label small fw-semibold text-dark">Username</label>
                                <input type="text"
                                    class="form-control form-control-lg @error('username') is-invalid @enderror"
                                    id="username" name="username" value="{{ old('username') }}"
                                    placeholder="tanjoeng_user" required autofocus>
                                @error('username')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12">
                                <label for="phone_number" class="form-label small fw-semibold text-dark">Nomor
                                    Handphone</label>
                                <input type="tel"
                                    class="form-control form-control-lg @error('phone_number') is-invalid @enderror"
                                    id="phone_number" name="phone_number" value="{{ old('phone_number') }}"
                                    placeholder="081234567890" data-validate="phone">
                                @error('phone_number')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text text-muted">Opsional. 11–13 digit angka.</div>
                            </div>

                            <div class="col-12">
                                <label for="email" class="form-label small fw-semibold text-dark">Alamat Email</label>
                                <input type="email"
                                    class="form-control form-control-lg @error('email') is-invalid @enderror" id="email"
                                    name="email" value="{{ old('email') }}" placeholder="user@gmail.com" required>
                                @error('email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text text-muted">Harus menggunakan domain @gmail.com.</div>
                            </div>

                            <div class="col-12 col-sm-6">
                                <label for="password" class="form-label small fw-semibold text-dark">Kata Sandi</label>
                                <div class="position-relative">
                                    <input type="password"
                                        class="form-control form-control-lg pe-5 @error('password') is-invalid @enderror"
                                        id="password" name="password" placeholder="Minimal 8 karakter" required>
                                    <button type="button" id="togglePassword"
                                        class="btn position-absolute top-50 end-0 translate-middle-y me-2 text-muted border-0 bg-transparent"
                                        style="z-index: 10;">
                                        <i class="bi bi-eye" id="toggleIcon" style="font-size: 1.25rem;"></i>
                                    </button>
                                </div>
                                @error('password')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12 col-sm-6">
                                <label for="password_confirmation" class="form-label small fw-semibold text-dark">Konfirmasi
                                    Kata Sandi</label>
                                <div class="position-relative">
                                    <input type="password" class="form-control form-control-lg pe-5"
                                        id="password_confirmation" name="password_confirmation"
                                        placeholder="Ketik ulang sandi" required>
                                    <button type="button" id="toggleConfirmPassword"
                                        class="btn position-absolute top-50 end-0 translate-middle-y me-2 text-muted border-0 bg-transparent"
                                        style="z-index: 10;">
                                        <i class="bi bi-eye" id="toggleConfirmIcon" style="font-size: 1.25rem;"></i>
                                    </button>
                                </div>
                            </div>

                            {{-- Password Checklist --}}
                            <div class="col-12">
                                <div class="pw-checklist-wrap" id="passwordChecklist"></div>
                            </div>
                        </div>

                        <div class="mt-4 pt-2">
                            <button type="submit" id="btnRegister" class="btn btn-primary-auth w-100" disabled>
                                Daftar Sekarang
                            </button>
                            <div class="text-center mt-2">
                                <small class="text-muted" style="font-size: 0.75rem;"><i class="bi bi-info-circle me-1"></i>Demi keamanan, percobaan daftar dibatasi 5x per menit.</small>
                            </div>
                        </div>
                    </form>

                    <div class="text-center mt-4 pt-4 border-top">
                        <p class="small text-muted mb-0">Sudah punya akun? <a href="{{ route('login') }}"
                                class="fw-bold text-decoration-none" style="color: var(--primary);">Masuk di sini</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="{{ asset('assets/js/password-checker.js') }}"></script>
    <script src="{{ asset('assets/js/form-validation.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // --- 1. LOGIKA MATA TOGGLE PASSWORD ---
            function setupPasswordToggle(buttonId, inputId, iconId) {
                const toggleButton = document.getElementById(buttonId);
                const passwordInput = document.getElementById(inputId);
                const toggleIcon = document.getElementById(iconId);

                if (toggleButton && passwordInput && toggleIcon) {
                    toggleButton.addEventListener('click', function() {
                        const type = passwordInput.getAttribute('type') === 'password' ? 'text' :
                        'password';
                        passwordInput.setAttribute('type', type);

                        if (type === 'text') {
                            toggleIcon.classList.remove('bi-eye');
                            toggleIcon.classList.add('bi-eye-slash');
                        } else {
                            toggleIcon.classList.remove('bi-eye-slash');
                            toggleIcon.classList.add('bi-eye');
                        }
                    });
                }
            }

            setupPasswordToggle('togglePassword', 'password', 'toggleIcon');
            setupPasswordToggle('toggleConfirmPassword', 'password_confirmation', 'toggleConfirmIcon');

            // --- 3. PASSWORD CHECKER ---
            new PasswordChecker({
                passwordId:  'password',
                confirmId:   'password_confirmation',
                submitId:    'btnRegister',
                checklistId: 'passwordChecklist',
            });
        });
    </script>
@endsection