{% extends 'accounts/base.html' %}
{% load static %}

{% block title %}Profile - {{ profile_user.get_full_name|default:profile_user.username }} - {{ block.super }}{% endblock %}

{% block content %}
<div class="row">
    <!-- Profile Header -->
    <div class="col-12 mb-4">
        <div class="card">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col-md-2 text-center">
                        {% if profile_user.avatar %}
                            <img src="{{ profile_user.avatar.url }}" alt="{{ profile_user.get_full_name|default:profile_user.username }}" 
                                 class="rounded-circle img-fluid" style="width: 120px; height: 120px; object-fit: cover;">
                        {% else %}
                            <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center" 
                                 style="width: 120px; height: 120px;">
                                <i class="fas fa-user fa-3x"></i>
                            </div>
                        {% endif %}
                    </div>
                    <div class="col-md-8">
                        <h2 class="mb-2">
                            {{ profile_user.get_full_name|default:profile_user.username }}
                            {% if profile_user.is_verified %}
                                <i class="fas fa-check-circle text-success ms-2" title="Verified Account"></i>
                            {% endif %}
                        </h2>
                        <p class="text-muted mb-2">
                            <i class="fas fa-at me-1"></i>{{ profile_user.username }}
                        </p>
                        {% if profile_user.userprofile.job_title %}
                            <p class="mb-2">
                                <i class="fas fa-briefcase me-2"></i>
                                {{ profile_user.userprofile.job_title }}
                                {% if profile_user.userprofile.company %}
                                    at {{ profile_user.userprofile.company }}
                                {% endif %}
                            </p>
                        {% endif %}
                        {% if profile_user.userprofile.location_city or profile_user.userprofile.location_country %}
                            <p class="mb-2">
                                <i class="fas fa-map-marker-alt me-2"></i>
                                {% if profile_user.userprofile.location_city %}{{ profile_user.userprofile.location_city }}{% endif %}
                                {% if profile_user.userprofile.location_city and profile_user.userprofile.location_country %}, {% endif %}
                                {% if profile_user.userprofile.location_country %}{{ profile_user.userprofile.location_country }}{% endif %}
                            </p>
                        {% endif %}
                        <p class="text-muted mb-0">
                            <i class="fas fa-calendar me-2"></i>
                            Member since {{ profile_user.date_joined|date:"F Y" }}
                        </p>
                    </div>
                    <div class="col-md-2 text-end">
                        {% if user == profile_user %}
                            <a href="{% url 'accounts:profile_edit' %}" class="btn btn-primary mb-2">
                                <i class="fas fa-edit me-1"></i>Edit Profile
                            </a>
                            <br>
                            <a href="{% url 'accounts:dashboard' %}" class="btn btn-outline-secondary">
                                <i class="fas fa-tachometer-alt me-1"></i>Dashboard
                            </a>
                        {% else %}
                            <button class="btn btn-outline-primary mb-2" onclick="sendMessage()">
                                <i class="fas fa-envelope me-1"></i>Message
                            </button>
                            <br>
                            <button class="btn btn-outline-secondary" onclick="reportUser()">
                                <i class="fas fa-flag me-1"></i>Report
                            </button>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- About Section -->
    <div class="col-md-8 mb-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-user me-2"></i>About
                </h5>
            </div>
            <div class="card-body">
                {% if profile_user.bio %}
                    <div class="mb-4">
                        <h6 class="fw-bold">Bio</h6>
                        <p class="mb-0">{{ profile_user.bio|linebreaks }}</p>
                    </div>
                {% endif %}
                
                <div class="row">
                    <div class="col-md-6">
                        <h6 class="fw-bold mb-3">Contact Information</h6>
                        <div class="mb-2">
                            <i class="fas fa-envelope text-muted me-2"></i>
                            <span>{{ profile_user.email }}</span>
                        </div>
                        {% if profile_user.phone_number %}
                            <div class="mb-2">
                                <i class="fas fa-phone text-muted me-2"></i>
                                <span>{{ profile_user.phone_number }}</span>
                            </div>
                        {% endif %}
                        {% if profile_user.userprofile.website %}
                            <div class="mb-2">
                                <i class="fas fa-globe text-muted me-2"></i>
                                <a href="{{ profile_user.userprofile.website }}" target="_blank" class="text-decoration-none">
                                    {{ profile_user.userprofile.website }}
                                </a>
                            </div>
                        {% endif %}
                        {% if profile_user.userprofile.linkedin %}
                            <div class="mb-2">
                                <i class="fab fa-linkedin text-muted me-2"></i>
                                <a href="{{ profile_user.userprofile.linkedin }}" target="_blank" class="text-decoration-none">
                                    LinkedIn Profile
                                </a>
                            </div>
                        {% endif %}
                    </div>
                    
                    <div class="col-md-6">
                        <h6 class="fw-bold mb-3">Professional Information</h6>
                        {% if profile_user.userprofile.job_title %}
                            <div class="mb-2">
                                <i class="fas fa-briefcase text-muted me-2"></i>
                                <span>{{ profile_user.userprofile.job_title }}</span>
                            </div>
                        {% endif %}
                        {% if profile_user.userprofile.company %}
                            <div class="mb-2">
                                <i class="fas fa-building text-muted me-2"></i>
                                <span>{{ profile_user.userprofile.company }}</span>
                            </div>
                        {% endif %}
                        {% if profile_user.userprofile.department %}
                            <div class="mb-2">
                                <i class="fas fa-users text-muted me-2"></i>
                                <span>{{ profile_user.userprofile.department }}</span>
                            </div>
                        {% endif %}
                        <div class="mb-2">
                            <i class="fas fa-language text-muted me-2"></i>
                            <span>{{ profile_user.get_language_display|default:"English" }}</span>
                        </div>
                        <div class="mb-2">
                            <i class="fas fa-clock text-muted me-2"></i>
                            <span>{{ profile_user.timezone_field|default:"UTC" }}</span>
                        </div>
                    </div>
                </div>
                
                {% if not profile_user.bio and not profile_user.phone_number and not profile_user.userprofile.website and not profile_user.userprofile.linkedin and not profile_user.userprofile.job_title and not profile_user.userprofile.company %}
                    <div class="text-center py-4">
                        <i class="fas fa-user-slash fa-3x text-muted mb-3"></i>
                        <p class="text-muted">No additional information available</p>
                        {% if user == profile_user %}
                            <a href="{% url 'accounts:profile_edit' %}" class="btn btn-outline-primary">
                                <i class="fas fa-plus me-1"></i>Add Information
                            </a>
                        {% endif %}
                    </div>
                {% endif %}
            </div>
        </div>
        
        <!-- Activity Section -->
        <div class="card mt-4">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-chart-line me-2"></i>Activity
                </h5>
            </div>
            <div class="card-body">
                <div class="row text-center">
                    <div class="col-md-4">
                        <div class="border-end">
                            <h4 class="text-primary mb-1">{{ profile_user.date_joined|timesince }}</h4>
                            <small class="text-muted">Member for</small>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="border-end">
                            <h4 class="text-success mb-1">
                                {% if profile_user.last_login %}
                                    {{ profile_user.last_login|timesince }} ago
                                {% else %}
                                    Never
                                {% endif %}
                            </h4>
                            <small class="text-muted">Last seen</small>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <h4 class="text-info mb-1">
                            {% if profile_user.is_active %}
                                <i class="fas fa-circle text-success"></i> Online
                            {% else %}
                                <i class="fas fa-circle text-secondary"></i> Offline
                            {% endif %}
                        </h4>
                        <small class="text-muted">Status</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Sidebar -->
    <div class="col-md-4">
        <!-- Quick Info -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-info-circle me-2"></i>Quick Info
                </h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <div class="d-flex justify-content-between">
                        <span class="text-muted">Account Type:</span>
                        <span>
                            {% if profile_user.is_superuser %}
                                <span class="badge bg-danger">Super Admin</span>
                            {% elif profile_user.is_staff %}
                                <span class="badge bg-warning">Staff</span>
                            {% else %}
                                <span class="badge bg-primary">User</span>
                            {% endif %}
                        </span>
                    </div>
                </div>
                <div class="mb-3">
                    <div class="d-flex justify-content-between">
                        <span class="text-muted">Verification:</span>
                        <span>
                            {% if profile_user.is_verified %}
                                <span class="badge bg-success">Verified</span>
                            {% else %}
                                <span class="badge bg-warning">Unverified</span>
                            {% endif %}
                        </span>
                    </div>
                </div>
                <div class="mb-3">
                    <div class="d-flex justify-content-between">
                        <span class="text-muted">Status:</span>
                        <span>
                            {% if profile_user.is_active %}
                                <span class="badge bg-success">Active</span>
                            {% else %}
                                <span class="badge bg-danger">Inactive</span>
                            {% endif %}
                        </span>
                    </div>
                </div>
                <div class="mb-0">
                    <div class="d-flex justify-content-between">
                        <span class="text-muted">Joined:</span>
                        <span>{{ profile_user.date_joined|date:"M d, Y" }}</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Contact Card -->
        {% if user != profile_user %}
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-envelope me-2"></i>Contact
                    </h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <button class="btn btn-primary" onclick="sendMessage()">
                            <i class="fas fa-envelope me-2"></i>Send Message
                        </button>
                        <button class="btn btn-outline-secondary" onclick="addToContacts()">
                            <i class="fas fa-user-plus me-2"></i>Add to Contacts
                        </button>
                    </div>
                </div>
            </div>
        {% endif %}
        
        <!-- Address Information -->
        {% if profile_user.userprofile.location_address or profile_user.userprofile.location_city or profile_user.userprofile.location_state or profile_user.userprofile.location_country or profile_user.userprofile.location_postal_code %}
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-map-marker-alt me-2"></i>Location
                    </h5>
                </div>
                <div class="card-body">
                    {% if profile_user.userprofile.location_address %}
                        <p class="mb-1">{{ profile_user.userprofile.location_address }}</p>
                    {% endif %}
                    <p class="mb-0">
                        {% if profile_user.userprofile.location_city %}{{ profile_user.userprofile.location_city }}{% endif %}
                        {% if profile_user.userprofile.location_city and profile_user.userprofile.location_state %}, {% endif %}
                        {% if profile_user.userprofile.location_state %}{{ profile_user.userprofile.location_state }}{% endif %}
                        {% if profile_user.userprofile.location_postal_code %} {{ profile_user.userprofile.location_postal_code }}{% endif %}
                    </p>
                    {% if profile_user.userprofile.location_country %}
                        <p class="mb-0 text-muted">{{ profile_user.userprofile.location_country }}</p>
                    {% endif %}
                </div>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function sendMessage() {
    // Placeholder for messaging functionality
    alert('Messaging functionality will be implemented in a future update.');
}

function reportUser() {
    if (confirm('Are you sure you want to report this user?')) {
        // Placeholder for reporting functionality
        alert('User reported. Thank you for helping keep our community safe.');
    }
}

function addToContacts() {
    // Placeholder for contacts functionality
    alert('Contact functionality will be implemented in a future update.');
}

document.addEventListener('DOMContentLoaded', function() {
    // Add smooth scrolling to anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });
    
    // Add fade-in animation to cards
    const cards = document.querySelectorAll('.card');
    cards.forEach((card, index) => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        
        setTimeout(() => {
            card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
            card.style.opacity = '1';
            card.style.transform = 'translateY(0)';
        }, index * 100);
    });
});
</script>
{% endblock %}