{% extends "base.html" %}
{% block content %}

<div class="row align-items-center mb-4">
  <div class="col-8">
    <h2 class="fw-bold text-primary mb-0"><i class="bi bi-door-open-fill me-2"></i>Bed Admissions</h2>
    <p class="text-muted mb-0">Manage hospital bed assignments and admittance.</p>
  </div>
  <div class="col-4 text-end">
    <button class="btn btn-primary fw-bold px-4" data-bs-toggle="modal" data-bs-target="#admitModal">
      <i class="bi bi-plus-circle me-1"></i> Admit Patient
    </button>
  </div>
</div>

<div class="card stat-card shadow-lg border-0 rounded-4 mb-5">
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-hover align-middle mb-0">
        <thead class="bg-primary text-white">
          <tr>
            <th class="py-3 px-4"># ADM-ID</th>
            <th class="py-3">Patient Name</th>
            <th class="py-3">Assigned Doctor</th>
            <th class="py-3">Room Details</th>
            <th class="py-3">Admit Date</th>
            <th class="py-3">Emergency Contact</th>
          </tr>
        </thead>
        <tbody>
          {% for a in admissions %}
          <tr>
            <td class="px-4 fw-bold text-muted">ADM-{{ "%04d" | format(a.admission_id) }}</td>
            <td class="fw-bold text-dark"><i class="bi bi-person-fill text-muted me-1"></i> {{ a.patient_name }}</td>
            <td><i class="bi bi-stethoscope text-info me-1"></i> Dr. {{ a.doctor_name }}</td>
            <td>
              <span class="badge bg-warning text-dark px-3 py-2 rounded-pill shadow-sm">
                <i class="bi bi-door-closed me-1"></i> {{ a.room_number }} ({{ a.room_type }})
              </span>
            </td>
            <td>{{ a.admission_date }}</td>
            <td class="text-muted">
              <div><i class="bi bi-person me-1"></i>{{ a.relative_name }}</div>
              <small><i class="bi bi-telephone ms-1 me-1"></i>{{ a.relative_contact }}</small>
            </td>
          </tr>
          {% else %}
          <tr>
            <td colspan="6" class="text-center py-5 text-muted">
              <i class="bi bi-clipboard2-x d-block mx-auto mb-3" style="font-size: 3rem; color: #cbd5e1;"></i>
              <h5 class="fw-semibold">No Active Admissions</h5>
              <p class="mb-0">All admitted patients will appear here.</p>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- ✅ Modern Admit Modal -->
<div class="modal fade" id="admitModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content border-0 shadow-lg rounded-4 overflow-hidden" style="background: rgba(255,255,255,0.95); backdrop-filter: blur(10px);">
      <div class="modal-header bg-primary text-white py-4 px-5 border-0">
        <h5 class="modal-title fw-bold"><i class="bi bi-file-earmark-medical me-2"></i>New Admission Record</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body p-5">
        <form method="POST" action="{{ url_for('manage_admissions') }}">
          
          <h6 class="text-primary fw-bold mb-3 border-bottom pb-2">Medical Assignment</h6>
          <div class="row g-3 mb-4">
            <div class="col-md-4">
              <label class="form-label text-muted small fw-bold">Patient</label>
              <select name="patient_id" class="form-select bg-light border-0" required>
                <option value="" disabled selected>Select Patient</option>
                {% for p in patients %}
                  <option value="{{ p.patient_id }}">{{ p.name }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-4">
              <label class="form-label text-muted small fw-bold">Doctor</label>
              <select name="doctor_id" class="form-select bg-light border-0" required>
                <option value="" disabled selected>Select Doctor</option>
                {% for d in doctors %}
                  <option value="{{ d.doctor_id }}">Dr. {{ d.name }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-4">
              <label class="form-label text-muted small fw-bold">Available Room</label>
              <select name="room_id" class="form-select bg-light border-0" required>
                <option value="" disabled selected>Select Vacant Room</option>
                {% for r in rooms %}
                  <option value="{{ r.room_id }}">Rm {{ r.room_number }} ({{ r.room_type }})</option>
                {% endfor %}
              </select>
            </div>
          </div>
          
          <h6 class="text-primary fw-bold mb-3 border-bottom pb-2">Emergency Contact Details</h6>
          <div class="row g-3 mb-4">
            <div class="col-md-6">
              <div class="form-floating mb-3">
                <input type="text" name="relative_name" class="form-control bg-light border-0" id="relName" required>
                <label for="relName">Relative Name</label>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-floating mb-3">
                <input type="tel" name="relative_contact" class="form-control bg-light border-0" id="relPhone" pattern="[0-9]{10}" required>
                <label for="relPhone">Contact Number (10 digits)</label>
              </div>
            </div>
            <div class="col-12">
              <div class="form-floating mb-3">
                <input type="text" name="relative_address" class="form-control bg-light border-0" id="relAddr" required>
                <label for="relAddr">Relative Address</label>
              </div>
            </div>
          </div>

          <h6 class="text-primary fw-bold mb-3 border-bottom pb-2">Patient Records</h6>
          <div class="row g-3">
            <div class="col-md-6">
              <div class="form-floating">
                <input type="date" name="admission_date" class="form-control bg-light border-0" id="admDate" required>
                <label for="admDate">Admission Date</label>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-floating">
                <input type="text" name="patient_address" class="form-control bg-light border-0" id="patAddr" required>
                <label for="patAddr">Patient Address Validation</label>
              </div>
            </div>
          </div>

          <div class="text-end mt-5">
            <button type="button" class="btn btn-light px-4 me-2 border" data-bs-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-primary px-5 fw-bold shadow-sm">Confirm Admission</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

{% endblock %}