{% extends "base.html" %}
{% block title %}Create Customer Account{% endblock %}

{% block content %}
<div class="row">
  <div class="col-md-6 offset-md-3">

    <div class="card shadow-sm">
      <div class="card-header bg-primary text-white">
        <h4 class="mb-0">
          <i class="bi bi-person-plus-fill me-2"></i>Create Customer Account
        </h4>
      </div>
      <div class="card-body">

        <p class="text-muted mb-4" style="font-size:.9rem;">
          Enter the customer's details and set their login credentials.
          The account will be active immediately.
        </p>

        <form method="POST">
          {{ form.hidden_tag() }}

          <div class="mb-3">
            {{ form.full_name.label(class="form-label fw-semibold") }}
            {{ form.full_name(class="form-control" + (" is-invalid" if form.full_name.errors else ""),
                              placeholder="e.g. Jane Smith", autofocus=true) }}
            {% for error in form.full_name.errors %}
            <div class="invalid-feedback">{{ error }}</div>
            {% endfor %}
          </div>

          <div class="mb-3">
            {{ form.email.label(class="form-label fw-semibold") }}
            {{ form.email(class="form-control" + (" is-invalid" if form.email.errors else ""),
                          placeholder="jane@example.com") }}
            {% for error in form.email.errors %}
            <div class="invalid-feedback">{{ error }}</div>
            {% endfor %}
          </div>

          <div class="mb-3">
            {{ form.username.label(class="form-label fw-semibold") }}
            {{ form.username(class="form-control" + (" is-invalid" if form.username.errors else ""),
                             placeholder="e.g. jsmith") }}
            {% for error in form.username.errors %}
            <div class="invalid-feedback">{{ error }}</div>
            {% endfor %}
            <div class="form-text">
              <i class="bi bi-person me-1"></i>
              Used to log in. Lowercase letters, numbers, dots, hyphens, and underscores only.
            </div>
          </div>

          <div class="mb-3">
            {{ form.password.label(class="form-label fw-semibold") }}
            {{ form.password(class="form-control" + (" is-invalid" if form.password.errors else ""),
                             autocomplete="new-password") }}
            {% for error in form.password.errors %}
            <div class="invalid-feedback">{{ error }}</div>
            {% endfor %}
            <div class="form-text">Minimum 8 characters.</div>
          </div>

          <div class="mb-4">
            {{ form.confirm_password.label(class="form-label fw-semibold") }}
            {{ form.confirm_password(class="form-control" + (" is-invalid" if form.confirm_password.errors else ""),
                                     autocomplete="new-password") }}
            {% for error in form.confirm_password.errors %}
            <div class="invalid-feedback">{{ error }}</div>
            {% endfor %}
          </div>

          <div class="d-flex gap-2">
            <button type="submit" class="btn btn-primary">
              <i class="bi bi-person-check me-1"></i>Create Account
            </button>
            <a href="{{ url_for('customers.index') }}" class="btn btn-outline-secondary">
              <i class="bi bi-x-circle me-1"></i>Cancel
            </a>
          </div>
        </form>
      </div>
    </div>

    <div class="card mt-3 border-0 bg-light">
      <div class="card-body py-2 px-3">
        <p class="mb-1" style="font-size:.8rem;">
          <i class="bi bi-info-circle me-1 text-primary"></i>
          <strong>What happens next:</strong>
        </p>
        <ol class="mb-0 ps-3" style="font-size:.8rem; color:#555;">
          <li>The account is created immediately and the customer can log in right away.</li>
          <li>A welcome email is sent to the customer with a link to the login page.</li>
          <li>Assign the customer to Contracts or Facilities from their profile page.</li>
        </ol>
      </div>
    </div>

  </div>
</div>
{% endblock %}