{% extends "base.html" %}
{% set active = "doctors" %}
{% block title %}Doctor Management{% endblock %}
{% block page_title %}Doctor Management{% endblock %}
{% block content %}
{% if msg %}<div class="alert alert-{{ msg[0] }}">{{ msg[1] }}</div>{% endif %}
<div class="page-actions">
    <span class="text-muted">{{ doctors|length }} doctors</span>
    <button class="btn btn-primary ml-auto" onclick="openModal('addModal')">➕ Add Doctor</button>
</div>
<div class="card">
    <div class="table-wrap">
        <table>
            <thead><tr><th>Name</th><th>Specialization</th><th>Department</th><th>Email</th><th>Joined</th></tr></thead>
            <tbody>
            {% for d in doctors %}
            <tr>
                <td><strong>{{ d.name }}</strong></td>
                <td>{{ d.specialization or '—' }}</td>
                <td>{{ d.dept_name or '—' }}</td>
                <td>{{ d.email }}</td>
                <td>{{ d.joining_date[:7] if d.joining_date else '—' }}</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 Doctor</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>Specialization</label><input type="text" name="specialization"></div>
                <div class="form-group"><label>Department</label>
                    <select name="department_id"><option value="">None</option>
                    {% for dep in departments %}<option value="{{ dep.department_id }}">{{ dep.name }}</option>{% endfor %}
                    </select>
                </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 full"><label>Joining Date</label><input type="date" name="joining_date"></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 Doctor</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}