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

{% block title %}Dashboard | FoxFitt{% endblock %}

{% block content %}
<style>
    {# Hide resource rows — needs !important to override Bootstrap's d-flex !important #}
    .resource-hidden { display: none !important; }
</style>
<!-- Gradient Header -->
<div class="dashboard-header mb-5 rounded shadow-sm p-4 d-flex justify-content-between align-items-center">
    <div>
        <h1 class="h3 mb-0 text-white" style="font-family: 'Poppins', sans-serif;">Dashboard</h1>
        <p class="text-white-50 mb-0">Welcome back, {{ user.first_name|default:user.username }}!</p>
    </div>
    <a href="{% url 'attendance_log' %}" class="btn btn-accent shadow-sm">
        <i class="fas fa-plus fa-sm me-1"></i> Log Daily Work
    </a>
</div>

<div class="container py-2" style="margin-top: -3rem;">
    {% if is_admin %}
    <!-- Admin View -->
    <div class="row g-4 mb-4 position-relative">
        <!-- Outstanding Payments Card -->
        <!-- Shows the total owed to workers, with a breakdown of wages vs adjustments -->
        <div class="col-xl-3 col-md-6">
            <div class="card stat-card h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col me-2">
                            <div class="text-xs font-weight-bold text-uppercase mb-1" style="color: #ef4444;">
                                Outstanding Payments</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">R {{ outstanding_payments|floatformat:2 }}</div>
                            {# === BREAKDOWN — only shown when there are pending adjustments === #}
                            {% if pending_adjustments_add or pending_adjustments_sub %}
                            <div class="mt-2 pt-2 border-top" style="font-size: 0.75rem; color: #64748b;">
                                <div class="d-flex justify-content-between">
                                    <span>Unpaid wages</span>
                                    <span>R {{ unpaid_wages|floatformat:2 }}</span>
                                </div>
                                {% if pending_adjustments_add %}
                                <div class="d-flex justify-content-between">
                                    <span>+ Additions</span>
                                    <span class="text-success">R {{ pending_adjustments_add|floatformat:2 }}</span>
                                </div>
                                {% endif %}
                                {% if pending_adjustments_sub %}
                                <div class="d-flex justify-content-between">
                                    <span>- Deductions</span>
                                    <span class="text-danger">-R {{ pending_adjustments_sub|floatformat:2 }}</span>
                                </div>
                                {% endif %}
                            </div>
                            {% endif %}
                            <div class="mt-1" style="font-size: 0.65rem; color: #94a3b8;">
                                <i class="fas fa-info-circle"></i> Loan repayments deducted at payment time
                            </div>
                        </div>
                        <div class="col-auto align-self-start">
                            <i class="fas fa-exclamation-circle fa-2x text-danger opacity-50"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Paid This Month Card -->
        <div class="col-xl-3 col-md-6">
            <div class="card stat-card h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col me-2">
                            <div class="text-xs font-weight-bold text-uppercase mb-1" style="color: #10b981;">
                                Paid This Month</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">R {{ paid_this_month|floatformat:2 }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-check-circle fa-2x text-success opacity-50"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Active Loans Card -->
        <div class="col-xl-3 col-md-6">
            <div class="card stat-card h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col me-2">
                            <div class="text-xs font-weight-bold text-uppercase mb-1" style="color: #f59e0b;">
                                Active Loans ({{ active_loans_count }})</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">R {{ active_loans_balance|floatformat:2 }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-hand-holding-usd fa-2x text-warning opacity-50"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Outstanding by Project -->
        <div class="col-xl-3 col-md-6">
            <div class="card stat-card h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col me-2">
                            <div class="text-xs font-weight-bold text-uppercase mb-1" style="color: #3b82f6;">
                                Outstanding by Project</div>
                            <div class="mb-0 text-gray-800" style="font-size: 0.85rem;">
                                {% if outstanding_by_project %}
                                    <ul class="list-unstyled mb-0">
                                    {% for proj, amount in outstanding_by_project.items %}
                                        <li><strong>{{ proj }}:</strong> R {{ amount|floatformat:2 }}</li>
                                    {% endfor %}
                                    </ul>
                                {% else %}
                                    <span class="text-muted">None</span>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-chart-pie fa-2x text-primary opacity-50"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions and This Week -->
    <div class="row mb-4">
        <!-- This Week -->
        <div class="col-lg-4 mb-4 mb-lg-0">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-header py-3 bg-white">
                    <h6 class="m-0 font-weight-bold" style="color: #0f172a;">This Week Summary</h6>
                </div>
                <div class="card-body text-center d-flex flex-column justify-content-center">
                    <div class="h1 mb-0 font-weight-bold text-primary">{{ this_week_logs }}</div>
                    <div class="text-muted">Work Logs Created This Week</div>
                </div>
            </div>
        </div>
        
        <!-- Quick Actions -->
        <div class="col-lg-8">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-header py-3 bg-white">
                    <h6 class="m-0 font-weight-bold" style="color: #0f172a;">Quick Actions</h6>
                </div>
                <div class="card-body d-flex align-items-center justify-content-around flex-wrap">
                    <a href="{% url 'attendance_log' %}" class="btn btn-lg btn-outline-primary mb-2">
                        <i class="fas fa-clipboard-list mb-2 d-block fa-2x"></i> Log Work
                    </a>
                    <a href="{% url 'payroll_dashboard' %}" class="btn btn-lg btn-outline-success mb-2">
                        <i class="fas fa-money-check-alt mb-2 d-block fa-2x"></i> Run Payroll
                    </a>
                    <a href="{% url 'work_history' %}" class="btn btn-lg btn-outline-secondary mb-2">
                        <i class="fas fa-history mb-2 d-block fa-2x"></i> View History
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Recent Activity -->
        <div class="col-lg-6 mb-4">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-header py-3 bg-white">
                    <h6 class="m-0 font-weight-bold" style="color: #0f172a;">Recent Activity</h6>
                </div>
                <div class="card-body p-0">
                    <div class="list-group list-group-flush">
                        {% for log in recent_activity %}
                        <div class="list-group-item px-4 py-3">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-1">{{ log.project.name }}</h6>
                                    <small class="text-muted">{{ log.date }} &middot; {{ log.workers.count }} workers</small>
                                </div>
                                <span class="badge bg-light text-dark border">{{ log.supervisor.username }}</span>
                            </div>
                        </div>
                        {% empty %}
                        <div class="p-4 text-center text-muted">
                            No recent activity.
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Manage Resources -->
        <div class="col-lg-6 mb-4">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-header py-3 bg-white d-flex justify-content-between align-items-center">
                    <h6 class="m-0 font-weight-bold" style="color: #0f172a;">Manage Resources</h6>
                    <a href="{% url 'export_workers_csv' %}" class="btn btn-outline-success btn-sm">
                        <i class="fas fa-file-csv me-1"></i> Export Workers
                    </a>
                </div>
                <div class="card-body p-0">
                    <p class="text-muted small mb-0 px-3 pt-3">Toggle active status. Inactive items are hidden from forms.</p>

                    <ul class="nav nav-tabs px-3 pt-2" id="resourceTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="workers-tab" data-bs-toggle="tab" data-bs-target="#workers" type="button" role="tab" aria-selected="true">Workers</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="projects-tab" data-bs-toggle="tab" data-bs-target="#projects" type="button" role="tab" aria-selected="false">Projects</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="teams-tab" data-bs-toggle="tab" data-bs-target="#teams" type="button" role="tab" aria-selected="false">Teams</button>
                        </li>
                    </ul>

                    {# Filter bar — Active / Inactive / All (defaults to Active) #}
                    <div class="btn-group btn-group-sm w-100 px-3 mt-2" id="resourceFilter" role="group">
                        <button type="button" class="btn btn-outline-secondary active" data-filter="active">Active</button>
                        <button type="button" class="btn btn-outline-secondary" data-filter="inactive">Inactive</button>
                        <button type="button" class="btn btn-outline-secondary" data-filter="all">All</button>
                    </div>

                    <div class="tab-content px-0 mt-2" id="resourceTabsContent" style="max-height: 350px; overflow-y: auto;">

                        {# === WORKERS TAB === #}
                        <div class="tab-pane fade show active" id="workers" role="tabpanel">
                            {% for item in workers %}
                            <div class="resource-row d-flex justify-content-between align-items-center py-2 px-3 border-bottom {% if not item.active %}resource-hidden{% endif %}" data-active="{% if item.active %}true{% else %}false{% endif %}">
                                <strong class="small">{{ item.name }}</strong>
                                <div class="form-check form-switch">
                                    <input class="form-check-input toggle-active" type="checkbox" role="switch" data-type="worker" data-id="{{ item.id }}" {% if item.active %}checked{% endif %}>
                                </div>
                            </div>
                            {% empty %}
                            <p class="text-muted small px-3 py-2">No workers found.</p>
                            {% endfor %}
                            <p class="text-muted small text-center mt-2 resource-empty" style="display:none;">No matching items.</p>
                        </div>

                        {# === PROJECTS TAB === #}
                        <div class="tab-pane fade" id="projects" role="tabpanel">
                            {% for item in projects %}
                            <div class="resource-row d-flex justify-content-between align-items-center py-2 px-3 border-bottom {% if not item.active %}resource-hidden{% endif %}" data-active="{% if item.active %}true{% else %}false{% endif %}">
                                <strong class="small">{{ item.name }}</strong>
                                <div class="form-check form-switch">
                                    <input class="form-check-input toggle-active" type="checkbox" role="switch" data-type="project" data-id="{{ item.id }}" {% if item.active %}checked{% endif %}>
                                </div>
                            </div>
                            {% empty %}
                            <p class="text-muted small px-3 py-2">No projects found.</p>
                            {% endfor %}
                            <p class="text-muted small text-center mt-2 resource-empty" style="display:none;">No matching items.</p>
                        </div>

                        {# === TEAMS TAB === #}
                        <div class="tab-pane fade" id="teams" role="tabpanel">
                            {% for item in teams %}
                            <div class="resource-row d-flex justify-content-between align-items-center py-2 px-3 border-bottom {% if not item.active %}resource-hidden{% endif %}" data-active="{% if item.active %}true{% else %}false{% endif %}">
                                <strong class="small">{{ item.name }}</strong>
                                <div class="form-check form-switch">
                                    <input class="form-check-input toggle-active" type="checkbox" role="switch" data-type="team" data-id="{{ item.id }}" {% if item.active %}checked{% endif %}>
                                </div>
                            </div>
                            {% empty %}
                            <p class="text-muted small px-3 py-2">No teams found.</p>
                            {% endfor %}
                            <p class="text-muted small text-center mt-2 resource-empty" style="display:none;">No matching items.</p>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    {% else %}
    <!-- Supervisor View -->
    <!-- Stat Cards — how many projects, teams, and workers this supervisor manages -->
    <div class="row g-4 mb-4 position-relative">
        <div class="col-md-4">
            <div class="card stat-card h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col me-2">
                            <div class="text-xs font-weight-bold text-uppercase mb-1" style="color: #8b5cf6;">
                                My Projects</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ my_projects_count }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-project-diagram fa-2x opacity-50" style="color: #8b5cf6;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card stat-card h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col me-2">
                            <div class="text-xs font-weight-bold text-uppercase mb-1" style="color: #3b82f6;">
                                My Teams</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ my_teams_count }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-users fa-2x opacity-50" style="color: #3b82f6;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card stat-card h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col me-2">
                            <div class="text-xs font-weight-bold text-uppercase mb-1" style="color: #10b981;">
                                My Workers</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ my_workers_count }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-hard-hat fa-2x opacity-50" style="color: #10b981;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- This Week + Recent Activity -->
    <div class="row mb-4">
        <div class="col-lg-4 mb-4 mb-lg-0">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-header py-3 bg-white">
                    <h6 class="m-0 fw-bold" style="color: #0f172a;">This Week Summary</h6>
                </div>
                <div class="card-body text-center d-flex flex-column justify-content-center">
                    <div class="h1 mb-0 fw-bold text-primary">{{ this_week_logs }}</div>
                    <div class="text-muted">Work Logs Created This Week</div>
                </div>
            </div>
        </div>
        <div class="col-lg-8">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-header py-3 bg-white">
                    <h6 class="m-0 fw-bold" style="color: #0f172a;">Recent Activity</h6>
                </div>
                <div class="card-body p-0">
                    <div class="list-group list-group-flush">
                        {% for log in recent_activity %}
                        <div class="list-group-item px-4 py-3">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-1">{{ log.project.name }}</h6>
                                    <small class="text-muted">{{ log.date }} &middot; {{ log.workers.count }} workers</small>
                                </div>
                            </div>
                        </div>
                        {% empty %}
                        <div class="p-4 text-center text-muted">
                            <i class="fas fa-inbox fa-2x mb-2 d-block opacity-50"></i>
                            No recent activity.
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>



<script>
document.addEventListener('DOMContentLoaded', function() {

    // === RESOURCE FILTER (Active / Inactive / All) ===
    // Hides/shows resource rows based on their data-active attribute.
    // Starts on "Active" so only current items are visible by default.
    var currentFilter = 'active';
    var filterBtns = document.querySelectorAll('#resourceFilter button');

    function applyFilter() {
        // Use the resource-hidden CLASS (not inline display:none) because
        // Bootstrap's d-flex has !important which overrides inline styles.
        // Our .resource-hidden also has !important, so it wins.
        document.querySelectorAll('.resource-row').forEach(function(row) {
            var isActive = row.dataset.active === 'true';
            var show = false;
            if (currentFilter === 'all') show = true;
            else if (currentFilter === 'active') show = isActive;
            else if (currentFilter === 'inactive') show = !isActive;
            if (show) {
                row.classList.remove('resource-hidden');
            } else {
                row.classList.add('resource-hidden');
            }
        });
        // Show "No matching items" if a tab has rows but none are visible
        document.querySelectorAll('.tab-pane').forEach(function(pane) {
            var rows = pane.querySelectorAll('.resource-row');
            var visibleRows = Array.from(rows).filter(function(r) { return !r.classList.contains('resource-hidden'); });
            var emptyMsg = pane.querySelector('.resource-empty');
            if (emptyMsg) {
                emptyMsg.style.display = (rows.length > 0 && visibleRows.length === 0) ? '' : 'none';
            }
        });
    }

    filterBtns.forEach(function(btn) {
        btn.addEventListener('click', function() {
            filterBtns.forEach(function(b) { b.classList.remove('active'); });
            this.classList.add('active');
            currentFilter = this.dataset.filter;
            applyFilter();
        });
    });

    // Apply filter on page load (shows only active by default)
    applyFilter();

    // === TOGGLE HANDLER ===
    // When a toggle switch is flipped, POST to the server to update active status.
    // On success, update the row's data-active attribute and re-apply the filter
    // so the row moves to the correct section immediately.
    var toggleSwitches = document.querySelectorAll('.toggle-active');

    toggleSwitches.forEach(function(switchEl) {
        switchEl.addEventListener('change', function() {
            var type = this.getAttribute('data-type');
            var id = this.getAttribute('data-id');
            var isChecked = this.checked;
            var row = this.closest('.resource-row');

            fetch('/toggle/' + type + '/' + id + '/', {
                method: 'POST',
                headers: {
                    'X-CSRFToken': '{{ csrf_token }}',
                    'Content-Type': 'application/json'
                }
            })
            .then(function(response) {
                if (!response.ok) throw new Error('Network error');
                return response.json();
            })
            .then(function(data) {
                if (data.status === 'success') {
                    // Update the row's data-active and re-apply filter
                    row.dataset.active = isChecked ? 'true' : 'false';
                    applyFilter();
                } else {
                    switchEl.checked = !isChecked;
                    alert('Error updating status.');
                }
            })
            .catch(function(error) {
                switchEl.checked = !isChecked;
                alert('Error updating status.');
            });
        });
    });
});
</script>

{% endblock %}