@extends('layouts.auth')
@section('title', 'Reset Kata Sandi')

@section('content')
    <div class="auth-card text-center" style="background: rgba(15, 23, 42, 0.9);">
        <img src="{{ asset('images/epresensi-logo.png') }}" alt="Logo" class="mb-3">
        <h3>Atur Ulang Kata Sandi</h3>
        <p class="small mb-4 text-light">Masukkan kata sandi baru Anda di bawah ini.</p>

        @if ($errors->any())
            <div class="alert alert-danger text-start mb-3">
                <i class="fas fa-exclamation-circle me-2"></i>{{ $errors->first() }}
            </div>
        @endif

        @if (session('status'))
            <div class="alert alert-success text-start mb-3">
                <i class="fas fa-check-circle me-2"></i>{{ session('status') }}
            </div>
        @endif

        <form method="POST" action="{{ route('password.update') }}" id="resetForm">
            @csrf
            <input type="hidden" name="token" value="{{ $token }}">

            <div class="form-floating mb-3">
                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror"
                    name="email" value="{{ old('email', $email ?? request()->query('email')) }}" {{-- ✅ Ambil dari controller atau URL --}}
                    required placeholder="Email">
                <label for="email">Alamat Email</label>
                @error('email')
                    <div class="invalid-feedback text-start">{{ $message }}</div>
                @enderror
            </div>


            <div class="form-floating mb-3 position-relative">
                <input type="password" name="password" id="password"
                    class="form-control @error('password') is-invalid @enderror" required placeholder="Password Baru"
                    value="{{ session('password_old') }}">
                <label for="password">Password Baru</label>
                <i class="fas fa-eye eye-icon"></i>
                <div id="password-error" class="text-danger small text-start mt-1"></div>
            </div>

            <div class="form-floating mb-3 position-relative">
                <input type="password" name="password_confirmation" id="password-confirm" class="form-control" required
                    placeholder="Konfirmasi Password">
                <label for="password-confirm">Konfirmasi Password</label>
                <i class="fas fa-eye eye-icon"></i>
                <div id="confirm-error" class="text-danger small text-start mt-1"></div>
            </div>

            <div class="text-start small text-warning mb-3" id="password-guide">
                <i class="fas fa-info-circle me-1"></i> Minimal 6 karakter, kombinasi huruf besar, kecil, dan angka.
            </div>

            <button class="btn btn-gradient mb-3" type="submit" id="submitBtn" disabled>
                <i class="fas fa-sync-alt me-1"></i> Reset Password
            </button>

            <div>
                <a href="{{ route('login') }}" class="text-link small">
                    <i class="fas fa-arrow-left me-1"></i> Kembali ke Login
                </a>
            </div>
        </form>
    </div>

    @php
        session()->forget('password_old');
    @endphp
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const toggles = document.querySelectorAll('.eye-icon');
            const passwordInput = document.getElementById('password');
            const confirmInput = document.getElementById('password-confirm');
            const submitBtn = document.getElementById('submitBtn');
            const passwordError = document.getElementById('password-error');
            const confirmError = document.getElementById('confirm-error');

            toggles.forEach(icon => {
                icon.addEventListener('click', function() {
                    const input = this.closest('.position-relative').querySelector('input');
                    const type = input.getAttribute('type') === 'password' ? 'text' : 'password';
                    input.setAttribute('type', type);
                    this.classList.toggle('fa-eye');
                    this.classList.toggle('fa-eye-slash');
                });
            });

            function validateForm() {
                const password = passwordInput.value.trim();
                const confirm = confirmInput.value.trim();
                let valid = true;

                passwordError.textContent = '';
                confirmError.textContent = '';

                const hasUpper = /[A-Z]/.test(password);
                const hasLower = /[a-z]/.test(password);
                const hasNumber = /[0-9]/.test(password);

                if (password.length < 6) {
                    passwordError.textContent = 'Kata sandi minimal 6 karakter.';
                    valid = false;
                } else if (!(hasUpper && hasLower && hasNumber)) {
                    passwordError.textContent =
                        'Kata sandi harus mengandung huruf besar, kecil, dan angka.';
                    valid = false;
                }

                if (confirm && password !== confirm) {
                    confirmError.textContent = 'Konfirmasi kata sandi tidak cocok.';
                    valid = false;
                }

                submitBtn.disabled = !valid;
            }

            passwordInput.addEventListener('input', validateForm);
            confirmInput.addEventListener('input', validateForm);
        });
    </script>
@endpush