<!-- templates/staff/dashboard.html -->
{% extends 'base.html' %}
{% load static %}

{% block title %}Staff Dashboard - Rapha-Bethel BNPS{% endblock %}

{% block extra_css %}
<style>
    .stat-card {
        transition: transform 0.3s, box-shadow 0.3s;
        border-radius: 10px;
        overflow: hidden;
    }
    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    }
    .stat-icon {
        font-size: 2.5rem;
        opacity: 0.8;
    }
    .stat-number {
        font-size: 2rem;
        font-weight: bold;
        color: #333;
    }
    .stat-label {
        color: #666;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .role-badge {
        position: absolute;
        top: 15px;
        right: 15px;
    }
    .welcome-section {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 30px;
        border-radius: 15px;
        margin-bottom: 25px;
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
    }
    .quick-action-card {
        background: white;
        border-radius: 10px;
        padding: 20px;
        text-align: center;
        transition: all 0.3s;
        cursor: pointer;
        border: 1px solid #e9ecef;
    }
    .quick-action-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        border-color: #4CAF50;
    }
    .quick-action-icon {
        font-size: 2rem;
        color: #4CAF50;
        margin-bottom: 10px;
    }
    .activity-timeline {
        max-height: 400px;
        overflow-y: auto;
        padding-right: 10px;
    }
    .timeline-item {
        padding: 15px;
        border-left: 3px solid #4CAF50;
        margin-bottom: 15px;
        background: #f8f9fc;
        border-radius: 0 8px 8px 0;
    }
    .timeline-time {
        font-size: 0.8rem;
        color: #6c757d;
        margin-bottom: 5px;
    }
    .timeline-title {
        font-weight: 600;
        margin-bottom: 5px;
    }
    .timeline-text {
        font-size: 0.9rem;
        color: #6c757d;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Welcome Section -->
    <div class="welcome-section d-flex justify-content-between align-items-center">
        <div>
            <h2 class="mb-2">
                Welcome back, 
                {% if request.user.staff_profile %}
                    {{ request.user.staff_profile.user.get_full_name }}
                {% else %}
                    {{ request.user.get_full_name }}
                {% endif %}
            </h2>
            <p class="mb-0">
                <i class="fas fa-calendar-alt me-2"></i> {{ current_date|date:"l, F d, Y" }}
            </p>
        </div>
        <div class="text-end">
            <span class="badge bg-white text-primary p-3">
                <i class="fas fa-clock me-2"></i> {{ current_time|time:"h:i A" }}
            </span>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="row">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card stat-card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="stat-label text-primary font-weight-bold mb-1">
                                TOTAL STAFF
                            </div>
                            <div class="stat-number mb-0">{{ total_staff|default:"0" }}</div>
                            <div class="text-muted small mt-2">
                                <i class="fas fa-user-check text-success me-1"></i> {{ active_staff|default:"0" }} Active
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-users stat-icon text-primary"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card stat-card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="stat-label text-success font-weight-bold mb-1">
                                TEACHERS
                            </div>
                            <div class="stat-number mb-0">{{ teachers_count|default:"0" }}</div>
                            <div class="text-muted small mt-2">
                                <i class="fas fa-chalkboard-teacher text-info me-1"></i> {{ class_teachers|default:"0" }} Class Teachers
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-chalkboard-teacher stat-icon text-success"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card stat-card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="stat-label text-info font-weight-bold mb-1">
                                PENDING LEAVE
                            </div>
                            <div class="stat-number mb-0">{{ pending_leaves|default:"0" }}</div>
                            <div class="text-muted small mt-2">
                                <i class="fas fa-check-circle text-success me-1"></i> {{ approved_leaves|default:"0" }} Approved
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-calendar-alt stat-icon text-info"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card stat-card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="stat-label text-warning font-weight-bold mb-1">
                                TODAY'S ATTENDANCE
                            </div>
                            <div class="stat-number mb-0">{{ today_attendance|default:"0" }}</div>
                            <div class="text-muted small mt-2">
                                <i class="fas fa-clock text-warning me-1"></i> {{ present_percent|default:"0" }}% Present
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-clock stat-icon text-warning"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Dashboard Type Specific Content -->
    {% if dashboard_type == 'proprietor' %}
    <!-- Proprietor Dashboard -->
    <div class="row">
        <div class="col-lg-6 mb-4">
            <div class="card shadow">
                <div class="card-header py-3 d-flex justify-content-between align-items-center">
                    <h6 class="m-0 font-weight-bold text-primary">School Overview</h6>
                    <a href="{% url 'admin:index' %}" class="btn btn-sm btn-primary">Manage</a>
                </div>
                <div class="card-body">
                    <canvas id="schoolChart" height="200"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-6 mb-4">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Quick Stats</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-6 mb-3">
                            <div class="p-3 bg-light rounded text-center">
                                <h4>{{ total_students|default:"0" }}</h4>
                                <small>Total Students</small>
                            </div>
                        </div>
                        <div class="col-6 mb-3">
                            <div class="p-3 bg-light rounded text-center">
                                <h4>{{ total_classes|default:"0" }}</h4>
                                <small>Total Classes</small>
                            </div>
                        </div>
                        <div class="col-6 mb-3">
                            <div class="p-3 bg-light rounded text-center">
                                <h4>{{ monthly_revenue|default:"0" }} XAF</h4>
                                <small>Monthly Revenue</small>
                            </div>
                        </div>
                        <div class="col-6 mb-3">
                            <div class="p-3 bg-light rounded text-center">
                                <h4>{{ pending_invoices|default:"0" }}</h4>
                                <small>Pending Invoices</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% elif dashboard_type == 'head' %}
    <!-- Head Teacher Dashboard -->
    <div class="row">
        <div class="col-lg-7 mb-4">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ department_name }} Section - Recent Activity</h6>
                </div>
                <div class="card-body">
                    <div class="activity-timeline">
                        {% for activity in recent_activities %}
                        <div class="timeline-item">
                            <div class="timeline-time">{{ activity.timestamp|timesince }} ago</div>
                            <div class="timeline-title">{{ activity.title }}</div>
                            <div class="timeline-text">{{ activity.description }}</div>
                        </div>
                        {% empty %}
                        <p class="text-muted text-center py-3">No recent activity</p>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-5 mb-4">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Quick Actions</h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{% url 'students:student_add' %}" class="btn btn-outline-primary text-start">
                            <i class="fas fa-user-plus me-2"></i> Add New Student
                        </a>
                        <a href="{% url 'staff:staff_add' %}" class="btn btn-outline-success text-start">
                            <i class="fas fa-chalkboard-teacher me-2"></i> Add New Teacher
                        </a>
                        <a href="{% url 'attendance:mark_attendance' %}" class="btn btn-outline-info text-start">
                            <i class="fas fa-clipboard-check me-2"></i> Mark Attendance
                        </a>
                        <a href="{% url 'reports:attendance_report' %}" class="btn btn-outline-warning text-start">
                            <i class="fas fa-chart-bar me-2"></i> View Reports
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% elif dashboard_type == 'teacher' %}
    <!-- Teacher Dashboard -->
    <div class="row">
        <div class="col-lg-6 mb-4">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">My Classes</h6>
                </div>
                <div class="card-body">
                    <div class="list-group">
                        {% for class in my_classes %}
                        <a href="{% url 'academics:class_detail' class.id %}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                            {{ class.name }}
                            <span class="badge bg-primary rounded-pill">{{ class.student_count }}</span>
                        </a>
                        {% empty %}
                        <p class="text-muted text-center py-3">No classes assigned</p>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 mb-4">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Today's Tasks</h6>
                </div>
                <div class="card-body">
                    <div class="list-group">
                        <div class="list-group-item d-flex justify-content-between align-items-center">
                            Mark Attendance
                            <a href="{% url 'attendance:mark_attendance' %}" class="btn btn-sm btn-primary">Go</a>
                        </div>
                        <div class="list-group-item d-flex justify-content-between align-items-center">
                            Check Schedule
                            <a href="#" class="btn btn-sm btn-outline-secondary">View</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% else %}
    <!-- Default Staff Dashboard -->
    <div class="row">
        <div class="col-lg-8 mb-4">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">My Information</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <p><strong>Employee ID:</strong> {{ request.user.staff_profile.employee_id }}</p>
                            <p><strong>Role:</strong> {{ request.user.staff_profile.get_role_display }}</p>
                            <p><strong>Department:</strong> {{ request.user.staff_profile.get_department_display }}</p>
                        </div>
                        <div class="col-md-6">
                            <p><strong>Phone:</strong> {{ request.user.staff_profile.phone_number }}</p>
                            <p><strong>Email:</strong> {{ request.user.email }}</p>
                            <p><strong>Hire Date:</strong> {{ request.user.staff_profile.hire_date }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 mb-4">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Quick Links</h6>
                </div>
                <div class="card-body">
                    <div class="list-group">
                        <a href="{% url 'staff:staff_edit' request.user.staff_profile.pk %}" class="list-group-item list-group-item-action">
                            <i class="fas fa-edit me-2"></i> Edit Profile
                        </a>
                        <a href="{% url 'staff:leave_add' %}" class="list-group-item list-group-item-action">
                            <i class="fas fa-calendar-plus me-2"></i> Request Leave
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Recent Activity (Common for all) -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Recent Activity</h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Time</th>
                                    <th>User</th>
                                    <th>Action</th>
                                    <th>Details</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for activity in recent_activities %}
                                <tr>
                                    <td>{{ activity.timestamp|timesince }} ago</td>
                                    <td>{{ activity.user }}</td>
                                    <td>{{ activity.action }}</td>
                                    <td>{{ activity.details }}</td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="4" class="text-center py-3">No recent activity</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // School Overview Chart (for proprietor)
    const schoolCtx = document.getElementById('schoolChart');
    if (schoolCtx) {
        new Chart(schoolCtx, {
            type: 'bar',
            data: {
                labels: ['Students', 'Staff', 'Classes', 'Parents'],
                datasets: [{
                    label: 'Counts',
                    data: [
                        {{ total_students|default:0 }},
                        {{ total_staff|default:0 }},
                        {{ total_classes|default:0 }},
                        {{ total_parents|default:0 }}
                    ],
                    backgroundColor: [
                        'rgba(76, 175, 80, 0.2)',
                        'rgba(33, 150, 243, 0.2)',
                        'rgba(255, 193, 7, 0.2)',
                        'rgba(156, 39, 176, 0.2)'
                    ],
                    borderColor: [
                        'rgba(76, 175, 80, 1)',
                        'rgba(33, 150, 243, 1)',
                        'rgba(255, 193, 7, 1)',
                        'rgba(156, 39, 176, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            precision: 0
                        }
                    }
                },
                responsive: true,
                maintainAspectRatio: false
            }
        });
    }
});
</script>
{% endblock %}