@extends('layouts.auth')

@section('content')
    <div class="row justify-content-center">
        <div class="col-12 col-sm-10 col-md-8 col-lg-5 col-xl-6">
            <div class="auth-card">
                <div class="card-body p-4 p-sm-5">
                    <div class="text-center mb-4">
                        <div class="bg-primary-subtle rounded-circle d-inline-flex align-items-center justify-content-center mb-3"
                            style="width: 70px; height: 70px;">
                            <span class="material-symbols-outlined fs-1" style="color: var(--primary);">password</span>
                        </div>
                        <h2 class="fw-bold text-dark h4 mb-1">Buat Sandi Baru</h2>
                        <p class="text-muted small">Silakan masukkan kata sandi baru untuk akun Anda.</p>
                    </div>

                    <form action="{{ route('auth.reset-password.post', ['token' => request()->route('token')]) }}" method="POST">
                        @csrf
                        <input type="hidden" name="email" value="{{ $email }}">
                        <input type="hidden" name="token" value="{{ $token }}">

                        <div class="mb-3">
                            <label for="password" class="form-label small fw-semibold text-dark">Kata Sandi Baru</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 autofocus>
                                <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="mb-3">
                            <label for="password_confirmation" class="form-label small fw-semibold text-dark">Konfirmasi
                                Sandi Baru</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 baru" 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>

                        {{-- Checklist syarat password --}}
                        <div class="pw-checklist-wrap mb-4" id="resetPasswordChecklist"></div>

                        <button type="submit" id="btnResetPassword" class="btn btn-primary-auth w-100" disabled>
                            Simpan Sandi Baru
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script src="{{ asset('assets/js/password-checker.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // ── Toggle show/hide 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);
                        toggleIcon.classList.toggle('bi-eye', type === 'password');
                        toggleIcon.classList.toggle('bi-eye-slash', type === 'text');
                    });
                }
            }

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

            // ── Password Checker ───────────────────────────────────────
            new PasswordChecker({
                passwordId:  'password',
                confirmId:   'password_confirmation',
                submitId:    'btnResetPassword',
                checklistId: 'resetPasswordChecklist',
            });
        });
    </script>
@endsection