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

<div class="row align-items-center mb-4">
  <div class="col-sm-8">
    <h2 class="fw-bold text-danger mb-0"><i class="bi bi-box-arrow-right me-2"></i>Patient Discharge</h2>
    <p class="text-muted mb-0">Clear active patients, free up rooms, and process final billing.</p>
  </div>
</div>

<div class="row g-4 mb-5">
  <!-- Active Admissions Pending Discharge -->
  <div class="col-lg-6">
    <div class="card stat-card shadow-lg border-0 rounded-4 h-100">
      <div class="card-header bg-danger text-white border-0 py-3 rounded-top-4">
        <h5 class="fw-bold mb-0"><i class="bi bi-person-down me-2"></i>Active Admissions</h5>
      </div>
      <div class="card-body p-0">
        <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
          <table class="table table-hover align-middle mb-0">
            <thead class="bg-light text-muted small text-uppercase sticky-top shadow-sm">
              <tr>
                <th class="px-4">Patient</th>
                <th>Room</th>
                <th class="text-center">Action</th>
              </tr>
            </thead>
            <tbody>
              {% for a in active_admissions %}
              <tr>
                <td class="px-4 fw-bold text-dark"><i class="bi bi-person-fill text-muted me-2"></i>{{ a.patient_name }}</td>
                <td><span class="badge bg-warning text-dark px-2 rounded-pill">{{ a.room_number }} ({{ a.room_type }})</span></td>
                <td class="text-center">
                  <button class="btn btn-sm btn-outline-danger fw-bold rounded-pill px-3" data-bs-toggle="modal" data-bs-target="#dischargeModal{{ a.admission_id }}">
                    Discharge
                  </button>

                  <!-- Discharge Modal inside loop -->
                  <div class="modal fade text-start" id="dischargeModal{{ a.admission_id }}" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                      <div class="modal-content border-0 shadow-lg rounded-4" style="background: rgba(255,255,255,0.95); backdrop-filter: blur(10px);">
                        <div class="modal-header bg-danger text-white py-3 border-0">
                          <h6 class="modal-title fw-bold">Discharge {{ a.patient_name }}</h6>
                          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body p-4">
                          <form method="POST" action="{{ url_for('discharge_patient') }}">
                            <input type="hidden" name="admission_id" value="{{ a.admission_id }}">
                            
                            <div class="form-floating mb-3">
                              <input type="date" name="discharge_date" class="form-control border-danger-subtle bg-light" id="dDate{{ a.admission_id }}" required>
                              <label for="dDate{{ a.admission_id }}">Official Discharge Date</label>
                            </div>

                            <div class="form-floating mb-4">
                              <input type="number" name="medicine_charges" class="form-control border-danger-subtle bg-light" id="mCharge{{ a.admission_id }}" placeholder="0" min="0" required>
                              <label for="mCharge{{ a.admission_id }}">Additional Medicine Charges (₹)</label>
                              <div class="form-text mt-2"><i class="bi bi-info-circle me-1"></i>Room & Doctor fees are calculated automatically.</div>
                            </div>

                            <div class="text-end">
                              <button type="submit" class="btn btn-danger fw-bold rounded-pill px-4 w-100 shadow-sm"><i class="bi bi-check2-circle me-1"></i> Approve Discharge</button>
                            </div>
                          </form>
                        </div>
                      </div>
                    </div>
                  </div>

                </td>
              </tr>
              {% else %}
              <tr>
                <td colspan="3" class="text-center py-5 text-muted">
                  <i class="bi bi-emoji-smile fs-2 d-block mb-3"></i>
                  No active admissions pending discharge.
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <!-- Historical Discharges -->
  <div class="col-lg-6">
    <div class="card stat-card shadow-lg border-0 rounded-4 h-100">
      <div class="card-header bg-secondary text-white border-0 py-3 rounded-top-4">
        <h5 class="fw-bold mb-0"><i class="bi bi-clock-history me-2"></i>Discharge History</h5>
      </div>
      <div class="card-body p-0">
        <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
          <table class="table table-hover align-middle mb-0">
            <thead class="bg-light text-muted small text-uppercase sticky-top shadow-sm">
              <tr>
                <th class="px-4">Patient</th>
                <th>Date</th>
                <th>Total Bill</th>
                <th class="text-end px-4">Status</th>
              </tr>
            </thead>
            <tbody>
              {% for d in discharges %}
              <tr>
                <td class="px-4 fw-semibold text-dark">{{ d.patient_name }}</td>
                <td class="small">{{ d.discharge_date }}</td>
                <td class="fw-bold text-success fs-6">₹{{ d.total_bill }}</td>
                <td class="text-end px-4">
                  <span class="badge bg-success bg-opacity-10 text-success border border-success px-2 rounded-pill"><i class="bi bi-check2 me-1"></i>{{ d.payment_status }}</span>
                </td>
              </tr>
              {% else %}
              <tr>
                <td colspan="4" class="text-center py-5 text-muted">No historical discharge records found.</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

{% endblock %}