<div class="landing-page-wrapper">

    <div class="main-content landing-main article-main">
        @if(transaction){
        <section class="section py-4">
            <div class="container-fluid">
                <div class="row justify-content-center">
                    <div class="col-xl-7">
                        <div class="card custom-card">
                            <div id="invoice">
                                <div class="card-header mt-2 d-md-flex d-block">
                                    <div class="h5 mb-0  d-block align-items-center">
                                        <div class="mb-1">
                                            <img [src]="transaction?.all_invoices?.companyLogo != null ? url + '/uploads/invoice/' + transaction?.all_invoices?.companyLogo : url + '/public/uploads/logo/darklogo/logo.png'"
                                                alt="logo" height="50px" class="desktop-logo" />
                                        </div>
                                        @if(transaction?.invoiceId != null){
                                        <div class="ms-0 mt-2">
                                            <div class="h6 fw-semibold mb-0 text-muted">{{'Invoice Id :' |
                                                translate}} <span class="text-dark">#{{transaction?.invoiceId}}</span>
                                            </div>
                                        </div>
                                        }
                                    </div>
                                    <div class="ms-auto mt-md-0 mt-2">
                                        <span [ngClass]="getTransactionStatusClass(transaction)">
                                            {{ getTransactionStatus(transaction) }}
                                        </span>
                                        @if(transaction?.ticket_type === 'customInvoice' && transaction?.status ===
                                        'pending'){
                                        <span></span>
                                        }
                                        @else{
                                        @if(transaction?.payment_method){
                                        <span class="p-2 px-4 fs-14 ms-2 rounded-2 mb-0 text-dark bg-light">
                                            {{transaction.payment_method}}
                                        </span>
                                        }
                                        }
                                    </div>
                                </div>
                                <div class="card-body pb-0">
                                    <div class="row gy-3">
                                        <div class="col-xl-12">
                                            <div class="row">
                                                <div class="col-xl-4 col-lg-4 col-md-6 col-sm-6">
                                                    <p class=" mb-2">
                                                        {{'Billing From :' | translate }}
                                                    </p>
                                                    <p class="fw-bold mb-1">
                                                        {{transaction?.all_invoices?.companyName}}
                                                        @if(transaction?.all_invoices?.cityName ||
                                                        transaction?.all_invoices?.stateName){
                                                    <p class="mb-1 ">
                                                        {{transaction?.all_invoices?.cityName}}
                                                        {{transaction?.all_invoices?.cityName ?
                                                        transaction?.all_invoices?.cityName : ''}}
                                                        {{transaction?.all_invoices?.cityName &&
                                                        transaction?.all_invoices?.stateName ? ', ' : ''}}
                                                        {{transaction?.all_invoices?.stateName ?
                                                        transaction?.all_invoices?.stateName : ''}}


                                                    </p>
                                                    }
                                                    @if(transaction?.all_invoices?.zipPostalCode ||
                                                    transaction?.all_invoices?.countryName){
                                                    <p class="mb-1 ">
                                                        {{transaction?.all_invoices?.zipPostalCode ?
                                                        transaction?.all_invoices?.zipPostalCode : ''}}
                                                        {{transaction?.all_invoices?.zipPostalCode &&
                                                        transaction?.all_invoices?.countryName ? ', ' : ''}}
                                                        {{transaction?.all_invoices?.countryName ?
                                                        transaction?.all_invoices?.countryName : ''}}
                                                    </p>
                                                    }
                                                    @if(transaction?.all_invoices?.taxName ||
                                                    transaction?.all_invoices?.taxId){
                                                    <p class="mb-1 ">
                                                        {{transaction?.all_invoices?.taxName ?
                                                        transaction?.all_invoices?.taxName : ''}}
                                                        {{transaction?.all_invoices?.taxName &&
                                                        transaction?.all_invoices?.taxId ? ', ' : ''}}
                                                        {{transaction?.all_invoices?.taxId ?
                                                        transaction?.all_invoices?.taxId : ''}}
                                                    </p>
                                                    }
                                                </div>
                                                <div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 ms-auto mt-sm-0 mt-3">
                                                    <p class=" mb-2">
                                                        {{'Billing To :' | translate }}
                                                    </p>
                                                    @if(transaction?.all_invoices?.clcompanyName != null){
                                                    <p class="fw-bold mb-1">
                                                        {{transaction?.all_invoices?.clcompanyName}}
                                                    </p>
                                                    }@else{
                                                    <p class="fw-bold mb-1">
                                                        {{customer?.firstname + ' ' + customer?.lastname}},
                                                    </p>
                                                    }
                                                    <p class="mb-1">
                                                        {{transaction?.all_invoices?.clemail}},
                                                    </p>
                                                    @if(transaction?.all_invoices?.clmobile != null){
                                                    <p class="mb-1">
                                                        {{transaction?.all_invoices?.clmobile}}
                                                    </p>
                                                    }
                                                    @if(transaction?.all_invoices?.cltaxName != null &&
                                                    transaction?.all_invoices?.cltaxId != null){
                                                    <p class="mb-1">
                                                        {{transaction?.all_invoices?.cltaxName + ':' +
                                                        transaction?.all_invoices?.cltaxId}}
                                                    </p>
                                                    }
                                                    @if(transaction?.all_invoices?.claddress != null){
                                                    <p class="mb-1">
                                                        {{transaction?.all_invoices?.claddress}}
                                                    </p>
                                                    }
                                                    @if(transaction?.all_invoices?.country != null){
                                                    <p class="mb-1">
                                                        {{transaction?.all_invoices?.country}}
                                                    </p>
                                                    }
                                                    <p class="mb-1">
                                                        @if(transaction?.ticket_type === 'customInvoice' &&
                                                        transaction?.status === 'paid'){
                                                        <span>
                                                            {{'Transaction Date : ' | translate}}
                                                            {{transaction?.updated_at | date :setting?.date_format :
                                                            setting?.time_format : timezone }}
                                                        </span>
                                                        }@else{
                                                        @if(transaction?.ticket_type === 'customInvoice' &&
                                                        transaction?.status === 'pending'){
                                                    <div>
                                                        <p>
                                                            {{'Invoice Created Date : ' | translate}}
                                                            {{transaction?.created_at | date :setting?.date_format :
                                                            setting?.time_format : timezone }}
                                                        </p>
                                                        @if(invoiceCancel){
                                                        <p>{{'Due Date : ' | translate}} {{dueDate}}</p>
                                                        }

                                                    </div>
                                                    }@else{
                                                    <span>
                                                        {{'Transaction Date : ' | translate}}
                                                        {{transaction?.created_at | date: setting?.date_format :
                                                        timezone}}
                                                    </span>
                                                    }
                                                    }
                                                    </p>
                                                    <p class="mb-1">
                                                        @if(transaction?.ticket_type == 'customInvoice' &&
                                                        transaction?.status == 'paid'){
                                                        @if(transaction?.transaction_id != null && 'Transaction Id : ' +
                                                        transaction?.transaction_id != null) {
                                                        {{transaction?.transaction_id}} }
                                                        @else{ '~ ~'}
                                                        }@else{
                                                        @if(transaction?.ticket_type == 'customInvoice' &&
                                                        transaction?.status == 'pending'){
                                                        <b class="text-danger">{{'Payment Required*' |
                                                            translate}}</b>
                                                        }@else{
                                                        {{'Transaction Id : ' | translate}} +
                                                        {{transaction?.transaction_id}}
                                                        }
                                                        }
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-12">
                                            <div class="table-responsive">
                                                <table class="table table-bordered nowrap text-nowrap mt-4">
                                                    <thead class="bg-light">
                                                        <tr>
                                                            <th scope="col" class="w-10 text-dark">{{'S.No' |
                                                                translate}}</th>
                                                            <th scope="col" class="w-25 text-dark">{{'Product Name'
                                                                | translate}}</th>
                                                            <th scope="col" class="w-10 text-dark">{{'Unit Price' |
                                                                translate}}</th>
                                                            <th scope="col" class="w-10 text-dark">{{'Quantity' |
                                                                translate}}</th>
                                                            <th scope="col" class="w-10 text-dark">{{'TOTAL' |
                                                                translate}}</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @if(transaction?.ticket_type === 'customInvoice'){
                                                        @for (element of transaction?.custom_invoice_elements; track
                                                        element.id; let index = $index ) {
                                                        <tr>
                                                            <td>{{index + 1}}</td>
                                                            <td class="product-quantity-container">
                                                                {{element?.title}}</td>
                                                            <td>{{getCurrencyPerTicket(element?.price)}}</td>
                                                            <td>{{element?.quantity}}</td>
                                                            <td>{{getCurrencyPerTicket(element?.amount)}}</td>
                                                        </tr>
                                                        }
                                                        }
                                                        <tr style="height: '45px'">
                                                            <td colSpan={5}></td>
                                                        </tr>
                                                        <tr class="bg-gray-100" style="height: '45px'">
                                                            <td colSpan={3}></td>
                                                            <td class="text-end">{{'SubTotal' | translate}} :</td>
                                                            <td>{{getCurrencyPerTicket(subTotal)}}</td>
                                                        </tr>
                                                        <tr class="bg-gray-100" style="height: '45px'">
                                                            <td colSpan={3}></td>
                                                            <td class="text-end">{{'Tax % ' | translate}} :</td>
                                                            <td>
                                                                @if(transaction?.all_invoices?.taxPercent != null){

                                                                {{transaction?.all_invoices?.taxPercent}}
                                                                }@else{
                                                                '-'
                                                                }
                                                            </td>
                                                        </tr>
                                                        <tr class="bg-light">
                                                            <td class="text-center"></td>
                                                            <td></td>
                                                            <td class="text-center"></td>
                                                            <td class="text-end text-dark fs-16 fw-semibold">
                                                                {{'Total Amount:' | translate}}</td>
                                                            <td class="text-start text-dark ps-4 fw-semibold"
                                                                style="fontSize: '1.15rem'">
                                                                @if(transaction?.ticket_type === 'customInvoice'){
                                                                {{getCurrencyPerTicket(transaction?.amount)}}
                                                                }@else{
                                                                {{transaction?.customerAmount}}
                                                                }
                                                            </td>
                                                        </tr>
                                                    </tbody>

                                                </table>
                                                @if(transaction?.status == 'refunded'){
                                                <div class="mt-4">
                                                    <div class="text-center fs-15 fw-bold">{{'Refund Details' |
                                                        translate }}</div>
                                                    <table class="table table-bordered nowrap text-nowrap">
                                                        <tbody>
                                                            <tr>
                                                                <td>{{'Refund Transaction Id' | translate}}</td>
                                                                <td>{{transaction?.refundTxId}}</td>
                                                            </tr>
                                                            @if(transaction?.countryTaxName != null &&
                                                            transaction?.countryTaxAmount != null){
                                                            <tr>
                                                                <td>{{transaction?.countryTaxName}}</td>
                                                                <td>{{symbol + ' ' + transaction?.countryTaxAmount}}
                                                                </td>
                                                            </tr>
                                                            }
                                                            @if(transaction?.gatewayFee){
                                                            <tr>
                                                                <td>{{transaction?.gatewayName}}</td>
                                                                <td>{{symbol + ' ' + transaction?.gatewayFee}}</td>
                                                            </tr>
                                                            }
                                                            <tr>
                                                                <td>{{'Net Amount Refunded' | translate }}</td>
                                                                <td class="text-primary">{{symbol + ' ' +
                                                                    transaction?.netAmountRefunded ??
                                                                    transaction?.amount}}</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                                }
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            @if((transaction?.all_invoices?.invoicenote != null ||
                            transaction?.all_invoices?.invoicetc)){
                            <div class="row m-2">
                                <p class="fw-bold my-1"> {{"Note" | translate}}: </p>
                                <p>{{transaction?.all_invoices?.invoicenote | translate}}</p>
                                <p class="fw-bold my-1"> {{"Terms & Conditions" | translate}}: </p>
                                <p>{{transaction?.all_invoices?.invoicetc | translate}}</p>
                            </div>
                            }

                            @if(customer && (!pathname.includes('admin/payments/custom-invoice/') &&
                            !pathname.includes('admin/payments/invoice/'))){
                            <div class="card-footer text-end">
                                @if(transaction?.ticket_type == 'customInvoice' && transaction?.status == 'pending'){
                                <a [routerLink]="'/customer/custom-invoice/pay/'+transaction?.enc_invoiceId"
                                    class="btn btn-success me-1">{{'Pay Now' | translate}}</a>
                                }@else{
                                @if(transaction?.status != 'cancelled'){
                                <a routerLink="/customer/invoices" class="btn btn-outline-danger me-1">{{"Back" |
                                    translate}}</a>
                                <button class="btn btn-secondary me-1"
                                    (click)="printCustomerTicketView(tableElement)">{{'Print' |
                                    translate}}<i class="ri-printer-line ms-1 align-middle d-inline-block"></i></button>
                                <button class="btn btn-primary" id="download" (click)="downloadPDF()">{{'Save As PDF' |
                                    translate}}<i
                                        class="ri-file-pdf-line ms-1 align-middle d-inline-block"></i></button>
                                }
                                @else{
                                ''
                                }

                                }
                            </div>

                            }
                            @if(admin && permission?.includes('Invoice Cancel Access') && transaction?.status ==
                            'pending'){
                            <div class="card-footer text-end">
                                <a (click)="cancleRequestFun(transaction?.id, 'cancleinvoice')"
                                    data-id="{transaction?.id}" class="btn btn-danger cancel-invoice"> {{'Cancel Invoice'
                                    | translate }} </a>
                            </div>
                            }

                        </div>
                    </div>
                </div>
            </div>
        </section>

        }@else {
        <section class="section py-4">
            <div class="container-fluid">
                <div class="row justify-content-center">
                    <div class="col-xl-7">
                        <div class="card custom-card">
                            <div id="invoice">
                                <div class="card-header mt-2 d-md-flex d-block">
                                    <div class="h5 mb-0  d-block align-items-center">
                                        <div class="mb-1">
                                            <span class="icon-skeleton d-block mb-2  me-3"></span>
                                        </div>
                                        <p class="line-skeleton w-75 d-block mb-2"></p>
                                    </div>
                                    <div class="ms-auto mt-md-0 mt-2">
                                        <p class="line-skeleton w-75 d-block mb-2"></p>
                                    </div>
                                </div>
                                <div class="card-body pb-0">
                                    <div class="row gy-3">
                                        <div class="col-xl-12">
                                            <div class="row">
                                                <div class="col-xl-4 col-lg-4 col-md-6 col-sm-6">
                                                    <p class=" mb-2">
                                                        {{'Billing From :' | translate }}
                                                    </p>

                                                    <p class="line-skeleton w-75 d-block mb-2"></p>
                                                    <p class="line-skeleton w-75 d-block mb-2"></p>
                                                    <p class="line-skeleton w-75 d-block mb-2"></p>
                                                    <p class="line-skeleton w-75 d-block mb-2"></p>
                                                </div>
                                                <div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 ms-auto mt-sm-0 mt-3">
                                                    <p class=" mb-2">
                                                        {{'Billing To :' | translate }}
                                                    </p>
                                                    <p class="line-skeleton w-75 d-block mb-2"></p>
                                                    <p class="line-skeleton w-75 d-block mb-2"></p>
                                                    <p class="line-skeleton w-75 d-block mb-2"></p>
                                                    <p class="line-skeleton w-75 d-block mb-2"></p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-12">
                                            <div class="table-responsive">
                                                <table class="table table-bordered nowrap text-nowrap mt-4">
                                                    <thead class="bg-light">
                                                        <tr>
                                                            <th scope="col" class="w-10 text-dark">{{'S.No' |
                                                                translate}}</th>
                                                            <th scope="col" class="w-25 text-dark">{{'Product Name'
                                                                | translate}}</th>
                                                            <th scope="col" class="w-10 text-dark">{{'Unit Price' |
                                                                translate}}</th>
                                                            <th scope="col" class="w-10 text-dark">{{'Quantity' |
                                                                translate}}</th>
                                                            <th scope="col" class="w-10 text-dark">{{'TOTAL' |
                                                                translate}}</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr>
                                                            <td>
                                                                <p class="line-skeleton w-75 d-block mb-2"></p>
                                                            </td>
                                                            <td class="product-quantity-container">

                                                                <p class="line-skeleton w-75 d-block mb-2"></p>
                                                            </td>
                                                            <td>
                                                                <p class="line-skeleton w-75 d-block mb-2"></p>
                                                            </td>
                                                            <td>
                                                                <p class="line-skeleton w-75 d-block mb-2"></p>
                                                            </td>
                                                            <td>
                                                                <p class="line-skeleton w-75 d-block mb-2"></p>
                                                            </td>
                                                        </tr>

                                                        <tr style="height: '45px'">
                                                            <td colSpan={5}></td>
                                                        </tr>
                                                        <tr class="bg-gray-100" style="height: '45px'">
                                                            <td colSpan={3}></td>
                                                            <td class="text-end">{{'SubTotal' | translate}} :</td>

                                                            <p class="line-skeleton w-75 d-block mb-2"></p>
                                                        </tr>
                                                        <tr class="bg-gray-100" style="height: '45px'">
                                                            <td colSpan={3}></td>
                                                            <td class="text-end">{{'Tax % ' | translate}} :</td>
                                                            <td>

                                                                <p class="line-skeleton w-75 d-block mb-2"></p>
                                                            </td>
                                                        </tr>
                                                        <tr class="bg-light">
                                                            <td class="text-center"></td>
                                                            <td></td>
                                                            <td class="text-center"></td>
                                                            <td class="text-end text-dark fs-16 fw-semibold">
                                                                {{'Total Amount:' | translate}}</td>
                                                            <td class="text-start text-dark ps-4 fw-semibold"
                                                                style="fontSize: '1.15rem'">

                                                                <p class="line-skeleton w-75 d-block mb-2"></p>
                                                            </td>
                                                        </tr>
                                                    </tbody>

                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        }
    </div>
