
<div [appBodyClass]="'font-f-4'">
<app-breadcrumb [Title]="'Cart'" [subTitle]="'Cart'" />

<div class="cart-table-area cart-area section-padding5 sp3">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="cart-items">
          <table class="table table-borderless">
            <tbody>
              <tr class="cart-head">
                <th class="first-th"></th>
                @for(item of cartHeadData; track $index){
                <th>{{ item }}</th>
                }
              </tr>

              @for(item of productList;track $index){
              <tr class="cart-product-list">
                <td class="cart-prodct cart-product-img">
                  <span><i class="fa-solid fa-xmark"></i></span
                  ><img [src]="item.image" alt="" />
                </td>

                <td>
                  <div class="cart-prodct">
                    <div class="cart-product-details">
                      <ul class="reviews"></ul>
                      <p>{{ item.name }}</p>
                    </div>
                  </div>
                </td>
                <td class="cart-price">{{ item.price }}</td>
                <td>
                  <div class="product-quantity">
                    <div class="number shop-details">
                      <span
                        class="plus plus2"
                        (click)="incrementQuantity($index)"
                      >
                        <i class="fa-solid fa-caret-up"></i>
                      </span>
                      <input type="text" [value]="item.quantity" readonly />
                      <span
                        class="minus minus2"
                        (click)="decrementQuantity($index)"
                      >
                        <i class="fa-solid fa-caret-down"></i>
                      </span>
                    </div>
                  </div>
                </td>

                <td class="cart-price">{{ item.subtotal }}</td>
              </tr>
              }
            </tbody>
          </table>
        </div>
      </div>
      <div class="col-lg-12">
        <div class="codepen-area">
          <div class="coupon-input">
            <input type="text" placeholder="Coupon Code" />
            <div class="all-3-btn">
              <button class="comon-button">Apply Coupon</button>
            </div>
          </div>
          <div class="all-3-btn">
            <a [routerLink]="[]" class="comon-button">Update Cart</a>
          </div>
        </div>
      </div>
    </div>
    <div class="space60"></div>
    <div class="row">
      <div class="col-lg-6"></div>
      <div class="col-lg-6">
        <div class="cart-totals-box">
          <div class="page-hadding">
            <h4><a [routerLink]="[]">Cart Totals</a></h4>
          </div>
          <div class="space24"></div>
          <div class="cart-totals-inner-box">
            <div class="total-flex">
              <div class="cart-price-p">
                <p>Sub-total</p>
              </div>
              <div class="cart-price">
                <ul>
                  <li>${{ cartTotals.subTotal.toFixed(2) }}</li>
                </ul>
              </div>
            </div>
            <div class="cart-border"></div>
            <div class="total-flex">
              <div class="cart-price-p">
                <p>Shipping</p>
              </div>
              <div class="cart-price">
                <ul>
                  <li>Flat rate:<span> ${{ cartTotals.shipping.toFixed(2) }}</span></li>
                  <li>Shipping to :</li>
                  <li>Change address</li>
                </ul>
              </div>
            </div>
            <div class="cart-border"></div>
            <div class="total-flex">
              <div class="cart-price-p">
                <p>Total</p>
              </div>
              <div class="cart-price">
                <ul>
                  <li>${{ cartTotals.total.toFixed(2) }}</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="space30"></div>
          <a class="comon-button" routerLink="/checkout">Proceed to checkout</a>
        </div>
      </div>
    </div>
  </div>
</div>
</div>