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

{% block title %}Accounting Dashboard{% endblock %}

{% block content %}
<div class="section">
    <div class="container">
        <h1 class="section-title">Dashboard</h1>

        <div class="card-grid" style="margin-bottom: 3rem;">
            <a href="{% url 'contracts' %}" class="card">
                <span class="card-title">View Contracts</span>
                <p class="card-text">Overview of all active and past contracts and their scopes.</p>
            </a>
            <a href="{% url 'new_contract' %}" class="card">
                <span class="card-title">New Contract</span>
                <p class="card-text">Establish a new project contract to track budgets.</p>
            </a>
            <a href="{% url 'new_employee' %}" class="card">
                <span class="card-title">New Employee</span>
                <p class="card-text">Add a new personnel member to your organization.</p>
            </a>
            <a href="{% url 'Timekeeping' %}" class="card">
                <span class="card-title">Log Time</span>
                <p class="card-text">Record work hours against specific contracts.</p>
            </a>
            <a href="{% url 'time_logs' %}" class="card">
                <span class="card-title">Manage Time Logs</span>
                <p class="card-text">Review and edit submitted time entries.</p>
            </a>
            <a href="{% url 'client_reports' %}" class="card">
                <span class="card-title">Client Reports</span>
                <p class="card-text">Generate comprehensive reports for billing.</p>
            </a>
        </div>

        <h2 class="section-title" style="font-size: 2rem; margin-bottom: 2rem;">Contracts Overview</h2>
        <div class="table-responsive">
            {% if contracts %}
            <table class="table">
                <thead>
                    <tr>
                        <th>Contract Name</th>
                        <th>Budget Hours</th>
                        <th>Logged Hours</th>
                    </tr>
                </thead>
                <tbody>
                    {% for c in contracts %}
                    <tr>
                        <td><a href="{% url 'contract_detail' c.slug %}">{{ c.name }}</a></td>
                        <td>{{ c.budget_hours }}</td>
                        <td>{{ c.total_logged }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
            <p style="color: var(--text-muted);">No contracts available.</p>
            {% endif %}
        </div>

        <hr style="margin: 40px 0; border: 0; border-top: 1px solid rgba(255,255,255,0.1);">

        <h2 class="section-title" style="font-size: 2rem; margin-bottom: 2rem;">Employee Hours per Contract</h2>
        <div class="table-responsive">
            {% if employee_data %}
            <table class="table">
                <thead>
                    <tr>
                        <th>Employee Name</th>
                        {% for c in contracts %}
                        <th>{{ c.name }}</th>
                        {% endfor %}
                    </tr>
                </thead>
                <tbody>
                    {% for row in employee_data %}
                    <tr>
                        <td>{{ row.employee }}</td>
                        {% for ch in row.contract_hours %}
                        <td>{{ ch.hours }}</td>
                        {% endfor %}
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
            <p style="color: var(--text-muted);">No employees available.</p>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}