<%- include('./includes.ejs') %>

<style>
  .order-detail-container { max-width: 1100px; margin: 0 auto; padding: 24px 16px; }
  .section-divider { display: flex; align-items: center; gap: 12px; margin: 28px 0 18px; }
  .divider-icon { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #0d6efd, #0850c4); color: #fff; display: flex; align-items: center; justify-content: center; }
  .divider-text { font-size: 18px; font-weight: 800; }
  .divider-line { flex: 1; height: 2px; background: linear-gradient(90deg, var(--bs-border-color), transparent); }
  .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
  .stat-card { border: 1px solid var(--bs-border-color); border-radius: 12px; background: var(--bs-card-bg); padding: 16px; box-shadow: var(--bs-box-shadow); }
  .stat-label { color: var(--bs-secondary-color); font-size: 12px; margin-bottom: 4px; font-weight: 700; }
  .stat-value { font-size: 16px; font-weight: 700; word-break: break-word; }
  .status-pill { display: inline-block; padding: 6px 12px; border-radius: 20px; font-size: 13px; font-weight: 700; }
  .status-new { background: #e0f2fe; color: #0369a1; }
  .status-current { background: #dbeafe; color: #1d4ed8; }
  .status-finished { background: #dcfce7; color: #166534; }
  .status-cancelled { background: #fee2e2; color: #991b1b; }
  .client-card { border: 2px solid #0d6efd; border-radius: 16px; padding: 16px; display: flex; gap: 14px; align-items: center; }
  .client-avatar { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; }
  .kt-order-missing { min-height: 24rem; display: grid; place-items: center; padding: 2rem; }
  .kt-order-missing__card { width: min(100%, 34rem); padding: 2.25rem; border: 1px solid var(--kt-border); border-radius: 1.5rem; background: var(--kt-surface); box-shadow: var(--kt-shadow-md); text-align: center; }
  .kt-order-missing__icon { width: 4rem; height: 4rem; display: grid; place-items: center; margin: 0 auto 1rem; border-radius: 1.2rem; background: var(--kt-accent-soft); color: var(--kt-accent); font-size: 1.65rem; }
  .kt-order-missing__card h1 { margin: 0; color: var(--kt-text); font-size: 1.25rem; font-weight: 900; }
  .kt-order-missing__card p { margin: 0.55rem 0 1.25rem; color: var(--kt-muted); line-height: 1.8; }
  .kt-order-missing__back { min-height: 2.75rem; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1rem; border-radius: 0.85rem; background: var(--kt-primary); color: var(--kt-on-primary); font-weight: 800; }
</style>

<section id="multiple-column-form">
  <% if (!data) { %>
    <div class="kt-order-missing" data-order-missing-state>
      <div class="kt-order-missing__card">
        <span class="kt-order-missing__icon" aria-hidden="true"><i class="ti ti-receipt-off"></i></span>
        <h1><%= i18n.__('common.notFound') %></h1>
        <p><%= lang === 'en' ? 'This order is no longer available. Return to the orders list to continue.' : 'لم يعد هذا الطلب متاحًا. ارجع إلى سجل الطلبات للمتابعة.' %></p>
        <a class="kt-order-missing__back" href="/dashboard/orders/all"><i class="ti ti-arrow-right"></i><span><%= i18n.__('common.referer') %></span></a>
      </div>
    </div>
  <% } else { %>
  <div class="order-detail-container">
    <% const statusKey = data?.order?.status || ''; %>
    <% const statusClass = statusKey === 'new' ? 'status-new' : statusKey === 'current' ? 'status-current' : statusKey === 'cancelled' ? 'status-cancelled' : 'status-finished'; %>

    <div class="client-card">
      <img src="<%= data?.client?.avatar || '' %>" alt="client" class="client-avatar">
      <div>
        <div class="stat-value"><%= data?.client?.name || '—' %></div>
        <div class="stat-label"><%= data?.client?.phone || '—' %></div>
      </div>
    </div>

    <div class="section-divider">
      <div class="divider-icon"><i class="ti ti-receipt"></i></div>
      <span class="divider-text"><%= i18n.__('orders.orderInfo') %></span>
      <div class="divider-line"></div>
    </div>
    <div class="stats-grid">
      <div class="stat-card"><div class="stat-label"><%= i18n.__('orders.orderNumber') %></div><div class="stat-value"><%= data?.order?.orderNumber || '—' %></div></div>
      <div class="stat-card"><div class="stat-label"><%= i18n.__('orders.status') %></div><div class="stat-value"><span class="status-pill <%= statusClass %>"><%= data?.order?.statusText || '—' %></span></div></div>
      <div class="stat-card"><div class="stat-label"><%= i18n.__('common.date') %></div><div class="stat-value"><%= data?.order?.createdAtText || '—' %></div></div>
    </div>

    <div class="section-divider">
      <div class="divider-icon"><i class="ti ti-cash"></i></div>
      <span class="divider-text"><%= i18n.__('orders.paymentInfo') %></span>
      <div class="divider-line"></div>
    </div>
    <div class="stats-grid">
      <div class="stat-card"><div class="stat-label"><%= i18n.__('orders.serviceCostText') %></div><div class="stat-value"><%= data?.price?.serviceCostText || '—' %></div></div>
      <div class="stat-card"><div class="stat-label"><%= i18n.__('orders.vatPrice') %></div><div class="stat-value"><%= data?.price?.vatPriceText || '—' %></div></div>
      <div class="stat-card"><div class="stat-label"><%= i18n.__('orders.total') %></div><div class="stat-value"><%= data?.price?.totalText || '—' %></div></div>
      <div class="stat-card"><div class="stat-label"><%= i18n.__('orders.paymentMethod') %></div><div class="stat-value"><%= data?.price?.paymentMethodTitle || '—' %></div></div>
      <div class="stat-card"><div class="stat-label"><%= i18n.__('orders.commission') %></div><div class="stat-value"><%= data?.price?.appCommissionValueText || '—' %></div></div>
    </div>

    <div class="section-divider">
      <div class="divider-icon"><i class="ti ti-package"></i></div>
      <span class="divider-text"><%= i18n.__('orders.orderProducts') %></span>
      <div class="divider-line"></div>
    </div>
    <div class="card">
      <div class="table-responsive">
        <table class="table text-center mb-0">
          <thead>
            <tr>
              <th><%= i18n.__('common.image') %></th>
              <th><%= i18n.__('products.name') %></th>
              <th><%= i18n.__('products.count') %></th>
              <th><%= i18n.__('orders.productUnitPrice') %></th>
              <th><%= i18n.__('orders.total') %></th>
              <th><%= i18n.__('orders.status') %></th>
            </tr>
          </thead>
          <tbody>
            <% if (!(data?.products?.values || []).length) { %>
              <tr>
                <td colspan="6"><%= i18n.__('common.notFound') %></td>
              </tr>
            <% } %>
            <% (data?.products?.values || []).forEach(product => { %>
              <% const productName = typeof product?.name === 'object'
                ? (product?.name?.[lang] || product?.name?.ar || product?.name?.en || '—')
                : (product?.name || '—'); %>
              <tr>
                <td>
                  <% if (product?.image) { %>
                    <img src="<%= product.image %>" alt="product" width="54" height="54" style="object-fit:cover;border-radius:8px;">
                  <% } else { %>—<% } %>
                </td>
                <td><%= productName %></td>
                <td><%= product?.count || 0 %></td>
                <td><%= product?.unitPrice || 0 %> <%= i18n.__('common.currency') %></td>
                <td><%= product?.price || 0 %> <%= i18n.__('common.currency') %></td>
                <td><%= product?.statusText || '—' %></td>
              </tr>
            <% }) %>
          </tbody>
        </table>
      </div>
    </div>

    <% if (data?.order?.adminReason || data?.order?.userReason) { %>
      <div class="section-divider">
        <div class="divider-icon"><i class="ti ti-alert-triangle"></i></div>
        <span class="divider-text"><%= i18n.__('orders.reason') %></span>
        <div class="divider-line"></div>
      </div>
      <div class="stat-card">
        <div class="stat-value"><%= data.order.adminReason || data.order.userReason %></div>
      </div>
    <% } %>

    <div class="text-center mt-4">
      <% if (data?.btns?.chat) { %>
        <a class="btn btn-label-dribbble waves-effect mx-2" href="/dashboard/orders/chat/<%= data.order.id %>/show"><%= i18n.__('orders.chatView') %></a>
      <% } %>
      <a class="btn btn-label-dribbble waves-effect mx-2" href="<%= referer || '/dashboard/orders/all' %>"><%= i18n.__('common.referer') %></a>
    </div>
  </div>
  <% } %>
</section>

<% /* cancel modal removed: admin should not cancel orders from dashboard */ %>
