{% extends "base.html" %}{% set active="appointments" %}{% block title %}Appointments{% endblock %}{% block page_title %}Appointments{% endblock %}
{% block content %}
{% if msg %}<div class="alert alert-{{ msg[0] }}">{{ msg[1] }}</div>{% endif %}
<div class="page-actions">
    <form method="GET" style="display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;flex:1">
        {% if request.args.get('patient_id') %}<input type="hidden" name="patient_id" value="{{ request.args.patient_id }}">{% endif %}
        <select name="status" onchange="this.form.submit()" style="width:auto">
            <option value="">All Statuses</option>
            {% for st in ['Scheduled','Completed','Cancelled','No-Show'] %}
            <option {{ 'selected' if status_filter==st }}>{{ st }}</option>
            {% endfor %}
        </select>
        {% if status_filter %}<a href="{{ url_for('view_appointments') }}" class="btn btn-ghost btn-sm">Clear</a>{% endif %}
    </form>
    {% if role in ['admin','receptionist'] %}<a href="{{ url_for('schedule') }}" class="btn btn-primary">➕ Schedule</a>{% endif %}
</div>

<div class="card"><div class="table-wrap"><table>
    <thead><tr>
        <th>#</th>
        {% if role != 'patient' %}<th>Patient</th>{% endif %}
        {% if role != 'doctor'  %}<th>Doctor</th>{% endif %}
        <th>Date &amp; Time</th><th>Service</th><th>Reason</th><th>Status</th><th>Actions</th>
    </tr></thead>
    <tbody>
    {% for a in apts %}
    <tr id="apt-{{ a.appointment_id }}" {{ 'style="background:var(--accent-dim)"' if focus_id and focus_id|int==a.appointment_id }}>
        <td class="text-muted">#{{ a.appointment_id }}</td>
        {% if role != 'patient' %}<td><strong>{{ a.patient_name }}</strong>{% if a.patient_phone %}<div class="text-muted" style="font-size:.75rem">{{ a.patient_phone }}</div>{% endif %}</td>{% endif %}
        {% if role != 'doctor'  %}<td>{{ a.doctor_name }}{% if a.specialization %}<div class="text-muted" style="font-size:.75rem">{{ a.specialization }}</div>{% endif %}</td>{% endif %}
        <td><strong>{{ a.appointment_datetime[:10] }}</strong><div class="text-muted" style="font-size:.78rem">{{ a.appointment_datetime[11:16] }}</div></td>
        <td>{{ a.service_name or '—' }}</td>
        <td class="text-muted">{{ a.reason or '—' }}</td>
        <td><span class="badge badge-{{ a.status|lower|replace(' ','-') }}">{{ a.status }}</span></td>
        <td>
            {% if a.status == 'Scheduled' %}
                <form method="POST" style="display:inline">
                    <input type="hidden" name="action" value="cancel">
                    <input type="hidden" name="appointment_id" value="{{ a.appointment_id }}">
                    <button class="btn btn-ghost btn-sm" style="color:var(--danger)" onclick="return confirm('Cancel this appointment?')">Cancel</button>
                </form>
                {% if role in ['admin','receptionist'] %}
                    <button class="btn btn-ghost btn-sm" onclick="openReschedule({{ a.appointment_id }},{{ a.doctor_id }},'{{ a.appointment_datetime }}',{{ a.duration_min }})">Reschedule</button>
                {% endif %}
                {% if role in ['doctor','admin'] %}
                    <button class="btn btn-ghost btn-sm" style="color:var(--success)" onclick="openComplete({{ a.appointment_id }})">✓ Complete</button>
                {% endif %}
            {% elif a.status == 'Completed' and a.diagnosis %}
                <button class="btn btn-ghost btn-sm" onclick="toggleSummary({{ a.appointment_id }})">📋 Summary</button>
            {% endif %}
        </td>
    </tr>
    {% if a.diagnosis %}
    <tr id="summary-{{ a.appointment_id }}" style="display:none;background:var(--surface-2)">
        <td colspan="8" style="padding:1rem 2rem">
            <div class="grid-3" style="gap:1rem">
                <div><div class="text-muted" style="font-size:.72rem;text-transform:uppercase">Diagnosis</div><div>{{ a.diagnosis }}</div></div>
                <div><div class="text-muted" style="font-size:.72rem;text-transform:uppercase">Treatment</div><div>{{ a.treatment or '—' }}</div></div>
                <div><div class="text-muted" style="font-size:.72rem;text-transform:uppercase">Prescriptions</div><div>{{ a.prescriptions or '—' }}</div></div>
            </div>
            {% if a.follow_up_date %}<div class="mt-1 text-muted">📅 Follow-up: {{ a.follow_up_date }}</div>{% endif %}
        </td>
    </tr>
    {% endif %}
    {% else %}
    <tr><td colspan="8"><div class="empty-state"><div class="empty-icon">📭</div><p>No appointments found.</p></div></td></tr>
    {% endfor %}
    </tbody>
