<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reset Password - INTERIA</title>

    <!-- Fonts & Icons -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.tailwindcss.com"></script>

    <style>
        :root {
            --color-primary: #fef9c3;
            --color-secondary: #fed7aa;
            --brand-text: #78350f;
        }

        * {
            font-family: 'Poppins', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
            min-height: 100vh;
            position: relative;
            overflow-x: hidden;
        }

        body::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(217, 119, 6, 0.08) 0%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
        }

        body::after {
            content: '';
            position: absolute;
            bottom: -30%;
            left: -15%;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(15, 23, 42, 0.05) 0%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(226, 232, 240, 0.8);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
        }

        .gradient-secondary {
            background: linear-gradient(135deg, #fef9c3 0%, #fed7aa 100%);
            color: #78350f !important;
        }

        .input-group {
            position: relative;
        }

        .input-icon {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: #94a3b8;
            transition: all 0.3s ease;
            z-index: 2;
        }

        .input-field {
            width: 100%;
            padding: 0.875rem 1rem 0.875rem 2.75rem;
            border: 2px solid #e2e8f0;
            border-radius: 1rem;
            background: #fafbfc;
            transition: all 0.3s ease;
            font-size: 0.95rem;
        }

        .input-field:focus {
            outline: none;
            border-color: #d97706;
            background: white;
            box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.1);
        }

        .input-field:focus+.input-icon {
            color: #d97706;
        }

        .floating-label {
            position: absolute;
            top: -0.65rem;
            left: 0.75rem;
            padding: 0 0.5rem;
            background: white;
            font-size: 0.75rem;
            font-weight: 600;
            color: #d97706;
            z-index: 10;
            letter-spacing: 0.025em;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-fade-in-up {
            animation: fadeInUp 0.6s ease-out forwards;
        }

        .strength-bar {
            height: 4px;
            transition: all 0.3s ease;
            border-radius: 2px;
        }

        .toast-notification {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
            animation: slideInRight 0.3s ease-out;
        }

        @keyframes slideInRight {
            from {
                transform: translateX(100%);
                opacity: 0;
            }

            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes slideOutRight {
            from {
                transform: translateX(0);
                opacity: 1;
            }

            to {
                transform: translateX(100%);
                opacity: 0;
            }
        }

        .toast-hide {
            animation: slideOutRight 0.3s ease-out forwards;
        }

        .loading-spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 0.6s linear infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        .btn-loading {
            opacity: 0.7;
            cursor: not-allowed;
        }

        @media (max-width: 640px) {
            .toast-notification {
                top: 10px;
                right: 10px;
                left: 10px;
            }
        }
    </style>
</head>

<body class="flex items-center justify-center min-h-screen p-4 relative">

    <!-- Toast Notification -->
    <div id="toast-container" class="toast-notification hidden">
        <div class="bg-white rounded-xl shadow-2xl min-w-[280px] max-w-md overflow-hidden border-l-4 border-green-500">
            <div class="flex items-center p-4 gap-3">
                <div id="toast-icon"><i class="fas fa-check-circle text-green-500 text-xl"></i></div>
                <div class="flex-1">
                    <p id="toast-title" class="font-semibold text-green-700 text-sm">Sukses!</p>
                    <p id="toast-message" class="text-gray-600 text-xs mt-0.5">Password berhasil direset</p>
                </div>
                <button onclick="hideToast()" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times"></i></button>
            </div>
        </div>
    </div>

    <!-- Reset Password Form -->
    <div class="w-full max-w-md animate-fade-in-up">
        <div class="glass-card rounded-2xl p-8 md:p-10 shadow-xl">
            <div class="mb-8">
                <div class="flex items-center justify-between mb-2">
                    <h2 class="text-2xl font-bold text-slate-800">Reset Password</h2>
                    <i class="fas fa-key text-amber-600 text-2xl opacity-50"></i>
                </div>
                <p class="text-gray-500 text-sm">Buat password baru untuk akun Anda</p>
            </div>

            <!-- Error Messages -->
            @if ($errors->any())
            <div class="mb-6 p-4 rounded-xl bg-gradient-to-r from-red-50 to-rose-50 border border-red-200">
                <div class="flex items-center gap-3">
                    <i class="fas fa-exclamation-circle text-red-500"></i>
                    <p class="text-sm font-medium text-red-700">{{ $errors->first() }}</p>
                </div>
            </div>
            @endif

            <div id="error-container" class="mb-6 hidden">
                <div class="p-4 rounded-xl bg-gradient-to-r from-red-50 to-rose-50 border border-red-200">
                    <div class="flex items-center gap-3">
                        <i class="fas fa-exclamation-circle text-red-500"></i>
                        <p id="error-text" class="text-sm font-medium text-red-700"></p>
                    </div>
                </div>
            </div>

            <form method="POST" action="{{ route('password.store') }}" id="reset-password-form" class="space-y-6">
                @csrf
                <input type="hidden" name="token" value="{{ $request->route('token') }}">

                <div class="input-group">
                    <div class="relative">
                        <div class="floating-label">Alamat Email</div>
                        <i class="fas fa-envelope input-icon"></i>
                        <input id="email"
                            type="email"
                            name="email"
                            required
                            value="{{ request()->get('email') }}"
                            class="input-field bg-gray-50"
                            readonly>
                    </div>
                </div>

                <div class="input-group">
                    <div class="relative">
                        <div class="floating-label">Password Baru</div>
                        <i class="fas fa-lock input-icon"></i>
                        <input id="password" name="password" type="password" required class="input-field pr-12" placeholder="Minimal 8 karakter">
                        <button type="button" onclick="togglePassword('password')" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-amber-600">
                            <i id="eye-icon-password" class="fas fa-eye"></i>
                        </button>
                    </div>
                    <div class="mt-2">
                        <div class="strength-bar w-full bg-gray-200 rounded-full overflow-hidden">
                            <div id="strength-bar" class="strength-bar w-0 bg-red-500"></div>
                        </div>
                        <p id="strength-text" class="text-xs mt-1 text-gray-500"></p>
                    </div>
                </div>

                <div class="input-group">
                    <div class="relative">
                        <div class="floating-label">Konfirmasi Password</div>
                        <i class="fas fa-check-circle input-icon"></i>
                        <input id="password_confirmation" name="password_confirmation" type="password" required class="input-field pr-12" placeholder="Ulangi password baru">
                        <button type="button" onclick="togglePassword('password_confirmation')" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-amber-600">
                            <i id="eye-icon-confirm" class="fas fa-eye"></i>
                        </button>
                    </div>
                    <div id="match-indicator" class="mt-2"></div>
                </div>

                <button type="submit" id="submit-btn" class="w-full gradient-secondary font-semibold py-3.5 px-6 rounded-xl shadow-lg transition-all duration-200 flex items-center justify-center gap-2 hover:-translate-y-0.5 hover:shadow-xl"> <i class="fas fa-redo-alt"></i>
                    <span>Reset Password</span>
                </button>
            </form>

            <div class="relative my-8">
                <div class="absolute inset-0 flex items-center">
                    <div class="w-full border-t border-gray-200"></div>
                </div>
                <div class="relative flex justify-center"><span class="px-4 bg-white text-xs text-gray-400">Sudah ingat password?</span></div>
            </div>

            <a href="{{ route('login') }}" class="block w-full text-center py-3.5 px-6 rounded-xl border-2 border-gray-200 text-gray-700 font-semibold hover:border-amber-400 hover:text-amber-600 hover:bg-amber-50 transition-all duration-200">
                <i class="fas fa-sign-in-alt mr-2"></i> Kembali ke Halaman Login
            </a>

            <div class="mt-6 text-center">
                <a href="/" class="inline-flex items-center gap-2 text-gray-500 hover:text-gray-700 text-sm transition-colors group">
                    <i class="fas fa-arrow-left text-xs group-hover:-translate-x-1 transition-transform"></i>
                    <span>Kembali ke Beranda</span>
                </a>
            </div>
        </div>

        <div class="mt-6 text-center">
            <p class="text-xs text-gray-400"><i class="fas fa-store mr-1 text-amber-500/70"></i> © 2026 INTERIA. Toko Premium e-Commerce Anda</p>
        </div>
    </div>

    <script>
        function showToast(type, title, message) {
            const toast = document.getElementById('toast-container');
            const toastIcon = document.getElementById('toast-icon');
            const toastTitle = document.getElementById('toast-title');
            const toastMessage = document.getElementById('toast-message');
            const borderColor = type === 'success' ? 'border-green-500' : 'border-red-500';

            if (type === 'success') {
                toastIcon.innerHTML = '<i class="fas fa-check-circle text-green-500 text-xl"></i>';
                toastTitle.className = 'font-semibold text-green-700 text-sm';
            } else {
                toastIcon.innerHTML = '<i class="fas fa-exclamation-circle text-red-500 text-xl"></i>';
                toastTitle.className = 'font-semibold text-red-700 text-sm';
            }

            toastTitle.textContent = title;
            toastMessage.textContent = message;
            toast.querySelector('.bg-white').className = `bg-white rounded-xl shadow-2xl min-w-[280px] max-w-md overflow-hidden border-l-4 ${borderColor}`;

            toast.classList.remove('hidden');
            setTimeout(() => hideToast(), 3000);
        }

        function hideToast() {
            const toast = document.getElementById('toast-container');
            toast.classList.add('toast-hide');
            setTimeout(() => {
                toast.classList.remove('toast-hide');
                toast.classList.add('hidden');
            }, 300);
        }

        function togglePassword(fieldId) {
            const input = document.getElementById(fieldId);
            const eyeIcon = document.getElementById(`eye-icon-${fieldId === 'password' ? 'password' : 'confirm'}`);
            if (input.type === 'password') {
                input.type = 'text';
                eyeIcon.classList.replace('fa-eye', 'fa-eye-slash');
            } else {
                input.type = 'password';
                eyeIcon.classList.replace('fa-eye-slash', 'fa-eye');
            }
        }

        function checkPasswordStrength(password) {
            let strength = 0;
            let message = '';
            let color = '';
            let textColor = '';

            if (password.length >= 8) strength++;
            if (password.match(/[a-z]/)) strength++;
            if (password.match(/[A-Z]/)) strength++;
            if (password.match(/[0-9]/)) strength++;
            if (password.match(/[^a-zA-Z0-9]/)) strength++;

            switch (strength) {
                case 0:
                case 1:
                    message = '✗ Password sangat lemah';
                    color = 'bg-red-500';
                    textColor = 'text-red-500';
                    break;
                case 2:
                    message = '⚠ Password lemah';
                    color = 'bg-orange-500';
                    textColor = 'text-orange-500';
                    break;
                case 3:
                    message = '⚠ Password sedang';
                    color = 'bg-yellow-500';
                    textColor = 'text-yellow-600';
                    break;
                case 4:
                    message = '✓ Password kuat';
                    color = 'bg-green-500';
                    textColor = 'text-green-500';
                    break;
                case 5:
                    message = '✓ Password sangat kuat';
                    color = 'bg-emerald-500';
                    textColor = 'text-emerald-500';
                    break;
            }

            const width = (strength / 5) * 100;
            return {
                width,
                message,
                color,
                textColor
            };
        }

        function checkPasswordMatch() {
            const password = document.getElementById('password').value;
            const confirm = document.getElementById('password_confirmation').value;
            const indicator = document.getElementById('match-indicator');

            if (confirm.length > 0) {
                if (password === confirm) {
                    indicator.innerHTML = '<div class="flex items-center gap-2 text-green-600 text-xs mt-1"><i class="fas fa-check-circle"></i><span>✓ Password cocok</span></div>';
                    return true;
                } else {
                    indicator.innerHTML = '<div class="flex items-center gap-2 text-red-600 text-xs mt-1"><i class="fas fa-times-circle"></i><span>✗ Password tidak cocok</span></div>';
                    return false;
                }
            }
            indicator.innerHTML = '';
            return false;
        }

        function showError(message) {
            const container = document.getElementById('error-container');
            const text = document.getElementById('error-text');
            text.innerText = message;
            container.classList.remove('hidden');
            setTimeout(() => container.classList.add('hidden'), 4000);
        }

        function setLoading(isLoading) {
            const btn = document.getElementById('submit-btn');
            const icon = btn.querySelector('i:first-child');
            const span = btn.querySelector('span');
            if (isLoading) {
                btn.disabled = true;
                btn.classList.add('btn-loading');
                icon.className = 'fas fa-spinner loading-spinner';
                span.textContent = 'Memproses...';
            } else {
                btn.disabled = false;
                btn.classList.remove('btn-loading');
                icon.className = 'fas fa-redo-alt';
                span.textContent = 'Reset Password';
            }
        }

        // Password strength real-time
        const passwordInput = document.getElementById('password');
        passwordInput.addEventListener('input', function() {
            const password = this.value;
            if (password.length > 0) {
                const result = checkPasswordStrength(password);
                document.getElementById('strength-bar').style.width = result.width + '%';
                document.getElementById('strength-bar').className = `strength-bar ${result.color}`;
                document.getElementById('strength-text').innerHTML = result.message;
                document.getElementById('strength-text').className = `text-xs mt-1 font-medium ${result.textColor}`;
            } else {
                document.getElementById('strength-bar').style.width = '0%';
                document.getElementById('strength-text').innerHTML = '';
            }
            checkPasswordMatch();
        });

        document.getElementById('password_confirmation').addEventListener('input', checkPasswordMatch);

        // Handle form submission - biarkan submit normal ke Laravel
        const resetForm = document.getElementById('reset-password-form');
        resetForm.addEventListener('submit', function(e) {
            const password = document.getElementById('password').value;
            const confirm = document.getElementById('password_confirmation').value;

            if (password.length < 8) {
                e.preventDefault();
                showError('Password harus memiliki minimal 8 karakter.');
                return false;
            }
            if (password !== confirm) {
                e.preventDefault();
                showError('Konfirmasi password tidak cocok.');
                return false;
            }

            // Validasi lolos, form akan submit normal
            setLoading(true);
        });

        setTimeout(() => document.getElementById('password').focus(), 100);
    </script>
</body>

</html>