{% extends "base.html" %}

{% block title %}{{ project.name }} - {{ app_name }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div class="d-flex align-items-center">
                    <div>
                        <nav aria-label="breadcrumb" class="mb-1">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ url_for('projects.list_projects') }}">Projects</a></li>
                                <li class="breadcrumb-item active">{{ project.name }}</li>
                            </ol>
                        </nav>
                        <h1 class="h3 mb-0 me-3">
                            <i class="fas fa-project-diagram text-primary"></i>
                            {{ project.name }}
                        </h1>
                    </div>
                    <div class="ms-3">
                        {% if project.status == 'active' %}
                        <span class="status-badge bg-success text-white"><i class="fas fa-check-circle me-2"></i>Active</span>
                        {% else %}
                        <span class="status-badge bg-secondary text-white"><i class="fas fa-archive me-2"></i>Archived</span>
                        {% endif %}
                    </div>
                </div>
                <div class="btn-group" role="group">
                    {% if current_user.is_admin %}
                    <a href="{{ url_for('projects.edit_project', project_id=project.id) }}" class="btn btn-secondary">
                        <i class="fas fa-edit me-1"></i> Edit
                    </a>
                    {% endif %}
                    <a href="{{ url_for('main.dashboard') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-1"></i> Back
                    </a>
                    <a href="{{ url_for('timer.start_timer_for_project', project_id=project.id) }}" class="btn btn-primary">
                        <i class="fas fa-play me-1"></i> Start Timer
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Project Details -->
    <div class="row mb-4">
        <div class="col-md-8">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="invoice-section">
                                <h6 class="section-title text-primary mb-3">
                                    <i class="fas fa-info-circle me-2"></i>General
                                </h6>
                                <div class="detail-row"><span class="detail-label">Name</span><span class="detail-value">{{ project.name }}</span></div>
                                <div class="detail-row"><span class="detail-label">Client</span>
                                    <span class="detail-value">
                                        {% if project.client_obj %}
                                        <a href="{{ url_for('clients.view_client', client_id=project.client_id) }}">{{ project.client_obj.name }}</a>
                                        {% else %}<span class="text-muted">-</span>{% endif %}
                                    </span>
                                </div>
                                <div class="detail-row"><span class="detail-label">Status</span>
                                    <span class="detail-value">{% if project.status == 'active' %}Active{% else %}Archived{% endif %}</span>
                                </div>
                                <div class="detail-row"><span class="detail-label">Created</span><span class="detail-value">{{ project.created_at.strftime('%B %d, %Y') }}</span></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="invoice-section">
                                <h6 class="section-title text-primary mb-3">
                                    <i class="fas fa-cog me-2"></i>Billing
                                </h6>
                                <div class="detail-row"><span class="detail-label">Billable</span>
                                    <span class="detail-value">{% if project.billable %}Yes{% else %}No{% endif %}</span>
                                </div>
                                {% if project.billable and project.hourly_rate %}
                                <div class="detail-row"><span class="detail-label">Hourly Rate</span><span class="detail-value">{{ currency }} {{ "%.2f"|format(project.hourly_rate) }}</span></div>
                                {% endif %}
                                {% if project.billing_ref %}
                                <div class="detail-row"><span class="detail-label">Billing Ref</span><span class="detail-value">{{ project.billing_ref }}</span></div>
                                {% endif %}
                                <div class="detail-row"><span class="detail-label">Last Updated</span><span class="detail-value">{{ project.updated_at.strftime('%B %d, %Y') }}</span></div>
                            </div>
                        </div>
                    </div>
                    
                    {% if project.description %}
                    <div class="mt-3">
                        <h6 class="section-title text-primary mb-2">Description</h6>
                        <div class="content-box">{{ project.description }}</div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-light py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-chart-bar me-2"></i>Statistics
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6 mb-3">
                            <div class="h4 text-primary">{{ "%.1f"|format(project.total_hours) }}</div>
                            <small class="text-muted">Total Hours</small>
                        </div>
                        <div class="col-6 mb-3">
                            <div class="h4 text-success">{{ "%.1f"|format(project.total_billable_hours) }}</div>
                            <small class="text-muted">Billable Hours</small>
                        </div>
                        {% if project.billable and project.hourly_rate %}
                        <div class="col-12">
                            <div class="h4 text-success">{{ currency }} {{ "%.2f"|format(project.estimated_cost) }}</div>
                            <small class="text-muted">Estimated Cost</small>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            
            {% if project.billable and project.hourly_rate %}
            <div class="card mt-3 shadow-sm border-0">
                <div class="card-header bg-light py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-users me-2"></i>User Breakdown
                    </h6>
                </div>
                <div class="card-body">
                    {% for user_total in project.get_user_totals() %}
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span>{{ user_total.username }}</span>
                        <span class="text-primary">{{ "%.1f"|format(user_total.total_hours) }}h</span>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Tasks -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i class="fas fa-tasks"></i> Tasks
                    </h5>
                    <div>
                        <a href="{{ url_for('tasks.create_task') }}?project_id={{ project.id }}" class="btn btn-sm btn-success">
                            <i class="fas fa-plus"></i> New Task
                        </a>
                        <a href="{{ url_for('tasks.list_tasks', project_id=project.id) }}" class="btn btn-sm btn-outline-primary">
                            <i class="fas fa-list"></i> View All
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    {% if tasks %}
                    <div class="row">
                        {% for task in tasks[:6] %}
                        <div class="col-md-6 col-lg-4 mb-3">
                            <div class="card h-100 task-card {{ task.priority_class }}">
                                <div class="card-header d-flex justify-content-between align-items-center py-2">
                                    <span class="badge bg-{{ 'success' if task.status == 'done' else 'warning' if task.status == 'in_progress' else 'info' if task.status == 'review' else 'secondary' }}">
                                        {{ task.status_display }}
                                    </span>
                                    <span class="badge priority-badge priority-{{ task.priority }}">
                                        {{ task.priority_display }}
                                    </span>
                                </div>
                                <div class="card-body py-2">
                                    <h6 class="card-title mb-2">
                                        <a href="{{ url_for('tasks.view_task', task_id=task.id) }}" class="text-decoration-none">
                                            {{ task.name }}
                                        </a>
                                    </h6>
                                    {% if task.description %}
                                    <p class="card-text text-muted small mb-2">{{ task.description[:80] }}{% if task.description|length > 80 %}...{% endif %}</p>
                                    {% endif %}
                                    
                                    <div class="task-meta small">
                                        {% if task.assigned_user %}
                                        <div class="text-muted mb-1">
                                            <i class="fas fa-user"></i> {{ task.assigned_user.display_name }}
                                        </div>
                                        {% endif %}
                                        {% if task.due_date %}
                                        <div class="{% if task.is_overdue %}text-danger{% else %}text-muted{% endif %} mb-1">
                                            <i class="fas fa-calendar"></i> Due: {{ task.due_date.strftime('%Y-%m-%d') }}
                                            {% if task.is_overdue %}<i class="fas fa-exclamation-triangle text-warning"></i>{% endif %}
                                        </div>
                                        {% endif %}
                                        {% if task.estimated_hours %}
                                        <div class="text-muted mb-1">
                                            <i class="fas fa-clock"></i> Est: {{ task.estimated_hours }}h
                                        </div>
                                        {% endif %}
                                        {% if task.total_hours > 0 %}
                                        <div class="text-muted mb-1">
                                            <i class="fas fa-stopwatch"></i> Actual: {{ task.total_hours }}h
                                        </div>
                                        {% endif %}
                                    </div>
                                    
                                    {% if task.estimated_hours and task.total_hours > 0 %}
                                    <div class="progress mt-2" style="height: 6px;">
                                        <div class="progress-bar" role="progressbar" 
                                             style="width: {{ task.progress_percentage }}%"
                                             aria-valuenow="{{ task.progress_percentage }}" 
                                             aria-valuemin="0" aria-valuemax="100">
                                        </div>
                                    </div>
                                    <small class="text-muted">{{ task.progress_percentage }}% complete</small>
                                    {% endif %}
                                </div>
                                <div class="card-footer py-2">
                                    <div class="btn-group btn-group-sm w-100" role="group">
                                        <a href="{{ url_for('tasks.view_task', task_id=task.id) }}" class="btn btn-outline-primary btn-sm">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{{ url_for('timer.start_timer_for_project', project_id=task.project.id, task_id=task.id) }}" 
                                           class="btn btn-outline-success btn-sm">
                                            <i class="fas fa-play"></i>
                                        </a>
                                        {% if current_user.is_admin or task.created_by == current_user.id %}
                                        <a href="{{ url_for('tasks.edit_task', task_id=task.id) }}" class="btn btn-outline-secondary btn-sm">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    
                    {% if tasks|length > 6 %}
                    <div class="text-center mt-3">
                        <a href="{{ url_for('tasks.list_tasks', project_id=project.id) }}" class="btn btn-outline-primary">
                            View All {{ tasks|length }} Tasks
                        </a>
                    </div>
                    {% endif %}
                    {% else %}
                    <div class="text-center py-4">
                        <i class="fas fa-tasks fa-2x text-muted mb-3"></i>
                        <h6 class="text-muted">No Tasks Yet</h6>
                        <p class="text-muted small mb-3">Break down this project into manageable tasks to track progress.</p>
                        <a href="{{ url_for('tasks.create_task') }}?project_id={{ project.id }}" class="btn btn-success btn-sm">
                            <i class="fas fa-plus"></i> Create First Task
                        </a>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Time Entries -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-clock me-2"></i>Time Entries
                    </h6>
                    <a href="{{ url_for('reports.project_report', project_id=project.id) }}" class="btn btn-sm btn-outline-primary">
                        <i class="fas fa-chart-line"></i> View Report
                    </a>
                </div>
                <div class="card-body">
                    {% if entries %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>User</th>
                                    <th>Date</th>
                                    <th>Time</th>
                                    <th>Duration</th>
                                    <th>Notes</th>
                                    <th>Tags</th>
                                    <th>Billable</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for entry in entries %}
                                <tr>
                                    <td>{{ entry.user.display_name }}</td>
                                                                <td>{{ entry.start_time.strftime('%Y-%m-%d') }}</td>
                            <td>
                                {{ entry.start_time.strftime('%H:%M') }} -
                                {% if entry.end_time %}
                                {{ entry.end_time.strftime('%H:%M') }}
                                {% else %}
                                <span class="text-warning">Running</span>
                                {% endif %}
                            </td>
                                    <td>
                                        <strong>{{ entry.duration_formatted }}</strong>
                                    </td>
                                    <td>
                                        {% if entry.notes %}
                                        <span title="{{ entry.notes }}">{{ entry.notes[:50] }}{% if entry.notes|length > 50 %}...{% endif %}</span>
                                        {% else %}
                                        <span class="text-muted">-</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if entry.tag_list %}
                                        {% for tag in entry.tag_list %}
                                        <span class="badge bg-light text-dark">{{ tag }}</span>
                                        {% endfor %}
                                        {% else %}
                                        <span class="text-muted">-</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if entry.billable %}
                                        <span class="badge bg-success">Yes</span>
                                        {% else %}
                                        <span class="badge bg-secondary">No</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <a href="{{ url_for('timer.edit_timer', timer_id=entry.id) }}" 
                                               class="btn btn-sm btn-outline-primary" title="Edit">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            {% if current_user.is_admin or entry.user_id == current_user.id %}
                                            <button type="button" class="btn btn-sm btn-outline-danger" title="Delete" 
                                                    onclick="showDeleteEntryModal('{{ entry.id }}', '{{ entry.project.name }}', '{{ entry.duration_formatted }}')">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                            {% endif %}
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- Pagination -->
                    {% if pagination.pages > 1 %}
                    <nav aria-label="Time entries pagination">
                        <ul class="pagination justify-content-center">
                            {% if pagination.has_prev %}
                            <li class="page-item">
                                <a class="page-link" href="{{ url_for('projects.view_project', project_id=project.id, page=pagination.prev_num) }}">Previous</a>
                            </li>
                            {% endif %}
                            
                            {% for page_num in pagination.iter_pages() %}
                                {% if page_num %}
                                    {% if page_num != pagination.page %}
                                    <li class="page-item">
                                        <a class="page-link" href="{{ url_for('projects.view_project', project_id=project.id, page=page_num) }}">{{ page_num }}</a>
                                    </li>
                                    {% else %}
                                    <li class="page-item active">
                                        <span class="page-link">{{ page_num }}</span>
                                    </li>
                                    {% endif %}
                                {% else %}
                                <li class="page-item disabled">
                                    <span class="page-link">...</span>
                                </li>
                                {% endif %}
                            {% endfor %}
                            
                            {% if pagination.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="{{ url_for('projects.view_project', project_id=project.id, page=pagination.next_num) }}">Next</a>
                            </li>
                            {% endif %}
                        </ul>
                    </nav>
                    {% endif %}
                    {% else %}
                    <div class="text-center py-5">
                        <i class="fas fa-clock fa-3x text-muted mb-3"></i>
                        <h4 class="text-muted">No Time Entries</h4>
                        <p class="text-muted">No time has been tracked for this project yet.</p>
                        <a href="{{ url_for('main.dashboard') }}" class="btn btn-primary">
                            <i class="fas fa-play"></i> Start Timer
                        </a>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete Time Entry Modal -->
<div class="modal fade" id="deleteEntryModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-trash me-2 text-danger"></i>Delete Time Entry
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    <strong>Warning:</strong> This action cannot be undone.
                </div>
                <p>Are you sure you want to delete the time entry for <strong id="deleteEntryProjectName"></strong>?</p>
                <p class="text-muted mb-0">Duration: <strong id="deleteEntryDuration"></strong></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>Cancel
                </button>
                <form method="POST" id="deleteEntryForm" class="d-inline">
                    <button type="submit" class="btn btn-danger">
                        <i class="fas fa-trash me-2"></i>Delete Entry
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
// Function to show delete time entry modal
function showDeleteEntryModal(entryId, projectName, duration) {
    document.getElementById('deleteEntryProjectName').textContent = projectName;
    document.getElementById('deleteEntryDuration').textContent = duration;
    document.getElementById('deleteEntryForm').action = "{{ url_for('timer.delete_timer', timer_id=0) }}".replace('0', entryId);
    new bootstrap.Modal(document.getElementById('deleteEntryModal')).show();
}

// Add loading state to delete entry form
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('deleteEntryForm').addEventListener('submit', function(e) {
        const submitBtn = this.querySelector('button[type="submit"]');
        submitBtn.innerHTML = '<div class="loading-spinner me-2"></div>Deleting...';
        submitBtn.disabled = true;
    });
});
</script>