</table></div></div>

{% if role in ['doctor','admin'] %}
<div class="modal-overlay" id="completeModal">
    <div class="modal">
        <div class="modal-header"><span class="modal-title">✓ Complete Visit</span><button class="modal-close" onclick="closeModal('completeModal')">✕</button></div>
        <form method="POST">
            <input type="hidden" name="action" value="complete">
            <input type="hidden" name="appointment_id" id="completeAptId">
            <div class="form-group"><label>Diagnosis</label><textarea name="diagnosis" rows="2"></textarea></div>
            <div class="form-group"><label>Treatment</label><textarea name="treatment" rows="2"></textarea></div>
            <div class="form-group"><label>Prescriptions</label><textarea name="prescriptions" rows="2"></textarea></div>
            <div class="form-group"><label>Follow-up Date</label><input type="date" name="follow_up_date"></div>
            <div style="display:flex;gap:.75rem;justify-content:flex-end">
                <button type="button" class="btn btn-secondary" onclick="closeModal('completeModal')">Cancel</button>
                <button type="submit" class="btn btn-primary">Save &amp; Complete</button>
            </div>
        </form>
    </div>
</div>
{% endif %}

{% if role in ['admin','receptionist'] %}
<div class="modal-overlay" id="rescheduleModal">
    <div class="modal">
        <div class="modal-header"><span class="modal-title">Reschedule</span><button class="modal-close" onclick="closeModal('rescheduleModal')">✕</button></div>
        <form method="POST">
            <input type="hidden" name="action" value="reschedule">
            <input type="hidden" name="appointment_id" id="reschedAptId">
            <input type="hidden" name="doctor_id" id="reschedDocId">
            <div class="form-group"><label>New Date &amp; Time *</label><input type="datetime-local" name="new_datetime" id="reschedDt" required></div>
            <div class="form-group"><label>Duration (min)</label><input type="number" name="duration" id="reschedDur" value="30" min="10"></div>
            <div style="display:flex;gap:.75rem;justify-content:flex-end">
                <button type="button" class="btn btn-secondary" onclick="closeModal('rescheduleModal')">Cancel</button>
                <button type="submit" class="btn btn-primary">Reschedule</button>
            </div>
        </form>
    </div>
</div>
{% endif %}

<script>
function openComplete(id){ document.getElementById('completeAptId').value=id; openModal('completeModal'); }
function openReschedule(id,docId,dt,dur){
    document.getElementById('reschedAptId').value=id;
    document.getElementById('reschedDocId').value=docId;
    document.getElementById('reschedDur').value=dur;
    document.getElementById('reschedDt').value=dt.replace(' ','T').slice(0,16);
    openModal('rescheduleModal');
}
function toggleSummary(id){
    const r=document.getElementById('summary-'+id);
    r.style.display=r.style.display==='none'?'':'none';
}
{% if focus_id %}
const el=document.getElementById('apt-{{ focus_id }}');
if(el) el.scrollIntoView({behavior:'smooth',block:'center'});
{% endif %}
</script>
{% endblock %}