<x-guest-layout>
    {{-- VERIFIKASI OTP --}}
    <div id="step-otp">
        <div class="mb-4 text-center">
            <h4 class="fw-bold text-dark">Verifikasi Kode OTP</h4>
            <p class="text-muted small">Masukkan 6 digit kode yang diberikan Admin via WhatsApp.</p>
        </div>

        <form id="formVerifyOtp" onsubmit="verifikasiOTP(event)">
            <div class="mb-4">
                <label class="form-label fw-bold">Kode OTP</label>
                <input class="form-control text-center fs-3 letter-spacing-2 py-2" type="text" id="inputOtp"
                    placeholder="000000" maxlength="6" required autofocus autocomplete="off">
            </div>

            <div class="d-grid">
                <button type="submit" class="btn btn-primary py-2 fw-bold">
                    Verifikasi Kode
                </button>
            </div>

            <div class="text-center mt-3">
                <a href="/login" class="text-decoration-none small text-muted">
                    <i class="bi bi-arrow-left me-1"></i>Kembali ke Login
                </a>
            </div>
        </form>
    </div>

    {{-- PASSWORD BARU --}}
    <div id="step-password" class="d-none">
        <div class="mb-4 text-center">
            <h4 class="fw-bold text-dark">Buat Kata Sandi Baru</h4>
            <p class="text-muted small">OTP Valid! Silakan buat kata sandi baru Anda.</p>
        </div>

        <form id="formResetPassword" onsubmit="simpanPassword(event)">
            {{-- Password Utama --}}
            <div class="mb-3">
                <label class="form-label">Kata Sandi Baru</label>
                <div class="input-group">
                    <input id="password" class="form-control" type="password" name="password" required placeholder="Minimal 8 karakter"/>
                    <button class="btn btn-outline-secondary" type="button" onclick="lihatPassword('password', this)">
                        <i class="bi bi-eye-slash-fill"></i>
                    </button>
                </div>
            </div>

            {{-- Konfirmasi Password --}}
            <div class="mb-4">
                <label class="form-label">Konfirmasi Kata Sandi</label>
                <div class="input-group">
                    <input id="password_confirmation" class="form-control" type="password" name="password_confirmation" required placeholder="Ulangi kata sandi"/>
                    <button class="btn btn-outline-secondary" type="button" onclick="lihatPassword('password_confirmation', this)">
                        <i class="bi bi-eye-slash-fill"></i>
                    </button>
                </div>
            </div>

            <div class="d-grid">
                <button type="submit" class="btn btn-primary py-2 fw-bold">
                    Simpan Kata Sandi
                </button>
            </div>
        </form>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        // Fungsi Toggle Lihat Password 
        function lihatPassword(targetId, btn) {
            const input = document.getElementById(targetId);
            const icon = btn.querySelector('i');

            if (input.type === 'password') {
                input.type = 'text';
                icon.classList.remove('bi-eye-slash-fill');
                icon.classList.add('bi-eye-fill');
            } else {
                input.type = 'password';
                icon.classList.remove('bi-eye-fill');
                icon.classList.add('bi-eye-slash-fill');
            }
        }

        // Fungsi Verifikasi OTP
        function verifikasiOTP(e) {
            e.preventDefault();
            const inputOtp = document.getElementById('inputOtp').value;

            if(inputOtp !== '678901') { 
                Swal.fire({ icon: 'error', title: 'Gagal', text: 'Kode OTP salah! Coba cek lagi WA Admin.' });
                return;
            }

            Swal.fire({ title: 'Memverifikasi...', timer: 800, didOpen: () => Swal.showLoading() }).then(() => {
                document.getElementById('step-otp').classList.add('d-none');
                document.getElementById('step-password').classList.remove('d-none');
                document.getElementById('password').focus();
                
                const Toast = Swal.mixin({ toast: true, position: 'top-end', showConfirmButton: false, timer: 3000 });
                Toast.fire({ icon: 'success', title: 'Kode OTP Valid' });
            });
        }

        // Fungsi Simpan Password
        function simpanPassword(e) {
            e.preventDefault();
            const pass = document.getElementById('password').value;
            const conf = document.getElementById('password_confirmation').value; 

            if(pass.length < 8) {
                Swal.fire({ icon: 'warning', text: 'Kata sandi minimal 8 karakter!' }); return;
            }
            if(pass !== conf) {
                Swal.fire({ icon: 'warning', text: 'Konfirmasi kata sandi tidak cocok!' }); return;
            }

            Swal.fire({ title: 'Menyimpan...', timer: 1500, didOpen: () => Swal.showLoading() }).then(() => {
                Swal.fire({
                    icon: 'success', title: 'Berhasil!', text: 'Kata sandi Anda telah diperbarui. Silakan login.',
                    confirmButtonText: 'Ke Halaman Login', allowOutsideClick: false
                }).then(() => { window.location.href = "/login"; });
            });
        }
    </script>

    <style>
        .letter-spacing-2 {
            letter-spacing: 0.5em;
            font-weight: bold;
            color: #0d6efd;
        }
    </style>
</x-guest-layout>