agent_test/template/cart/home.html

<!-- Breadcrumb -->
<div class="layout-container py-3">
  <div class="flex items-center gap-2 text-[12px]">
    <a href="/" class="text-[#888] hover:text-brand">Trang chủ</a>
    <svg class="w-2.5 h-2.5 text-[#888]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
    </svg>
    <span class="text-[#0a0a0a] font-medium">Giỏ hàng</span>
  </div>
</div>

<!-- Main Content -->
<div class="layout-container pb-12 flex justify-center">
  <div class="bg-white px-4 py-5 w-[832px]">
    <div class="flex flex-col gap-3 w-full">

      <!-- Section: Thông tin giỏ hàng -->
      <h2 class="font-bold text-[16px] text-[#0a0a0a] leading-7">Thông tin giỏ hàng</h2>

      <!-- Cart Items -->
      {% for _item in page.cart_items %}
      {% assign _info = _item.item_info %}
      {% assign _ic = _item.in_cart %}

      <div class="cart-item-wrap flex flex-col gap-1">
        <div class="cart-item flex gap-4 items-start" data-id="{{ _item._id }}" data-price="{{ _ic.price }}"
          data-qty="{{ _ic.quantity }}">

          <!-- Image -->
          <div class="bg-[#f3f4f6] flex items-center justify-center shrink-0 w-16 h-16">
            <a href="{{ _info.productUrl }}">
              <img src="{{ _info.productImage.small }}" alt="{{ _info.productName }}"
                class="w-16 h-16 object-contain" />
            </a>
          </div>

          <!-- Info -->
          <div class="flex flex-col flex-1">
            <div class="flex items-start justify-between w-full">
              <a href="{{ _info.productUrl }}" class="font-bold text-[13px] text-[#0a0a0a] leading-5 hover:text-brand">
                {{ _info.productName }}
              </a>

              <div class="flex items-start gap-10 shrink-0">

                <!-- Price -->
                <div class="w-[87px]">
                  {% if _ic.price == 0 %}
                  <p class="font-medium text-[14px] text-[#e7000b] leading-5">Liên hệ</p>
                  <p class="text-[14px] text-transparent select-none">&nbsp;</p>
                  {% else %}
                  <p class="item-total-price font-medium text-[16px] text-[#e7000b] leading-[18px]">{{ _ic.total_price
                    }}</p>
                  {% if _info.marketPrice > 0 %}
                  <p class="item-market-price text-[12px] text-[#a5a5a5] line-through">{{ _info.marketPrice }}</p>
                  {% else %}
                  <p class="text-[14px] text-transparent select-none">&nbsp;</p>
                  {% endif %}
                  {% endif %}
                </div>

                <!-- Quantity -->
                <div class="flex items-center gap-3 h-8">
                  <button onclick="cartDec('{{ _item._id }}')"
                    class="border border-[#d1d5dc] rounded w-6 h-8 flex items-center justify-center hover:bg-gray-50">
                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
                    </svg>
                  </button>
                  <div class="border border-[#d1d5dc] rounded w-12 h-8 flex items-center justify-center">
                    <span class="item-qty text-[14px] text-[#0a0a0a]">{{ _ic.quantity }}</span>
                  </div>
                  <button onclick="cartInc('{{ _item._id }}')"
                    class="border border-[#d1d5dc] rounded w-6 h-8 flex items-center justify-center hover:bg-gray-50">
                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                    </svg>
                  </button>
                </div>

                <!-- Delete -->
                <button onclick="cartRemove('{{ _item._id }}')"
                  class="w-4 h-5 flex items-center justify-center text-[#4a5565] hover:text-[#e7000b]">
                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                      d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6" />
                    <path stroke-linecap="round" stroke-width="1.5" d="M10 11v6M14 11v6" />
                  </svg>
                </button>

              </div>
            </div>
          </div>
        </div>
        {% if _info.productSummary != '' %}
        <div class="flex gap-4">
          <div class="shrink-0 w-16"></div>
          <div class="flex-1 bg-[#f3f4f6] rounded px-3 py-1.5">
            <ul class="list-disc list-inside flex flex-col gap-0.5 text-[12px] text-[#4a5565] leading-[1.6]">
              {% assign _lines = _info.productSummary | split: "\n" %}
              {% for _line in _lines %}
              <li>{{ _line }}</li>
              {% endfor %}
            </ul>
          </div>
        </div>
        {% endif %}
      </div>

      {% endfor %}

      <!-- Section: Thông tin nhận hàng -->
      <h2 class="font-bold text-[16px] text-[#0a0a0a] leading-7 mt-1">Thông tin nhận hàng</h2>

      <!-- Delivery form -->
      <div class="flex flex-col">
        <!-- Tabs -->
        <div class="border-b border-black/10 flex">
          <button id="tab-delivery" onclick="switchTab('delivery')"
            class="h-[46px] w-[392px] text-[14px] font-medium bg-[#f3f4f6] border-b-2 border-[#e7000b] text-[#e7000b] rounded-tl-lg rounded-tr-lg">
            Giao hàng tận nơi
          </button>
          <button id="tab-pickup" onclick="switchTab('pickup')"
            class="h-[46px] w-[408px] text-[14px] font-medium text-[#4a5565] border-b-2 border-transparent">
            Nhận hàng tại trung tâm
          </button>
        </div>

        <!-- Form body -->
        <div class="bg-[#f3f4f6] rounded px-3 py-5 flex flex-col gap-3">
          <!-- Gender -->
          <div class="flex items-center gap-6">
            <label class="flex items-center gap-2 cursor-pointer">
              <input type="radio" name="gender" value="anh" checked class="w-4 h-4 accent-[#e7000b]" />
              <span class="font-medium text-[13px] text-[#0a0a0a]">Anh</span>
            </label>
            <label class="flex items-center gap-2 cursor-pointer">
              <input type="radio" name="gender" value="chi" class="w-4 h-4 accent-[#e7000b]" />
              <span class="font-medium text-[13px] text-[#0a0a0a]">Chị</span>
            </label>
          </div>

          <!-- Name + Phone -->
          <div class="grid grid-cols-2 gap-4">
            <div class="flex flex-col gap-2">
              <label class="text-[13px] font-medium text-[#0a0a0a]">
                Họ và tên <span class="text-[#e7000b]">*</span>
              </label>
              <input type="text" placeholder="Họ tên"
                class="bg-white border border-[#d1d5dc] rounded px-4 py-2 h-10 text-[13px] text-[#0a0a0a] outline-none focus:border-[#e7000b]" />
            </div>
            <div class="flex flex-col gap-2">
              <label class="text-[13px] font-medium text-[#0a0a0a]">
                Số điện thoại <span class="text-[#e7000b]">*</span>
              </label>
              <input type="tel" placeholder="Nhập số điện thoại"
                class="bg-white border border-[#d1d5dc] rounded px-4 py-2 h-10 text-[13px] text-[#0a0a0a] outline-none focus:border-[#e7000b]" />
            </div>
          </div>

          <!-- Address -->
          <div class="flex flex-col gap-2">
            <label class="text-[13px] font-medium text-[#0a0a0a]">
              Địa chỉ nhận hàng <span class="text-[#e7000b]">*</span>
            </label>
            <div class="grid grid-cols-2 gap-4">
              <div class="relative">
                <select
                  class="appearance-none bg-white border border-[#d1d5dc] rounded px-4 py-2 h-10 w-full text-[13px] text-[#0a0a0a] outline-none focus:border-[#e7000b] cursor-pointer">
                  <option value="" disabled selected>Chọn Tỉnh/Thành Phố</option>
                  {% for _province in page.province_list %}
                  <option value="{{ _province.api_id }}">{{ _province.name }}</option>
                  {% endfor %}
                </select>
                <svg
                  class="absolute right-3 top-1/2 -translate-y-1/2 w-3 h-3 text-[#0a0a0a] pointer-events-none rotate-90"
                  fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
              </div>
              <div class="relative">
                <select
                  class="appearance-none bg-white border border-[#d1d5dc] rounded px-4 py-2 h-10 w-full text-[13px] text-[#0a0a0a] outline-none focus:border-[#e7000b] cursor-pointer">
                  <option value="" disabled selected>Chọn Xã/Phường</option>
                </select>
                <svg
                  class="absolute right-3 top-1/2 -translate-y-1/2 w-3 h-3 text-[#0a0a0a] pointer-events-none rotate-90"
                  fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
              </div>
            </div>
            <textarea rows="2" placeholder="Nhập địa chỉ giao hàng"
              class="bg-white border border-[#d1d5dc] rounded px-4 py-2 text-[13px] text-[rgba(10,10,10,0.5)] outline-none focus:border-[#e7000b] resize-none"></textarea>
          </div>
        </div>
      </div>

      <!-- Invoice checkbox -->
      <label class="flex items-center gap-2 cursor-pointer h-5">
        <input type="checkbox" class="w-4 h-4 accent-[#e7000b] border border-[#d1d5dc] rounded" />
        <span class="font-medium text-[13px] text-[#0a0a0a]">Yêu cầu xuất hóa đơn công ty</span>
      </label>

      <!-- Total -->
      <div class="flex items-center justify-between h-8">
        <span class="font-semibold text-[13px] text-[#0a0a0a]">Tổng tiền</span>
        <span id="cart-total" class="font-medium text-[16px] text-[#e7000b]">{{ page.cart_summary.total_value }}</span>
      </div>

      <!-- Divider -->
      <hr class="border-t border-dashed border-[#d1d5dc]" />

      <!-- Section: Phương thức thanh toán -->
      <div class="flex flex-col gap-3">
        <h3 class="font-bold text-[16px] text-[#0a0a0a] leading-7">Phương thức thanh toán</h3>

        <div class="flex flex-col gap-3">
          {% for _pm in page.payment_method %}
          <label class="flex items-center gap-2 cursor-pointer">
            <input type="radio" name="payment" value="{{ _pm.type }}" {% if forloop.first %}checked{% endif %}
              class="w-4 h-4 accent-[#e7000b]" />
            <span class="text-[13px] text-[#0a0a0a]">{{ _pm.title }}</span>
          </label>
          {% endfor %}
        </div>

        <!-- Terms checkbox -->
        <label class="flex items-center gap-2 cursor-pointer mt-4">
          <input type="checkbox" class="w-4 h-4 accent-[#e7000b] border border-[#d1d5dc] rounded" />
          <span class="text-[13px] text-[#4a5565]">
            Tôi đã đọc và đồng ý với các
            <a href="#" class="text-[#155dfc] font-bold hover:underline">Điều kiện giao dịch chung</a>
            của website
          </span>
        </label>

        <!-- Order button -->
        <button
          class="bg-[#e7000b] hover:bg-[#c00009] text-white font-medium text-[16px] h-12 w-full rounded flex items-center justify-center transition-colors mt-5">
          ĐẶT HÀNG
        </button>
      </div>

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