<style>
.task-card {
    transition: transform 0.2s, box-shadow 0.2s;
}

.task-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.priority-badge {
    font-size: 0.75rem;
}

.priority-low {
    background-color: #28a745 !important;
}

.priority-medium {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

.priority-high {
    background-color: #fd7e14 !important;
}

.priority-urgent {
    background-color: #dc3545 !important;
}

.task-meta div {
    margin-bottom: 0.25rem;
}

.progress {
    background-color: #e9ecef;
}

.progress-bar {
    background-color: #007bff;
}

.btn-group .btn {
    flex: 1;
}
</style>
<style>
.status-badge {
    padding: 8px 16px;
    border-radius: 25px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.invoice-section { padding: 12px 0; }
.section-title { font-size: 16px; font-weight: 600; border-bottom: 2px solid var(--primary-color); padding-bottom: 8px; }
.detail-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; padding:8px 0; border-bottom:1px solid var(--border-color); }
.detail-label { font-weight:600; color:var(--text-secondary); }
.detail-value { font-weight:600; color:var(--text-primary); }
.content-box { background: var(--light-color); padding: 16px; border-radius: 8px; border-left: 4px solid var(--primary-color); line-height: 1.6; }

@media (max-width:768px){
  .detail-row{flex-direction:column; align-items:flex-start; gap:4px;}
}
</style>
{% endblock %}
