{% extends "admin_panel/base_page.html" %}
{% load static %}

{% block title %}
<title>Dashboard</title>
{% endblock %}
{% block head %}
    <link href="{% static 'assets/admin_panel/vendor/pg-calendar/css/pignose.calendar.min.css' %}" rel="stylesheet">
{% endblock %}
{% block content %}
<div class="row">
    <div class="col-lg-4 col-sm-6">
        <div class="card">
            <div class="stat-widget-one card-body">
                <div class="stat-icon d-inline-block">
                    <i class="ti-user text-primary border-primary"></i>
                </div>
                <div class="stat-content d-inline-block">
                    <div class="stat-text">Total Appointments</div>
                    <div class="stat-digit">{{ total_appointment_count }}</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-sm-6">
        <div class="card">
            <div class="stat-widget-one card-body">
                <div class="stat-icon d-inline-block">
                    <i class="ti-layout-grid2 text-pink border-pink"></i>
                </div>
                <div class="stat-content d-inline-block">
                    <div class="stat-text">Today's Appointments</div>
                    <div class="stat-digit">{{ todays_appointment_count }}</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-sm-6">
        <div class="card">
            <div class="stat-widget-one card-body">
                <div class="stat-icon d-inline-block">
                    <i class="ti-alert text-warning border-warning"></i>
                </div>
                <div class="stat-content d-inline-block">
                    <div class="stat-text">New Appointments</div>
                    <div class="stat-digit">{{ new_appointment_count }}</div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div id="calendar" class="col-lg-6 accordion-bordered accordion-header-bg">
        <div class="accordion__item">
            <div class="accordion__header" data-toggle="collapse" data-target="#calendar_collapseOne">
                <span class="accordion__header--text">Calendar</span>
                <span class="accordion__header--indicator"></span>
            </div>
            <div id="calendar_collapseOne" class="card collapse accordion__body show" data-parent="#calendar">
                <div class="accordion__body--text">
                    <div class="year-calendar"></div>
                </div>
            </div>
        </div>
    </div>
    <div id="todays_appointments" class="col-lg-6 accordion-bordered accordion-header-bg">
        <div class="accordion__item">
            <div class="accordion__header" data-toggle="collapse" data-target="#appointment_collapseOne">
                <span class="accordion__header--text">Today's Appointments</span>
                <span class="accordion__header--indicator"></span>
            </div>
            <div id="appointment_collapseOne" class="card collapse accordion__body show" data-parent="#todays_appointments">
                <div class="accordion__body--text">
                    <div class="table-responsive">
                        <table class="table table-responsive-sm">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Patient Name</th>
                                    <th>Patient Email</th>
                                    <th>Patient Phone</th>
                                    <th>Department</th>
                                    <th>Date</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% if todays_appointment %}
                                    {% for appointment in todays_appointment %}
                                        <tr>
                                            <td>{{ forloop.counter }}</td>
                                            <td>{{ appointment.patient_name }}</td>
                                            <td>{{ appointment.patient_email }}</td>
                                            <td>{{ appointment.patient_phone }}</td>
                                            <td>{{ appointment.department.title }}</td>
                                            <td>{{ appointment.appointment_date }}</td>
                                        </tr>
                                    {% endfor %}
                                {% else %}
                                    <tr>
                                        <td colspan="6" style="text-align: center">No Appointment to show</td>
                                    </tr>
                                {% endif %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block script %}
<script src="{% static 'assets/admin_panel/vendor/moment/moment.min.js' %}"></script>
<script src="{% static 'assets/admin_panel/vendor/pg-calendar/js/pignose.calendar.min.js' %}"></script>
<script src="{% static 'assets/admin_panel/js/dashboard/dashboard-2.js' %}"></script>
{% endblock %}