{% extends 'user_base.html' %}
{% block title %}Appointment | COVID-19 Detector {% endblock %}
{% block specific_info %}
<div class="col-md-8">
    <h1 class="mb-3">挂号信息</h1>
    {%if not appointments%}
    <p>您暂时还没有任何挂号信息~</p>
    {%endif%}
    {%for appointment in appointments%}
    {% set doctor = User.query.get(appointment.doc_id) %}
    {% set patient = User.query.get(appointment.patient_id) %}
    <div class="container" style="border: 2px solid #ddd;">
        <div class="appointment-info">
            <div class="appointment-row">
                <span class="appointment-row-label">{{doctor.name}}&nbsp</span>
                <span class="appointment-row-value" style="margin-left: 60px;">{{doctor.department}}</span>
            </div>
            <div class="appointment-row">
                <span class="appointment-row-label">感染科&nbsp</span>
                <span class="appointment-row-value" style="margin-left: 60px;">{{doctor.location}}</span>
            </div>
            <div class="appointment-row" style="margin-top: 15px;">
                <span class="appointment-row-label">就诊人&nbsp</span>
                <span class="appointment-row-value" style="margin-left: 60px;">{{appointment.name}}</span>
            </div>
            <div class="appointment-row">
                <span class="appointment-row-label">门诊类型</span>
                <span class="appointment-row-value" style="color: red;margin-left: 60px;">专家门诊
                    {{appointment.cost}}元</span>
            </div>
            <div class="appointment-row">
                <span class="appointment-row-label">就诊时间</span>
                <span class="appointment-row-value" style="color: red;margin-left: 60px;">{{ appointment.date
                    }}&nbsp;{%if
                    appointment.time==1%}上午{%else%}下午{%endif%}</span>
                <span style="color: white;background-color:#17A2B8;">{{appointment.num}}号</span>
            </div>
        </div>
        <div class="btn-group mb-3" style="margin-top: 5px;">
            {% set appointment_date= appointment.date.strftime('%Y-%m-%d') %}
            {% if today_str>appointment_date%}
            <button type="button" class="datebtn btn-light" disabled style="opacity: 0.7;">已经就诊</button>
            {% else %}
            <form action="{{ url_for('user.cancel_myappointment') }}" method="post" id="cancel_app">
                <button type="submit" class="cancel_datebtn btn-light">取消预约</button>
                <input type="hidden" name="patient_id" value="{{ appointment.patient_id }}">
                <input type="hidden" name="doc_id" value="{{ appointment.doc_id }}">
                <input type="hidden" name="date" value="{{ appointment.date }}">
                <input type="hidden" name="time" value="{{ appointment.time }}">
            </form>
            {%endif%}
            <button type="button" class="datebtn btn-light">查看详情</button>
            <button type="button" class="datebtn btn-light">立即支付</button>
        </div>
    </div>
    {%endfor%}
</div>
<!-- 定义模态框 -->
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmModalLabel">提醒</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>确定要取消预约吗？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="confirmCancel">确定</button>
            </div>
        </div>
    </div>
</div> 

{% endblock %}