{include file="_partials/head.tpl"}

<div class="cm-container cm-checkout">

  <nav class="cm-breadcrumbs" aria-label="Хлібні крихти">
    <a href="/">{icon name="dashboard" size="14"}</a>
    <span class="cm-breadcrumbs__sep">›</span>
    <a href="/cart">Кошик</a>
    <span class="cm-breadcrumbs__sep">›</span>
    <span class="cm-breadcrumbs__current">Оформлення замовлення</span>
  </nav>

  <header class="cm-checkout__head">
    <h1 class="cm-checkout__title">Оформлення замовлення</h1>
  </header>

  [if {error}="csrf"]<div class="cm-alert cm-alert--error">{icon name="close" size="14"} Сесія закінчилась. Перезавантажте сторінку.</div>[/if]
  [if {error}="invalid"]<div class="cm-alert cm-alert--error">{icon name="close" size="14"} Перевірте ім'я та email.</div>[/if]
  [if {error}="empty"]<div class="cm-alert cm-alert--error">{icon name="close" size="14"} Кошик порожній. <a href="/shop">До магазину</a></div>[/if]
  [if {error}="items"]<div class="cm-alert cm-alert--error">{icon name="close" size="14"} Деякі товари в кошику недоступні. Оновіть кошик.</div>[/if]

  <form method="post" action="/checkout" class="cm-checkout-form" data-checkout-form>
    {csrf}

    <div class="cm-checkout-layout">

      {* Левая колонка — форма *}
      <div class="cm-checkout-main">

        <section class="cm-checkout-step">
          <header class="cm-checkout-step__head">
            <span class="cm-checkout-step__num">1</span>
            <h2 class="cm-checkout-step__title">Контактні дані</h2>
          </header>
          <div class="cm-checkout-step__body">
            <div class="cm-form-row">
              <label class="cm-form-field">
                <span>Ваше ім'я <em>*</em></span>
                <input type="text" name="name" value="{user.name}" required maxlength="100" placeholder="Іван Іваненко">
              </label>
              <label class="cm-form-field">
                <span>Email <em>*</em></span>
                <input type="email" name="email" value="{user.email}" required maxlength="200" placeholder="email@example.com">
              </label>
            </div>
            <label class="cm-form-field">
              <span>Телефон</span>
              <input type="tel" name="phone" maxlength="32" placeholder="+380 (__) ___ __ __">
            </label>
          </div>
        </section>

        <section class="cm-checkout-step">
          <header class="cm-checkout-step__head">
            <span class="cm-checkout-step__num">2</span>
            <h2 class="cm-checkout-step__title">Доставка</h2>
          </header>
          <div class="cm-checkout-step__body">
            [if {has_shipping}="1"]
              <div class="cm-radio-group">
                [foreach var="shipping_methods" as="m"]
                  <label class="cm-radio">
                    <input type="radio" name="shipping_method_id" value="{m.id}" [if {_first}="1"]checked[/if] data-cost="{m.cost}">
                    <span class="cm-radio__check"></span>
                    <span class="cm-radio__body">
                      <span class="cm-radio__title">{m.title}</span>
                      [if {m.description}]<span class="cm-radio__desc">{m.description}</span>[/if]
                    </span>
                    <span class="cm-radio__price">[if {m.is_free}]безкоштовно[else]{m.cost_fmt}[/if]</span>
                  </label>
                [/foreach]
              </div>
            [else]
              <p class="cm-checkout-empty">Способи доставки ще не налаштовані. <a href="/admin/shop/shipping">Додати в адмінці</a>.</p>
            [/if]
            <label class="cm-form-field">
              <span>Адреса (вулиця, будинок, квартира)</span>
              <textarea name="address" rows="2" maxlength="500" placeholder="м. Одеса, вул. Дерибасівська, 1, кв. 23"></textarea>
            </label>
          </div>
        </section>

        <section class="cm-checkout-step">
          <header class="cm-checkout-step__head">
            <span class="cm-checkout-step__num">3</span>
            <h2 class="cm-checkout-step__title">Оплата</h2>
          </header>
          <div class="cm-checkout-step__body">
            [if {has_payments}="1"]
              <div class="cm-radio-group">
                [foreach var="payment_methods" as="p"]
                  <label class="cm-radio">
                    <input type="radio" name="payment_method_id" value="{p.id}" [if {_first}="1"]checked[/if]>
                    <span class="cm-radio__check"></span>
                    <span class="cm-radio__body">
                      <span class="cm-radio__title">{p.title}</span>
                      [if {p.description}]<span class="cm-radio__desc">{p.description}</span>[/if]
                    </span>
                  </label>
                [/foreach]
              </div>
            [else]
              <p class="cm-checkout-empty">Способи оплати ще не налаштовані. <a href="/admin/shop/payments">Додати в адмінці</a>.</p>
            [/if]
          </div>
        </section>

        <section class="cm-checkout-step">
          <header class="cm-checkout-step__head">
            <span class="cm-checkout-step__num">4</span>
            <h2 class="cm-checkout-step__title">Промокод</h2>
          </header>
          <div class="cm-checkout-step__body">
            <div class="cm-checkout-promo">
              <div class="cm-checkout-promo__row">
                <input type="text" name="promo_code" maxlength="64" autocomplete="off" placeholder="SUMMER2026" style="text-transform:uppercase" data-promo-input>
                <button type="button" class="cm-btn cm-btn--ghost" data-promo-apply>Застосувати</button>
              </div>
              <div class="cm-checkout-promo__status" data-promo-status hidden></div>
            </div>
          </div>
        </section>

        <section class="cm-checkout-step">
          <header class="cm-checkout-step__head">
            <span class="cm-checkout-step__num">5</span>
            <h2 class="cm-checkout-step__title">Коментар до замовлення</h2>
          </header>
          <div class="cm-checkout-step__body">
            <label class="cm-form-field">
              <textarea name="comment" rows="3" maxlength="1000" placeholder="Додаткові побажання, час доставки тощо"></textarea>
            </label>
          </div>
        </section>
      </div>

      {* Правая колонка — sticky summary *}
      <aside class="cm-checkout-aside">
        <div class="cm-checkout-summary">
          <h3 class="cm-checkout-summary__title">Ваше замовлення</h3>

          <div class="cm-checkout-items" data-cm-checkout-items>
            <p class="cm-checkout-loading">Завантаження…</p>
          </div>

          <div class="cm-checkout-summary__rows">
            <div class="cm-cart-summary__row">
              <span>Товарів</span>
              <span data-cm-checkout-qty>—</span>
            </div>
            <div class="cm-cart-summary__row">
              <span>Сума</span>
              <span data-cm-checkout-subtotal>—</span>
            </div>
            <div class="cm-cart-summary__row" data-cm-checkout-shipping-row hidden>
              <span>Доставка <span class="cm-muted" data-cm-checkout-shipping-title></span></span>
              <span data-cm-checkout-shipping>—</span>
            </div>
            <div class="cm-cart-summary__row" data-cm-checkout-discount-row hidden>
              <span>Знижка <span class="cm-muted" data-cm-checkout-promo-code></span></span>
              <span data-cm-checkout-discount style="color:#166534">—</span>
            </div>
          </div>

          <div class="cm-cart-summary__total">
            <span>Разом</span>
            <span data-cm-checkout-total>—</span>
          </div>

          <button type="submit" class="cm-btn cm-btn--primary cm-btn--lg cm-btn--block">
            {icon name="check" size="16"} Підтвердити замовлення
          </button>

          <a href="/cart" class="cm-cart-summary__continue">{icon name="arrow_left" size="14"} Повернутися до кошика</a>

          <ul class="cm-cart-summary__perks">
            <li>{icon name="check" size="14"} Захищена оплата</li>
            <li>{icon name="check" size="14"} Гарантія від виробника</li>
            <li>{icon name="check" size="14"} Повернення протягом 14 днів</li>
          </ul>
        </div>
      </aside>

    </div>
  </form>
</div>

{include file="_partials/foot.tpl"}
