<% title = trans.cruds.MODULE.ORDER + ' ' + trans.global.view + ' - ' + companyInfo.NAME %>

<div class="container-fluid">
  <!-- Page Title and Breadcrumb -->
  <div class="page-title mb-4">
    <div class="row align-items-center">
      <div class="col-sm-6 col-12">
        <h2><%= trans.cruds.ORDER?.title %></h2>
      </div>
      <div class="col-sm-6 col-12">
        <ol class="breadcrumb float-sm-end">
          <li class="breadcrumb-item"><a href="/admin/dashboard"><i class="iconly-Home icli svg-color"></i> <%= trans.global.home %></a></li>
          <li class="breadcrumb-item"><a href="/admin/orders"><%= trans.cruds.ORDER?.title_singular || trans.global.view %></a></li>
          <li class="breadcrumb-item active"><%= trans.global.view %></li>
        </ol>
      </div>
    </div>
  </div>

  <!-- Order Summary -->
  <div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h3 class="card-title mb-0"><%= trans.cruds.ORDER?.title_singular + ' ' + trans.global.view %></h3>

      <div class="d-flex align-items-center gap-2">
        <strong class="fs-6"><%= trans.cruds.ORDER.show.order_id %>#<%= order._id %></strong>
        <span class="badge 
          <%= order.status === 'cancelled' 
            ? 'bg-danger' 
            : order.status === 'delivered' 
              ? 'bg-success' 
              : 'bg-warning' %> text-uppercase">
          <!-- <%= order.status.replace(/_/g, ' ') %> -->
           <%= trans.cruds.ORDER.show[order.status] || order.status%>
        </span>
      </div>
    </div>
    <div class="card-body row">
      <div class="col-md-6">
        <div class="form-group mb-1">
          <label class="form-label"><%= trans.cruds.ORDER.show.order_id %>:</label>
          <span><%= order._id %></span>
        </div>
        <div class="form-group mb-1">
          <label class="form-label"><%= trans.cruds.ORDER.show.created %>:</label>
          <span><%= new Date(order.createdAt).toLocaleString(lang) %></span>
        </div>
        <div class="form-group mb-1">
          <label class="form-label"><%= trans.cruds.ORDER.show.last_updated %>:</label>
          <span><%= new Date(order.updatedAt).toLocaleString(lang) %></span>
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group mb-1">
          <label class="form-label"><%= trans.cruds.ORDER.show.negotiated_price %>:</label>
          <span><%= order.products.negotiatePrice.toLocaleString() %></span>
        </div>
        <div class="form-group mb-1">
          <label class="form-label"><%= trans.cruds.ORDER.show.quantity %> :</label>
          <span><%= order.products.quantity %></span>
        </div>
        <div class="form-group mb-1">
          <label class="form-label"><%= trans.cruds.ORDER.show.shipping_amount %> :</label>
          <span><%= order.shippingAmount.toLocaleString() %></span>
        </div>
        <div class="form-group mb-1">
          <label class="form-label"><%= trans.cruds.ORDER.show.total_amount %> :</label>
          <span><strong><%= order.totalAmount.toLocaleString() %></strong></span>
        </div>
      </div>
    </div>
  </div>

  <!-- Buyer and Seller Info -->
  <div class="row mb-4">
    <div class="col-md-6">
      <div class="card h-100">
        <div class="card-header">
          <h5><%= trans.cruds.ORDER.show.buyer_information || 'Buyer Information' %></h5>
        </div>
        <div class="card-body">
          <div class="form-group mb-1">
            <label class="form-label"><label class="form-label"><%= trans.cruds.ORDER.show.name %>:</label>
            <span><%= order.buyerId.first_name %> <%= order.buyerId.last_name %></span>
          </div>
          <div class="form-group mb-1">
            <label class="form-label"><%= trans.cruds.ORDER.show.email %> :</label>
            <span><%= order.buyerId.email %></span>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card h-100">
        <div class="card-header">
          <h5><%= trans.cruds.ORDER.show.seller_information || 'Seller Information' %></h5>
        </div>
        <div class="card-body">
          <div class="form-group mb-1">
            <label class="form-label"><%= trans.cruds.ORDER.show.name %> :</label>
            <span><%= order.sellerId.first_name %> <%= order.sellerId.last_name %></span>
          </div>
          <div class="form-group mb-1">
            <label class="form-label"><%= trans.cruds.ORDER.show.email %> :</label>
            <span><%= order.sellerId.email %></span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Product Details -->
  <div class="card mb-4">
    <div class="card-header"><h5><%= trans.cruds.ORDER.show.product_details %></h5></div>
    <div class="card-body row">
      <div class="col-md-8">
        <div class="form-group mb-1">
          <label class="form-label"><%= trans.cruds.ORDER.show.title %> :</label>
          <span><%= order.products.productSnapshot.title.content %></span>
        </div>
        <div class="form-group mb-1">
          <label class="form-label"><%= trans.cruds.ORDER.show.short_description %> :</label>
          <span><%= order.products.productSnapshot['short-description'].content %></span>
        </div>
        <div class="form-group mb-1">
          <label class="form-label"><%= trans.cruds.ORDER.show.original_price %> :</label>
          <span><%= order.products.productSnapshot.price.content.toLocaleString() %></span>
        </div>
        <div class="form-group mb-1">
          <label class="form-label"><%= trans.cruds.ORDER.show.negotiated_price %>:</label>
          <span><%= order.products.negotiatePrice.toLocaleString() %></span>
        </div>
        <div class="form-group mb-1">
          <label class="form-label"><%= trans.cruds.ORDER.show.quantity %> :</label>
          <span><%= order.products.quantity %></span>
        </div>
        <div class="form-group mb-1">
          <label class="form-label"><%= trans.cruds.ORDER.show.available_quantity %> :</label>
          <span><%= order.products.productSnapshot['number-of-quantity'].content %></span>
        </div>
      </div>
      <div class="col-md-4">
        <% if (order.products.productSnapshot['upload-feature-image']?.content) { %>
          <img src="<%= isFileExists(`public/storage/post/${order.products.productSnapshot['upload-feature-image'].content}`) ? `/storage/post/${order.products.productSnapshot['upload-feature-image'].content}` : '/backend/images/dummy-image.jpg' %>" alt="Product Image" class="img-fluid rounded" style="max-width: 200px;">
        <% } %>
      </div>
    </div>

    <% 
        let multiImages = order.products.productSnapshot['upload-multiple-images']?.content;
        if (multiImages && !Array.isArray(multiImages)) {
            multiImages = [multiImages];
        }
    %>

    <% if (multiImages && multiImages.length) { %>
        <div class="card-footer">
            <strong><%= trans.cruds.ORDER.show.additional_images %>:</strong>
            <div class="d-flex flex-wrap gap-2 mt-2">
            <% multiImages.forEach(image => { %>
                <img src="<%= isFileExists(`public/storage/post/${image}`) ? `/public/storage/post/${image}` : '/backend/images/dummy-image.jpg' %>" alt="Additional Product Image" style="width: 100px; height: 100px; object-fit: cover;" class="rounded">
            <% }) %>
            </div>
        </div>
    <% } %>

    <% if (order.products.productSnapshot['upload-multiple-videos']?.content) { %>
      <div class="card-footer mt-3">
        <strong><%= trans.cruds.ORDER.show.product_video %>:</strong>
        <video controls style="max-width: 300px; display: block; margin-top: 10px;">
          <source src="/storage/post/<%= order.products.productSnapshot['upload-multiple-videos'].content %>" type="video/mp4" />
          Your browser does not support the video tag.
        </video>
      </div>
    <% } %>

    <% if (order.products.productSnapshot.description?.content) { %>
      <div class="card-footer mt-3">
        <strong><%= trans.cruds.ORDER.show.full_description %>:</strong>
        <div class="border p-3 mt-2 rounded">
          <%- order.products.productSnapshot.description.content %>
        </div>
      </div>
    <% } %>
  </div>

  <!-- Shipping Address -->
  <div class="card mb-4">
    <div class="card-header"><h5><%= trans.cruds.ORDER.show.shipping_address %></h5></div>
    <div class="card-body">
      <div class="form-group mb-1">
        <label class="form-label"><%= trans.cruds.ORDER.show.address %> :</label>
        <span>
          <%= [
            order.address.building_name, order.address.street, order.address.district,
            order.address.area || null, order.address.address_line_1, order.address.address_line_2 || null,
            order.address.city?.label || order.address.city, order.address.state?.label || order.address.state,
            order.address.country?.name || order.address.country
          ].filter(Boolean).join(', ') %> - <%= order.address.postal_code %>
        </span>
      </div>
      <div class="form-group mb-1">
        <label class="form-label"><%= trans.cruds.ORDER.show.contact_number %> :</label>
        <span><%= order.address.contact_number || 'N/A' %></span>
      </div>
      <% if (order.address.secondary_number) { %>
        <div class="form-group mb-1">
          <label class="form-label"><%= trans.cruds.ORDER.show.secondary_number %>:</label>
          <span><%= order.address.secondary_number %></span>
        </div>
      <% } %>
    </div>
  </div>

  <!-- Status History -->
  <div class="card mb-4">
    <div class="card-header bg-white border-bottom-0">
      <h5 class="mb-0"><%= trans.cruds.ORDER.show.order_status_timeline %></h5>
    </div>
    <div class="card-body">
      <div class="row">
        <div class="col-lg-12">
          <ul class="timeline list-unstyled position-relative px-2">
            <% order.orderStatusHistory.forEach((status, idx) => { %>
              <li class="d-flex align-items-start mb-4 position-relative timeline-item">
                <!-- Timeline marker -->
                <span class="timeline-marker position-relative me-3 mt-2 flex-shrink-0">
                  <span class="timeline-dot d-inline-block rounded-circle border border-2
                    <% if (status.status === 'pending') { %> bg-warning border-warning <% } %>
                    <% if (status.status === 'processing') { %> bg-info border-info <% } %>
                    <% if (status.status === 'shipped') { %> bg-primary border-primary <% } %>
                    <% if (status.status === 'out_for_delivery') { %> bg-secondary border-secondary <% } %>
                    <% if (status.status === 'delivered') { %> bg-success border-success <% } %>
                    <% if (status.status === 'cancelled') { %> bg-danger border-danger <% } %>">
                  </span>
                  <% if (idx < order.orderStatusHistory.length - 1) { %>
                    <span class="timeline-connector position-absolute start-50 translate-middle-x"></span>
                  <% } %>
                </span>
                <!-- Timeline card content -->
                <div class="flex-grow-1 border rounded-3 bg-white px-4 py-3 timeline-content">
                  <div class="d-flex justify-content-between align-items-center">
                    <span class="badge
                      <% if (status.status === 'pending') { %> bg-warning <% } %>
                      <% if (status.status === 'processing') { %> bg-info <% } %>
                      <% if (status.status === 'shipped') { %> bg-primary <% } %>
                      <% if (status.status === 'out_for_delivery') { %> bg-secondary <% } %>
                      <% if (status.status === 'delivered') { %> bg-success <% } %>
                      <% if (status.status === 'cancelled') { %> bg-danger <% } %>">
                      <!-- <%= status.status.replace(/_/g, ' ').toUpperCase() %> -->
                       <%= trans.cruds.ORDER.show[status.status] || status.status %>
                    </span>
                    <span class="text-muted small">
                      <%= new Date(status.updatedAt).toLocaleString(lang) %>
                    </span>
                  </div>
                  <% if (status.message) { %>
                    <div class="mt-2">
                      <label class="form-label mb-0 text-muted small"><%= trans.cruds.ORDER.show.remark %> :</label>
                      <span><%= status.message %></span>
                    </div>
                  <% } %>
                  <div class="mt-2">
                    <label class="form-label mb-0 text-muted small"><%= trans.cruds.ORDER.show.updated_by %>:</label>
                    <span>
                      <%= status.updatedBy ? status.updatedBy.first_name.charAt(0).toUpperCase() + status.updatedBy.first_name.slice(1) + ' ' + status.updatedBy.last_name.charAt(0).toUpperCase() + status.updatedBy.last_name.slice(1) : 'N/A' %>
                    </span>
                  </div>
                </div>
              </li>
            <% }) %>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>