{% extends 'portal_base.html' %}
{% load static i18n %}

{% block title %}{% trans "Agency Dashboard" %} - ATS{% endblock %}
{% block customCSS %}
<style>
   :root {
        --kaauh-teal: #00636e;
        --kaauh-teal-dark: #004a53;
        --kaauh-border: #eaeff3;
        --kaauh-primary-text: #343a40;
        --kaauh-success: #28a745;
        --kaauh-info: #17a2b8;
        --kaauh-danger: #dc3545;
        --kaauh-warning: #ffc107;
    }

    .kaauh-card {
        border: 1px solid var(--kaauh-border);
        border-radius: 0.75rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.06);
        background-color: white;
    }

    .btn-main-action {
        background-color: var(--kaauh-teal);
        border-color: var(--kaauh-teal);
        color: white;
        font-weight: 600;
        transition: all 0.2s ease;
    }
    .btn-main-action:hover {
        background-color: var(--kaauh-teal-dark);
        border-color: var(--kaauh-teal-dark);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
</style>
{% endblock%}
{% block content %}
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div class="px-2 py-2">
            <h1 class="h3 mb-1" style="color: var(--kaauh-teal-dark); font-weight: 700;">
                <i class="fas fa-tachometer-alt me-2"></i>
                {% trans "Agency Dashboard" %}
            </h1>
            <p class="text-muted mb-0">
                {% trans "Welcome back" %}, {{ agency.name }}!
            </p>
        </div>
        <div>
            {% comment %} <a href="{% url 'agency_portal_submit_application' %}" class="btn btn-main-action me-2">
                <i class="fas fa-user-plus me-1"></i> {% trans "Submit Application" %}
            </a>
            <a href="#" class="btn btn-outline-secondary position-relative">
                <i class="fas fa-envelope me-1"></i> {% trans "Messages" %}
                {% if total_unread_messages > 0 %}
                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                    {{ total_unread_messages }}
                </span>
                {% endif %}
            </a> {% endcomment %}
        </div>
    </div>

    <!-- Overview Statistics -->
    <div class="row mb-4">
        <div class="col-md-3 mb-2">
            <div class="kaauh-card shadow-sm h-100">
                <div class="card-body text-center px-2 py-2">
                    <div class="text-primary mb-2">
                        <i class="fas fa-briefcase fa-2x"></i>
                    </div>
                    <h4 class="card-title">{{ total_assignments }}</h4>
                    <p class="card-text text-muted">{% trans "Total Assignments" %}</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-2">
            <div class="kaauh-card shadow-sm h-100 px-2 py-2">
                <div class="card-body text-center">
                    <div class="text-success mb-2">
                        <i class="fas fa-check-circle fa-2x"></i>
                    </div>
                    <h4 class="card-title">{{ active_assignments }}</h4>
                    <p class="card-text text-muted">{% trans "Active Assignments" %}</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-2">
            <div class="kaauh-card shadow-sm h-100 px-2 py-2">
                <div class="card-body text-center">
                    <div class="text-info mb-2">
                        <i class="fas fa-users fa-2x"></i>
                    </div>
                    <h4 class="card-title">{{ total_applications }}</h4>
                    <p class="card-text text-muted">{% trans "Total Applications" %}</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-2">
            <div class="kaauh-card shadow-sm h-100 px-2 py-2">
                <div class="card-body text-center">
                    <div class="text-warning mb-2">
                        <i class="fas fa-envelope fa-2x"></i>
                    </div>
                    <h4 class="card-title">{{ total_unread_messages }}</h4>
                    <p class="card-text text-muted">{% trans "Unread Messages" %}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Job Assignments List -->
    <div class="kaauh-card shadow-sm px-3 py-3">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h5 class="card-title mb-0">
                    <i class="fas fa-tasks me-2"></i>
                    {% trans "Your Job Assignments" %}
                </h5>
                <span class="badge bg-secondary">{{ assignment_stats|length }} {% trans "assignments" %}</span>
            </div>

            {% if assignment_stats %}
                <div class="row">
                    {% for stats in assignment_stats %}
                    <div class="col-lg-6 col-xl-4 mb-4">
                        <div class="card h-100 border-0 shadow-sm assignment-card">
                            <div class="card-body">
                                <!-- Assignment Header -->
                                <div class="d-flex justify-content-between align-items-start mb-3">
                                    <div class="flex-grow-1">
                                        <h6 class="card-title mb-1">
                                            <a href="{% url 'agency_portal_assignment_detail' stats.assignment.slug %}"
                                               class="text-decoration-none text-dark">
                                                {{ stats.assignment.job.title }}
                                            </a>
                                        </h6>
                                        <p class="text-muted small mb-2">
                                            <i class="fas fa-building me-1"></i>
                                            {{ stats.assignment.job.department }}
                                        </p>
                                    </div>
                                    <div class="text-end">
                                        {% if stats.is_active %}
                                        <span class="badge bg-success">{% trans "Active" %}</span>
                                        {% elif stats.assignment.status == 'COMPLETED' %}
                                        <span class="badge bg-primary">{% trans "Completed" %}</span>
                                        {% elif stats.assignment.status == 'CANCELLED' %}
                                        <span class="badge bg-danger">{% trans "Cancelled" %}</span>
                                        {% else %}
                                        <span class="badge bg-warning">{% trans "Expired" %}</span>
                                        {% endif %}
                                    </div>
                                </div>

                                <!-- Assignment Details -->
                                <div class="row mb-3">
                                    <div class="col-6">
                                        <small class="text-muted d-block">{% trans "Deadline" %}</small>
                                        <strong class="{% if stats.days_remaining <= 3 %}text-danger{% elif stats.days_remaining <= 7 %}text-warning{% else %}text-success{% endif %}">
                                            {{ stats.assignment.deadline|date:"Y-m-d" }}
                                            {% if stats.days_remaining >= 0 %}
                                            ({{ stats.days_remaining }} {% trans "days left" %})
                                            {% else %}
                                            ({{ stats.days_remaining }} {% trans "days overdue" %})
                                            {% endif %}
                                        </strong>
                                    </div>
                                    <div class="col-6">
                                        <small class="text-muted d-block">{% trans "Applications" %}</small>
                                        <strong>{{ stats.application_count }} / {{ stats.assignment.max_applications }}</strong>
                                    </div>
                                </div>

                                <!-- Progress Bar -->
                                <div class="mb-3">
                                    <div class="d-flex justify-content-between mb-1">
                                        <small class="text-muted">{% trans "Submission Progress" %}</small>
                                        <small class="text-muted">{{ stats.application_count }}/{{ stats.assignment.max_applications }}</small>
                                    </div>
                                    <div class="progress" style="height: 6px;">
                                        {% with progress=stats.application_count %}
                                        <div class="progress-bar {% if progress >= 90 %}bg-danger{% elif progress >= 70 %}bg-warning{% else %}bg-success{% endif %}"
                                             style="width: {{ progress|floatformat:0 }}%"></div>
                                        {% endwith %}
                                    </div>
                                </div>

                                <!-- Action Buttons -->
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        {% if stats.can_submit %}
                                        <a href="{% url 'agency_portal_submit_application_page' stats.assignment.slug %}"
                                           class="btn btn-sm btn-main-action">
                                            <i class="fas fa-user-plus me-1"></i> {% trans "Submit Application" %}
                                        </a>
                                        {% else %}
                                        <button class="btn btn-sm btn-secondary" disabled>
                                            <i class="fas fa-user-plus me-1"></i> {% trans "Submissions Closed" %}
                                        </button>
                                        {% endif %}
                                    </div>
                                    <div>
                                        <a href="{% url 'agency_portal_assignment_detail' stats.assignment.slug %}"
                                           class="btn btn-sm btn-main-action">
                                            <i class="fas fa-eye me-1"></i> {% trans "View Details" %}
                                        </a>
                                        {% if stats.unread_messages > 0 %}
                                        <a href="{% url 'agency_portal_assignment_detail' stats.assignment.slug %}#messages"
                                           class="btn btn-sm btn-outline-warning position-relative">
                                            <i class="fas fa-envelope me-1"></i>
                                            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                                                {{ stats.unread_messages }}
                                            </span>
                                        </a>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            {% else %}
                <div class="text-center py-5">
                    <i class="fas fa-briefcase fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">{% trans "No Job Assignments Found" %}</h5>
                    <p class="text-muted">
                        {% trans "You don't have any job assignments yet. Please contact the administrator if you expect to have assignments." %}
                    </p>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<style>
.assignment-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.assignment-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.assignment-card .card-title a:hover {
    color: var(--kaauh-teal-dark) !important;
}

.progress {
    background-color: #e9ecef;
}

.progress-bar {
    transition: width 0.3s ease;
}
</style>
{% endblock %}

{% block customJS %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-refresh for unread messages count
    setInterval(function() {
        // You could implement a lightweight API call here to check for new messages
        // For now, just refresh the page every 5 minutes
        location.reload();
    }, 300000); // 5 minutes
});
</script>
{% endblock %}