{% extends "base.html" %}{% set active="dashboard" %}{% block title %}My Health Portal{% endblock %}{% block page_title %}My Health Portal{% endblock %}
{% block content %}
<div class="card" style="background:var(--brand-dark);border-color:var(--brand-dark);margin-bottom:1.5rem;position:relative;overflow:hidden">
    <div style="position:absolute;top:-30px;right:-30px;width:160px;height:160px;border-radius:50%;background:rgba(0,184,166,.1)"></div>
    <div style="position:relative;z-index:1">
        <div style="font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.4);margin-bottom:.4rem">Patient Portal</div>
        <h2 style="font-family:var(--font-display);font-size:1.7rem;color:#fff;font-weight:400">Hello, {{ patient.name.split()[0] if patient else session.user_name }} 👋</h2>        {% if upcoming %}
        <p style="color:rgba(255,255,255,.65);margin-top:.5rem;font-size:.9rem">
            Next appointment: <strong style="color:var(--accent)">{{ upcoming[0].appointment_datetime[:10] }}</strong>
            at <strong style="color:var(--accent)">{{ upcoming[0].appointment_datetime[11:16] }}</strong>
            with {{ upcoming[0].doctor_name }}.
        </p>
        {% else %}<p style="color:rgba(255,255,255,.5);margin-top:.5rem;font-size:.9rem">No upcoming appointments scheduled.</p>{% endif %}
    </div>
</div>
<div class="stats-grid">
    <div class="stat-card accent"><div class="stat-label">Upcoming</div><div class="stat-value">{{ stats.upcoming }}</div><div class="stat-icon">📅</div></div>
    <div class="stat-card success"><div class="stat-label">Completed Visits</div><div class="stat-value">{{ stats.completed }}</div><div class="stat-icon">✅</div></div>
    <div class="stat-card"><div class="stat-label">Total Appointments</div><div class="stat-value">{{ stats.total }}</div><div class="stat-icon">🗓</div></div>
</div>
<div class="grid-2">
    <div class="card">
        <div class="card-header"><span class="card-title">📅 Upcoming Appointments</span></div>
        {% if upcoming %}
        {% for a in upcoming %}
        <div style="padding:.9rem 0;border-bottom:1px solid var(--border);display:flex;gap:1rem;align-items:flex-start">
            <div style="background:var(--accent-dim);border:1px solid var(--accent);border-radius:8px;padding:.5rem .7rem;text-align:center;min-width:52px;flex-shrink:0">
                <div style="font-size:.7rem;color:var(--accent);text-transform:uppercase;font-weight:600">{{ a.appointment_datetime[5:7] }}</div>
                <div style="font-family:var(--font-display);font-size:1.4rem;color:var(--text);line-height:1">{{ a.appointment_datetime[8:10] }}</div>
            </div>
            <div style="flex:1">
                <div style="font-weight:500">{{ a.doctor_name }}</div>
                <div class="text-muted" style="font-size:.8rem">{{ a.specialization or '' }}</div>
                <div class="text-muted" style="font-size:.8rem">🕐 {{ a.appointment_datetime[11:16] }}{% if a.service_name %} · {{ a.service_name }}{% endif %}</div>
            </div>
            <form method="POST" action="{{ url_for('view_appointments') }}">
                <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?')">Cancel</button>
            </form>
        </div>
        {% endfor %}
        {% else %}<div class="empty-state"><div class="empty-icon">📭</div><p>No upcoming appointments.</p></div>{% endif %}
    </div>
    <div class="card">
        <div class="card-header"><span class="card-title">👤 My Profile</span></div>
        <div style="display:flex;flex-direction:column;gap:.65rem;font-size:.88rem">
            {% for label, val in [('Full Name', patient.name),('Date of Birth', patient.dob or '—'),('Gender', patient.gender or '—'),('Email', patient.email),('Phone', patient.phone or '—'),('Insurance', patient.insurance_provider or '—')] %}
            <div style="display:flex;justify-content:space-between"><span class="text-muted">{{ label }}</span><span>{{ val }}</span></div>
            {% endfor %}
        </div>
    </div>
</div>
<div class="card" style="margin-top:1.5rem">
    <div class="card-header"><span class="card-title">📋 Visit History</span></div>
    {% if past %}
    <div class="table-wrap"><table>
        <thead><tr><th>Date</th><th>Doctor</th><th>Service</th><th>Status</th><th>Diagnosis</th><th>Prescriptions</th><th>Follow-up</th></tr></thead>
        <tbody>{% for a in past %}<tr>
            <td>{{ a.appointment_datetime[:10] }}</td><td>{{ a.doctor_name }}</td>
            <td>{{ a.service_name or '—' }}</td>
            <td><span class="badge badge-{{ a.status|lower|replace(' ','-') }}">{{ a.status }}</span></td>
            <td>{{ a.diagnosis or '—' }}</td><td>{{ a.prescriptions or '—' }}</td>
            <td>{{ a.follow_up_date or '—' }}</td>
        </tr>{% endfor %}</tbody>
    </table></div>
    {% else %}<div class="empty-state"><div class="empty-icon">🏥</div><p>No past visits on record.</p></div>{% endif %}
</div>
{% endblock %}