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

<div class="page-head order-head">
  <div>
    <p class="muted"><a href="/admin/shop/orders">{lang key="shop.order.back_to_list"}</a></p>
    <h1>
      {lang key="shop.order_number"} <code class="ord-num">{order.number}</code>
      <span class="badge badge-{order.status}">{order.status_label}</span>
      <span class="pay-badge pay-{order.payment_status}">{order.payment_status_label}</span>
    </h1>
    <p class="muted">{lang key="shop.order.created_at"}: {order.date_full} · {lang key="shop.order.source"}: <span class="src-badge src-{order.source}">{order.source_label}</span></p>
  </div>
</div>

<div class="order-grid">
  <div class="order-main">
    <div class="card">
      <div class="card-h">
        <h3>{lang key="shop.order.items_section"}</h3>
      </div>
      <table class="table table-order-items">
        <thead><tr><th>{lang key="shop.order.col.product"}</th><th>{lang key="shop.order.col.price"}</th><th>{lang key="shop.order.col.quantity"}</th><th>{lang key="shop.order.col.subtotal"}</th></tr></thead>
        <tbody>
          [foreach var="items" as="it"]
            <tr>
              <td>
                <div class="oi-title">{it.product_title}</div>
                [if {it.product_sku}]<small class="muted">SKU: <code>{it.product_sku}</code></small>[/if]
                [if {it.variation_label}]<small class="muted">· {it.variation_label}</small>[/if]
              </td>
              <td>{it.price_fmt}</td>
              <td>×{it.quantity}</td>
              <td><b>{it.subtotal_fmt}</b></td>
            </tr>
          [/foreach]
        </tbody>
      </table>

      <div class="order-totals">
        <div class="ot-row"><span>{lang key="shop.order.totals.subtotal"}</span><span>{order.subtotal_fmt}</span></div>
        [if {order.has_shipping_cost}]
          <div class="ot-row"><span>{lang key="shop.order.totals.shipping"}[if {order.shipping_method_title}] · {order.shipping_method_title}[/if]</span><span>{order.shipping_cost_fmt}</span></div>
        [/if]
        [if {order.has_discount}]
          <div class="ot-row ot-discount"><span>{lang key="shop.order.totals.discount"}[if {order.promo_code}] · {order.promo_code}[/if]</span><span>−{order.discount_fmt}</span></div>
        [/if]
        [if {order.has_tax}]
          <div class="ot-row"><span>{lang key="shop.order.totals.tax"}</span><span>{order.tax_fmt}</span></div>
        [/if]
        <div class="ot-row ot-total"><span>{lang key="shop.order.totals.total"}</span><span>{order.total_fmt}</span></div>
      </div>
    </div>

    <div class="card">
      <div class="card-h"><h3>{lang key="shop.order.shipping_payment"}</h3></div>
      <form method="post" action="/admin/shop/orders/{order.id}/details" class="form">
        {csrf}

        <div class="form-row">
          <div class="form-group">
            <label>{lang key="shop.order.shipping_method"}</label>
            <select name="shipping_method_id">
              <option value="0">{lang key="shop.common.not_set"}</option>
              [foreach var="shipping_methods" as="m"]
                <option value="{m.id}" [if {order.shipping_method_id}={m.id}]selected[/if]>{m.title}</option>
              [/foreach]
            </select>
          </div>
          <div class="form-group">
            <label>{lang key="shop.order.shipping_cost"}</label>
            <input type="number" step="0.01" name="shipping_cost" value="{order.shipping_cost}">
          </div>
        </div>

        <div class="form-row">
          <div class="form-group">
            <label>{lang key="shop.order.payment_method"}</label>
            <select name="payment_method_id">
              <option value="0">{lang key="shop.common.not_set"}</option>
              [foreach var="payment_methods" as="m"]
                <option value="{m.id}" [if {order.payment_method_id}={m.id}]selected[/if]>{m.title}</option>
              [/foreach]
            </select>
          </div>
          <div class="form-group">
            <label>{lang key="shop.order.discount"}</label>
            <input type="number" step="0.01" name="discount" value="{order.discount}">
          </div>
        </div>

        <h4 class="cf-section-h">{lang key="shop.order.contact_data"}</h4>
        <div class="form-row">
          <div class="form-group">
            <label>{lang key="shop.order.name"}</label>
            <input type="text" name="customer_name" value="{order.customer_name}">
          </div>
          <div class="form-group">
            <label>{lang key="shop.order.email"}</label>
            <input type="email" name="customer_email" value="{order.customer_email}">
          </div>
          <div class="form-group">
            <label>{lang key="shop.order.phone"}</label>
            <input type="text" name="customer_phone" value="{order.customer_phone}">
          </div>
        </div>
        <div class="form-group">
          <label>{lang key="shop.order.address"}</label>
          <textarea name="customer_address" rows="2">{order.customer_address}</textarea>
        </div>

        <div class="form-group">
          <label>{lang key="shop.order.admin_note"} <span class="muted">({lang key="shop.order.admin_note_hint"})</span></label>
          <textarea name="admin_note" rows="2" placeholder="{lang key="shop.order.admin_note_placeholder"}">{order.admin_note}</textarea>
        </div>

        <div class="form-actions">
          <button type="submit" class="btn btn-primary">{icon name="check" size="14"} {lang key="shop.order.save_details"}</button>
        </div>
      </form>
    </div>

    <div class="card">
      <div class="card-h"><h3>{lang key="shop.order.history"}</h3></div>

      <form method="post" action="/admin/shop/orders/{order.id}/note" class="form ord-note-form">
        {csrf}
        <div class="form-group">
          <textarea name="note" rows="2" placeholder="{lang key="shop.order.note_placeholder"}" required></textarea>
        </div>
        <button type="submit" class="btn btn-secondary btn-sm">{lang key="shop.order.add_note_button"}</button>
      </form>

      [if {history}]
        <ul class="ord-timeline">
          [foreach var="history" as="h"]
            <li class="ord-tl-item ord-tl-{h.event}">
              <span class="ord-tl-dot"></span>
              <div class="ord-tl-body">
                <div class="ord-tl-head">
                  [if {h.event}="status_changed"]
                    <b>{lang key="shop.order.event.status"}</b> <span class="muted">{h.from_label}</span> → <span class="badge badge-{h.to_value}">{h.to_label}</span>
                  [/if]
                  [if {h.event}="payment_changed"]
                    <b>{lang key="shop.order.event.payment"}</b> <span class="muted">{h.from_label}</span> → <span class="pay-badge pay-{h.to_value}">{h.to_label}</span>
                  [/if]
                  [if {h.event}="created"]<b>{lang key="shop.order.event.created"}</b>[/if]
                  [if {h.event}="note"]<b>{lang key="shop.order.event.note"}</b>[/if]
                </div>
                [if {h.comment}]<div class="ord-tl-text">{h.comment}</div>[/if]
                <div class="ord-tl-meta muted">{h.date_fmt} · {h.author}</div>
              </div>
            </li>
          [/foreach]
        </ul>
      [else]
        <p class="muted">{lang key="shop.order.no_events"}</p>
      [/if]
    </div>
  </div>

  <aside class="order-side">
    <div class="card ord-card-status">
      <div class="card-h"><h3>{lang key="shop.order.sidebar.status_title"}</h3></div>
      <form method="post" action="/admin/shop/orders/{order.id}/status" class="ord-status-form">
        {csrf}
        <div class="form-group">
          <label>{lang key="shop.order.sidebar.new_status"}</label>
          <select name="status">
            [foreach var="status_options" as="s"]
              <option value="{s.code}" [if {order.status}={s.code}]selected[/if]>{s.label}</option>
            [/foreach]
          </select>
        </div>
        <div class="form-group">
          <label>{lang key="shop.order.sidebar.comment"} <span class="muted">{lang key="shop.common.optional"}</span></label>
          <input type="text" name="comment" placeholder="{lang key="shop.order.sidebar.comment_placeholder"}">
        </div>
        <button type="submit" class="btn btn-primary btn-block">{lang key="shop.order.sidebar.update_status"}</button>
      </form>

      <hr>

      <h4>{lang key="shop.order.sidebar.payment_status_title"}</h4>
      <form method="post" action="/admin/shop/orders/{order.id}/payment-status" class="ord-status-form">
        {csrf}
        <div class="form-group">
          <label>{lang key="shop.order.sidebar.new_payment_status"}</label>
          <select name="payment_status">
            [foreach var="payment_options" as="ps"]
              <option value="{ps.code}" [if {order.payment_status}={ps.code}]selected[/if]>{ps.label}</option>
            [/foreach]
          </select>
        </div>
        <div class="form-group">
          <label>{lang key="shop.order.sidebar.comment"} <span class="muted">{lang key="shop.common.optional"}</span></label>
          <input type="text" name="comment" placeholder="{lang key="shop.order.sidebar.payment_comment_placeholder"}">
        </div>
        <button type="submit" class="btn btn-secondary btn-block">{lang key="shop.order.sidebar.update_payment"}</button>
      </form>

      [if {order.paid_at_fmt}]
        <p class="muted small ord-stamp">{lang key="shop.order.sidebar.paid_at"} {order.paid_at_fmt}</p>
      [/if]
      [if {order.shipped_at_fmt}]
        <p class="muted small ord-stamp">{lang key="shop.order.sidebar.shipped_at"} {order.shipped_at_fmt}</p>
      [/if]
      [if {order.delivered_at_fmt}]
        <p class="muted small ord-stamp">{lang key="shop.order.sidebar.delivered_at"} {order.delivered_at_fmt}</p>
      [/if]
    </div>

    <div class="card ord-card-customer">
      <div class="card-h"><h3>{lang key="shop.order.sidebar.customer"}</h3>
        [if {customer.id}]
          <a href="/admin/shop/customers/{customer.id}" class="btn btn-link btn-sm">{lang key="shop.order.sidebar.profile"}</a>
        [/if]
      </div>
      <p><b>{order.customer_name}</b></p>
      <p><a href="mailto:{order.customer_email}" class="ord-link">{icon name="mail" size="14"} {order.customer_email}</a></p>
      [if {order.customer_phone}]
        <p><a href="tel:{order.customer_phone}" class="ord-link">{icon name="phone" size="14"} {order.customer_phone}</a></p>
      [/if]
      [if {order.customer_address}]
        <hr>
        <h4>{lang key="shop.order.address"}</h4>
        <p class="muted">{order.customer_address}</p>
      [/if]
      [if {customer.id}]
        <hr>
        <div class="cust-stats-mini">
          <div><b>{customer.orders_count}</b><small>{lang key="shop.order.sidebar.orders_count"}</small></div>
          <div><b>{customer.total_spent_fmt}</b><small>{lang key="shop.order.sidebar.spent"}</small></div>
          [if {customer.is_vip}]<div class="cust-vip-mini">VIP</div>[/if]
        </div>
      [/if]
      [if {order.comment}]
        <hr>
        <h4>{lang key="shop.order.sidebar.client_comment"}</h4>
        <p class="muted">{order.comment}</p>
      [/if]
    </div>
  </aside>
</div>

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