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

{% block title %}Time Logs - AI ML Operations{% endblock %}

{% block content %}
<div class="section">
    <div class="container">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
            <h1 class="section-title" style="margin-bottom: 0;">All Time Logs</h1>
            <div>
                <a href="{% url 'financial_index' %}" class="btn"
                    style="padding: 0.5rem 1.5rem; font-size: 0.9rem; margin-right: 1rem; background: var(--surface-color); color: var(--text-color); border: 1px solid rgba(255,255,255,0.1);">Back
                    to Dashboard</a>
                <a href="{% url 'Timekeeping' %}" class="btn" style="padding: 0.5rem 1.5rem; font-size: 0.9rem;">Log New
                    Time</a>
            </div>
        </div>

        <div class="card" style="margin-bottom: 2rem; padding: 1.25rem;">
            <form method="get" action="{% url 'time_logs' %}"
                style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; align-items: end;">
                <div>
                    <label for="filter-employee"
                        style="display: block; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.35rem;">Employee <span style="opacity: 0.75;">(Ctrl/Cmd+click for multiple)</span></label>
                    <select name="employee" id="filter-employee" multiple size="5"
                        style="width: 100%; padding: 0.5rem; background: var(--surface-color); color: var(--text-color); border: 1px solid rgba(255,255,255,0.15); border-radius: 6px;">
                        {% for emp in employees %}
                        <option value="{{ emp.id }}" {% if emp.id|stringformat:"s" in filters.employees %}selected{% endif %}>{{ emp }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label for="filter-month"
                        style="display: block; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.35rem;">Month</label>
                    <input type="month" name="month" id="filter-month" value="{{ filters.month }}"
                        style="width: 100%; padding: 0.5rem; background: var(--surface-color); color: var(--text-color); border: 1px solid rgba(255,255,255,0.15); border-radius: 6px;">
                </div>
                <div>
                    <label for="filter-contract"
                        style="display: block; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.35rem;">Contract</label>
                    <select name="contract" id="filter-contract"
                        style="width: 100%; padding: 0.5rem; background: var(--surface-color); color: var(--text-color); border: 1px solid rgba(255,255,255,0.15); border-radius: 6px;">
                        <option value="">All contracts</option>
                        {% for c in contracts %}
                        <option value="{{ c.id }}" {% if filters.contract == c.id|stringformat:"s" %}selected{% endif %}>{{ c.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label for="filter-charge-number"
                        style="display: block; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.35rem;">Charge Number</label>
                    <select name="charge_number" id="filter-charge-number"
                        style="width: 100%; padding: 0.5rem; background: var(--surface-color); color: var(--text-color); border: 1px solid rgba(255,255,255,0.15); border-radius: 6px;">
                        <option value="">All charge numbers</option>
                        {% for cn in charge_numbers %}
                        <option value="{{ cn.id }}" {% if filters.charge_number == cn.id|stringformat:"s" %}selected{% endif %}>{{ cn }} ({{ cn.contract.name }})</option>
                        {% endfor %}
                    </select>
                </div>
                <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
                    <button type="submit" class="btn" style="padding: 0.5rem 1.25rem; font-size: 0.9rem;">Apply</button>
                    <a href="{% url 'time_logs' %}" class="btn"
                        style="padding: 0.5rem 1.25rem; font-size: 0.9rem; background: var(--surface-color); color: var(--text-color); border: 1px solid rgba(255,255,255,0.1);">Clear</a>
                </div>
            </form>
        </div>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 2rem;">
            <div class="card" style="padding: 1.25rem;">
                <h2 style="font-size: 1rem; margin: 0 0 1rem 0; color: var(--text-muted);">Hours by Contract</h2>
                {% if contract_totals %}
                <table class="table" style="margin-bottom: 0;">
                    <thead>
                        <tr>
                            <th>Contract</th>
                            <th style="text-align: right;">Hours</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in contract_totals %}
                        <tr>
                            <td>{{ row.charge_number__contract__name }}</td>
                            <td style="text-align: right;">{{ row.total_hours|floatformat:2 }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                {% else %}
                <p style="color: var(--text-muted); margin: 0;">No contract totals for current filters.</p>
                {% endif %}
            </div>
            <div class="card" style="padding: 1.25rem;">
                <h2 style="font-size: 1rem; margin: 0 0 1rem 0; color: var(--text-muted);">Hours by Charge Number</h2>
                {% if charge_number_totals %}
                <table class="table" style="margin-bottom: 0;">
                    <thead>
                        <tr>
                            <th>Charge Number</th>
                            <th>Contract</th>
                            <th style="text-align: right;">Hours</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in charge_number_totals %}
                        <tr>
                            <td>{{ row.charge_number__name|default:"—" }}</td>
                            <td>{{ row.charge_number__contract__name }}</td>
                            <td style="text-align: right;">{{ row.total_hours|floatformat:2 }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                {% else %}
                <p style="color: var(--text-muted); margin: 0;">No charge number totals for current filters.</p>
                {% endif %}
            </div>
        </div>
        <p style="margin: -1rem 0 2rem 0; font-size: 0.95rem; color: var(--text-muted);">
            <strong style="color: var(--text-color);">Grand total:</strong> {{ grand_total|floatformat:2 }} hrs
            <span style="opacity: 0.75;">(all filtered rows, including entries without a charge number)</span>
        </p>

        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>Employee</th>
                        <th>Charge Number</th>
                        <th>Date</th>
                        <th>Start Time</th>
                        <th>End Time</th>
                        <th>Duration (hrs)</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for log in logs %}
                    <tr>
                        <td>{{ log.timeCard.employee }}</td>
                        <td>{{ log.charge_number }}</td>
                        <td>{{ log.date }}</td>
                        <td>{{ log.start_time|default_if_none:"" }}</td>
                        <td>{{ log.end_time|default_if_none:"" }}</td>
                        <td>{{ log.hour }}</td>
                        <td>
                            <a href="{% url 'edit_time_log' log.id %}" class="text-cyber-cyan"
                                style="margin-right: 10px;">Edit</a>
                            <form action="{% url 'delete_time_log' log.id %}" method="POST" style="display:inline;"
                                onsubmit="return confirm('Are you sure you want to delete this time log?');">
                                {% csrf_token %}
                                <button type="submit"
                                    style="background:none; border:none; color: #ff4444; cursor:pointer; font-size: 0.95rem; font-family: var(--font-main);">Delete</button>
                            </form>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="7" style="color: var(--text-muted); text-align: center; padding: 2rem;">No time
                            logs found.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}