<app-breadcrumb [breadcrumb]="breadcrumb" />
<section class="cart-section section-b-space">
  <div class="container-fluid-lg">
    @if((cartItem$ | async)?.length){
    <div class="row g-xl-5 g-sm-4 g-3">
      <div class="col-xxl-9 col-xl-8">
        <div class="cart-table">
          <div class="table-responsive">
            <table class="table">
              <tbody>
                @for(item of cartItem$ | async; track item){
                <tr class="product-box-contain">
                  <td class="product-detail">
                    <div class="product border-0">
                      <a [routerLink]="['/product/', item?.product?.slug]" class="product-image">
                        <img
                          [src]="item?.variation && item?.variation?.variation_image
                                                              ? item?.variation?.variation_image?.original_url
                                                              : item?.product?.product_thumbnail
                                                              ? item?.product?.product_thumbnail?.original_url
                                                              : 'assets/images/product.png'"
                          class="img-fluid"
                          alt="product"
                        />
                      </a>
                      <div class="product-detail">
                        <ul>
                          <li class="name">
                            <a [routerLink]="['/product/', item.product.slug]">
                              {{item?.variation ? item.variation.name : item?.product?.name}}
                            </a>
                          </li>

                          @if(item?.product && item?.product?.unit){
                          <li class="text-content">
                            <span class="text-title">{{ 'unit' | translate }}:</span>
                            {{item.product.unit}}
                          </li>
                          }
                          <li>
                            <h5 class="text-content d-inline-block">{{ 'price' | translate }} :</h5>
                            <span class="text-content"
                              >{{ (item?.variation ? item?.variation?.sale_price : item?.product &&
                              item?.wholesale_price ? item?.wholesale_price! :
                              item?.product?.sale_price) | currencySymbol }}</span
                            >

                            @if(item?.product?.discount){
                            <span class="text-content"
                              >{{ (item?.variation ? item?.variation?.price : item?.product?.price)
                              | currencySymbol }}</span
                            >
                            }
                          </li>

                          @if(item?.product?.discount){
                          <li>
                            <h5 class="saving theme-color">
                              {{ 'saving' | translate }}: {{ ((item?.variation ?
                              item?.variation!.price : item.product.price) - (item.variation ?
                              item?.variation!.sale_price : item.product.sale_price)) |
                              currencySymbol }}
                            </h5>
                          </li>
                          }

                          <li class="quantity-price-box">
                            <div class="cart_qty">
                              <div class="input-group">
                                <app-button
                                  [class]="'btn qty-left-minus'"
                                  [id]="'minus_quantity'"
                                  [spinner]="false"
                                  [type]="'button'"
                                  (click)="updateQuantity(item, -1)"
                                >
                                  <i class="ri-subtract-fill ms-0"></i>
                                </app-button>
                                <input
                                  class="form-control input-number qty-input"
                                  type="text"
                                  name="quantity"
                                  value="{{ item.quantity }}"
                                  readonly
                                />
                                <app-button
                                  [class]="'btn qty-left-minus'"
                                  [id]="'plus_quantity'"
                                  [spinner]="false"
                                  [type]="'button'"
                                  (click)="updateQuantity(item, 1)"
                                >
                                  <i class="ri-add-line ms-0"></i>
                                </app-button>
                              </div>
                            </div>
                          </li>
                          <li>
                            <h5>
                              {{ 'total' | translate }}: {{ (item?.variation ?
                              item.variation.sale_price : item.product.sale_price) * item?.quantity!
                              | currencySymbol }}
                            </h5>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </td>
                  <td class="price">
                    <h4 class="table-title text-content">{{ 'price' | translate }}</h4>
                    <h5>
                      {{ (item?.variation ? item?.variation?.sale_price : item?.product &&
                      item?.wholesale_price ? item?.wholesale_price! : item?.product?.sale_price) |
                      currencySymbol }} @if(item?.product?.discount){
                      <del class="text-content"
                        >{{ (item.variation ? item.variation.price : item.product.price) |
                        currencySymbol }}</del
                      >
                      }
                    </h5>

                    @if(item.product.discount){
                    <h6 class="theme-color">
                      {{ 'you_save' | translate }} : {{ ((item.variation ? item.variation.price :
                      item.product.price) - (item.variation ? item.variation.sale_price :
                      item?.product && item?.wholesale_price ? item?.wholesale_price! :
                      item?.product?.sale_price!)) | currencySymbol }}
                    </h6>
                    }
                  </td>
                  <td class="quantity">
                    <h4 class="table-title text-content">{{ 'quantity' | translate }}</h4>
                    <div class="quantity-price">
                      <div class="cart_qty">
                        <div class="input-group">
                          <app-button
                            [class]="'btn qty-left-minus'"
                            [id]="'minus_quantity'"
                            [spinner]="false"
                            [type]="'button'"
                            (click)="updateQuantity(item, -1)"
                          >
                            <i class="ri-subtract-fill ms-0"></i>
                          </app-button>
                          <input
                            class="form-control input-number qty-input"
                            type="text"
                            name="quantity"
                            value="{{ item.quantity }}"
                            readonly
                          />
                          <app-button
                            [class]="'btn qty-left-minus'"
                            [id]="'plus_quantity'"
                            [spinner]="false"
                            [type]="'button'"
                            (click)="updateQuantity(item, 1)"
                          >
                            <i class="ri-add-line ms-0"></i>
                          </app-button>
                        </div>
                      </div>
                    </div>
                  </td>
                  <td class="subtotal">
                    <h4 class="table-title text-content">{{ 'total' | translate }}</h4>
                    <h5>
                      {{ (item.variation ? item.variation.sale_price : item?.product &&
                      item?.wholesale_price ? item?.wholesale_price! : item?.product?.sale_price!) *
                      item.quantity | currencySymbol }}
                    </h5>
                  </td>
                  <td class="save-remove">
                    <h4 class="table-title text-content">{{ 'action' | translate }}</h4>
                    <a
                      class="save notifi-wishlist"
                      href="javascript:void(0)"
                      (click)="addToWishlist(item)"
                      >{{ 'save_for_later' | translate }}</a
                    >
                    <a
                      class="remove close_button"
                      href="javascript:void(0)"
                      (click)="delete(item.id)"
                      >{{ 'remove' | translate }}</a
                    >
                  </td>
                </tr>
                }
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="col-xxl-3 col-xl-4">
        <div class="summery-box p-sticky">
          <div class="summery-header">
            <h3>{{ 'cart_total' | translate }}</h3>
          </div>
          <div class="summery-contain">
            <ul>
              <li>
                <h4>{{ 'subtotal' | translate }}</h4>
                <h4 class="price">{{ (cartTotal$ | async) || 0 | currencySymbol }}</h4>
              </li>

              @if(!(cartDigital$ | async)){
              <li class="align-items-start">
                <h4>{{ 'shipping' | translate}}</h4>
                <h4 class="price text-end">{{ 'cost_at_checkout' | translate }}</h4>
              </li>
              }

              <li class="align-items-start">
                <h4>{{ 'tax' | translate }}</h4>
                <h4 class="price text-end">{{ 'cost_at_checkout' | translate }}</h4>
              </li>
            </ul>
          </div>
          <ul class="summery-total">
            <li class="list-total border-top-0">
              <h4>{{ 'total' | translate }}</h4>
              <h4 class="price theme-color">{{ (cartTotal$ | async) || 0 | currencySymbol }}</h4>
            </li>
          </ul>
          <div class="button-group cart-button">
            <ul>
              <li>
                <a class="btn btn-animation proceed-btn fw-bold" [routerLink]="['/checkout/']">
                  {{ 'process_to_checkout' | translate }}
                </a>
              </li>
              <li>
                <a class="btn shopping-button" [routerLink]="['/collections/']">
                  <i class="ri-arrow-left-line me-2"></i>
                  {{ 'return_to_shopping' | translate }}
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    } @if(!(cartItem$ | async)?.length){
    <app-no-data
      [class]="'no-data-added'"
      [image]="'assets/svg/empty-items.svg'"
      [text]="'No Items Added'"
      [description]="'It appears that nothing has been added to your cart.'"
    />
    }
  </div>
</section>
