{% extends "layouts/base.html" %}
{% load i18n %}
{% load static %}

{% block title %}Analytics Dashboard - PX360{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="mb-1">
                <i class="bi bi-graph-up text-success me-2"></i>
                Analytics & KPIs
            </h2>
            <p class="text-muted mb-0">Monitor key performance indicators and trends</p>
        </div>
        <div>
            <select class="form-select" onchange="window.location.href='?hospital='+this.value">
                <option value="">All Hospitals</option>
                {% for hospital in hospitals %}
                <option value="{{ hospital.id }}" {% if selected_hospital and selected_hospital.id == hospital.id %}selected{% endif %}>
                    {{ hospital.name_en }}
                </option>
                {% endfor %}
            </select>
        </div>
    </div>

    <!-- KPI Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card border-left-primary">
                <div class="card-body">
                    <h6 class="text-muted mb-1">Total Complaints</h6>
                    <h3 class="mb-0">{{ kpis.total_complaints }}</h3>
                    <small class="text-muted">Open: {{ kpis.open_complaints }}</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-left-danger">
                <div class="card-body">
                    <h6 class="text-muted mb-1">Overdue Complaints</h6>
                    <h3 class="mb-0 text-danger">{{ kpis.overdue_complaints }}</h3>
                    <small class="text-muted">Requires attention</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-left-warning">
                <div class="card-body">
                    <h6 class="text-muted mb-1">Total Actions</h6>
                    <h3 class="mb-0">{{ kpis.total_actions }}</h3>
                    <small class="text-muted">Open: {{ kpis.open_actions }}</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-left-success">
                <div class="card-body">
                    <h6 class="text-muted mb-1">Avg Survey Score</h6>
                    <h3 class="mb-0">{{ kpis.avg_survey_score|floatformat:1 }}/5.0</h3>
                    <small class="text-muted">Negative: {{ kpis.negative_surveys }}</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Department Rankings -->
    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="bi bi-trophy me-2"></i>Top Performing Departments
                    </h5>
                </div>
                <div class="card-body">
                    {% if department_rankings %}
                    <div class="list-group list-group-flush">
                        {% for dept in department_rankings %}
                        <div class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <strong>{{ dept.name_en }}</strong><br>
                                <small class="text-muted">{{ dept.survey_count }} surveys</small>
                            </div>
                            <div class="text-end">
                                <h4 class="mb-0 text-success">{{ dept.avg_score|floatformat:1 }}</h4>
                                <small class="text-muted">Avg Score</small>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <div class="text-center py-5">
                        <i class="bi bi-graph-up" style="font-size: 3rem; color: #ccc;"></i>
                        <p class="text-muted mt-3">No data available</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="bi bi-exclamation-triangle me-2"></i>Areas Needing Attention
                    </h5>
                </div>
                <div class="card-body">
                    <div class="list-group list-group-flush">
                        {% if kpis.overdue_complaints > 0 %}
                        <div class="list-group-item">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <strong class="text-danger">Overdue Complaints</strong><br>
                                    <small class="text-muted">Requires immediate action</small>
                                </div>
                                <h4 class="mb-0 text-danger">{{ kpis.overdue_complaints }}</h4>
                            </div>
                        </div>
                        {% endif %}
                        
                        {% if kpis.overdue_actions > 0 %}
                        <div class="list-group-item">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <strong class="text-warning">Overdue Actions</strong><br>
                                    <small class="text-muted">SLA breached</small>
                                </div>
                                <h4 class="mb-0 text-warning">{{ kpis.overdue_actions }}</h4>
                            </div>
                        </div>
                        {% endif %}
                        
                        {% if kpis.negative_surveys > 0 %}
                        <div class="list-group-item">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <strong class="text-danger">Negative Surveys</strong><br>
                                    <small class="text-muted">Low satisfaction scores</small>
                                </div>
                                <h4 class="mb-0 text-danger">{{ kpis.negative_surveys }}</h4>
                            </div>
                        </div>
                        {% endif %}
                        
                        {% if kpis.overdue_complaints == 0 and kpis.overdue_actions == 0 and kpis.negative_surveys == 0 %}
                        <div class="text-center py-5">
                            <i class="bi bi-check-circle text-success" style="font-size: 3rem;"></i>
                            <p class="text-success mt-3">All metrics on target!</p>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}