<app-breadcrumb [breadcrumb]="breadcrumb" />

<section class="checkout-section-2 section-b-space">
  <div class="container-fluid-lg">
    <div class="row g-sm-4 g-3">
      <div class="col-xxl-8 col-xl-7">
        <div class="left-sidebar-checkout">
          @if((setting$ | async)?.activation?.guest_checkout && !(accessToken$ | async)){
          <div class="checkout-form-section">
            <div class="checkbox-main-box">
              <div class="checkout-title1">
                <h2>{{ 'account_details' | translate }}</h2>
              </div>

              @if(form){
              <form [formGroup]="form" class="checkout-form row">
                <div class="col-md-4">
                  <div class="mb-3 form-box">
                    <label for="name" class="form-label">{{ 'name' | translate }}</label>
                    <input
                      type="text"
                      class="form-control"
                      formControlName="name"
                      placeholder="{{ 'enter_name' | translate }}"
                      id="name"
                    />

                    @if(form.controls['name'].touched &&
                    form.controls['name'].errors?.['required']){
                    <div class="invalid-feedback">{{ 'name_is_required' | translate }}</div>
                    }
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="mb-3 form-box">
                    <label for="email" class="form-label">{{ 'email' | translate }}</label>
                    <input
                      type="email"
                      class="form-control"
                      placeholder="{{ 'enter_email_address' | translate }}"
                      formControlName="email"
                      id="email"
                    />

                    @if(form.controls['email'].touched &&
                    form.controls['email'].errors?.['required']){
                    <div class="invalid-feedback">{{ 'email_is_required' | translate }}</div>
                    } @if(form.controls['email'].touched &&
                    form.controls['email'].errors?.['email']){
                    <div class="invalid-feedback">{{ 'invalid_email' | translate }}</div>
                    }
                  </div>
                </div>
                <div class="col-md-4 phone-field">
                  <div class="form-box position-relative">
                    <label class="form-label" for="phoneno">{{ 'phone_number' | translate }}</label>
                    <select2
                      class="custom-select intl-tel-input"
                      [templates]="template"
                      [data]="codes"
                      formControlName="country_code"
                    >
                      <ng-template #template let-data="data">
                        <div class="country">
                          <div class="flag-box">
                            <div class="iti-flag {{data?.class}}"></div>
                          </div>
                          <span class="dial-code">{{data.code}}</span>
                        </div>
                      </ng-template>
                    </select2>
                    <input
                      type="number"
                      class="form-control intl-input-padding"
                      formControlName="phone"
                      placeholder="{{ 'enter_phone' | translate }}"
                      name="phone"
                    />
                  </div>

                  @if(form.controls['phone'].touched &&
                  form.controls['phone'].errors?.['required']){
                  <div class="invalid-feedback">{{ 'phone_is_required' | translate }}</div>
                  }
                </div>
                <div class="col-md-12">
                  <div class="mb-3 form-box form-checkbox">
                    <input
                      type="checkbox"
                      class="form-check-input checkbox_animated"
                      id="account"
                      formControlName="create_account"
                    />
                    <label class="form-check-label" for="account"
                      >{{ 'create_an_account?' | translate }}</label
                    >
                  </div>
                </div>

                @if(form.controls['create_account'].value){
                <div class="col-md-6">
                  <div class="mb-3 form-box">
                    <label for="pass" class="form-label">{{ 'password' | translate }}</label>
                    <input
                      type="password"
                      class="form-control"
                      formControlName="password"
                      placeholder="{{ 'enter_password' | translate }}"
                      id="pass"
                    />

                    @if(form.controls['password'].touched &&
                    form.controls['password'].errors?.['required']){
                    <div class="invalid-feedback">{{ 'password_is_required' | translate }}</div>
                    }
                  </div>
                </div>
                }
              </form>
              }
            </div>
            <div class="checkbox-main-box">
              <div class="checkout-title1">
                <h2>{{ 'shipping_details' | translate }}</h2>
              </div>

              @if(form){
              <form [formGroup]="form" class="checkout-form">
                <div class="row" formGroupName="shipping_address">
                  <div class="col-md-12">
                    <div class="mb-3 form-box">
                      <label for="sname" class="form-label">{{ 'title' | translate }}</label>
                      <input
                        type="text"
                        class="form-control"
                        formControlName="title"
                        id="sname"
                        placeholder="{{ 'enter_name' | translate }}"
                      />

                      @if(form.get('shipping_address.title')?.touched &&
                      form.get('shipping_address.title')?.errors?.['required']){
                      <div class="invalid-feedback">{{ 'title_is_required' | translate }}</div>
                      }
                    </div>
                  </div>
                  <div class="col-12">
                    <div class="mb-3 form-box">
                      <label for="saddress" class="form-label">{{ 'address' | translate }}</label>
                      <input
                        type="text"
                        class="form-control"
                        formControlName="street"
                        id="saddress"
                        placeholder="{{ 'enter_address' | translate }}"
                      />

                      @if(form.get('shipping_address.street')?.touched &&
                      form.get('shipping_address.street')?.errors?.['required']){
                      <div class="invalid-feedback">{{ 'address_is_required' | translate }}</div>
                      }
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="mb-3 form-box">
                      <label for="scountry" class="form-label">{{ 'country' | translate }}</label>
                      <select2
                        class="custom-select"
                        [data]="(countries$ | async) ? (countries$ | async)! : []"
                        [placeholder]="'select_country' | translate"
                        (update)="shippingCountryChange($event)"
                        formControlName="country_id"
                        resettable
                      />

                      @if(form.get('shipping_address.country_id')?.touched &&
                      form.get('shipping_address.country_id')?.errors?.['required']){
                      <div class="invalid-feedback">{{ 'country_is_required' | translate }}</div>
                      }
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="mb-3 form-box">
                      <label for="sstate" class="form-label">{{ 'state' | translate }}</label>
                      <select2
                        class="custom-select"
                        [data]="(shippingStates$ | async) ? (shippingStates$ | async)! : []"
                        [placeholder]="'select_state' | translate"
                        formControlName="state_id"
                      >
                        @if(form.get('shipping_address.state_id')?.touched &&
                        form.get('shipping_address.state_id')?.errors?.['required']){
                        <div class="invalid-feedback">{{ 'state_is_required' | translate }}</div>
                        }
                      </select2>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="mb-3 form-box">
                      <label for="scity" class="form-label">{{ 'city' | translate }}</label>
                      <input
                        type="text"
                        class="form-control"
                        formControlName="city"
                        id="scity"
                        placeholder="{{ 'enter_city' | translate }}"
                      />

                      @if(form.get('shipping_address.city')?.touched &&
                      form.get('shipping_address.city')?.errors?.['required']){
                      <div class="invalid-feedback">{{ 'city_is_required' | translate }}</div>
                      }
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="mb-3 form-box">
                      <label for="spincode" class="form-label">{{ 'pincode' | translate }}</label>
                      <input
                        type="text"
                        class="form-control"
                        formControlName="pincode"
                        id="spincode"
                        placeholder="{{ 'enter_pincode' | translate }}"
                      />

                      @if(form.get('shipping_address.pincode')?.touched &&
                      form.get('shipping_address.pincode')?.errors?.['required']){
                      <div class="invalid-feedback">{{ 'pincode_is_required' | translate }}</div>
                      }
                    </div>
                  </div>
                  <div class="col-md-12 phone-field">
                    <div class="form-box position-relative">
                      <label class="form-label" for="phone">{{ 'phone_number' | translate }}</label>
                      <select2
                        class="custom-select intl-tel-input"
                        [templates]="template"
                        [data]="codes"
                        formControlName="country_code"
                      >
                        <ng-template #template let-data="data">
                          <div class="country">
                            <div class="flag-box">
                              <div class="iti-flag {{data?.class}}"></div>
                            </div>
                            <span class="dial-code">{{data.code}}</span>
                          </div>
                        </ng-template>
                      </select2>
                      <input
                        type="number"
                        class="form-control intl-input-padding"
                        formControlName="phone"
                        placeholder="{{ 'enter_phone' | translate }}"
                        name="phone"
                      />
                    </div>

                    @if(form.get('shipping_address.phone')?.touched &&
                    form.get('shipping_address.phone')?.errors?.['required']){
                    <div class="invalid-feedback">{{ 'phone_is_required' | translate }}</div>
                    }
                  </div>
                </div>
              </form>
              }
            </div>
            <div class="checkbox-main-box">
              <div class="checkout-title1">
                <h2>{{ 'billing_details' | translate }}</h2>
              </div>

              @if(form){
              <form [formGroup]="form" class="checkout-form">
                <div class="row" formGroupName="billing_address">
                  @if(form.controls['shipping_address'].valid){
                  <div class="col-md-12">
                    <div class="mb-3 form-box form-checkbox">
                      <input
                        type="checkbox"
                        class="form-check-input checkbox_animated"
                        id="same_shipping"
                        formControlName="same_shipping"
                      />
                      <label class="form-check-label" for="same_shipping"
                        >{{ 'same_as_shipping' | translate }}</label
                      >
                    </div>
                  </div>
                  }
                  <div class="col-md-12">
                    <div class="mb-3 form-box">
                      <label for="name" class="form-label">{{ 'title' | translate }}</label>
                      <input
                        type="text"
                        class="form-control"
                        formControlName="title"
                        id="name"
                        placeholder="{{ 'enter_name' | translate }}"
                      />

                      @if(form.get('billing_address.title')?.touched &&
                      form.get('billing_address.title')?.errors?.['required']){
                      <div class="invalid-feedback">{{ 'title_is_required' | translate }}</div>
                      }
                    </div>
                  </div>
                  <div class="col-12">
                    <div class="mb-3 form-box">
                      <label for="address" class="form-label">{{ 'address' | translate }}</label>
                      <input
                        type="text"
                        class="form-control"
                        formControlName="street"
                        id="address"
                        placeholder="{{ 'enter_address' | translate }}"
                      />

                      @if(form.get('billing_address.street')?.touched &&
                      form.get('billing_address.street')?.errors?.['required']){
                      <div class="invalid-feedback">{{ 'address_is_required' | translate }}</div>
                      }
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="mb-3 form-box">
                      <label for="country" class="form-label">{{ 'country' | translate }}</label>
                      <select2
                        class="custom-select"
                        [data]="(countries$ | async) ? (countries$ | async)! : []"
                        [placeholder]="'select_country' | translate"
                        (update)="billingCountryChange($event)"
                        formControlName="country_id"
                        resettable
                      />

                      @if(form.get('billing_address.country_id')?.touched &&
                      form.get('billing_address.country_id')?.errors?.['required']){
                      <div class="invalid-feedback">{{ 'country_is_required' | translate }}</div>
                      }
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="mb-3 form-box">
                      <label for="state" class="form-label">{{ 'state' | translate }}</label>
                      <select2
                        class="custom-select"
                        [data]="(billingStates$ | async) ? (billingStates$ | async)! : []"
                        formControlName="state_id"
                        [placeholder]="'select_state' | translate"
                      />

                      @if(form.get('billing_address.state_id')?.touched &&
                      form.get('billing_address.state_id')?.errors?.['required']){
                      <div class="invalid-feedback">{{ 'state_is_required' | translate }}</div>
                      }
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="mb-3 form-box">
                      <label for="city" class="form-label">{{ 'city' | translate }}</label>
                      <input
                        type="text"
                        class="form-control"
                        formControlName="city"
                        id="city"
                        placeholder="{{ 'enter_city' | translate }}"
                      />

                      @if(form.get('billing_address.city')?.touched &&
                      form.get('billing_address.city')?.errors?.['required']){
                      <div class="invalid-feedback">{{ 'city_is_required' | translate }}</div>
                      }
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="mb-3 form-box">
                      <label for="pincode" class="form-label">{{ 'pincode' | translate }}</label>
                      <input
                        type="text"
                        class="form-control"
                        formControlName="pincode"
                        id="pincode"
                        placeholder="{{ 'enter_pincode' | translate }}"
                      />

                      @if(form.get('billing_address.pincode')?.touched &&
                      form.get('billing_address.pincode')?.errors?.['required']){
                      <div class="invalid-feedback">{{ 'pincode_is_required' | translate }}</div>
                      }
                    </div>
                  </div>
                  <div class="col-md-12 phone-field">
                    <div class="form-box position-relative">
                      <label class="form-label" for="phone">{{ 'phone_number' | translate }}</label>
                      <select2
                        class="custom-select intl-tel-input"
                        [templates]="template"
                        [data]="codes"
                        formControlName="country_code"
                      >
                        <ng-template #template let-data="data">
                          <div class="country">
                            <div class="flag-box">
                              <div class="iti-flag {{data?.class}}"></div>
                            </div>
                            <span class="dial-code">{{data.code}}</span>
                          </div>
                        </ng-template>
                      </select2>
                      <input
                        type="number"
                        class="form-control intl-input-padding"
                        formControlName="phone"
                        placeholder="{{ 'enter_phone' | translate }}"
                        name="phone"
                      />
                    </div>

                    @if(form.get('billing_address.phone')?.touched &&
                    form.get('billing_address.phone')?.errors?.['required']){
                    <div class="invalid-feedback">{{ 'phone_is_required' | translate }}</div>
                    }
                  </div>
                </div>
              </form>
              }
            </div>
            <div class="checkbox-main-box">
              <div class="checkout-title1">
                <h2>{{ 'delivery_options' | translate }}</h2>
              </div>
              <app-delivery-block
                [setting]="(setting$ | async)!"
                (selectDelivery)="selectDelivery($event)"
              />
            </div>
            <div class="checkbox-main-box">
              <div class="checkout-title1">
                <h2>{{ 'payment_options' | translate }}</h2>
              </div>

              @if(!(setting$ | async)?.payment_methods?.length){
              <div class="empty-box">
                <h2>{{ 'no_payment_options_found' | translate }}</h2>
              </div>
              }
              <app-payment-block
                [setting]="(setting$ | async)!"
                (selectPaymentMethod)="selectPaymentMethod($event)"
              />
            </div>
          </div>
          } @if((accessToken$ | async)){
          <div class="checkout-detail-box">
            <ul>
              @if(!(cartDigital$ | async)){
              <li>
                <div class="checkout-icon">
                  <i class="ri-map-pin-line"></i>
                </div>
                <div class="checkout-box">
                  <div class="checkout-title">
                    <h4>{{ 'shipping_address' | translate }}</h4>
                    <a
                      href="javascript:void(0)"
                      class="d-flex align-items-center fw-bold"
                      (click)="AddressModal()?.openModal()"
                    >
                      <i class="ri-add-line me-1"></i> {{ 'add_new' | translate }}
                    </a>
                  </div>
                  <div class="checkout-detail">
                    <app-address-block
                      [addresses]="(user$ | async)?.address"
                      [type]="'shipping'"
                      (selectAddress)="selectShippingAddress($event)"
                    />
                  </div>
                </div>
              </li>
              }

              <li>
                <div class="checkout-icon">
                  <i class="ri-map-pin-line"></i>
                </div>
                <div class="checkout-box">
                  <div href="javascript:void(0)" class="checkout-title">
                    <h4>{{ 'billing_address' | translate }}</h4>
                    <a
                      href="javascript:void(0)"
                      class="d-flex align-items-center fw-bold"
                      (click)="AddressModal()?.openModal()"
                    >
                      <i class="ri-add-line me-1"></i> {{ 'add_new' | translate }}
                    </a>
                  </div>
                  <div class="checkout-detail">
                    <app-address-block
                      [addresses]="(user$ | async)?.address"
                      [type]="'billing'"
                      (selectAddress)="selectBillingAddress($event)"
                    />
                  </div>
                </div>
              </li>

              @if(!(cartDigital$ | async)){
              <li>
                <div class="checkout-icon">
                  <i class="ri-truck-line"></i>
                </div>
                <div class="checkout-box">
                  <div class="checkout-title">
                    <h4>{{ 'delivery_options' | translate }}</h4>
                  </div>

                  @if(!(user$ | async)){
                  <div class="empty-box">
                    <h2>{{ 'no_delivery_options_found' | translate }}</h2>
                  </div>
                  }
                  <app-delivery-block
                    [setting]="(setting$ | async)!"
                    (selectDelivery)="selectDelivery($event)"
                  />
                </div>
              </li>
              }

              <li>
                <div class="checkout-icon">
                  <i class="ri-bank-card-line"></i>
                </div>
                <div class="checkout-box">
                  <div class="checkout-title">
                    <h4>{{ 'payment_options' | translate }}</h4>
                  </div>

                  @if(!(user$ | async)){
                  <div class="empty-box">
                    <h2>{{ 'no_payment_options_found' | translate }}</h2>
                  </div>
                  }

                  <app-payment-block
                    [setting]="(setting$ | async)!"
                    (selectPaymentMethod)="selectPaymentMethod($event)"
                  />
                </div>
              </li>
            </ul>
          </div>
          }
        </div>
      </div>

      <div class="col-xxl-4 col-xl-5">
        <div class="card pos-detail-card">
          <div class="card-body">
            <div class="title-header">
              <div class="d-flex align-items-center">
                <h5>{{ 'checkout' | translate }}</h5>
              </div>
            </div>
            <div class="product-details">
              @if(!(cartItem$ | async)?.length){
              <app-no-data
                [class]="'empty-cart'"
                [image]="'assets/svg/empty-items.svg'"
                [text]="'no_items_cart'"
              />
              } @if((cartItem$ | async)?.length){
              <ul class="cart-listing">
                @for(item of cartItem$ | async; track item){
                <li>
                  <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"
                  />
                  <div class="cart-content">
                    <h4>{{ item?.variation ? item?.variation?.name : item?.product?.name }}</h4>
                    <h5 class="text-theme">
                      {{ (item?.variation ? item.variation.sale_price : item?.product &&
                      item?.wholesale_price ? item?.wholesale_price : item?.product?.sale_price)! |
                      currencySymbol }} X {{ item.quantity }}
                    </h5>
                    <h5 class="price">
                      {{ (item?.variation ? item.variation.sale_price : item?.product &&
                      item?.wholesale_price ? item?.wholesale_price : item?.product?.sale_price)! *
                      item.quantity | currencySymbol }}
                    </h5>
                  </div>
                </li>
                }
              </ul>
              }
            </div>

            @if((cartItem$ | async)?.length){ @if(form){
            <form [formGroup]="form" (ngSubmit)="placeorder()">
              <div class="custom-box-loader">
                @if(loading){
                <div class="box-loader">
                  <app-loader [loaderClass]="'custom-loader-wrapper blur-bg'" />
                </div>
                }

                <ul class="summary-total">
                  <li>
                    <h4>{{ 'subtotal' | translate }}</h4>
                    <h4 class="price">
                      {{ (checkoutTotal ? (checkoutTotal.total.sub_total | currencySymbol) :
                      'not_calculated_yet' | translate ) }}
                    </h4>
                  </li>

                  @if(!(cartDigital$ | async)){
                  <li>
                    <h4>{{ 'shipping' | translate }}</h4>
                    <h4 class="price">
                      {{ (checkoutTotal ? (checkoutTotal.total.shipping_total | currencySymbol) :
                      'not_calculated_yet' | translate) }}
                    </h4>
                  </li>
                  }

                  <li>
                    <h4>{{ 'tax' | translate }}</h4>
                    <h4 class="price">
                      {{ (checkoutTotal ? (checkoutTotal.total.tax_total | currencySymbol) :
                      'not_calculated_yet' | translate ) }}
                    </h4>
                  </li>

                  @if((user$ | async) && checkoutTotal && (user$ | async)?.point?.balance){
                  <li>
                    <h4
                      [class]="form.controls['points_amount'].value ? 'txt-primary fw-bold' : 'text-muted'"
                    >
                      {{ 'points' | translate }}
                    </h4>
                    <h4
                      [class]="form.controls['points_amount'].value ? 'txt-primary fw-bold price' : 'text-muted price'"
                    >
                      {{ (checkoutTotal ? (checkoutTotal.total.convert_point_amount! |
                      currencySymbol) : 'not_calculated_yet' | translate ) }}
                    </h4>
                  </li>
                  } @if((user$ | async) && checkoutTotal && (user$ | async)?.point?.balance){
                  <li class="border-cls">
                    <label class="form-check-label m-0" for="ponts"
                      >{{ 'point_text' | translate }}</label
                    >
                    <input
                      class="checkbox_animated check-it"
                      type="checkbox"
                      id="ponts"
                      (change)="togglePoint($event)"
                    />
                  </li>
                  } @if((user$ | async) && checkoutTotal && (user$ | async)?.wallet?.balance){
                  <li>
                    <h4
                      [class]="form.controls['wallet_balance'].value ? 'txt-primary fw-bold' : 'text-muted'"
                    >
                      {{ 'wallet_balance' | translate }}
                    </h4>
                    <h4
                      [class]="form.controls['wallet_balance'].value ? 'txt-primary fw-bold price' : 'text-muted price'"
                    >
                      {{ (checkoutTotal ? (checkoutTotal.total.convert_wallet_balance! |
                      currencySymbol) : 'not_calculated_yet' | translate ) }}
                    </h4>
                  </li>
                  } @if((user$ | async) && checkoutTotal && (user$ | async)?.wallet?.balance){
                  <li class="border-cls">
                    <label class="form-check-label m-0" for="wallet"
                      >{{ 'wallet_text' | translate }}</label
                    >
                    <input
                      class="checkbox_animated check-it"
                      type="checkbox"
                      id="wallet"
                      (change)="toggleWallet($event)"
                    />
                  </li>

                  } @if((user$ | async) && checkoutTotal){
                  <li class="coupon-sec">
                    @if(!coupon && !appliedCoupon){
                    <a class="promocode-title" (click)="showCoupon()">
                      <h4>{{ 'have_a_promo_code?' | translate }}</h4>
                    </a>
                    } @if(coupon && !appliedCoupon){
                    <div class="w-100">
                      <div class="coupon-box mt-2 d-flex w-100">
                        <div class="input-group" [class.coupon-error]="couponError">
                          <input
                            type="text"
                            [class]="'form-control'"
                            [class.is-invalid]="couponError"
                            id="coupon"
                            #cpn
                            placeholder="{{ 'enter_coupon_code_here'  | translate  }}..."
                          />
                          <app-button
                            [class]="'btn-apply'"
                            [type]="'button'"
                            [id]="'coupon_apply'"
                            (click)="cpn.value && setCoupon(cpn.value)"
                          >
                            {{ 'apply' | translate }}
                          </app-button>

                          @if(couponError){
                          <div class="invalid-feedback">{{ couponError }}</div>
                          }
                        </div>
                      </div>
                    </div>
                    } @if(appliedCoupon){
                    <div class="apply-sec mb-3">
                      <div>
                        <img src="assets/images/offer.gif" class="img-fluid" alt="offer gif" />
                        <h4>
                          {{ 'you_saved' | translate }}
                          <span
                            >{{ checkoutTotal.total.coupon_total_discount | currencySymbol }}</span
                          >
                          {{ 'with_this_code' | translate }} 🎉
                          <p>{{ 'coupon_applied' | translate }}</p>
                        </h4>
                      </div>
                      <a href="javascript:void(0)" (click)="couponRemove()"
                        >{{ 'remove' | translate}}</a
                      >
                    </div>
                    }
                  </li>
                  }
                  <li class="list-total">
                    <h4>{{ 'total' | translate }}</h4>
                    <h4 class="price">
                      {{ (checkoutTotal ? (checkoutTotal.total.total | currencySymbol) :
                      'not_calculated_yet' | translate ) }}
                    </h4>
                  </li>
                </ul>
                <app-button
                  [class]="'btn theme-bg-color text-white btn-md w-100 mt-4 fw-bold'"
                  [id]="'place_order'"
                  [disabled]="form.valid && checkoutTotal ? false : true"
                >
                  {{ 'place_order' | translate }}
                </app-button>
              </div>
            </form>
            } }
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<app-address-modal #addressModal />