</div>



<div #tableRef ngxPrintElement id="printDiv">
    <div class="card custom-card">
        <div id="invoice">
            <div class="card-header mt-2 d-md-flex d-block">
                <div class="h5 mb-0  d-block align-items-center">
                    <div class="mb-1">
                        <img [src]="transaction?.all_invoices?.companyLogo != null ? url + '/uploads/invoice/' + transaction?.all_invoices?.companyLogo : url + '/public/uploads/logo/darklogo/logo.png'"
                            alt="logo" height="50px" class="desktop-logo" />
                    </div>
                    @if(transaction?.invoiceId != null){
                    <div class="ms-0 mt-2">
                        <div class="h6 fw-semibold mb-0 text-muted">{{'Invoice Id :' |
                            translate}} <span class="text-dark">#{{transaction?.invoiceId}}</span>
                        </div>
                    </div>
                    }
                </div>
                <div class="ms-auto mt-md-0 mt-2">
                    <span [ngClass]="getTransactionStatusClass(transaction)">
                        {{ getTransactionStatus(transaction) }}
                    </span>
                    @if(transaction?.ticket_type === 'customInvoice' && transaction?.status ===
                    'pending'){
                    <span></span>
                    }
                    @else{
                    @if(transaction?.payment_method){
                    <span class="p-2 px-4 fs-14 ms-2 rounded-2 mb-0 text-dark bg-light">
                        {{transaction.payment_method}}
                    </span>
                    }
                    }
                </div>
            </div>
            <div class="card-body pb-0">
                <div class="row gy-3">
                    <div class="col-xl-12">
                        <div class="row">
                            <div class="col-xl-4 col-lg-4 col-md-6 col-sm-6">
                                <p class=" mb-2">
                                    {{'Billing From :' | translate }}
                                </p>
                                <p class="fw-bold mb-1">
                                    {{transaction?.all_invoices?.companyName}}
                                    @if(transaction?.all_invoices?.cityName ||
                                    transaction?.all_invoices?.stateName){
                                <p class="mb-1 ">
                                    {{transaction?.all_invoices?.cityName}}
                                    {{transaction?.all_invoices?.cityName ?
                                    transaction?.all_invoices?.cityName : ''}}
                                    {{transaction?.all_invoices?.cityName &&
                                    transaction?.all_invoices?.stateName ? ', ' : ''}}
                                    {{transaction?.all_invoices?.stateName ?
                                    transaction?.all_invoices?.stateName : ''}}


                                </p>
                                }
                                @if(transaction?.all_invoices?.zipPostalCode ||
                                transaction?.all_invoices?.countryName){
                                <p class="mb-1 ">
                                    {{transaction?.all_invoices?.zipPostalCode ?
                                    transaction?.all_invoices?.zipPostalCode : ''}}
                                    {{transaction?.all_invoices?.zipPostalCode &&
                                    transaction?.all_invoices?.countryName ? ', ' : ''}}
                                    {{transaction?.all_invoices?.countryName ?
                                    transaction?.all_invoices?.countryName : ''}}
                                </p>
                                }
                                @if(transaction?.all_invoices?.taxName ||
                                transaction?.all_invoices?.taxId){
                                <p class="mb-1 ">
                                    {{transaction?.all_invoices?.taxName ?
                                    transaction?.all_invoices?.taxName : ''}}
                                    {{transaction?.all_invoices?.taxName &&
                                    transaction?.all_invoices?.taxId ? ', ' : ''}}
                                    {{transaction?.all_invoices?.taxId ?
                                    transaction?.all_invoices?.taxId : ''}}
                                </p>
                                }
                            </div>
                            <div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 ms-auto mt-sm-0 mt-3">
                                <p class=" mb-2">
                                    {{'Billing To :' | translate }}
                                </p>
                                @if(transaction?.all_invoices?.clcompanyName != null){
                                <p class="fw-bold mb-1">
                                    {{transaction?.all_invoices?.clcompanyName}}
                                </p>
                                }@else{
                                <p class="fw-bold mb-1">
                                    {{customer?.firstname + ' ' + customer?.lastname}},
                                </p>
                                }
                                <p class="mb-1">
                                    {{transaction?.all_invoices?.clemail}},
                                </p>
                                @if(transaction?.all_invoices?.clmobile != null){
                                <p class="mb-1">
                                    {{transaction?.all_invoices?.clmobile}}
                                </p>
                                }
                                @if(transaction?.all_invoices?.cltaxName != null &&
                                transaction?.all_invoices?.cltaxId != null){
                                <p class="mb-1">
                                    {{transaction?.all_invoices?.cltaxName + ':' +
                                    transaction?.all_invoices?.cltaxId}}
                                </p>
                                }
                                @if(transaction?.all_invoices?.claddress != null){
                                <p class="mb-1">
                                    {{transaction?.all_invoices?.claddress}}
                                </p>
                                }
                                @if(transaction?.all_invoices?.country != null){
                                <p class="mb-1">
                                    {{transaction?.all_invoices?.country}}
                                </p>
                                }
                                <p class="mb-1">
                                    @if(transaction?.ticket_type === 'customInvoice' &&
                                    transaction?.status === 'paid'){
                                    <span>
                                        {{'Transaction Date : ' | translate}}
                                        {{transaction?.updated_at | date :setting?.date_format :
                                        setting?.time_format : timezone }}
                                    </span>
                                    }@else{
                                    @if(transaction?.ticket_type === 'customInvoice' &&
                                    transaction?.status === 'pending'){
                                <div>
                                    <p>
                                        {{'Invoice Created Date : ' | translate}}
                                        {{transaction?.created_at | date :setting?.date_format :
                                        setting?.time_format : timezone }}
                                    </p>
                                    @if(invoiceCancel){
                                    <p>{{'Due Date : ' | translate}} {{dueDate}}</p>
                                    }

                                </div>
                                }@else{
                                <span>
                                    {{'Transaction Date : ' | translate}}
                                    {{transaction?.created_at | date: setting?.date_format :
                                    timezone}}
                                </span>
                                }
                                }
                                </p>
                                <p class="mb-1">
                                    @if(transaction?.ticket_type == 'customInvoice' &&
                                    transaction?.status == 'paid'){
                                    @if(transaction?.transaction_id != null && 'Transaction Id : ' +
                                    transaction?.transaction_id != null) {
                                    {{transaction?.transaction_id}} }
                                    @else{ '~ ~'}
                                    }@else{
                                    @if(transaction?.ticket_type == 'customInvoice' &&
                                    transaction?.status == 'pending'){
                                    <b class="text-danger">{{'Payment Required*' |
                                        translate}}</b>
                                    }@else{
                                    {{'Transaction Id : ' | translate}} +
                                    {{transaction?.transaction_id}}
                                    }
                                    }
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-12">
                        <div class="table-responsive">
                            <table class="table table-bordered nowrap text-nowrap mt-4">
                                <thead class="bg-light">
                                    <tr>
                                        <th scope="col" class="w-10 text-dark">{{'S.No' |
                                            translate}}</th>
                                        <th scope="col" class="w-25 text-dark">{{'Product Name'
                                            | translate}}</th>
                                        <th scope="col" class="w-10 text-dark">{{'Unit Price' |
                                            translate}}</th>
                                        <th scope="col" class="w-10 text-dark">{{'Quantity' |
                                            translate}}</th>
                                        <th scope="col" class="w-10 text-dark">{{'TOTAL' |
                                            translate}}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if(transaction?.ticket_type === 'customInvoice'){
                                    @for (element of transaction?.custom_invoice_elements; track element.id; let index =
                                    $index ) {
                                    <tr>
                                        <td>{{index + 1}}</td>
                                        <td class="product-quantity-container">
                                            {{element?.title}}</td>
                                        <td>{{getCurrencyPerTicket(element?.price)}}</td>
                                        <td>{{element?.quantity}}</td>
                                        <td>{{getCurrencyPerTicket(element?.amount)}}</td>
                                    </tr>
                                    }
                                    }
                                    <tr style="height: '45px'">
                                        <td colSpan={5}></td>
                                    </tr>
                                    <tr class="bg-gray-100" style="height: '45px'">
                                        <td colSpan={3}></td>
                                        <td class="text-end">{{'SubTotal' | translate}} :</td>
                                        <td>{{getCurrencyPerTicket(subTotal)}}</td>
                                    </tr>
                                    <tr class="bg-gray-100" style="height: '45px'">
                                        <td colSpan={3}></td>
                                        <td class="text-end">{{'Tax % ' | translate}} :</td>
                                        <td>
                                            @if(transaction?.all_invoices?.taxPercent != null){

                                            {{transaction?.all_invoices?.taxPercent}}
                                            }@else{
                                            '-'
                                            }
                                        </td>
                                    </tr>
                                    <tr class="bg-light">
                                        <td class="text-center"></td>
                                        <td></td>
                                        <td class="text-center"></td>
                                        <td class="text-end text-dark fs-16 fw-semibold">
                                            {{'Total Amount:' | translate}}</td>
                                        <td class="text-start text-dark ps-4 fw-semibold" style="fontSize: '1.15rem'">
                                            @if(transaction?.ticket_type === 'customInvoice'){
                                            {{getCurrencyPerTicket(transaction?.amount)}}
                                            }@else{
                                            {{transaction?.customerAmount}}
                                            }
                                        </td>
                                    </tr>
                                </tbody>

                            </table>
                            @if(transaction?.status == 'refunded'){
                            <div class="mt-4">
                                <div class="text-center fs-15 fw-bold">{{'Refund Details' |
                                    translate }}</div>
                                <table class="table table-bordered nowrap text-nowrap">
                                    <tbody>
                                        <tr>
                                            <td>{{'Refund Transaction Id' | translate}}</td>
                                            <td>{{transaction?.refundTxId}}</td>
                                        </tr>
                                        @if(transaction?.countryTaxName != null &&
                                        transaction?.countryTaxAmount != null){
                                        <tr>
                                            <td>{{transaction?.countryTaxName}}</td>
                                            <td>{{symbol + ' ' + transaction?.countryTaxAmount}}
                                            </td>
                                        </tr>
                                        }
                                        @if(transaction?.gatewayFee){
                                        <tr>
                                            <td>{{transaction?.gatewayName}}</td>
                                            <td>{{symbol + ' ' + transaction?.gatewayFee}}</td>
                                        </tr>
                                        }
                                        <tr>
                                            <td>{{'Net Amount Refunded' | translate }}</td>
                                            <td class="text-primary">{{symbol + ' ' +
                                                transaction?.netAmountRefunded ??
                                                transaction?.amount}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            }
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>