{% extends "base.html" %}

{% block title %}Profile Settings - National Medlab Cooperative{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-8 offset-md-2">
        <div class="card">
            <div class="card-header">
                <h4 class="mb-0">Profile Settings</h4>
            </div>
            <div class="card-body">
                <form method="POST">
                    <h5 class="mb-3">Personal Information</h5>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="full_name" class="form-label">Full Name</label>
                                <input type="text" class="form-control" id="full_name" name="full_name" 
                                       value="{{ current_user.full_name }}" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="email" class="form-label">Email Address</label>
                                <input type="email" class="form-control" id="email" name="email" 
                                       value="{{ current_user.email }}" required>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="phone" class="form-label">Phone Number</label>
                                <input type="tel" class="form-control" id="phone" name="phone" 
                                       value="{{ current_user.phone }}" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Registration Number</label>
                                <input type="text" class="form-control" value="{{ current_user.registration_number }}" readonly>
                            </div>
                        </div>
                    </div>
                    
                    <hr>
                    
                    <h5 class="mb-3">Change Password</h5>
                    <p class="text-muted">Leave blank if you don't want to change your password</p>
                    
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="old_password" class="form-label">Current Password</label>
                                <input type="password" class="form-control" id="old_password" name="old_password">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="new_password" class="form-label">New Password</label>
                                <input type="password" class="form-control" id="new_password" name="new_password">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="confirm_password" class="form-label">Confirm New Password</label>
                                <input type="password" class="form-control" id="confirm_password" name="confirm_password">
                            </div>
                        </div>
                    </div>
                    
                    <hr>
                    
                    <h5 class="mb-3">Account Information</h5>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Account Role</label>
                                <input type="text" class="form-control" value="{{ current_user.role }}" readonly>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Verification Status</label>
                                <input type="text" class="form-control" 
                                       value="{{ 'Verified' if current_user.is_verified else 'Not Verified' }}" readonly>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Member Since</label>
                                <input type="text" class="form-control" 
                                       value="{{ current_user.created_at.strftime('%d %B %Y') }}" readonly>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">User ID</label>
                                <input type="text" class="form-control" value="{{ current_user.id }}" readonly>
                            </div>
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-between">
                        <a href="{{ url_for('user_dashboard') }}" class="btn btn-secondary">Cancel</a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-2"></i>Save Changes
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-md-8 offset-md-2">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Security Information</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6>Last Login</h6>
                        <p class="text-muted">Your last login session is currently active</p>
                    </div>
                    <div class="col-md-6">
                        <h6>Account Security</h6>
                        <p class="text-muted">
                            {% if current_user.is_verified %}
                                <span class="badge bg-success">Verified Account</span>
                            {% else %}
                                <span class="badge bg-warning">Unverified Account</span>
                            {% endif %}
                        </p>
                    </div>
                </div>
                
                <div class="alert alert-info mt-3">
                    <h6 class="alert-heading">Security Tips</h6>
                    <ul class="mb-0">
                        <li>Use a strong password with at least 8 characters</li>
                        <li>Don't share your password with anyone</li>
                        <li>Log out after using shared computers</li>
                        <li>Keep your email address updated for password recovery</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.getElementById('new_password').addEventListener('input', function() {
    const oldPassword = document.getElementById('old_password');
    const confirmPassword = document.getElementById('confirm_password');
    
    if (this.value) {
        oldPassword.required = true;
        confirmPassword.required = true;
    } else {
        oldPassword.required = false;
        confirmPassword.required = false;
    }
});

document.getElementById('confirm_password').addEventListener('input', function() {
    const newPassword = document.getElementById('new_password');
    if (this.value && this.value !== newPassword.value) {
        this.setCustomValidity('Passwords do not match');
    } else {
        this.setCustomValidity('');
    }
});
</script>
{% endblock %}