{% extends "admin_layout.html" %}

{% block title %}{{ t('nav.profile','Profile') }} - {{ app_settings.title if app_settings else t('app.name','Survey Manager') }}{% endblock %}

{% block admin_content %}
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1 class="h3">{{ t('profile.title','Profile Settings') }}</h1>
        </div>
    </div>
</div>

<div class="row">
    <!-- Profile Information -->
    <div class="col-12 col-lg-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-user me-2"></i>{{ t('profile.info','Profile Information') }}
                </h5>
            </div>
            <div class="card-body">
                <form method="POST" class="needs-validation" novalidate>
                    <div class="row">
                        <div class="col-12 col-md-6">
                            <div class="mb-3">
                                <label for="name" class="form-label">{{ t('profile.full_name','Full Name') }} *</label>
                                <input type="text" class="form-control" id="name" name="name" 
                                       value="{{ user.name }}" required>
                                <div class="invalid-feedback">
                                    {{ t('profile.valid_name','Please provide a valid name.') }}
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="mb-3">
                                <label for="email" class="form-label">{{ t('profile.email','Email Address') }} *</label>
                                <input type="email" class="form-control" id="email" name="email" 
                                       value="{{ user.email }}" required>
                                <div class="invalid-feedback">
                                    {{ t('profile.valid_email','Please provide a valid email address.') }}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="role" class="form-label">{{ t('profile.role','Role') }}</label>
                        <input type="text" class="form-control" value="{{ user.role|title }}" readonly>
                        <div class="form-text">{{ t('profile.role_hint','Contact an administrator to change your role.') }}</div>
                    </div>

                    <div class="mb-3">
                        <label for="lang" class="form-label">Language</label>
                        <select id="lang" name="lang" class="form-select" onchange="setLang(this.value)">
                            {% set current_lang = user.lang if 'lang' in user else (session.get('lang') or 'es') %}
                            <option value="es" {{ 'selected' if current_lang == 'es' else '' }}>Español</option>
                            <option value="en" {{ 'selected' if current_lang == 'en' else '' }}>English</option>
                        </select>
                        <div class="form-text">Choose your preferred language</div>
                    </div>

                    <hr class="my-4">

                    <h6 class="mb-3">
                        <i class="fas fa-lock me-2"></i>{{ t('profile.change_password','Change Password') }}
                    </h6>
                    <p class="text-muted mb-3">{{ t('profile.leave_blank','Leave blank to keep current password') }}</p>

                    <div class="row">
                        <div class="col-12 col-md-4">
                            <div class="mb-3">
                                <label for="current_password" class="form-label">{{ t('profile.current_password','Current Password') }}</label>
                                <div class="input-group">
                                    <input type="password" class="form-control" id="current_password" 
                                           name="current_password" placeholder="Enter current password">
                                    <button class="btn btn-outline-secondary toggle-password" type="button" 
                                            data-target="#current_password">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-4">
                            <div class="mb-3">
                                <label for="new_password" class="form-label">{{ t('profile.new_password','New Password') }}</label>
                                <div class="input-group">
                                    <input type="password" class="form-control" id="new_password" 
                                           name="new_password" placeholder="Enter new password" minlength="6">
                                    <button class="btn btn-outline-secondary toggle-password" type="button" 
                                            data-target="#new_password">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                                <div class="form-text">{{ t('profile.min_chars','Minimum 6 characters required') }}</div>
                            </div>
                        </div>
                        <div class="col-12 col-md-4">
                            <div class="mb-3">
                                <label for="confirm_password" class="form-label">{{ t('profile.confirm_password','Confirm Password') }}</label>
                                <div class="input-group">
                                    <input type="password" class="form-control" id="confirm_password" 
                                           name="confirm_password" placeholder="Confirm new password">
                                    <button class="btn btn-outline-secondary toggle-password" type="button" 
                                            data-target="#confirm_password">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between align-items-center">
                        <button type="submit" class="btn btn-primary btn-loading">
                            <i class="fas fa-save me-2"></i>{{ t('profile.update_profile','Update Profile') }}
                        </button>
                        <a href="{{ url_for('dashboard.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left me-2"></i>{{ t('profile.back_to_dashboard','Back to Dashboard') }}
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Profile Summary -->
    <div class="col-12 col-lg-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-info-circle me-2"></i>{{ t('profile.account_summary','Account Summary') }}
                </h5>
            </div>
            <div class="card-body text-center">
                <div class="mb-4">
                    <img src="https://ui-avatars.com/api/?name={{ user.name }}&background=007bff&color=fff&size=120" 
                         class="rounded-circle mb-3" width="120" height="120" alt="{{ user.name }}">
                    <h5 class="mb-1">{{ user.name }}</h5>
                    <p class="text-muted mb-0">{{ user.email }}</p>
                    <span class="badge bg-{{ 'primary' if user.role == 'admin' else 'secondary' }} mt-2">
                        {{ user.role|title }}
                    </span>
                </div>

                <div class="row text-center">
                    <div class="col-6">
                        <div class="border-end">
                            <h6 class="mb-1">{{ t('profile.member_since','Member Since') }}</h6>
                            <p class="text-muted small mb-0">
                                {{ user.created_at.strftime('%b %Y') }}
                            </p>
                        </div>
                    </div>
                    <div class="col-6">
                        <h6 class="mb-1">{{ t('profile.last_updated','Last Updated') }}</h6>
                        <p class="text-muted small mb-0">
                            {{ user.updated_at.strftime('%b %d, %Y') }}
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Security Tips -->
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-shield-alt me-2"></i>{{ t('profile.security_tips','Security Tips') }}
                </h5>
            </div>
            <div class="card-body">
                <ul class="list-unstyled mb-0">
                    <li class="mb-2">
                        <i class="fas fa-check text-success me-2"></i>
                        <small>{{ t('profile.use_strong_password','Use a strong, unique password') }}</small>
                    </li>
                    <li class="mb-2">
                        <i class="fas fa-check text-success me-2"></i>
                        <small>{{ t('profile.include_numbers','Include numbers and special characters') }}</small>
                    </li>
                    <li class="mb-2">
                        <i class="fas fa-check text-success me-2"></i>
                        <small>{{ t('profile.update_regularly','Update your password regularly') }}</small>
                    </li>
                    <li class="mb-0">
                        <i class="fas fa-check text-success me-2"></i>
                        <small>{{ t('profile.keep_email_current','Keep your email address current') }}</small>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // Password confirmation validation
    $('#confirm_password').on('input', function() {
        const newPassword = $('#new_password').val();
        const confirmPassword = $(this).val();
        
        if (confirmPassword && newPassword !== confirmPassword) {
            $(this).addClass('is-invalid');
            $(this).next().next('.invalid-feedback').remove();
            $(this).parent().after('<div class="invalid-feedback">Passwords do not match.</div>');
        } else {
            $(this).removeClass('is-invalid');
            $(this).parent().next('.invalid-feedback').remove();
        }
    });

    // Password strength indicator
    $('#new_password').on('input', function() {
        const password = $(this).val();
        let strength = 0;
        
        if (password.length >= 6) 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++;
        
        let strengthText = '';
        let strengthClass = '';
        
        switch(strength) {
            case 0:
            case 1:
                strengthText = 'Weak';
                strengthClass = 'text-danger';
                break;
            case 2:
            case 3:
                strengthText = 'Medium';
                strengthClass = 'text-warning';
                break;
            case 4:
            case 5:
                strengthText = 'Strong';
                strengthClass = 'text-success';
                break;
        }
        
        if (password.length > 0) {
            $(this).parent().next('.form-text').html(`Minimum 6 characters required - Strength: <span class="${strengthClass}">${strengthText}</span>`);
        } else {
            $(this).parent().next('.form-text').html('Minimum 6 characters required');
        }
    });

    // Form validation
    $('.needs-validation').on('submit', function(e) {
        const newPassword = $('#new_password').val();
        const confirmPassword = $('#confirm_password').val();
        const currentPassword = $('#current_password').val();
        
        // If changing password, validate all password fields
        if (newPassword || confirmPassword || currentPassword) {
            if (!currentPassword) {
                e.preventDefault();
                showNotification('error', 'Current password is required to change password');
                return false;
            }
            
            if (!newPassword) {
                e.preventDefault();
                showNotification('error', 'New password is required');
                return false;
            }
            
            if (newPassword !== confirmPassword) {
                e.preventDefault();
                showNotification('error', 'New passwords do not match');
                return false;
            }
            
            if (newPassword.length < 6) {
                e.preventDefault();
                showNotification('error', 'Password must be at least 6 characters long');
                return false;
            }
        }
        
        // Show loading state
        const btn = $('.btn-loading');
        const originalText = btn.html();
        btn.html('<i class="fas fa-spinner fa-spin me-2"></i>Updating...');
        btn.prop('disabled', true);
        
        // Form will submit naturally after this
    });
});
</script>
{% endblock %}