//html
<app-navbar></app-navbar>
<br>
<br>
<br>
<div class="header-search-container">
    <i class="bi bi-arrow-left-circle header-icon" (click)="goBack()"></i>
    <h2 class="header-title">AV MERCH</h2>
</div>
<br>
<br>
<div class="checkout-container d-flex justify-content-center align-items-center">
    <br>
    <div class="row">
      <div class="col-12">
        <div class="card" style="width: 25rem;">
          <div class="card-header">
            <h3>Order Summary</h3>
          </div>
          <div class="card-body">
            <div *ngFor="let item of cartItems">
              <div>
                {{ item.product_Name }}: <span style="float: right">{{ item.unit_Price | currency: 'R ' }} x {{ item.quantity}}</span>
              </div>
            </div>
            <br>
            <div>
              Total Price: <span style="float: right">{{ totalAmount | currency: 'R ' }}</span>
            </div>
            <br>
            <div>
              <p>Use Discount</p>
              <input type="text" [(ngModel)]="discountCode" placeholder="Discount Code">
              <span style="float: right"><button (click)="applyDiscount()">Apply</button></span>
            </div>
          </div>
          <div class="card-footer">
            <div class="buttom-container">
                <span style="float: left">
                    <button (click)="cancel()" routerLink="/cart" class="btn btn-secondary">Cancel</button>
                </span>
                <span style="float: right">
                    <app-payfast></app-payfast>
                </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

//ts
import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { RouterLink } from '@angular/router';
import { NavbarComponent } from './navbar.component';
import { PayfastComponent } from "./payfast.component";
import { OrderService } from '../Services/order.service';
import { CartItemViewModel } from '../shared/order';
import { FormsModule } from '@angular/forms';
import { Location } from '@angular/common';

@Component({
  selector: 'app-checkout',
  standalone: true,
  imports: [CommonModule, FormsModule, RouterLink, NavbarComponent, PayfastComponent],
  templateUrl: './checkout.component.html',
  styleUrl: './checkout.component.css'
})
export class CheckoutComponent implements OnInit{
  cartItems: CartItemViewModel[] = [];
  totalAmount: number = 0;
  discountCode: string = '';

  constructor(private orderService: OrderService, private location:Location) {}

  ngOnInit(): void {
    this.loadCartItems();
  }

  loadCartItems(): void {
    this.orderService.getCartItems().subscribe(items => {
      this.cartItems = items;
      this.calculateTotal();
    });
  }

  calculateTotal(): void {
    this.totalAmount = this.cartItems.reduce((sum, item) => sum + (item.unit_Price * item.quantity), 0);
    // Apply discount logic if needed
  }

  applyDiscount(): void {
    // Apply discount logic
  }

  cancel(): void {
    // Navigate back to cart or home
    
  }
  
  goBack(): void {
    this.location.back();
  }
}