<admin-page-header [title]="'Custom Invoices'"></admin-page-header>

<!-- Project List-->
<div class="col-xl-12 col-lg-12 col-md-12">
    <div class="card ">
        <div class="card-header border-0 d-md-max-block">
            <h4 class="card-title mb-lg-0 mb-2">{{'Custom Invoices Lists'| translate}}</h4>
            <div class="ms-auto">
                <a routerLink="/admin/payments/create-invoice" class="btn btn-primary"> {{"Create Invoice" | translate}}</a>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive spruko-delete">
                <div class="table-options">
                    <div class="custom-buttons">
                        <mat-form-field class="pull-right">
                            <input type="text" matInput (keyup)="applyFilter($event)"
                                [placeholder]="'search' | translate" #input>
                        </mat-form-field>
                    </div>
                </div>
                <div>
                    @if (isloader) {
                    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
                    }
                    <table
                        class="table table-bordered border-bottom text-nowrap ticketdeleterow w-100 dataTable no-footer dtr-inline"
                        mat-table [dataSource]="dataSource" matSort>

                        <!-- Sno Column -->
                        <ng-container matColumnDef="sno">
                            <th scope="col" class="wpx-40 text-center" mat-header-cell *matHeaderCellDef
                                mat-sort-header="id"> {{'Sl.No' | translate}}
                            </th>
                            <td mat-cell *matCellDef="let row; let i = index" class="wpx-40 text-center"> {{i + 1 +
                                (paginator.pageIndex * paginator.pageSize)}}
                            </td>
                        </ng-container>
                        <!-- ticketdetails Column -->
                        <ng-container matColumnDef="invoiceid">
                            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="invoiceid"> {{'Invoice Id' | translate}}
                            </th>
                            <td mat-cell *matCellDef="let row">
                                {{row?.invoiceId}}
                            </td>
                        </ng-container>
                        <!-- ticketdetails Column -->
                        <ng-container matColumnDef="customer">
                            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="customer"> {{'Customer' |
                                translate}}
                            </th>
                            <td mat-cell *matCellDef="let row">
                                <div class="d-flex align-items-center">
                                    <div class="me-2 lh-1">
                                        <span class="avatar avatar-md avatar-rounded">
                                            <img [src]="url + '/uploads/profile/' + row.customer.image ?? 'user-profile.png'" alt="" />
                                        </span>
                                    </div>
                                    <div class="flex-fill">
                                        @if(row.customer){
                                        <p class="fw-semibold mb-0">
                                            <a class="" href="javascript:;">{{row.customer.firstname + ' ' +
                                                row.customer.lastname}}</a>
                                        </p>
                                        <span class="d-block text-muted fs-12"> {{row.customer.email}}
                                            {{(row.ticket_id && row.ticket_id != 'undefined') ? row.ticket_id :
                                            ''}}</span>
                                        }
                                        @else{
                                        <p class="fw-semibold mb-0">
                                            <a class="" href="#!">{{'Customer Deleted' | trabjate}}</a>
                                        </p>
                                        <span class="d-block text-muted fs-12">{{'Customer Deleted'}}</span>
                                        }
                                    </div>
                                </div>
                            </td>
                        </ng-container>
                        <ng-container matColumnDef="amount">
                            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="amount"> {{'Amount' |
                                translate}}
                            </th>
                            <td mat-cell *matCellDef="let row">
                                {{configData + ' ' + row?.amount}}
                            </td>
                        </ng-container>
                        <ng-container matColumnDef="invoiceDate">
                            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="invoiceDate"> {{'Invoice Date' | translate}}
                            </th>
                            <td mat-cell *matCellDef="let row">
                                <!-- {formatDateTimezone(row.dateIssued, timezone, setting?.date_format)} -->
                                 {{row.dateIssued | date : setting?.date_formate : timezone}}
                            </td>
                        </ng-container>
                        <ng-container matColumnDef="status">
                            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="status"> {{'Status' |
                                translate}}
                            </th>
                            <td mat-cell *matCellDef="let row" [innerHTML]="getStatus(row)">
                            </td>
                        </ng-container>
                        <ng-container matColumnDef="paymode">
                            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="paymode"> {{'Payment Mode' | translate}}
                            </th>
                            <td mat-cell *matCellDef="let row">
                                {{row.payment_method ?row.payment_method : '~'}}
                            </td>
                        </ng-container>
                        <ng-container matColumnDef="paydate">
                            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="paydate"> {{'Payment Date' | translate}}
                            </th>
                            <td mat-cell *matCellDef="let row">
                                 {{ row.payment_date ? (row.payment_date | date : setting?.date_formate : timezone) : '~' }}
                            </td>
                        </ng-container>
                        <!-- Actions Column -->
                        <ng-container matColumnDef="actions">
                            <th scope="col" mat-header-cell *matHeaderCellDef> {{'actions' | translate}} </th>
                            <td mat-cell *matCellDef="let row; let i = index">

                                <div>
                                    <a [ngbTooltip]="'View' | translate" [routerLink]="'/admin/payments/custom-invoice/' + row.encryptedInvoiceId" class="btn btn-sm action-btns">
                                        <i class="feather feather-eye text-primary"></i>
                                    </a>
                                    
                                    @if(row.status == 'pending'){
                                        @if (permission?.includes('Invoice Delete Access')) {
                                        <button (click)="deleteRequestFun(row.id, 'delete', row.index)" [ngbTooltip]="'Delete' | translate" class="btn btn-sm action-btns">
                                            <i class="feather feather-trash-2 text-danger"></i>
                                        </button>
                                        }
                                        
                                        @if (permission?.includes('Invoice Cancel Access')) {
                                        <button (click)="cancleRequestFun(row.id, 'cancle', row.index)" [ngbTooltip]="'Cancel' | translate" class="btn btn-sm action-btns">
                                            <i class="ri-close-circle-line text-warning"></i>
                                        </button>
                                        }
                                    }
                                </div>
                            </td>
                        </ng-container>

                        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

                        <!-- Row shown when there is no matching data. -->
                        <tr class="mat-row" *matNoDataRow>
                            @if (!input.value.length) {
                            <td class="mat-cell text-center" colspan="12">
                                {{'No data Found'| translate}}
                            </td>
                            } @else {
                            <td class="mat-cell text-center" colspan="12"> {{'No data matching the filter'| translate}}
                                " {{input.value}} " </td>
                            }
                        </tr>
                    </table>

                    <mat-paginator #paginator showFirstLastButtons [pageSizeOptions]="[10, 25, 50, 100]"
                        (page)="onPaginateTable()" aria-label="Select page of users" [length]="paginator?.length"
                        [pageIndex]="paginator?.pageIndex" [pageSize]="paginator?.pageSize">
                    </mat-paginator>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Project List-->
