<div class="landing-page-wrapper">
    <div class="main-content landing-main article-main">
        <section class="">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-xl-9">
                        <div class="row">

                            <div class="heading-section mt-5 text-center">
                                <div class="heading-title mt-5">
                                    <h3>{{ "Quick Checkout" | translate }}</h3>
                                </div>
                                <div class="heading-description mt-5 mb-5">
                                    <h4>{{"Enjoy peace of mind as you finalize your order with our secure payment process." | translate }}</h4>
                                </div>
                            </div>

                            <div class="col-xl-12 col-sm-12 mt-3">
                                @if(transaction){
                                <div class="card custom-card">
                                    <div class="card-header border-0 d-md-flex d-block">
                                        <div
                                            class="card-title text-center d-flex justify-content-between w-100 align-items-center">
                                            <h4 class="mb-0"> {{"Ordered Item" | translate }}</h4>
                                        </div>

                                    </div>
                                    <div class="card-body">
                                        <div class="card custom-card">
                                            <div class="card-header border-0 d-md-flex d-block">
                                                <div class="card-title mb-3 ">{{"Invoice Summary" | translate }}
                                                </div>
                                            </div>
                                            <div class="card-body p-0">

                                                <div class="p-0">
                                                    <table class="table table-bordered">
                                                        <thead>
                                                            <tr>
                                                                <th class="fw-bold fs-16">{{"Item" | translate}}
                                                                </th>
                                                                <th class="fw-bold fs-14">{{"Quantity" | translate}}
                                                                </th>
                                                                <th class="fw-bold fs-14">{{"Amount" | translate}}
                                                                </th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>

                                                            @for (element of transaction?.custom_invoice_elements; track
                                                            element.id; let index = $index ) {
                                                            <tr>
                                                                <td class="product-quantity-container">
                                                                    {{element?.title}}</td>
                                                                <td>{{element?.quantity}}</td>
                                                                <td>{{getCurrencyPerTicket(element?.amount)}}</td>
                                                            </tr>
                                                            }
                                                        </tbody>
                                                        <tfoot class="bg-gray-100">
                                                            <tr>
                                                                <td class="fs-14">{{"Subtotal" | translate}} :</td>
                                                                <td></td>
                                                                <td class="fw-semibold fs-14 text-primary">
                                                                    {{getCurrencyPerTicket(subTotal)}}</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="fs-14">{{"Tax" | translate}} % :</td>
                                                                <td></td>
                                                                <td class="fw-semibold fs-14 text-primary">
                                                                    {{transaction?.all_invoices.taxPercent !== null ?
                                                                    transaction?.all_invoices.taxPercent : '-'}}
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td class="fs-22">{{"Total" | translate}} :</td>
                                                                <td></td>
                                                                <td class="fw-semibold fs-22 fw-bold text-primary">
                                                                    {{getCurrencyPerTicket(transaction?.amount)}}
                                                                </td>
                                                            </tr>
                                                        </tfoot>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                        <form id="invoiceCheckoutForm" #checkout="ngForm"
                                            (ngSubmit)="checkoutFn(checkout, 'createtick')">
                                            <input type="hidden" name="invoiceId"
                                                [ngModel]="transaction?.enc_invoiceId" />
                                            <div class="row justify-content-center">
                                                @if(setting?.enablePaypal == 'on'){
                                                <div class="col-sm-6">
                                                    <div class="form-check payment-card-container mb-0">
                                                        <input id="paypalCheckBox" name="paymentMethod" type="radio"
                                                            ngModel class="payment-card form-check-input" checked
                                                            value="paypal" />
                                                        <i
                                                            class="ti ti-check check-active fw-semibold d-none paypalcheck"></i>
                                                        <div class="text-center form-check-label">
                                                            <div
                                                                class=" d-block align-items-center justify-content-between">
                                                                <div class="">
                                                                    <span class="">
                                                                        <img [src]=" url + '/assets/payments/2.png'" alt="img"
                                                                            class="payment-card-style" loading="lazy"
                                                                            decoding="async" />
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                }
                                                @if(setting?.enableStripe == 'on'){
                                                <div class="col-sm-6">
                                                    <div class="form-check payment-card-container mb-0">
                                                        <input id="stripeCheckBox" name="paymentMethod" type="radio"
                                                            class="payment-card form-check-input" value="stripe" ngModel
                                                            checked />
                                                        <i
                                                            class="ti ti-check check-active fw-semibold d-none stripecheck"></i>
                                                        <div class="text-center form-check-label">
                                                            <div
                                                                class=" d-block align-items-center justify-content-between">
                                                                <div class="">
                                                                    <span class="">
                                                                        <img [src]="url + '/assets/payments/stripe.png'"
                                                                            alt="img" class="payment-card-style"
                                                                            loading="lazy" decoding="async" />
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                }
                                            </div>
                                            @if(setting?.enablePaypal == 'on' || setting?.enableStripe == 'on'){
                                            <div class="d-flex justify-content-center mt-4">
                                                <div class="text-center me-3">
                                                    <button class="btn btn-success btn-w-lg">{{ 'Pay Now' |
                                                        translate }}</button>
                                                </div>
                                            </div>
                                            }
                                        </form>
                                    </div>
                                </div>
                                }@else{
                                    <div class="card custom-card">
                                        <div class="card-header border-0 d-md-flex d-block">
                                            <div
                                                class="card-title text-center d-flex justify-content-between w-100 align-items-center">
                                                <h4 class="mb-0"> {{"Ordered Item" | translate }}</h4>
                                            </div>
    
                                        </div>
                                        <div class="card-body">
                                            <div class="card custom-card">
                                                <div class="card-header border-0 d-md-flex d-block">
                                                    <div class="card-title mb-3 ">{{"Invoice Summary" | translate }}
                                                    </div>
                                                </div>
                                                <div class="card-body p-0">
    
                                                    <div class="p-0">
                                                        <table class="table table-bordered">
                                                            <thead>
                                                                <tr>
                                                                    <th class="fw-bold fs-16">{{"Item" | translate}}
                                                                    </th>
                                                                    <th class="fw-bold fs-14">{{"Quantity" | translate}}
                                                                    </th>
                                                                    <th class="fw-bold fs-14">{{"Amount" | translate}}
                                                                    </th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
    
                                                            </tbody>
                                                            <tfoot class="bg-gray-100">
                                                                <tr>
                                                                    <td class="fs-14">{{"Subtotal" | translate}} :</td>
                                                                    <td></td>
                                                                    <td class="fw-semibold fs-14 text-primary">
                                                                        <h2 class="line-skeleton w-30 mt-4"></h2></td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="fs-14">{{"Tax" | translate}} % :</td>
                                                                    <td></td>
                                                                    <td class="fw-semibold fs-14 text-primary">
                                                                        <h2 class="line-skeleton w-30 mt-4"></h2>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="fs-22">{{"Total" | translate}} :</td>
                                                                    <td></td>
                                                                    <td class="fw-semibold fs-22 fw-bold text-primary">
                                                                        <h2 class="line-skeleton w-30 mt-4"></h2>
                                                                    </td>
                                                                </tr>
                                                            </tfoot>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                }
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>