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

{% block title %}Dashboard | Fox Fitt{% endblock %}

{% block content %}
<div class="dashboard-header">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h1 class="display-5 mb-2">Welcome Back, {% if user.is_authenticated %}{{ user.username }}{% else %}Admin{% endif %}</h1>
                <p class="lead opacity-75">Track your projects, workers, and payroll in one place.</p>
            </div>
            <div class="col-md-4 text-md-end">
                <a href="{% url 'log_attendance' %}" class="btn btn-accent shadow-sm">
                    + Log Daily Work
                </a>
            </div>
        </div>
    </div>
</div>

<div class="container mb-5">
    <!-- Payroll Analytics Row -->
    <div class="row g-4 mb-4">
        <div class="col-md-4">
            <div class="card stat-card p-4 border-start border-4 border-warning">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <p class="text-uppercase small fw-bold mb-1 opacity-75">Outstanding Payments</p>
                        <h2 class="mb-0">R {{ outstanding_total|intcomma }}</h2>
                    </div>
                    <div class="p-3 bg-warning bg-opacity-10 rounded-circle text-warning">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
                    </div>
                </div>
                <a href="{% url 'payroll_dashboard' %}" class="small text-muted mt-2 d-block stretched-link">View details &rarr;</a>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card stat-card p-4 border-start border-4 border-success">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <p class="text-uppercase small fw-bold mb-1 opacity-75">Paid (Last 60 Days)</p>
                        <h2 class="mb-0">R {{ recent_payments_total|intcomma }}</h2>
                    </div>
                    <div class="p-3 bg-success bg-opacity-10 rounded-circle text-success">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
             <div class="card stat-card p-4">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <p class="text-uppercase small fw-bold mb-1 opacity-75">Active Workers</p>
                        <h2 class="mb-0">{{ workers_count }}</h2>
                    </div>
                    <div class="p-3 bg-primary bg-opacity-10 rounded-circle text-primary">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <!-- Project Costs -->
            <div class="card p-4 mb-4">
                <h3 class="mb-3">Project Costs (Active)</h3>
                {% if project_costs %}
                <div class="table-responsive">
                    <table class="table align-middle">
                         <thead class="table-light">
                            <tr>
                                <th>Project Name</th>
                                <th class="text-end">Total Labor Cost</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for p in project_costs %}
                            <tr>
                                <td class="fw-bold">{{ p.name }}</td>
                                <td class="text-end">R {{ p.cost|intcomma }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <p class="text-muted">No cost data available for active projects.</p>
                {% endif %}
            </div>

            <!-- Recent Logs -->
            <div class="card p-4 mb-4">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h3 class="mb-0">Recent Daily Logs</h3>
                    <a href="{% url 'work_log_list' %}" class="btn btn-sm btn-link text-decoration-none">View All</a>
                </div>
                {% if recent_logs %}
                <div class="table-responsive">
                    <table class="table align-middle">
                        <thead class="table-light">
                            <tr>
                                <th>Date</th>
                                <th>Project</th>
                                <th>Workers</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for log in recent_logs %}
                            <tr>
                                <td>{{ log.date }}</td>
                                <td><strong>{{ log.project.name }}</strong></td>
                                <td>{{ log.workers.count }} labourers</td>
                                <td><span class="badge bg-success bg-opacity-10 text-success">Submitted</span></td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="text-center py-5">
                    <div class="mb-3 opacity-25">
                        <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
                    </div>
                    <p class="text-muted">No recent work logs found.</p>
                    <a href="{% url 'log_attendance' %}" class="btn btn-sm btn-outline-primary">Create First Log</a>
                </div>
                {% endif %}
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card p-4">
                <h3 class="mb-4">Quick Links</h3>
                <nav class="nav flex-column">
                    <a class="sidebar-link" href="{% url 'payroll_dashboard' %}">
                        <span class="me-2">💰</span> Payroll Dashboard
                    </a>
                    <a class="sidebar-link" href="/admin/core/worker/">
                        <span class="me-2">👷</span> Manage Workers
                    </a>
                    <a class="sidebar-link" href="/admin/core/project/">
                        <span class="me-2">🏗️</span> Manage Projects
                    </a>
                    <a class="sidebar-link" href="/admin/core/team/">
                        <span class="me-2">👥</span> Manage Teams
                    </a>
                    <hr>
                    <a class="sidebar-link text-primary fw-bold" href="/admin/core/worker/add/">
                        + Add New Worker
                    </a>
                </nav>
            </div>
        </div>
    </div>
</div>
{% endblock %}