{% extends "base.html" %}
{% set active = "patients" %}
{% block title %}Patient Management{% endblock %}
{% block page_title %}Patient Management{% 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:1">
        <input type="text" name="q" placeholder="Search name, email, or ID…" value="{{ q }}" style="max-width:360px">
        <button class="btn btn-secondary">🔍 Search</button>
        {% if q %}<a href="{{ url_for('admin_patients') }}" class="btn btn-ghost">Clear</a>{% endif %}
    </form>
    <button class="btn btn-primary" onclick="openModal('addModal')">➕ Add Patient</button>
</div>

<div class="card">
    <div class="table-wrap">
        <table>
            <thead><tr><th>ID</th><th>Name</th><th>Email</th><th>Phone</th><th>Insurance</th><th>Status</th><th>Actions</th></tr></thead>
            <tbody>
            {% for p in patients %}
            <tr>
                <td class="text-muted">#{{ p.patient_id }}</td>
                <td><strong>{{ p.name }}</strong></td>
                <td>{{ p.email }}</td>
                <td>{{ p.phone or '—' }}</td>
                <td>{{ p.insurance_provider or '—' }}</td>
                <td><span class="badge {{ 'badge-completed' if p.is_active else 'badge-cancelled' }}">{{ 'Active' if p.is_active else 'Inactive' }}</span></td>
                <td>
                    <form method="POST" style="display:inline">
                        <input type="hidden" name="patient_id" value="{{ p.patient_id }}">
                        {% if p.is_active %}
                            <input type="hidden" name="action" value="deactivate">
                            <button class="btn btn-ghost btn-sm" style="color:var(--danger)" onclick="return confirm('Deactivate?')">Deactivate</button>
                        {% else %}
                            <input type="hidden" name="action" value="reactivate">
                            <button class="btn btn-ghost btn-sm">Reactivate</button>
                        {% endif %}
                    </form>
                </td>
            </tr>
            {% else %}
            <tr><td colspan="7"><div class="empty-state"><div class="empty-icon">🔍</div><p>No patients found.</p></div></td></tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<div class="modal-overlay" id="addModal">
    <div class="modal">
        <div class="modal-header"><span class="modal-title">Add New Patient</span><button class="modal-close" onclick="closeModal('addModal')">✕</button></div>
        <form method="POST">
            <input type="hidden" name="action" value="add">
            <div class="form-grid">
                <div class="form-group"><label>Full Name *</label><input type="text" name="name" required></div>
                <div class="form-group"><label>Username *</label><input type="text" name="username" required></div>
                <div class="form-group"><label>Password *</label><input type="password" name="password" required></div>
                <div class="form-group"><label>Email *</label><input type="email" name="email" required></div>
                <div class="form-group"><label>Phone</label><input type="text" name="phone"></div>
                <div class="form-group"><label>Date of Birth</label><input type="date" name="dob"></div>
                <div class="form-group"><label>Gender</label><select name="gender"><option value="">Select</option><option>Male</option><option>Female</option><option>Other</option></select></div>
                <div class="form-group"><label>Insurance</label><input type="text" name="insurance_provider"></div>
                <div class="form-group full"><label>Address</label><input type="text" name="address"></div>
                <div class="form-group"><label>City</label><input type="text" name="city"></div>
                <div class="form-group"><label>State</label><input type="text" name="state"></div>
            </div>
            <div style="display:flex;gap:.75rem;justify-content:flex-end;margin-top:1rem">
                <button type="button" class="btn btn-secondary" onclick="closeModal('addModal')">Cancel</button>
                <button type="submit" class="btn btn-primary">Add Patient</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}