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

{% block title %}Work Log History | LabourFlow{% endblock %}

{% block content %}
<div class="dashboard-header pb-5">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h1 class="display-5 mb-2">Work Log History</h1>
                <p class="lead opacity-75">Filter and review historical daily work logs.</p>
            </div>
            <div class="d-flex gap-2 align-items-center">
                <!-- View Switcher -->
                <div class="btn-group me-2 shadow-sm" role="group">
                  <a href="?view=list&worker={{ selected_worker|default:'' }}&team={{ selected_team|default:'' }}&project={{ selected_project|default:'' }}&payment_status={{ selected_payment_status|default:'' }}" class="btn btn-outline-secondary bg-white {% if view_mode != 'calendar' %}active fw-bold{% endif %}">
                      <i class="bi bi-list-ul"></i> List
                  </a>
                  <a href="?view=calendar&worker={{ selected_worker|default:'' }}&team={{ selected_team|default:'' }}&project={{ selected_project|default:'' }}&payment_status={{ selected_payment_status|default:'' }}" class="btn btn-outline-secondary bg-white {% if view_mode == 'calendar' %}active fw-bold{% endif %}">
                      <i class="bi bi-calendar3"></i> Calendar
                  </a>
                </div>

                <a href="{% url 'export_work_log_csv' %}?{{ request.GET.urlencode }}" class="btn btn-outline-secondary shadow-sm border-0 bg-white text-dark">
                    <i class="bi bi-download me-1"></i> Export CSV
                </a>
                <a href="{% url 'log_attendance' %}" class="btn btn-accent shadow-sm">
                    + New Entry
                </a>
            </div>
        </div>

        <!-- Filter Card -->
        <div class="card border-0 shadow-sm">
            <div class="card-body p-4">
                <form method="get" class="row g-3">
                    <input type="hidden" name="view" value="{{ view_mode }}">
                    {% if view_mode == 'calendar' %}
                        <input type="hidden" name="month" value="{{ curr_month }}">
                        <input type="hidden" name="year" value="{{ curr_year }}">
                    {% endif %}
                    
                    <div class="col-md-3">
                        <label class="form-label small text-muted text-uppercase fw-bold">Worker</label>
                        <select name="worker" class="form-select">
                            <option value="">All Workers</option>
                            {% for w in workers %}
                            <option value="{{ w.id }}" {% if selected_worker == w.id %}selected{% endif %}>{{ w.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small text-muted text-uppercase fw-bold">Team</label>
                        <select name="team" class="form-select">
                            <option value="">All Teams</option>
                            {% for t in teams %}
                            <option value="{{ t.id }}" {% if selected_team == t.id %}selected{% endif %}>{{ t.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small text-muted text-uppercase fw-bold">Project</label>
                        <select name="project" class="form-select">
                            <option value="">All Projects</option>
                            {% for p in projects %}
                            <option value="{{ p.id }}" {% if selected_project == p.id %}selected{% endif %}>{{ p.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small text-muted text-uppercase fw-bold">Payment</label>
                        <select name="payment_status" class="form-select">
                            <option value="all" {% if selected_payment_status == 'all' %}selected{% endif %}>All Status</option>
                            <option value="paid" {% if selected_payment_status == 'paid' %}selected{% endif %}>Paid</option>
                            <option value="unpaid" {% if selected_payment_status == 'unpaid' %}selected{% endif %}>Unpaid</option>
                        </select>
                    </div>
                    <div class="col-md-2 d-flex align-items-end">
                        <button type="submit" class="btn btn-primary w-100">Filter</button>
                    </div>
                </form>
                {% if selected_worker or selected_team or selected_project or selected_payment_status and selected_payment_status != 'all' %}
                <div class="mt-3">
                    <a href="{% url 'work_log_list' %}?view={{ view_mode }}" class="btn btn-sm btn-link text-decoration-none text-muted">
                        <i class="bi bi-x-circle"></i> Clear all filters
                    </a>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div class="container mb-5 mt-n4">
    {% if view_mode == 'calendar' %}
    <!-- CALENDAR VIEW -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h3 class="mb-0 fw-bold">{{ month_name }} {{ curr_year }}</h3>
        <div class="btn-group shadow-sm">
            <a href="?view=calendar&month={{ prev_month }}&year={{ prev_year }}&worker={{ selected_worker|default:'' }}&team={{ selected_team|default:'' }}&project={{ selected_project|default:'' }}&payment_status={{ selected_payment_status|default:'' }}" class="btn btn-light border bg-white">
                <i class="bi bi-chevron-left"></i> Previous
            </a>
            <a href="?view=calendar&month={{ next_month }}&year={{ next_year }}&worker={{ selected_worker|default:'' }}&team={{ selected_team|default:'' }}&project={{ selected_project|default:'' }}&payment_status={{ selected_payment_status|default:'' }}" class="btn btn-light border bg-white">
                Next <i class="bi bi-chevron-right"></i>
            </a>
        </div>
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-bordered mb-0 calendar-table" style="table-layout: fixed;">
                    <thead class="bg-light text-center text-uppercase text-muted small">
                        <tr>
                            <th style="width: 14.28%">Mon</th>
                            <th style="width: 14.28%">Tue</th>
                            <th style="width: 14.28%">Wed</th>
                            <th style="width: 14.28%">Thu</th>
                            <th style="width: 14.28%">Fri</th>
                            <th style="width: 14.28%">Sat</th>
                            <th style="width: 14.28%">Sun</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for week in calendar_weeks %}
                        <tr>
                            {% for day_info in week %}
                                <td class="{% if not day_info.is_current_month %}bg-light text-muted bg-opacity-10{% endif %}" style="height: 140px; vertical-align: top; padding: 10px;">
                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                        <span class="fw-bold {% if day_info.date == current_time.date %}text-primary bg-primary bg-opacity-10 px-2 rounded-circle{% endif %}">{{ day_info.day }}</span>
                                        {% if day_info.logs %}
                                            <span class="badge bg-secondary opacity-50">{{ day_info.logs|length }}</span>
                                        {% endif %}
                                    </div>
                                    <div class="calendar-events" style="max-height: 100px; overflow-y: auto;">
                                        {% for log in day_info.logs %}
                                            <div class="mb-1 p-1 rounded border small bg-white shadow-sm" style="font-size: 0.75rem; line-height: 1.2; border-left: 3px solid var(--bs-primary) !important;">
                                                <div class="fw-bold text-truncate">{{ log.project.name }}</div>
                                                {% with team=log.workers.first.teams.first %}
                                                    {% if team %}
                                                        <div class="text-muted small text-truncate" style="font-size: 0.7rem;">
                                                            <i class="bi bi-people-fill me-1"></i>{{ team.name }}
                                                        </div>
                                                    {% endif %}
                                                {% endwith %}
                                                <div class="text-muted text-truncate" title="{{ log.workers.count }} workers">
                                                    {% if selected_worker %}
                                                        {{ log.workers.first.name }}
                                                    {% elif log.workers.count == 1 %}
                                                         {{ log.workers.first.name }}
                                                    {% else %}
                                                        {{ log.workers.count }} workers
                                                    {% endif %}
                                                </div>
                                                {% if log.notes %}
                                                <!-- Optional: indicator for notes -->
                                                {% endif %}
                                            </div>
                                        {% endfor %}
                                    </div>
                                </td>
                            {% endfor %}
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
    {% else %}
    <!-- LIST VIEW -->
    <div class="card shadow-sm border-0">
        <div class="card-body p-0">
            {% if logs %}
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="bg-light">
                        <tr>
                            <th class="ps-4">Date</th>
                            <th>Project</th>
                            <th>Labourers</th>
                            <th>Amount</th>
                            <th>Status / Payslip</th>
                            <th>Supervisor</th>
                            <th class="pe-4 text-end">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for log in logs %}
                        <tr>
                            <td class="ps-4">
                                <span class="fw-bold">{{ log.date|date:"D, d M Y" }}</span>
                            </td>
                            <td>
                                <span class="badge bg-secondary bg-opacity-10 text-secondary border border-secondary border-opacity-25 px-2 py-1">
                                    {{ log.project.name }}
                                </span>
                            </td>
                            <td>
                                {% if selected_worker %}
                                    <span class="text-primary fw-medium">
                                        {% for w in log.workers.all %}
                                            {% if w.id == selected_worker %}
                                                {{ w.name }}
                                            {% endif %}
                                        {% endfor %}
                                    </span>
                                    {% if log.workers.count > 1 %}
                                        <small class="text-muted">(+{{ log.workers.count|add:"-1" }} others)</small>
                                    {% endif %}
                                {% else %}
                                    <div class="d-flex flex-wrap gap-1">
                                        {% for w in log.workers.all|slice:":3" %}
                                            <span class="small bg-light px-2 py-1 rounded border">{{ w.name|truncatechars:12 }}</span>
                                        {% endfor %}
                                        {% if log.workers.count > 3 %}
                                            <span class="small text-muted align-self-center ms-1">+{{ log.workers.count|add:"-3" }}</span>
                                        {% endif %}
                                    </div>
                                {% endif %}
                            </td>
                            <td>
                                <span class="fw-bold font-monospace text-dark">R {{ log.display_amount|floatformat:2 }}</span>
                            </td>
                            <td>
                                {% with payslip=log.paid_in.first %}
                                    {% if payslip %}
                                        <a href="{% url 'payslip_detail' payslip.id %}" class="text-decoration-none">
                                            <span class="badge bg-success bg-opacity-10 text-success border border-success border-opacity-25">
                                                <i class="bi bi-check-circle-fill"></i> Paid (Slip #{{ payslip.id }})
                                            </span>
                                        </a>
                                    {% else %}
                                        <span class="badge bg-warning bg-opacity-10 text-warning border border-warning border-opacity-25">
                                            Pending
                                        </span>
                                    {% endif %}
                                {% endwith %}
                            </td>
                            <td>
                                <small class="text-muted">{{ log.supervisor.username|default:"System" }}</small>
                            </td>
                            <td class="pe-4 text-end">
                                <div class="dropdown">
                                    <button class="btn btn-sm btn-outline-light text-dark border-0" type="button" data-bs-toggle="dropdown">
                                        <i class="bi bi-three-dots-vertical"></i>
                                    </button>
                                    <ul class="dropdown-content dropdown-menu dropdown-menu-end">
                                        <li><a class="dropdown-item" href="/admin/core/worklog/{{ log.id }}/change/">Edit Entry</a></li>
                                        {% if log.notes %}
                                        <li><hr class="dropdown-divider"></li>
                                        <li class="px-3 py-1"><small class="text-muted">Note: {{ log.notes }}</small></li>
                                        {% endif %}
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                    <tfoot class="table-light border-top-2">
                        <tr>
                            <td colspan="3" class="text-end fw-bold ps-4">Total:</td>
                            <td class="fw-bold font-monospace text-dark bg-warning bg-opacity-10">R {{ total_amount|floatformat:2 }}</td>
                            <td colspan="3"></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            {% else %}
            <div class="text-center py-5">
                <i class="bi bi-search display-1 text-muted opacity-25 mb-3 d-block"></i>
                <h4 class="text-muted">No logs found matching filters.</h4>
                <p class="text-muted mb-4">Try adjusting your filters or record a new entry.</p>
                <a href="{% url 'log_attendance' %}" class="btn btn-primary">Log Attendance</a>
            </div>
            {% endif %}
        </div>
    </div>
    {% endif %}
</div>

<style>
    .mt-n4 { margin-top: -1.5rem !important; }
    .bg-accent { background-color: var(--bs-accent); }
    .btn-accent { background-color: #ffde59; color: #000; border: none; font-weight: 600; }
    .btn-accent:hover { background-color: #e6c850; }
    
    /* Calendar Scrollbar custom */
    .calendar-events::-webkit-scrollbar {
        width: 4px;
    }
    .calendar-events::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 4px;
    }
</style>
{% endblock %}