{% extends "tenant/layouts/base.html" %}
{% block title %}POS Checkout{% endblock %}
{% block content %}
<h4 class="fw-bold mb-4"><i class="bi bi-cash-register me-2"></i>Checkout</h4>

<form method="POST" action="{{ url_for('pos.submit') }}" novalidate>
  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
  {% if appointment %}
  <input type="hidden" name="appointment_id" value="{{ appointment.id }}">
  {% endif %}

  <div class="row g-3">
    <!-- Left: items -->
    <div class="col-lg-7">
      <div class="card shadow-sm mb-3">
        <div class="card-header fw-semibold">Services</div>
        <div class="card-body">
          {% for s in services %}
          <div class="form-check mb-1">
            <input class="form-check-input" type="checkbox" name="service_ids"
                   value="{{ s.id }}" id="svc_{{ s.id }}"
                   {{ 'checked' if appointment and appointment.service_id == s.id }}>
            <label class="form-check-label" for="svc_{{ s.id }}">
              {{ s.name }} <span class="text-muted small">({{ s.duration_min }}min)</span>
              <span class="fw-semibold">${{ "%.2f"|format(s.price) }}</span>
            </label>
          </div>
          {% endfor %}
        </div>
      </div>
      {% if services %}
      <div class="card shadow-sm mb-3">
        <div class="card-header fw-semibold">Products</div>
        <div class="card-body">
          {% for p in products %}
          <div class="form-check mb-1">
            <input class="form-check-input" type="checkbox" name="product_ids"
                   value="{{ p.id }}" id="prod_{{ p.id }}">
            <label class="form-check-label" for="prod_{{ p.id }}">
              {{ p.name }} <span class="fw-semibold">${{ "%.2f"|format(p.sale_price) }}</span>
            </label>
          </div>
          {% endfor %}
        </div>
      </div>
      {% endif %}
    </div>

    <!-- Right: payment details -->
    <div class="col-lg-5">
      <div class="card shadow-sm mb-3">
        <div class="card-header fw-semibold">Payment Details</div>
        <div class="card-body">
          <div class="mb-3">
            <label class="form-label">Customer</label>
            <select class="form-select" name="customer_id">
              <option value="">— Walk-in / No Customer —</option>
              {% for c in customers %}
              <option value="{{ c.id }}"
                {{ 'selected' if appointment and appointment.customer_id == c.id }}>
                {{ c.name }}
              </option>
              {% endfor %}
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label">Staff</label>
            <select class="form-select" name="staff_id">
              <option value="">— Not assigned —</option>
              {% for s in staff_list %}
              <option value="{{ s.id }}"
                {{ 'selected' if appointment and appointment.staff_id == s.id }}>
                {{ s.name }}
              </option>
              {% endfor %}
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label">Payment Method</label>
            <select class="form-select" name="payment_method">
              {% for m in payment_methods %}
              <option value="{{ m }}">{{ m.title() }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label">Payment Reference <small class="text-muted">(optional)</small></label>
            <input type="text" class="form-control" name="payment_reference"
                   placeholder="Transaction ID, note…">
          </div>
          <div class="mb-3">
            <label class="form-label">Tip ($)</label>
            <input type="number" step="0.01" class="form-control" name="tip_amount"
                   value="0" min="0">
          </div>
          <div class="mb-3">
            <label class="form-label">Gift Card Code</label>
            <input type="text" class="form-control font-monospace" name="gift_card_code"
                   placeholder="XXXX-XXXX-XXXX">
          </div>
          <div class="form-check mb-3">
            <input class="form-check-input" type="checkbox" name="rebook" value="1" id="rebook">
            <label class="form-check-label" for="rebook">Schedule next visit after checkout</label>
          </div>
          <div class="d-grid">
            <button type="submit" class="btn btn-success btn-lg">
              <i class="bi bi-check-circle me-2"></i>Complete Checkout
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>
{% endblock %}