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

<div class="row justify-content-center">
  <div class="col-lg-10">
    <div class="d-flex justify-content-between align-items-center mb-4">
      <h2 class="fw-bold text-primary mb-0"><i class="bi bi-person-plus-fill me-2"></i>Add New Doctor</h2>
      <a href="{{ url_for('doctor_list') }}" class="btn btn-outline-secondary fw-semibold rounded-pill px-4">
        <i class="bi bi-arrow-left me-1"></i> Back to Directory
      </a>
    </div>

    <div class="card stat-card shadow-lg border-0 rounded-4">
      <div class="card-body p-5">
        <form method="POST" novalidate>
          <div class="row g-4 mb-4">
            <div class="col-md-6">
              <div class="form-floating">
                <input type="text" name="name" class="form-control bg-light border-0" id="docName" placeholder="Dr. XYZ" required>
                <label for="docName" class="text-muted"><i class="bi bi-person me-1"></i> Full Name</label>
              </div>
            </div>

            <div class="col-md-3">
              <div class="form-floating">
                <input type="number" name="fees" class="form-control bg-light border-0" id="docFees" placeholder="500" required min="0">
                <label for="docFees" class="text-muted"><i class="bi bi-currency-rupee me-1"></i> Fees</label>
              </div>
            </div>

            <div class="col-md-3">
              <div class="form-floating">
                <select name="department_id" class="form-select bg-light border-0" id="docDept" required>
                  <option value="" disabled selected>Select</option>
                  {% for d in departments %}
                    <option value="{{ d.department_id }}">{{ d.dept_name }}</option>
                  {% endfor %}
                </select>
                <label for="docDept" class="text-muted"><i class="bi bi-diagram-3 me-1"></i> Department</label>
              </div>
            </div>
          </div>

          <div class="row g-4 mb-4">
            <div class="col-md-6">
              <label class="form-label text-muted fw-semibold mb-2"><i class="bi bi-award me-1"></i> Specializations</label>
              <select name="specialization" class="form-select bg-light border-0" size="4" multiple required>
                {% for s in specialties %}
                  <option value="{{ s.specialization_name }}">{{ s.specialization_name }}</option>
                {% endfor %}
              </select>
              <div class="form-text mt-2"><i class="bi bi-info-circle me-1"></i>Hold <strong>Ctrl</strong> (Windows) or <strong>Cmd</strong> (Mac) to select multiple.</div>
            </div>

            <div class="col-md-6">
              <label class="form-label text-muted fw-semibold mb-2"><i class="bi bi-telephone me-1"></i> Contact Numbers</label>
              <div id="phones-area">
                <div class="input-group mb-3 shadow-sm border-0 rounded-3 overflow-hidden">
                  <span class="input-group-text border-0 bg-primary text-white"><i class="bi bi-telephone-plus"></i> &nbsp;+91</span>
                  <input name="phones[]" type="text" class="form-control border-0 bg-light py-2" pattern="[0-9]{10}" maxlength="10" placeholder="10-digit number" required>
                </div>
              </div>
              <button type="button" class="btn btn-sm btn-outline-primary fw-semibold rounded-pill mt-2" onclick="addPhone()">
                <i class="bi bi-plus-circle me-1"></i> Add Another Number
              </button>
            </div>
          </div>

          <hr class="mt-5 mb-4 opacity-10">

          <div class="text-end">
            <button type="submit" class="btn btn-primary btn-lg rounded-pill px-5 fw-bold shadow">
              <i class="bi bi-save me-1"></i> Save Doctor Profile
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
function addPhone() {
  const area = document.getElementById('phones-area');
  const div = document.createElement('div');
  div.className = 'input-group mb-3 shadow-sm border-0 rounded-3 overflow-hidden animate__animated animate__fadeInDown animate__faster';
  div.innerHTML = `
    <span class="input-group-text border-0 bg-secondary text-white"><i class="bi bi-telephone-plus"></i> &nbsp;+91</span>
    <input name="phones[]" type="text" class="form-control border-0 bg-light py-2" pattern="[0-9]{10}" maxlength="10" placeholder="10-digit number" required>
    <button type="button" class="btn btn-danger border-0" onclick="this.parentElement.remove()"><i class="bi bi-trash"></i></button>
  `;
  area.appendChild(div);
}
</script>

{% endblock %}