{% extends "base.html" %}

{% block title %}Dashboard | MediHR HRMS{% endblock %}

{% block content %}
<div class="top-bar">
    <div>
        <h1 class="h4 fw-bold mb-1">General Dashboard</h1>
        <p class="text-muted small mb-0">Overview of today's workplace activity.</p>
    </div>
    <div class="date-badge">
        <div class="d-flex align-items-center">
            <i class="far fa-calendar-alt me-2 text-primary"></i>
            <span>{{ current_time|date:"D, d M Y" }} AD</span>
        </div>
        <div class="vr"></div>
        <div class="d-flex align-items-center">
            <i class="fas fa-calendar-day me-2 text-warning"></i>
            <span>{{ nepali_date }}</span>
        </div>
    </div>
</div>

<!-- Stats Overview -->
<div class="row g-4 mb-4">
    <div class="col-md-3">
        <div class="stat-card">
            <div class="card-icon icon-blue">
                <i class="fas fa-users"></i>
            </div>
            <h6 class="text-muted small fw-bold text-uppercase mb-1">Total Staff</h6>
            <h3 class="fw-bold mb-0">{{ total_employees }}</h3>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <div class="card-icon icon-green">
                <i class="fas fa-user-check"></i>
            </div>
            <h6 class="text-muted small fw-bold text-uppercase mb-1">Present Today</h6>
            <h3 class="fw-bold mb-0 text-success">{{ present_today|default:"0" }}</h3>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <div class="card-icon icon-orange">
                <i class="fas fa-user-clock"></i>
            </div>
            <h6 class="text-muted small fw-bold text-uppercase mb-1">Late Arrivals</h6>
            <h3 class="fw-bold mb-0 text-warning">{{ late_today|default:"0" }}</h3>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <div class="card-icon icon-red">
                <i class="fas fa-calendar-times"></i>
            </div>
            <h6 class="text-muted small fw-bold text-uppercase mb-1">On Leave</h6>
            <h3 class="fw-bold mb-0 text-danger">{{ on_leave_today|default:"0" }}</h3>
        </div>
    </div>
</div>

<div class="row g-4 mb-4">
    <!-- Attendance Table -->
    <div class="col-lg-8">
        <div class="section-header d-flex justify-content-between align-items-center mb-3">
            <h5 class="fw-bold mb-0">Recent Attendance Logs</h5>
            <a href="#" class="btn btn-sm btn-outline-primary rounded-pill">View All</a>
        </div>
        <div class="table-card">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead>
                        <tr>
                            <th>Employee</th>
                            <th>Time</th>
                            <th>Status</th>
                            <th>Worked Hours</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for record in recent_attendance %}
                        <tr>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="rounded-circle bg-light d-flex align-items-center justify-content-center me-3" style="width: 32px; height: 32px; font-weight: 600; font-size: 0.75rem">
                                        {{ record.employee.first_name|first }}{{ record.employee.last_name|first }}
                                    </div>
                                    <div>
                                        <div class="fw-bold">{{ record.employee.first_name }} {{ record.employee.last_name }}</div>
                                        <div class="text-muted small">{{ record.employee.department.name }}</div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="fw-500">{{ record.check_in|time:"H:i" }}</div>
                                <div class="text-muted small">{{ record.date|date:"d M Y" }}</div>
                            </td>
                            <td>
                                <span class="status-pill badge-{{ record.status }}">
                                    {{ record.get_status_display }}
                                </span>
                            </td>
                            <td>{{ record.worked_hours }}h</td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="4" class="text-center py-5 text-muted">
                                <i class="fas fa-info-circle mb-2 d-block fa-2x"></i>
                                No attendance records found for today.
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Quick Actions & Pending Leaves -->
    <div class="col-lg-4">
        <div class="section-header mb-3">
            <h5 class="fw-bold mb-0">Pending Requests</h5>
        </div>
        <div class="stat-card mb-4">
            {% for leave in pending_leaves %}
            <div class="d-flex align-items-center mb-3 pb-3 border-bottom last-child-no-border">
                <div class="rounded-circle bg-primary-subtle p-2 me-3">
                    <i class="fas fa-file-alt text-primary"></i>
                </div>
                <div class="flex-grow-1">
                    <div class="fw-bold small">{{ leave.employee.first_name }} {{ leave.employee.last_name }}</div>
                    <div class="text-muted extra-small">{{ leave.leave_type.name }} • {{ leave.start_date }}</div>
                </div>
                <div>
                    <a href="/admin/core/leaverequest/{{ leave.id }}/change/" class="btn btn-sm btn-light border">Review</a>
                </div>
            </div>
            {% empty %}
            <div class="text-center py-4 text-muted small">
                All caught up! No pending requests.
            </div>
            {% endfor %}
        </div>

        <div class="section-header mb-3">
            <h5 class="fw-bold mb-0">Quick Actions</h5>
        </div>
        <div class="list-group shadow-sm">
            <a href="/admin/core/employee/add/" class="list-group-item list-group-item-action py-3">
                <i class="fas fa-user-plus me-2 text-primary"></i> Register New Staff
            </a>
            <a href="/admin/core/leaverequest/add/" class="list-group-item list-group-item-action py-3">
                <i class="fas fa-calendar-plus me-2 text-success"></i> Apply Leave
            </a>
            <button class="list-group-item list-group-item-action py-3 text-start" onclick="location.reload()">
                <i class="fas fa-sync me-2 text-info"></i> Sync Device Logs
            </button>
        </div>
    </div>
</div>

<style>
    .extra-small { font-size: 0.75rem; }
    .last-child-no-border:last-child { border-bottom: none !important; }
</style>
{% endblock %}
