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

{% block title %}Work History | FoxFitt{% endblock %}

{% block content %}
<!-- === WORK HISTORY PAGE ===
     Two view modes: List (table) and Calendar (monthly grid).
     Filters apply to both modes.
     Calendar mode shows a month grid where each day cell lists the work logs.
     Click a day cell to see full details in a panel below the calendar. -->

<div class="container py-4">

    {# === PAGE HEADER with view toggle and export === #}
    <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
        <h1 class="page-title"><i class="fas fa-clock me-2" style="color: var(--accent);"></i>Work History</h1>
        <div class="d-flex gap-2 flex-wrap">
            {# View toggle — List vs Calendar #}
            <div class="btn-group" role="group" aria-label="View mode">
                <a href="?view=list{{ filter_params }}"
                   class="btn btn-sm {% if view_mode == 'list' %}btn-accent{% else %}btn-outline-secondary{% endif %}">
                    <i class="fas fa-list me-1"></i> List
                </a>
                <a href="?view=calendar{{ filter_params }}"
                   class="btn btn-sm {% if view_mode == 'calendar' %}btn-accent{% else %}btn-outline-secondary{% endif %}">
                    <i class="fas fa-calendar-alt me-1"></i> Calendar
                </a>
            </div>
            <a href="{% url 'export_work_log_csv' %}?worker={{ selected_worker }}&project={{ selected_project }}&status={{ selected_status }}"
               class="btn btn-outline-secondary btn-sm">
                <i class="fas fa-file-csv me-1"></i> Export CSV
            </a>
            <a href="{% url 'home' %}" class="btn btn-outline-secondary btn-sm">
                <i class="fas fa-arrow-left fa-sm me-1"></i> Back
            </a>
        </div>
    </div>

    {# === FILTER BAR === #}
    <div class="card mb-4{% if has_active_filters %} border-start border-3{% endif %}" {% if has_active_filters %}style="border-left-color: var(--accent) !important;"{% endif %}>
        <div class="card-body py-3">
            <form method="GET" action="{% url 'work_history' %}" class="row g-2 align-items-end">
                <input type="hidden" name="view" value="{{ view_mode }}">
                {% if view_mode == 'calendar' %}
                <input type="hidden" name="year" value="{{ curr_year }}">
                <input type="hidden" name="month" value="{{ curr_month }}">
                {% endif %}

                <div class="col-md-3">
                    <label class="form-label">Worker</label>
                    <select name="worker" class="form-select form-select-sm">
                        <option value="">All Workers</option>
                        {% for w in filter_workers %}
                        <option value="{{ w.id }}" {% if selected_worker == w.id|stringformat:"d" %}selected{% endif %}>{{ w.name }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="col-md-3">
                    <label class="form-label">Project</label>
                    <select name="project" class="form-select form-select-sm">
                        <option value="">All Projects</option>
                        {% for p in filter_projects %}
                        <option value="{{ p.id }}" {% if selected_project == p.id|stringformat:"d" %}selected{% endif %}>{{ p.name }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="col-md-3">
                    <label class="form-label">Payment Status</label>
                    <select name="status" class="form-select form-select-sm">
                        <option value="" {% if not selected_status %}selected{% endif %}>All</option>
                        <option value="paid" {% if selected_status == 'paid' %}selected{% endif %}>Paid</option>
                        <option value="unpaid" {% if selected_status == 'unpaid' %}selected{% endif %}>Unpaid</option>
                    </select>
                </div>

                <div class="col-md-3 d-flex gap-2">
                    <button type="submit" class="btn btn-sm btn-accent">
                        <i class="fas fa-filter me-1"></i> Filter
                    </button>
                    {% if has_active_filters %}
                    <a href="{% url 'work_history' %}?view={{ view_mode }}" class="btn btn-sm btn-outline-danger">
                        <i class="fas fa-times me-1"></i> Clear
                    </a>
                    {% endif %}
                </div>
            </form>

            {# Active filter feedback #}
            {% if has_active_filters %}
            <div class="mt-2 d-flex align-items-center flex-wrap gap-2">
                <small style="color: var(--text-secondary);">
                    <i class="fas fa-info-circle me-1"></i>
                    Showing <strong>{{ filtered_log_count }}</strong> of {{ total_log_count }} work log{{ total_log_count|pluralize }}
                </small>
                {% if selected_worker %}
                <span class="badge" style="background: var(--color-info-bg); color: var(--color-info); border: 1px solid var(--color-info);">
                    <i class="fas fa-user fa-xs me-1"></i>
                    {% for w in filter_workers %}{% if w.id|stringformat:"d" == selected_worker %}{{ w.name }}{% endif %}{% endfor %}
                </span>
                {% endif %}
                {% if selected_project %}
                <span class="badge" style="background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success);">
                    <i class="fas fa-project-diagram fa-xs me-1"></i>
                    {% for p in filter_projects %}{% if p.id|stringformat:"d" == selected_project %}{{ p.name }}{% endif %}{% endfor %}
                </span>
                {% endif %}
                {% if selected_status %}
                <span class="badge" style="background: var(--color-warning-bg); color: var(--color-warning); border: 1px solid var(--color-warning);">
                    <i class="fas fa-tag fa-xs me-1"></i>{{ selected_status|capfirst }}
                </span>
                {% endif %}
            </div>
            {% endif %}
        </div>
    </div>


    {% if view_mode == 'calendar' %}
    {# =============================================================== #}
    {# === CALENDAR VIEW === #}
    {# =============================================================== #}

    {# Month navigation #}
    <div class="card mb-3">
        <div class="card-body py-2">
            <div class="d-flex justify-content-between align-items-center">
                <a href="?view=calendar&year={{ prev_year }}&month={{ prev_month }}{{ filter_params }}"
                   class="btn btn-sm btn-outline-secondary">
                    <i class="fas fa-chevron-left"></i>
                </a>
                <h5 class="mb-0 fw-bold" style="font-family: 'Poppins', sans-serif;">{{ month_name }}</h5>
                <a href="?view=calendar&year={{ next_year }}&month={{ next_month }}{{ filter_params }}"
                   class="btn btn-sm btn-outline-secondary">
                    <i class="fas fa-chevron-right"></i>
                </a>
            </div>
        </div>
    </div>

    {# Calendar grid #}
    <div class="card mb-3">
        <div class="card-body p-0 p-md-3">
            {# Day-of-week header #}
            <div class="row g-0 d-none d-md-flex text-center fw-bold border-bottom pb-2 mb-2" style="font-size: 0.85rem; color: var(--text-secondary);">
                <div class="col">Mon</div>
                <div class="col">Tue</div>
                <div class="col">Wed</div>
                <div class="col">Thu</div>
                <div class="col">Fri</div>
                <div class="col">Sat</div>
                <div class="col">Sun</div>
            </div>

            {% for week in calendar_weeks %}
            <div class="row g-0 g-md-1 mb-0 mb-md-1">
                {% for day in week %}
                <div class="col cal-day {% if not day.is_current_month %}cal-day--other{% endif %}{% if day.is_today %} cal-day--today{% endif %}{% if day.count > 0 %} cal-day--has-logs{% endif %}"
                     {% if day.count > 0 %}data-date="{{ day.date|date:'Y-m-d' }}"{% endif %}>
                    <div class="d-flex justify-content-between align-items-start">
                        <span class="cal-day__number">{{ day.day }}</span>
                        {% if day.count > 0 %}
                        <span class="badge rounded-pill" style="font-size: 0.65rem; background: var(--accent);">{{ day.count }}</span>
                        {% endif %}
                    </div>
                    {% for log in day.records|slice:":3" %}
                    <div class="cal-entry text-truncate" title="{{ log.project.name }}">
                        <small>
                            {% if log.payroll_records.exists %}
                            <i class="fas fa-check-circle" style="font-size: 0.55rem; color: var(--color-success);"></i>
                            {% else %}
                            <i class="fas fa-clock" style="font-size: 0.55rem; color: var(--color-warning);"></i>
                            {% endif %}
                            {{ log.project.name }}
                        </small>
                    </div>
                    {% endfor %}
                    {% if day.count > 3 %}
                    <div class="cal-entry">
                        <small style="color: var(--text-tertiary);">+{{ day.count|add:"-3" }} more</small>
                    </div>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
            {% endfor %}
        </div>
    </div>

    {# === Day Detail Panel === #}
    <div class="card d-none" id="dayDetailPanel">
        <div class="card-header py-2">
            <div class="d-flex justify-content-between align-items-center">
                <h6 class="mb-0 fw-bold" id="dayDetailTitle">
                    <i class="fas fa-calendar-day me-2"></i>Details
                </h6>
                <div class="d-flex gap-2 align-items-center">
                    <span class="badge rounded-pill d-none" style="background: var(--accent);" id="daySelectionCount"></span>
                    <button type="button" class="btn btn-sm btn-outline-secondary" id="clearDaySelection" title="Clear selection">
                        <i class="fas fa-times-circle me-1"></i> Clear
                    </button>
                </div>
            </div>
            <small class="d-block mt-1" style="color: var(--text-tertiary);" id="multiSelectHint">
                <i class="fas fa-info-circle me-1"></i>Click more days to add them to the selection
            </small>
        </div>
        <div class="card-body p-0" id="dayDetailBody"></div>
        {% if is_admin %}
        <div class="card-footer border-top d-none" id="dayDetailFooter">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <strong>Total:</strong>
                    <span class="ms-2" style="color: var(--text-secondary);" id="totalDays">0 days</span>
                    <span class="mx-1" style="color: var(--text-tertiary);">&middot;</span>
                    <span style="color: var(--text-secondary);" id="totalLogs">0 logs</span>
                    <span class="mx-1" style="color: var(--text-tertiary);">&middot;</span>
                    <span style="color: var(--text-secondary);" id="totalWorkers">0 unique workers</span>
                </div>
                <div>
                    <strong class="fs-5" style="color: var(--accent);" id="totalAmount">R 0.00</strong>
                </div>
            </div>
        </div>
        {% endif %}
    </div>

    {{ calendar_detail|json_script:"calDetailJson" }}

    <script>
    (function() {
        'use strict';

        var calDetail = JSON.parse(document.getElementById('calDetailJson').textContent);
        var detailPanel = document.getElementById('dayDetailPanel');
        var detailTitle = document.getElementById('dayDetailTitle');
        var detailBody = document.getElementById('dayDetailBody');
        var clearBtn = document.getElementById('clearDaySelection');
        var selCountBadge = document.getElementById('daySelectionCount');
        var multiSelectHint = document.getElementById('multiSelectHint');
        var isAdmin = {{ is_admin|yesno:"true,false" }};
        var detailFooter = document.getElementById('dayDetailFooter');
        var selectedDates = [];
        var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

        function formatDateShort(dateStr) {
            var parts = dateStr.split('-');
            return parseInt(parts[2], 10) + ' ' + months[parseInt(parts[1], 10) - 1];
        }

        function formatDateLong(dateStr) {
            var parts = dateStr.split('-');
            return parseInt(parts[2], 10) + ' ' + months[parseInt(parts[1], 10) - 1] + ' ' + parts[0];
        }

        function updateDetailPanel() {
            if (selectedDates.length === 0) {
                detailPanel.classList.add('d-none');
                return;
            }

            selectedDates.sort();
            var allEntries = [];
            var totalAmount = 0;
            var uniqueWorkers = {};

            selectedDates.forEach(function(dateStr) {
                (calDetail[dateStr] || []).forEach(function(entry) {
                    allEntries.push({ date: dateStr, entry: entry });
                    entry.workers.forEach(function(w) { uniqueWorkers[w] = true; });
                    if (isAdmin && entry.amount !== undefined) totalAmount += entry.amount;
                });
            });

            // Title
            detailTitle.textContent = '';
            var icon = document.createElement('i');
            icon.className = 'fas fa-calendar-day me-2';
            detailTitle.appendChild(icon);
            if (selectedDates.length === 1) {
                detailTitle.appendChild(document.createTextNode(formatDateLong(selectedDates[0]) + ' \u2014 ' + allEntries.length + ' log(s)'));
            } else {
                detailTitle.appendChild(document.createTextNode(selectedDates.length + ' days selected \u2014 ' + allEntries.length + ' log(s)'));
            }

            if (selectedDates.length > 1) {
                selCountBadge.textContent = selectedDates.length + ' days';
                selCountBadge.classList.remove('d-none');
                multiSelectHint.classList.add('d-none');
            } else {
                selCountBadge.classList.add('d-none');
                multiSelectHint.classList.remove('d-none');
            }

            // Build table
            while (detailBody.firstChild) detailBody.removeChild(detailBody.firstChild);

            var table = document.createElement('table');
            table.className = 'table table-sm table-hover mb-0';
            var thead = document.createElement('thead');
            var headRow = document.createElement('tr');
            var headers = selectedDates.length > 1
                ? ['Date', 'Project', 'Workers', 'Supervisor', 'OT', 'Status']
                : ['Project', 'Workers', 'Supervisor', 'OT', 'Status'];
            if (isAdmin) headers.push('Amount');
            headers.forEach(function(h) {
                var th = document.createElement('th');
                th.className = (h === 'Project' || h === 'Date') ? 'ps-3' : '';
                th.textContent = h;
                headRow.appendChild(th);
            });
            thead.appendChild(headRow);
            table.appendChild(thead);

            var tbody = document.createElement('tbody');
            allEntries.forEach(function(item) {
                var entry = item.entry;
                var tr = document.createElement('tr');

                if (selectedDates.length > 1) {
                    var tdDate = document.createElement('td');
                    tdDate.className = 'ps-3';
                    tdDate.textContent = formatDateShort(item.date);
                    tr.appendChild(tdDate);
                }

                var tdProj = document.createElement('td');
                tdProj.className = selectedDates.length === 1 ? 'ps-3' : '';
                var strong = document.createElement('strong');
                strong.textContent = entry.project;
                tdProj.appendChild(strong);
                tr.appendChild(tdProj);

                var tdWork = document.createElement('td');
                entry.workers.forEach(function(name) {
                    var pill = document.createElement('span');
                    pill.className = 'badge rounded-pill fw-normal me-1 mb-1';
                    pill.style.cssText = 'background: var(--bg-inset); color: var(--text-primary); border: 1px solid var(--border-default);';
                    pill.textContent = name;
                    tdWork.appendChild(pill);
                });
                tr.appendChild(tdWork);

                var tdSup = document.createElement('td');
                tdSup.textContent = entry.supervisor;
                tr.appendChild(tdSup);

                var tdOt = document.createElement('td');
                if (entry.overtime) {
                    var otBadge = document.createElement('span');
                    otBadge.className = 'badge';
                    otBadge.style.cssText = 'background: var(--color-warning-bg); color: var(--color-warning);';
                    otBadge.textContent = entry.overtime;
                    tdOt.appendChild(otBadge);
                } else {
                    tdOt.textContent = '-';
                    tdOt.style.color = 'var(--text-tertiary)';
                }
                tr.appendChild(tdOt);

                var tdStatus = document.createElement('td');
                var statusBadge = document.createElement('span');
                statusBadge.className = 'badge ' + (entry.is_paid ? 'bg-success' : 'bg-danger bg-opacity-75');
                statusBadge.textContent = entry.is_paid ? 'Paid' : 'Unpaid';
                tdStatus.appendChild(statusBadge);
                tr.appendChild(tdStatus);

                if (isAdmin) {
                    var tdAmt = document.createElement('td');
                    tdAmt.textContent = entry.amount !== undefined ? 'R ' + entry.amount.toFixed(2) : '-';
                    tr.appendChild(tdAmt);
                }

                tbody.appendChild(tr);
            });
            table.appendChild(tbody);
            detailBody.appendChild(table);

            // Totals footer
            if (isAdmin && detailFooter) {
                var uniqueCount = Object.keys(uniqueWorkers).length;
                document.getElementById('totalDays').textContent = selectedDates.length + ' day' + (selectedDates.length !== 1 ? 's' : '');
                document.getElementById('totalLogs').textContent = allEntries.length + ' log' + (allEntries.length !== 1 ? 's' : '');
                document.getElementById('totalWorkers').textContent = uniqueCount + ' unique worker' + (uniqueCount !== 1 ? 's' : '');
                document.getElementById('totalAmount').textContent = 'R ' + totalAmount.toFixed(2);
                detailFooter.classList.remove('d-none');
            }

            detailPanel.classList.remove('d-none');
            detailPanel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        }

        document.querySelectorAll('.cal-day--has-logs').forEach(function(cell) {
            cell.addEventListener('click', function() {
                var dateStr = this.dataset.date;
                if (!(calDetail[dateStr] || []).length) return;
                var idx = selectedDates.indexOf(dateStr);
                if (idx !== -1) {
                    selectedDates.splice(idx, 1);
                    this.classList.remove('cal-day--selected');
                } else {
                    selectedDates.push(dateStr);
                    this.classList.add('cal-day--selected');
                }
                updateDetailPanel();
            });
        });

        clearBtn.addEventListener('click', function() {
            selectedDates = [];
            document.querySelectorAll('.cal-day--selected').forEach(function(c) { c.classList.remove('cal-day--selected'); });
            detailPanel.classList.add('d-none');
            if (detailFooter) detailFooter.classList.add('d-none');
        });
    })();
    </script>


    {% else %}
    {# =============================================================== #}
    {# === LIST VIEW (TABLE) === #}
    {# =============================================================== #}
    <div class="card">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th scope="col" class="ps-4">Date</th>
                            <th scope="col">Project</th>
                            <th scope="col">Workers</th>
                            <th scope="col">Overtime</th>
                            <th scope="col">Status</th>
                            {% if is_admin %}<th scope="col">Amount</th>{% endif %}
                            <th scope="col" class="pe-4">Supervisor</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for log in logs %}
                        <tr>
                            <td class="ps-4 align-middle">{{ log.date }}</td>
                            <td class="align-middle"><strong>{{ log.project.name }}</strong></td>
                            <td class="align-middle">
                                {% if filtered_worker_obj %}
                                    <span class="badge rounded-pill fw-normal" style="background: var(--bg-inset); color: var(--text-primary); border: 1px solid var(--border-default);">{{ filtered_worker_obj.name }}</span>
                                {% else %}
                                    {% for w in log.workers.all %}
                                        <span class="badge rounded-pill fw-normal me-1 mb-1" style="background: var(--bg-inset); color: var(--text-primary); border: 1px solid var(--border-default);">{{ w.name }}</span>
                                    {% endfor %}
                                    <span class="badge rounded-pill" style="background: var(--text-secondary); color: var(--text-on-accent);">{{ log.workers.count }}</span>
                                {% endif %}
                            </td>
                            <td class="align-middle">
                                {% if log.overtime_amount > 0 %}
                                <span class="badge" style="background: var(--color-warning-bg); color: var(--color-warning);">{{ log.get_overtime_amount_display }}</span>
                                {% else %}
                                <span style="color: var(--text-tertiary);">-</span>
                                {% endif %}
                            </td>
                            <td class="align-middle">
                                {% if log.payroll_records.exists %}
                                <span class="badge bg-success"><i class="fas fa-check me-1"></i>Paid</span>
                                {% else %}
                                <span class="badge bg-danger bg-opacity-75"><i class="fas fa-clock me-1"></i>Unpaid</span>
                                {% endif %}
                            </td>
                            {% if is_admin %}
                            <td class="align-middle">
                                {% if filtered_worker_obj %}
                                    <span class="fw-semibold" style="color: var(--color-success);">R {{ filtered_worker_obj.daily_rate }}</span>
                                {% else %}
                                    <span class="fw-semibold" style="color: var(--color-success);">R {{ log.display_amount }}</span>
                                {% endif %}
                            </td>
                            {% endif %}
                            <td class="pe-4 align-middle">
                                {% if log.supervisor %}
                                    {{ log.supervisor.get_full_name|default:log.supervisor.username }}
                                {% else %}
                                    <span style="color: var(--text-tertiary);">-</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="{% if is_admin %}7{% else %}6{% endif %}" class="text-center py-5" style="color: var(--text-tertiary);">
                                <i class="fas fa-inbox fa-2x mb-3 d-block"></i>
                                No work history found.
                                {% if selected_worker or selected_project or selected_status %}
                                <br><small>Try adjusting your filters.</small>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {% endif %}

</div>
{% endblock %}