{% extends "hbase.html" %}
{% block content %}
<div class="container my-5">
    <div class="row">
        <!-- Heading Section -->
        <div class="col-12 text-center mb-4">
            <h2 class="fw-bold text-primary">SuperUser Dashboard</h2>
        </div>
    </div>
                <h6 class="alert alert-info shadow">Appointments</h6>
            <table id="myTable" class="display table table-bordered">
                <thead>
                    <tr>
                        <th>Patient ID</th>
                        <th>Patient Name</th>
                        <th>Mobile</th>
                        <th>Date</th>
                        <th>Time</th>
                        <th>Serial</th>
                    </tr>
                </thead>
                <tbody>
                    {% for appointment in appointments %}
                    <tr>
                        <td><a href="{% url 'update_patient' appointment.patient.id %}">{{ appointment.patient.id }}</a></td>
                        <td>{{ appointment.patient.name }}</td>
                        <td>{{ appointment.patient.mobile }}</td>
                        <td>{{ appointment.available.date }}</td>
                        <td>{{ appointment.available.start_time }} - {{appointment.available.end_time}}</td>
                        <td>{{appointment.serial}}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            <h6 class="my-2 alert alert-info shadow">Prescriptions</h6>
<table id="myTable2" class="display table table-bordered">
    <thead>
        <tr>
            <th>ডাক্তারের নাম</th>
            <th>বিশেষজ্ঞ</th>
            <th>রোগীর নাম</th>
            <th>রোগীর মোবাইল</th>
            <th>প্রেসক্রিপশনের তারিখ</th>
            <th>ভিউ</th>
        </tr>
    </thead>
    <tbody>
        {% for p in prescriptions %}
        <tr>
            <td>{{ p.appointment.doctor.vendor.name }}</td>
            <td>{{ p.appointment.doctor.specialization|safe }}</td>
            <td>{{ p.appointment.patient.name }}</td>
            <td>{{ p.appointment.patient.mobile }}</td>
            <td>{{ p.prescribed_date }}</td>
            <td>
                <a class="btn btn-sm btn-primary" href="{% url 'prescription_detail' p.id %}">View</a>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>            
        </div>
    </div>
</div>
<script>
    // Ensure DataTables initializes after the document is fully loaded
    $(document).ready(function() {
        $('#myTable').DataTable();
    });
    $(document).ready(function() {
        $('#myTable2').DataTable();
    });
    $(document).ready(function() {
        $('#myTable3').DataTable();
    });
</script>
{% endblock content %}