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

<div class="container mt-4">
  <div class="card shadow-lg border-0 rounded-4 p-4">
    <h3 class="text-success mb-4 fw-bold text-center">➕ Add New Doctor</h3>

    <!-- 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 %}

    <form method="POST" novalidate>
      <div class="row mb-3">
        <div class="col-md-6">
          <label class="form-label fw-semibold">Full Name</label>
          <input type="text" name="name" class="form-control" placeholder="Enter doctor's name" required>
        </div>

        <div class="col-md-3">
          <label class="form-label fw-semibold">Fees (₹)</label>
          <input type="number" name="fees" class="form-control" placeholder="e.g. 500" required min="0">
        </div>

        <div class="col-md-3">
          <label class="form-label fw-semibold">Department</label>
          <select name="department_id" class="form-select" required>
            <option value="">-- Select Department --</option>
            {% for d in departments %}
              <option value="{{ d.department_id }}">{{ d.dept_name }}</option>
            {% endfor %}
          </select>
        </div>
      </div>

      <!-- Specialization Section -->
      <div class="mb-3">
        <label class="form-label fw-semibold">Specializations</label>
        <select name="specialization" class="form-select" multiple required>
          {% for s in specialties %}
            <option value="{{ s }}">{{ s }}</option>
          {% endfor %}
        </select>
        <small class="text-muted">Hold Ctrl (or Cmd) to select multiple specialties</small>
      </div>

      <!-- Phone Numbers Section -->
      <div class="mb-3">
        <label class="form-label fw-semibold">Contact Numbers</label>
        <div id="phones-area">
          <div class="input-group mb-2">
            <span class="input-group-text">+91</span>
            <input name="phones[]" type="text" class="form-control"
                   pattern="[0-9]{10}" maxlength="10"
                   title="Enter a 10-digit mobile number"
                   placeholder="10-digit number" required>
          </div>
        </div>
        <button type="button" class="btn btn-outline-secondary btn-sm" onclick="addPhone()">➕ Add Another</button>
      </div>

      <!-- Submit Button -->
      <div class="text-center mt-4">
        <button type="submit" class="btn btn-success px-5 fw-bold shadow-sm">Save Doctor</button>
        <a href="{{ url_for('doctor_list') }}" class="btn btn-secondary ms-2">Cancel</a>
      </div>
    </form>
  </div>
</div>

<!-- Add Phone JS -->
<script>
function addPhone() {
  const area = document.getElementById('phones-area');
  const div = document.createElement('div');
  div.className = 'input-group mb-2';
  div.innerHTML = `
    <span class="input-group-text">+91</span>
    <input name="phones[]" type="text" class="form-control"
           pattern="[0-9]{10}" maxlength="10"
           title="Enter a 10-digit mobile number"
           placeholder="10-digit number" required>
  `;
  area.appendChild(div);
}
</script>

{% endblock %}