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

<div class="container mt-4">
  <div class="card shadow-lg border-0 rounded-4 p-4">
    <h3 class="text-center text-primary fw-bold mb-3">🗓️ Doctor Weekly Schedule</h3>
    <h5 class="text-center text-secondary mb-4">Dr. {{ doctor_name }}</h5>

    <!-- Flash Messages -->
    {% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
        {% for category, message in messages %}
          <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
            {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
          </div>
        {% endfor %}
      {% endif %}
    {% endwith %}

    <!-- Add Schedule Form -->
    <form method="POST" class="border p-3 bg-light rounded-3 shadow-sm mb-4">
      <div class="row g-3 align-items-end">
        <div class="col-md-4">
          <label class="form-label fw-semibold">Day of Week</label>
          <select name="day" class="form-select" required>
            <option value="">-- Select Day --</option>
            <option>Monday</option>
            <option>Tuesday</option>
            <option>Wednesday</option>
            <option>Thursday</option>
            <option>Friday</option>
            <option>Saturday</option>
            <option>Sunday</option>
          </select>
        </div>
        <div class="col-md-3">
          <label class="form-label fw-semibold">Start Time</label>
          <input type="time" name="start_time" class="form-control" required>
        </div>
        <div class="col-md-3">
          <label class="form-label fw-semibold">End Time</label>
          <input type="time" name="end_time" class="form-control" required>
        </div>
        <div class="col-md-2">
          <button class="btn btn-success w-100 fw-bold shadow-sm">+ Add</button>
        </div>
      </div>
    </form>

    <!-- Schedule Table -->
    <div class="table-responsive">
      <table class="table table-bordered table-hover text-center align-middle shadow-sm">
        <thead class="table-primary">
          <tr>
            <th>Day</th>
            <th>Start Time</th>
            <th>End Time</th>
            {% if session['role'] in ['admin', 'doctor'] %}
            <th>Action</th>
            {% endif %}
          </tr>
        </thead>
        <tbody>
          {% if schedule %}
            {% for s in schedule %}
            <tr>
              <td>{{ s.day_of_week }}</td>
              <td>{{ s.start_time }}</td>
              <td>{{ s.end_time }}</td>

              {% if session['role'] in ['admin', 'doctor'] %}
              <td>
                <a href="{{ url_for('delete_schedule', schedule_id=s.schedule_id, doctor_id=doctor_id) }}"
                   class="btn btn-sm btn-outline-danger"
                   onclick="return confirm('Are you sure you want to delete this schedule?')">
                   🗑 Delete
                </a>
              </td>
              {% endif %}
            </tr>
            {% endfor %}
          {% else %}
            <tr><td colspan="4" class="text-muted">No schedule added yet.</td></tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<style>
  .table-hover tbody tr:hover {
    background-color: #f8f9fa;
    transform: scale(1.01);
    transition: all 0.2s ease;
  }
</style>

{% endblock %}