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

{% block title %}{{ project.name }} - Quality Project{% endblock %}

{% block extra_css %}
<link href="{% static 'assets/plugins/select2/dist/css/select2.min.css' %}" rel="stylesheet" />
<style>
.project-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 0.5rem;
    padding: 2rem;
    margin-bottom: 2rem;
}

.project-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.project-main {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.project-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.section-card {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    overflow: hidden;
}

.section-header {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 1rem 1.5rem;
    font-weight: 600;
    color: #495057;
    display: flex;
    justify-content: between;
    align-items: center;
}

.section-content {
    padding: 1.5rem;
}

.project-status {
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-planning { background: #e3f2fd; color: #1976d2; }
.status-active { background: #e8f5e8; color: #2e7d32; }
.status-on-hold { background: #fff3e0; color: #f57c00; }
.status-completed { background: #f3e5f5; color: #7b1fa2; }
.status-cancelled { background: #ffebee; color: #d32f2f; }

.priority-badge {
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.priority-low { background: #e8f5e8; color: #2e7d32; }
.priority-medium { background: #fff3e0; color: #f57c00; }
.priority-high { background: #ffebee; color: #d32f2f; }
.priority-critical { background: #f3e5f5; color: #7b1fa2; }

.progress-container {
    margin-bottom: 1.5rem;
}

.progress-header {
    display: flex;
    justify-content: between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.progress-label {
    font-weight: 600;
    color: #495057;
}

.progress-percentage {
    font-size: 1.25rem;
    font-weight: bold;
    color: #007bff;
}

.progress-bar-container {
    background: #e9ecef;
    border-radius: 0.5rem;
    height: 12px;
    overflow: hidden;
    position: relative;
}

.progress-bar {
    background: linear-gradient(90deg, #007bff, #0056b3);
    height: 100%;
    transition: width 0.3s ease;
    border-radius: 0.5rem;
}

.progress-milestones {
    display: flex;
    justify-content: between;
    margin-top: 0.5rem;
}

.milestone {
    font-size: 0.75rem;
    color: #6c757d;
    text-align: center;
    flex: 1;
}

.milestone.completed {
    color: #28a745;
    font-weight: 600;
}

.milestone.active {
    color: #007bff;
    font-weight: 600;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-label {
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 600;
    text-transform: uppercase;
}

.info-value {
    font-size: 0.875rem;
    color: #495057;
    font-weight: 500;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.team-member {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    transition: all 0.2s;
}

.team-member:hover {
    border-color: #007bff;
    background: #f8f9fa;
}

.member-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #007bff;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
}

.member-info {
    flex: 1;
}

.member-name {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.25rem;
}

.member-role {
    font-size: 0.75rem;
    color: #6c757d;
}

.timeline-container {
    position: relative;
}

.timeline-item {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    position: relative;
}

.timeline-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 15px;
    top: 40px;
    bottom: -24px;
    width: 2px;
    background: #dee2e6;
}

.timeline-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #007bff;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
    z-index: 1;
    position: relative;
}

.timeline-icon.completed {
    background: #28a745;
}

.timeline-icon.pending {
    background: #6c757d;
}

.timeline-content {
    flex: 1;
    padding-top: 0.25rem;
}

.timeline-title {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.25rem;
}

.timeline-description {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
}

.timeline-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: #6c757d;
}

.deliverables-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

.deliverable-card {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1rem;
    transition: all 0.2s;
}

.deliverable-card:hover {
    border-color: #007bff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.deliverable-header {
    display: flex;
    justify-content: between;
    align-items: start;
    margin-bottom: 0.75rem;
}

.deliverable-title {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.25rem;
}

.deliverable-type {
    font-size: 0.75rem;
    color: #6c757d;
}

.deliverable-status {
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.deliverable-description {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 0.75rem;
}

.deliverable-meta {
    display: flex;
    justify-content: between;
    align-items: center;
    font-size: 0.75rem;
    color: #6c757d;
}

.risk-item {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
    transition: all 0.2s;
}

.risk-item:hover {
    border-color: #007bff;
}

.risk-header {
    display: flex;
    justify-content: between;
    align-items: start;
    margin-bottom: 0.75rem;
}

.risk-title {
    font-weight: 600;
    color: #495057;
}

.risk-level {
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.risk-low { background: #e8f5e8; color: #2e7d32; }
.risk-medium { background: #fff3e0; color: #f57c00; }
.risk-high { background: #ffebee; color: #d32f2f; }

.risk-description {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 0.75rem;
}

.risk-mitigation {
    background: #f8f9fa;
    border-radius: 0.25rem;
    padding: 0.75rem;
    font-size: 0.875rem;
    color: #495057;
}

.activity-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #007bff;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.activity-content {
    flex: 1;
}

.activity-text {
    font-size: 0.875rem;
    color: #495057;
    margin-bottom: 0.25rem;
}

.activity-meta {
    font-size: 0.75rem;
    color: #6c757d;
}

.document-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    margin-bottom: 0.75rem;
    transition: all 0.2s;
}

.document-item:hover {
    border-color: #007bff;
    background: #f8f9fa;
}

.document-icon {
    width: 40px;
    height: 40px;
    border-radius: 0.375rem;
    background: #007bff;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.document-info {
    flex: 1;
}

.document-name {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.25rem;
}

.document-meta {
    font-size: 0.75rem;
    color: #6c757d;
}

.action-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.btn-action {
    padding: 0.5rem 1rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    background: white;
    color: #495057;
    text-decoration: none;
    transition: all 0.2s;
    font-size: 0.875rem;
    cursor: pointer;
}

.btn-action:hover {
    border-color: #007bff;
    color: #007bff;
    text-decoration: none;
}

.btn-primary-action {
    background: #007bff;
    border-color: #007bff;
    color: white;
}

.btn-primary-action:hover {
    background: #0056b3;
    border-color: #0056b3;
    color: white;
}

.stats-mini {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.stat-mini {
    text-align: center;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.375rem;
}

.stat-mini-number {
    font-size: 1.5rem;
    font-weight: bold;
    color: #007bff;
    margin-bottom: 0.25rem;
}

.stat-mini-label {
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 600;
    text-transform: uppercase;
}

@media (max-width: 1200px) {
    .project-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .project-sidebar {
        order: -1;
    }
}

@media (max-width: 768px) {
    .project-header {
        padding: 1.5rem;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    .team-grid {
        grid-template-columns: 1fr;
    }
    
    .deliverables-grid {
        grid-template-columns: 1fr;
    }
    
    .action-buttons {
        flex-direction: column;
    }
    
    .stats-mini {
        grid-template-columns: 1fr;
    }
}

@media print {
    .project-sidebar, .action-buttons {
        display: none !important;
    }
    
    .project-layout {
        grid-template-columns: 1fr;
    }
    
    .section-header {
        background: none;
        border-bottom: 2px solid #000;
        color: #000;
    }
}
</style>
{% endblock %}

{% block content %}
<div id="content" class="app-content">
    <!-- Page Header -->
    <div class="d-flex align-items-center mb-3">
        <div>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{% url 'quality:dashboard' %}">Quality</a></li>
                <li class="breadcrumb-item"><a href="{% url 'quality:project_list' %}">Projects</a></li>
                <li class="breadcrumb-item active">{{ project.name }}</li>
            </ol>
            <h1 class="page-header mb-0">
                <i class="fas fa-project-diagram me-2"></i>Project Details
            </h1>
        </div>
        <div class="ms-auto">
            <div class="action-buttons">
                <button type="button" class="btn-action" onclick="exportProject()">
                    <i class="fas fa-download me-1"></i>Export
                </button>
                <button type="button" class="btn-action" onclick="generateReport()">
                    <i class="fas fa-file-alt me-1"></i>Report
                </button>
                {% if project.can_edit %}
                <a href="{% url 'quality:project_edit' project.id %}" class="btn-action">
                    <i class="fas fa-edit me-1"></i>Edit
                </a>
                {% endif %}
                {% if project.status == 'planning' %}
                <button type="button" class="btn-primary-action" onclick="startProject()">
                    <i class="fas fa-play me-1"></i>Start Project
                </button>
                {% elif project.status == 'active' %}
                <button type="button" class="btn-primary-action" onclick="completeProject()">
                    <i class="fas fa-check me-1"></i>Complete Project
                </button>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Project Header -->
    <div class="project-header">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h2 class="mb-2">{{ project.name }}</h2>
                <p class="mb-3">{{ project.description }}</p>
                <div class="d-flex align-items-center gap-3 flex-wrap">
                    <span class="project-status status-{{ project.status }}">
                        {{ project.get_status_display }}
                    </span>
                    <span class="priority-badge priority-{{ project.priority|lower }}">
                        {{ project.get_priority_display }} Priority
                    </span>
                    <span class="badge bg-light text-dark">
                        <i class="fas fa-hashtag me-1"></i>{{ project.project_id|default:project.id }}
                    </span>
                </div>
            </div>
            <div class="col-md-4 text-md-end">
                <div class="stats-mini">
                    <div class="stat-mini">
                        <div class="stat-mini-number">{{ project.progress|default:0 }}%</div>
                        <div class="stat-mini-label">Complete</div>
                    </div>
                    <div class="stat-mini">
                        <div class="stat-mini-number">{{ project.team_members.count|default:0 }}</div>
                        <div class="stat-mini-label">Team Members</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="project-layout">
        <!-- Main Content -->
        <div class="project-main">
            <!-- Progress Section -->
            {% if project.progress is not None %}
            <div class="section-card">
                <div class="section-header">
                    <i class="fas fa-chart-line me-2"></i>Project Progress
                </div>
                <div class="section-content">
                    <div class="progress-container">
                        <div class="progress-header">
                            <span class="progress-label">Overall Progress</span>
                            <span class="progress-percentage">{{ project.progress }}%</span>
                        </div>
                        <div class="progress-bar-container">
                            <div class="progress-bar" style="width: {{ project.progress }}%;"></div>
                        </div>
                        <div class="progress-milestones">
                            <div class="milestone {% if project.progress >= 25 %}completed{% elif project.progress >= 0 %}active{% endif %}">
                                Planning
                            </div>
                            <div class="milestone {% if project.progress >= 50 %}completed{% elif project.progress >= 25 %}active{% endif %}">
                                Execution
                            </div>
                            <div class="milestone {% if project.progress >= 75 %}completed{% elif project.progress >= 50 %}active{% endif %}">
                                Review
                            </div>
                            <div class="milestone {% if project.progress >= 100 %}completed{% elif project.progress >= 75 %}active{% endif %}">
                                Completion
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}

            <!-- Project Information -->
            <div class="section-card">
                <div class="section-header">
                    <i class="fas fa-info-circle me-2"></i>Project Information
                </div>
                <div class="section-content">
                    <div class="info-grid">
                        <div class="info-item">
                            <div class="info-label">Project Manager</div>
                            <div class="info-value">{{ project.manager.get_full_name|default:"Not assigned" }}</div>
                        </div>
                        
                        <div class="info-item">
                            <div class="info-label">Department</div>
                            <div class="info-value">{{ project.department.name|default:"Not specified" }}</div>
                        </div>
                        
                        <div class="info-item">
                            <div class="info-label">Start Date</div>
                            <div class="info-value">{{ project.start_date|date:"M d, Y"|default:"Not set" }}</div>
                        </div>
                        
                        <div class="info-item">
                            <div class="info-label">End Date</div>
                            <div class="info-value">{{ project.end_date|date:"M d, Y"|default:"Not set" }}</div>
                        </div>
                        
                        <div class="info-item">
                            <div class="info-label">Budget</div>
                            <div class="info-value">${{ project.budget|floatformat:2|default:"Not specified" }}</div>
                        </div>
                        
                        <div class="info-item">
                            <div class="info-label">Created</div>
                            <div class="info-value">{{ project.created_at|date:"M d, Y g:i A" }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Project Timeline -->
            <div class="section-card">
                <div class="section-header">
                    <i class="fas fa-timeline me-2"></i>Project Timeline
                </div>
                <div class="section-content">
                    <div class="timeline-container">
                        {% for milestone in project.milestones.all %}
                        <div class="timeline-item">
                            <div class="timeline-icon {% if milestone.is_completed %}completed{% elif milestone.is_current %}active{% else %}pending{% endif %}">
                                <i class="fas fa-{{ milestone.icon|default:'circle' }}"></i>
                            </div>
                            <div class="timeline-content">
                                <div class="timeline-title">{{ milestone.name }}</div>
                                <div class="timeline-description">{{ milestone.description }}</div>
                                <div class="timeline-meta">
                                    <span><i class="fas fa-calendar me-1"></i>{{ milestone.due_date|date:"M d, Y" }}</span>
                                    {% if milestone.assignee %}
                                    <span><i class="fas fa-user me-1"></i>{{ milestone.assignee.get_full_name }}</span>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        {% empty %}
                        <div class="text-center text-muted py-3">
                            <i class="fas fa-timeline fa-2x mb-2"></i>
                            <p>No milestones defined yet</p>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <!-- Deliverables -->
            <div class="section-card">
                <div class="section-header">
                    <div>
                        <i class="fas fa-box me-2"></i>Deliverables ({{ project.deliverables.count }})
                    </div>
                    {% if project.can_edit %}
                    <button type="button" class="btn btn-outline-primary btn-sm" onclick="addDeliverable()">
                        <i class="fas fa-plus me-1"></i>Add
                    </button>
                    {% endif %}
                </div>
                <div class="section-content">
                    <div class="deliverables-grid">
                        {% for deliverable in project.deliverables.all %}
                        <div class="deliverable-card">
                            <div class="deliverable-header">
                                <div>
                                    <div class="deliverable-title">{{ deliverable.name }}</div>
                                    <div class="deliverable-type">{{ deliverable.get_type_display }}</div>
                                </div>
                                <span class="deliverable-status status-{{ deliverable.status }}">
                                    {{ deliverable.get_status_display }}
                                </span>
                            </div>
                            <div class="deliverable-description">
                                {{ deliverable.description|truncatechars:100 }}
                            </div>
                            <div class="deliverable-meta">
                                <span>Due: {{ deliverable.due_date|date:"M d, Y" }}</span>
                                {% if deliverable.assignee %}
                                <span>{{ deliverable.assignee.get_full_name }}</span>
                                {% endif %}
                            </div>
                        </div>
                        {% empty %}
                        <div class="text-center text-muted py-3">
                            <i class="fas fa-box fa-2x mb-2"></i>
                            <p>No deliverables defined yet</p>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <!-- Project Risks -->
            <div class="section-card">
                <div class="section-header">
                    <div>
                        <i class="fas fa-exclamation-triangle me-2"></i>Risks & Issues ({{ project.risks.count }})
                    </div>
                    {% if project.can_edit %}
                    <button type="button" class="btn btn-outline-warning btn-sm" onclick="addRisk()">
                        <i class="fas fa-plus me-1"></i>Add Risk
                    </button>
                    {% endif %}
                </div>
                <div class="section-content">
                    {% for risk in project.risks.all %}
                    <div class="risk-item">
                        <div class="risk-header">
                            <div class="risk-title">{{ risk.title }}</div>
                            <span class="risk-level risk-{{ risk.level|lower }}">
                                {{ risk.get_level_display }}
                            </span>
                        </div>
                        <div class="risk-description">
                            {{ risk.description }}
                        </div>
                        {% if risk.mitigation %}
                        <div class="risk-mitigation">
                            <strong>Mitigation:</strong> {{ risk.mitigation }}
                        </div>
                        {% endif %}
                    </div>
                    {% empty %}
                    <div class="text-center text-muted py-3">
                        <i class="fas fa-shield-alt fa-2x mb-2"></i>
                        <p>No risks identified</p>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="project-sidebar">
            <!-- Team Members -->
            <div class="section-card">
                <div class="section-header">
                    <div>
                        <i class="fas fa-users me-2"></i>Team ({{ project.team_members.count }})
                    </div>
                    {% if project.can_edit %}
                    <button type="button" class="btn btn-outline-primary btn-sm" onclick="manageTeam()">
                        <i class="fas fa-user-plus"></i>
                    </button>
                    {% endif %}
                </div>
                <div class="section-content">
                    <div class="team-grid">
                        {% for member in project.team_members.all %}
                        <div class="team-member">
                            <div class="member-avatar">
                                {{ member.first_name.0|upper }}{{ member.last_name.0|upper }}
                            </div>
                            <div class="member-info">
                                <div class="member-name">{{ member.get_full_name }}</div>
                                <div class="member-role">{{ member.profile.role|default:"Team Member" }}</div>
                            </div>
                        </div>
                        {% empty %}
                        <div class="text-center text-muted py-3">
                            <i class="fas fa-users fa-2x mb-2"></i>
                            <p>No team members assigned</p>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <!-- Recent Activity -->
            <div class="section-card">
                <div class="section-header">
                    <i class="fas fa-history me-2"></i>Recent Activity
                </div>
                <div class="section-content">
                    {% for activity in project.activities.all|slice:":10" %}
                    <div class="activity-item">
                        <div class="activity-avatar">
                            {{ activity.user.first_name.0|upper }}{{ activity.user.last_name.0|upper }}
                        </div>
                        <div class="activity-content">
                            <div class="activity-text">{{ activity.description }}</div>
                            <div class="activity-meta">
                                {{ activity.created_at|timesince }} ago
                            </div>
                        </div>
                    </div>
                    {% empty %}
                    <div class="text-center text-muted py-3">
                        <i class="fas fa-history fa-2x mb-2"></i>
                        <p>No recent activity</p>
                    </div>
                    {% endfor %}
                </div>
            </div>

            <!-- Project Documents -->
            <div class="section-card">
                <div class="section-header">
                    <div>
                        <i class="fas fa-folder me-2"></i>Documents ({{ project.documents.count }})
                    </div>
                    {% if project.can_edit %}
                    <button type="button" class="btn btn-outline-primary btn-sm" onclick="uploadDocument()">
                        <i class="fas fa-upload"></i>
                    </button>
                    {% endif %}
                </div>
                <div class="section-content">
                    {% for document in project.documents.all %}
                    <div class="document-item">
                        <div class="document-icon">
                            <i class="fas fa-file-{{ document.get_icon }}"></i>
                        </div>
                        <div class="document-info">
                            <div class="document-name">{{ document.name }}</div>
                            <div class="document-meta">
                                {{ document.size|filesizeformat }} • {{ document.uploaded_at|date:"M d, Y" }}
                            </div>
                        </div>
                        <a href="{{ document.file.url }}" class="btn btn-outline-primary btn-sm" target="_blank">
                            <i class="fas fa-download"></i>
                        </a>
                    </div>
                    {% empty %}
                    <div class="text-center text-muted py-3">
                        <i class="fas fa-folder-open fa-2x mb-2"></i>
                        <p>No documents uploaded</p>
                    </div>
                    {% endfor %}
                </div>
            </div>

            <!-- Project Statistics -->
            <div class="section-card">
                <div class="section-header">
                    <i class="fas fa-chart-bar me-2"></i>Statistics
                </div>
                <div class="section-content">
                    <div class="info-grid">
                        <div class="info-item">
                            <div class="info-label">Days Active</div>
                            <div class="info-value">{{ project.days_active|default:0 }}</div>
                        </div>
                        
                        <div class="info-item">
                            <div class="info-label">Tasks Completed</div>
                            <div class="info-value">{{ project.completed_tasks|default:0 }}</div>
                        </div>
                        
                        <div class="info-item">
                            <div class="info-label">Budget Used</div>
                            <div class="info-value">{{ project.budget_used_percentage|default:0 }}%</div>
                        </div>
                        
                        <div class="info-item">
                            <div class="info-label">Quality Score</div>
                            <div class="info-value">{{ project.quality_score|default:"N/A" }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Team Management Modal -->
<div class="modal fade" id="teamModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-users me-2"></i>Manage Team Members
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">Add Team Members</label>
                    <select class="form-select" id="team-members" multiple>
                        {% for user in available_users %}
                        <option value="{{ user.id }}">{{ user.get_full_name }} ({{ user.email }})</option>
                        {% endfor %}
                    </select>
                </div>
                
                <div class="mb-3">
                    <label class="form-label">Current Team Members</label>
                    <div id="current-team">
                        {% for member in project.team_members.all %}
                        <div class="d-flex justify-content-between align-items-center p-2 border rounded mb-2">
                            <span>{{ member.get_full_name }}</span>
                            <button type="button" class="btn btn-outline-danger btn-sm" onclick="removeMember({{ member.id }})">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>Cancel
                </button>
                <button type="button" class="btn btn-primary" onclick="saveTeamChanges()">
                    <i class="fas fa-save me-1"></i>Save Changes
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Document Upload Modal -->
<div class="modal fade" id="documentModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-upload me-2"></i>Upload Document
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="document-form" enctype="multipart/form-data">
                    <div class="mb-3">
                        <label class="form-label">Document Name</label>
                        <input type="text" class="form-control" id="document-name" required>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Document Type</label>
                        <select class="form-select" id="document-type">
                            <option value="report">Report</option>
                            <option value="plan">Plan</option>
                            <option value="specification">Specification</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">File</label>
                        <input type="file" class="form-control" id="document-file" required>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Description</label>
                        <textarea class="form-control" id="document-description" rows="3"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>Cancel
                </button>
                <button type="button" class="btn btn-primary" onclick="uploadDocumentFile()">
                    <i class="fas fa-upload me-1"></i>Upload
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'assets/plugins/select2/dist/js/select2.min.js' %}"></script>

<script>
$(document).ready(function() {
    // Initialize Select2
    $('#team-members').select2({
        placeholder: 'Select team members...',
        width: '100%'
    });
});

function startProject() {
    if (confirm('Are you sure you want to start this project?')) {
        fetch(`/quality/projects/{{ project.id }}/start/`, {
            method: 'POST',
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('Project started successfully', 'success');
                setTimeout(() => location.reload(), 1500);
            } else {
                showAlert('Error starting project', 'danger');
            }
        })
        .catch(error => {
            showAlert('Error starting project', 'danger');
        });
    }
}

function completeProject() {
    if (confirm('Are you sure you want to mark this project as completed?')) {
        fetch(`/quality/projects/{{ project.id }}/complete/`, {
            method: 'POST',
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('Project completed successfully', 'success');
                setTimeout(() => location.reload(), 1500);
            } else {
                showAlert('Error completing project', 'danger');
            }
        })
        .catch(error => {
            showAlert('Error completing project', 'danger');
        });
    }
}

function generateReport() {
    window.open(`/quality/projects/{{ project.id }}/report/`, '_blank');
}

function exportProject() {
    window.open(`/quality/projects/{{ project.id }}/export/`, '_blank');
}

function manageTeam() {
    new bootstrap.Modal(document.getElementById('teamModal')).show();
}

function removeMember(memberId) {
    if (confirm('Remove this team member from the project?')) {
        fetch(`/quality/projects/{{ project.id }}/remove-member/`, {
            method: 'POST',
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ member_id: memberId })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('Team member removed', 'success');
                setTimeout(() => location.reload(), 1500);
            } else {
                showAlert('Error removing team member', 'danger');
            }
        })
        .catch(error => {
            showAlert('Error removing team member', 'danger');
        });
    }
}

function saveTeamChanges() {
    const selectedMembers = $('#team-members').val();
    
    fetch(`/quality/projects/{{ project.id }}/update-team/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ member_ids: selectedMembers })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('Team updated successfully', 'success');
            setTimeout(() => location.reload(), 1500);
        } else {
            showAlert('Error updating team', 'danger');
        }
    })
    .catch(error => {
        showAlert('Error updating team', 'danger');
    });
    
    bootstrap.Modal.getInstance(document.getElementById('teamModal')).hide();
}

function uploadDocument() {
    new bootstrap.Modal(document.getElementById('documentModal')).show();
}

function uploadDocumentFile() {
    const formData = new FormData();
    formData.append('name', document.getElementById('document-name').value);
    formData.append('type', document.getElementById('document-type').value);
    formData.append('description', document.getElementById('document-description').value);
    formData.append('file', document.getElementById('document-file').files[0]);
    
    fetch(`/quality/projects/{{ project.id }}/upload-document/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('Document uploaded successfully', 'success');
            setTimeout(() => location.reload(), 1500);
        } else {
            showAlert('Error uploading document', 'danger');
        }
    })
    .catch(error => {
        showAlert('Error uploading document', 'danger');
    });
    
    bootstrap.Modal.getInstance(document.getElementById('documentModal')).hide();
}

function addDeliverable() {
    window.location.href = `/quality/projects/{{ project.id }}/deliverables/add/`;
}

function addRisk() {
    window.location.href = `/quality/projects/{{ project.id }}/risks/add/`;
}

function showAlert(message, type) {
    const alertDiv = document.createElement('div');
    alertDiv.className = `alert alert-${type} alert-dismissible fade show position-fixed`;
    alertDiv.style.cssText = 'top: 20px; right: 20px; z-index: 1060; min-width: 300px;';
    alertDiv.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    document.body.appendChild(alertDiv);
    
    setTimeout(() => {
        if (alertDiv.parentNode) {
            alertDiv.remove();
        }
    }, 5000);
}
</script>
{% endblock %}