{% extends "tenant/layouts/base.html" %}
{% block title %}{{ 'Edit' if mode == 'edit' else 'New' }} Staff Member{% endblock %}
{% block scripts %}
<script>
function togglePayFields(val) {
  document.getElementById("field_hourly_rate").classList.toggle("d-none", val !== "hourly");
  document.getElementById("field_salary_amount").classList.toggle("d-none", val !== "salary");
  document.getElementById("field_guarantee_amount").classList.toggle("d-none", val !== "guarantee");
}
document.addEventListener("DOMContentLoaded", function() {
  var pt = document.getElementById("pay_type");
  if (pt) togglePayFields(pt.value);
});
</script>
{% endblock %}
{% block content %}
<div class="row justify-content-center">
  <div class="col-md-6">
    <div class="card shadow-sm">
      <div class="card-header fw-semibold">{{ 'Edit' if mode == 'edit' else 'New' }} Staff Member</div>
      <div class="card-body">
        {% if error %}<div class="alert alert-danger py-2">{{ error }}</div>{% endif %}
        <form method="POST" novalidate>
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <div class="mb-3">
            <label class="form-label">Name <span class="text-danger">*</span></label>
            <input type="text" class="form-control" name="name"
                   value="{{ staff.name if staff else '' }}" required autofocus>
          </div>
          <div class="mb-3">
            <label class="form-label">Phone <span class="text-danger">*</span></label>
            <input type="tel" class="form-control" name="phone"
                   value="{{ staff.phone if staff else '' }}" required>
          </div>
          {% if mode == 'create' %}
          <div class="mb-3">
            <label class="form-label">Passcode (4–6 digits) <span class="text-danger">*</span></label>
            <input type="password" class="form-control" name="passcode"
                   inputmode="numeric" maxlength="6" required>
            <div class="form-text">Staff will use this PIN to log in. Show it to them once, then discard it.</div>
          </div>
          {% endif %}
          <div class="row g-2 mb-3">
            <div class="col">
              <label class="form-label">Job Type</label>
              <select class="form-select" name="staff_type">
                {% for t in ['full_time','part_time','seasonal','receptionist','salon_manager'] %}
                <option value="{{ t }}" {{ 'selected' if staff and staff.staff_type == t }}>
                  {{ t.replace('_',' ').title() }}
                </option>
                {% endfor %}
              </select>
            </div>
            <div class="col">
              <label class="form-label">Pay Type</label>
              <select class="form-select" name="pay_type">
                {% for t in ['hourly','salary','guarantee'] %}
                <option value="{{ t }}" {{ 'selected' if staff and staff.pay_type == t }}>{{ t.title() }}</option>
                {% endfor %}
              </select>
            </div>
          </div>
          <hr class="my-3">
          <h6 class="fw-semibold text-muted mb-3">Pay Structure</h6>
          <div class="row g-2 mb-3">
            <div class="col">
              <label class="form-label">Pay Type</label>
              <select class="form-select" name="pay_type" id="pay_type" onchange="togglePayFields(this.value)">
                {% for t in ['hourly','salary','guarantee'] %}
                <option value="{{ t }}" {{ 'selected' if staff and staff.pay_type == t }}>{{ t.title() }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col">
              <label class="form-label">Pay Period</label>
              <select class="form-select" name="pay_period">
                {% for t in ['weekly','biweekly','monthly'] %}
                <option value="{{ t }}" {{ 'selected' if staff and staff.pay_period == t }}>{{ t.title() }}</option>
                {% endfor %}
              </select>
            </div>
          </div>
          <div id="field_hourly_rate" class="mb-3">
            <label class="form-label">Hourly Rate ($)</label>
            <input type="number" step="0.01" class="form-control" name="hourly_rate" min="0"
                   value="{{ "%.2f"|format(staff.hourly_rate) if staff and staff.hourly_rate else '' }}">
          </div>
          <div id="field_salary_amount" class="mb-3 d-none">
            <label class="form-label">Salary Amount ($ per pay period)</label>
            <input type="number" step="0.01" class="form-control" name="salary_amount" min="0"
                   value="{{ "%.2f"|format(staff.salary_amount) if staff and staff.salary_amount else '' }}">
          </div>
          <div id="field_guarantee_amount" class="mb-3 d-none">
            <label class="form-label">Guarantee Amount ($ per pay period)</label>
            <input type="number" step="0.01" class="form-control" name="guarantee_amount" min="0"
                   value="{{ "%.2f"|format(staff.guarantee_amount) if staff and staff.guarantee_amount else '' }}">
          </div>
          <div class="row g-2 mb-3">
            <div class="col">
              <label class="form-label">Commission Rate (%)</label>
              <input type="number" step="0.01" class="form-control" name="commission_rate" min="0" max="100"
                     value="{{ "%.2f"|format(staff.commission_rate) if staff and staff.commission_rate else '' }}">
            </div>
            <div class="col d-flex align-items-end mb-1">
              <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" name="commission_enabled" value="1"
                       id="commission_enabled"
                       {{ 'checked' if not staff or staff.commission_enabled }}>
                <label class="form-check-label" for="commission_enabled">Commission Enabled</label>
              </div>
            </div>
          </div>
          <div class="mb-3">
            <label class="form-label">Location Assignments</label>
            {% for loc in locations %}
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="location_ids"
                     value="{{ loc.id }}" id="loc_{{ loc.id }}"
                     {{ 'checked' if assigned_ids and loc.id in assigned_ids }}>
              <label class="form-check-label" for="loc_{{ loc.id }}">{{ loc.name }}</label>
            </div>
            {% endfor %}
          </div>
          {% if mode == 'edit' %}
          <div class="form-check form-switch mb-3">
            <input class="form-check-input" type="checkbox" name="is_active" value="1"
                   id="is_active" {{ 'checked' if staff and staff.is_active }}>
            <label class="form-check-label" for="is_active">Active</label>
          </div>
          {% endif %}
          <div class="d-flex gap-2">
            <button type="submit" class="btn btn-primary">Save</button>
            <a href="{{ url_for('staff.index') }}" class="btn btn-outline-secondary">Cancel</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}