@extends('partial.authLayout')
@section('content')
    <div class="container sp_top_50 sp_bottom_50">
        <div class="row">
            <div class="col-12">
                <div class="auth-section">
                    <div class="text-center sp_bottom_80">
                        <a href="/"><img src="{{ $config['logo'] ?? '/theme/img/logo/logo__3.png' }}" alt="{{ $config['site_title'] ?? '' }}"></a>
                    </div>
                    <p class="h3 text-end mb-3">رمز عبور جدید</p>
                    <p class="auth-gray-text">رمز عبور جدید خود را وارد کنید</p>
                    <p class="auth-gray-text">رمز عبور باید حداقل ۶ کاراکتر باشد</p>

                    @if($errors->any())
                        <div class="alert alert-danger mb-0" role="alert">
                            {{ $errors->first() }}
                        </div>
                    @endif

                    @if(session('success'))
                        <div class="alert alert-success mb-0" role="alert">
                            {{ session('success') }}
                        </div>
                    @endif

                    <form method="POST" action="{{ route('customer.password.reset.update') }}">
                        @csrf

                        <div class="auth-form mt-5">
                            <label class="h5" for="password">
                                <i class="fas fa-lock me-2"></i>
                                رمز عبور جدید *
                            </label>
                            <div class="password-input-container">
                                <input type="password"
                                       name="password"
                                       class="form-control auth-input"
                                       id="password"
                                       placeholder="رمز عبور جدید"
                                       minlength="6"
                                       required>
                                <button type="button" class="password-toggle" id="passwordToggle">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                            <small class="form-text text-muted mt-2">
                                <i class="fas fa-info-circle me-1"></i>
                                رمز عبور باید حداقل ۶ کاراکتر باشد
                            </small>
                        </div>

                        <div class="auth-form mt-4">
                            <label class="h5" for="password_confirmation">
                                <i class="fas fa-lock me-2"></i>
                                تایید رمز عبور *
                            </label>
                            <div class="password-input-container">
                                <input type="password"
                                       name="password_confirmation"
                                       class="form-control auth-input"
                                       id="password_confirmation"
                                       placeholder="تایید رمز عبور"
                                       minlength="6"
                                       required>
                                <button type="button" class="password-toggle" id="passwordConfirmToggle">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                            <small class="form-text text-muted mt-2">
                                <i class="fas fa-check-circle me-1"></i>
                                رمز عبور را دوباره وارد کنید
                            </small>
                        </div>

                        <div class="password-strength mt-3" id="passwordStrength">
                            <div class="strength-bar">
                                <div class="strength-fill" id="strengthFill"></div>
                            </div>
                            <div class="strength-text" id="strengthText">رمز عبور را وارد کنید</div>
                        </div>

                        <div class="auth-form mt-4 w-100">
                            <button type="submit" class="w-100 btn btn-auth btn-block" id="submitBtn">
                                <i class="fas fa-save me-2"></i>
                                تغییر رمز عبور
                            </button>
                        </div>
                    </form>

                    <div class="auth-links mt-4">
                        <a href="{{route('customer.login')}}" class="btn btn-outline-auth">
                            <i class="fas fa-arrow-right me-1"></i>
                            بازگشت به ورود
                        </a>
                    </div>

                    <div class="auth-help mt-4">
                        <p class="text-muted small">
                            <i class="fas fa-shield-alt me-1"></i>
                            رمز عبور جدید شما با موفقیت ذخیره خواهد شد و می‌توانید با آن وارد شوید.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .auth-section {
            max-width: 500px;
            margin: 0 auto;
            padding: 2rem;
            background: #fff;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .auth-gray-text {
            color: #666;
            font-size: 0.95rem;
            margin-bottom: 0.5rem;
        }

        .password-input-container {
            position: relative;
        }

        .auth-input {
            border: 2px solid #e9ecef;
            border-radius: 10px;
            padding: 12px 50px 12px 15px;
            font-size: 1rem;
            transition: all 0.3s ease;
            background: #f8f9fa;
            width: 100%;
        }

        .auth-input:focus {
            border-color: var(--primaryColor, #d4af37);
            background: #fff;
            box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25);
            outline: none;
        }

        .password-toggle {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: #666;
            cursor: pointer;
            padding: 5px;
            transition: color 0.3s ease;
        }

        .password-toggle:hover {
            color: var(--primaryColor, #d4af37);
        }

        .password-strength {
            margin-top: 10px;
        }

        .strength-bar {
            height: 4px;
            background: #e9ecef;
            border-radius: 2px;
            overflow: hidden;
            margin-bottom: 5px;
        }

        .strength-fill {
            height: 100%;
            width: 0%;
            transition: all 0.3s ease;
            border-radius: 2px;
        }

        .strength-fill.weak {
            background: #dc3545;
            width: 25%;
        }

        .strength-fill.fair {
            background: #ffc107;
            width: 50%;
        }

        .strength-fill.good {
            background: #17a2b8;
            width: 75%;
        }

        .strength-fill.strong {
            background: #28a745;
            width: 100%;
        }

        .strength-text {
            font-size: 0.85rem;
            color: #666;
            transition: color 0.3s ease;
        }

        .strength-text.weak {
            color: #dc3545;
        }

        .strength-text.fair {
            color: #ffc107;
        }

        .strength-text.good {
            color: #17a2b8;
        }

        .strength-text.strong {
            color: #28a745;
        }

        .btn-auth {
            background: linear-gradient(135deg, var(--primaryColor, #d4af37), #b8941f);
            border: none;
            border-radius: 10px;
            padding: 12px 20px;
            font-weight: 600;
            color: #fff;
            transition: all 0.3s ease;
            text-transform: none;
        }

        .btn-auth:hover {
            background: linear-gradient(135deg, #b8941f, #9a7a1a);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
        }

        .btn-auth:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .btn-outline-auth {
            border: 2px solid var(--primaryColor, #d4af37);
            color: var(--primaryColor, #d4af37);
            background: transparent;
            border-radius: 10px;
            padding: 8px 16px;
            font-size: 0.9rem;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
        }

        .btn-outline-auth:hover {
            background: var(--primaryColor, #d4af37);
            color: #fff;
            transform: translateY(-1px);
        }

        .auth-help {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 10px;
            border-left: 4px solid var(--primaryColor, #d4af37);
        }

        .form-text {
            font-size: 0.85rem;
        }

        .alert {
            border-radius: 10px;
            border: none;
            padding: 12px 15px;
        }

        .alert-danger {
            background: #f8d7da;
            color: #721c24;
        }

        .alert-success {
            background: #d1edff;
            color: #0c5460;
        }

        @media (max-width: 576px) {
            .auth-section {
                padding: 1.5rem;
                margin: 0 15px;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const passwordInput = document.getElementById('password');
            const passwordConfirmInput = document.getElementById('password_confirmation');
            const passwordToggle = document.getElementById('passwordToggle');
            const passwordConfirmToggle = document.getElementById('passwordConfirmToggle');
            const strengthFill = document.getElementById('strengthFill');
            const strengthText = document.getElementById('strengthText');
            const submitBtn = document.getElementById('submitBtn');

            // Password visibility toggle
            passwordToggle.addEventListener('click', function () {
                const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                passwordInput.setAttribute('type', type);
                this.querySelector('i').classList.toggle('fa-eye');
                this.querySelector('i').classList.toggle('fa-eye-slash');
            });

            passwordConfirmToggle.addEventListener('click', function () {
                const type = passwordConfirmInput.getAttribute('type') === 'password' ? 'text' : 'password';
                passwordConfirmInput.setAttribute('type', type);
                this.querySelector('i').classList.toggle('fa-eye');
                this.querySelector('i').classList.toggle('fa-eye-slash');
            });

            // Password strength checker
            passwordInput.addEventListener('input', function () {
                const password = this.value;
                const strength = checkPasswordStrength(password);

                // Update strength bar
                strengthFill.className = 'strength-fill';
                strengthText.className = 'strength-text';

                if (password.length > 0) {
                    strengthFill.classList.add(strength.level);
                    strengthText.classList.add(strength.level);
                    strengthText.textContent = decodeEntities(strength.text);
                    strengthText.dir = 'auto';
                } else {
                    strengthText.textContent = decodeEntities('رمز عبور را وارد کنید'); // ← فقط همین تغییر
                }

                // Check password match
                checkPasswordMatch();
            });

            passwordConfirmInput.addEventListener('input', function () {
                checkPasswordMatch();
            });

            function checkPasswordStrength(password) {
                let score = 0;
                let feedback = [];

                if (password.length >= 6) score++;
                else feedback.push('حداقل ۶ کاراکتر');

                if (password.length >= 8) score++;

                if (/[a-z]/.test(password)) score++;
                else feedback.push('حروف کوچک');

                if (/[A-Z]/.test(password)) score++;
                else feedback.push('حروف بزرگ');

                if (/[0-9]/.test(password)) score++;
                else feedback.push('اعداد');

                if (/[^A-Za-z0-9]/.test(password)) score++;
                else feedback.push('کاراکترهای خاص');

                if (score <= 2) {
                    return {level: 'weak', text: 'ضعیف - ' + feedback.join('، ')};
                } else if (score <= 3) {
                    return {level: 'fair', text: 'متوسط - ' + feedback.join('، ')};
                } else if (score <= 4) {
                    return {level: 'good', text: 'خوب - ' + feedback.join('، ')};
                } else {
                    return {level: 'strong', text: 'قوی'};
                }
            }

            function checkPasswordMatch() {
                const password = passwordInput.value;
                const confirmPassword = passwordConfirmInput.value;

                if (confirmPassword.length > 0) {
                    if (password === confirmPassword) {
                        passwordConfirmInput.setCustomValidity('');
                        submitBtn.disabled = false;
                    } else {
                        passwordConfirmInput.setCustomValidity('رمز عبور و تایید آن مطابقت ندارند');
                        submitBtn.disabled = true;
                    }
                } else {
                    passwordConfirmInput.setCustomValidity('');
                    submitBtn.disabled = password.length < 6;
                }
            }

            // Form validation
            const form = document.querySelector('form');
            form.addEventListener('submit', function (e) {
                const password = passwordInput.value;
                const confirmPassword = passwordConfirmInput.value;

                if (password.length < 6) {
                    e.preventDefault();
                    showMessage('رمز عبور باید حداقل ۶ کاراکتر باشد', 'error');
                    return;
                }

                if (password !== confirmPassword) {
                    e.preventDefault();
                    showMessage('رمز عبور و تایید آن مطابقت ندارند', 'error');
                    return;
                }
            });

// جایگزینِ همین تابع کن
            function decodeEntities(html) {
                let out = String(html);
                let prev;
                const parser = new DOMParser();

                // چندبار پشت‌سرهم دیکود (برای حالت &amp;#1605; → &#1605; → م)
                for (let i = 0; i < 5; i++) {
                    const doc = parser.parseFromString('<!doctype html><body>' + out, 'text/html');
                    out = doc.body.textContent || '';
                    if (out === prev) break;
                    prev = out;
                }

                // NBSP به فاصلهٔ عادی
                return out.replace(/\u00A0/g, ' ');
            }

            function showMessage(message, type) {
                message = decodeEntities(message); // ✅ فقط همین خط decode

                const existing = document.querySelector('.alert.temp-msg');
                if (existing) existing.remove();

                const alertDiv = document.createElement('div');
                alertDiv.className = `alert alert-${type === 'success' ? 'success' : 'danger'} mb-0 temp-msg`;
                alertDiv.textContent = message; // امن
                verifyForm.insertBefore(alertDiv, verifyForm.firstChild);
            }

            submitBtn.disabled = true;
        });
    </script>
@endpush