<admin-page-header [title]="'Refund Requests'"></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">{{'Refund Requests Lists'| translate}}</h4>
        </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="refundCreated">
                            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="refundCreated"> {{'Refund Created At' | translate}}
                            </th>
                            <td mat-cell *matCellDef="let row">
                                 {{row.refundCreatedDate | date : setting?.date_format : timezone }}
                                 ({{row.refundCreatedDate | dateAgo : timezone}})
                            </td>
                        </ng-container>
                        <ng-container matColumnDef="paymentFor">
                            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="paymentFor"> {{'Payment For' | translate}}
                            </th>
                            <td mat-cell *matCellDef="let row">
                                {{row.ticket_type == 'customInvoice' ? ('Custom Invoice' | translate) : '~'}}
                            </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>
                        <!-- 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">
                                <a aria-label="View" routerLink="/admin/payments/refund-view/{{row.encrypted_id}}"
                                href="javascript:;" class="btn btn-sm action-btns"><i
                                    class="feather feather-eye text-primary" placement="top"
                                    [ngbTooltip]="'View' | translate"></i></a>
                            </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-->


<!-- // add Project to agent modal start -->
<ng-template #addProjectmodal let-modal>
    <div class="modal-header">
        <h5 class="modal-title">{{'Add Project' | translate}}</h5>
        <button type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
        </button>
    </div>
    <div class="modal-body">
        <form #addProjectData="ngForm" (ngSubmit)="addProject(addProjectData, 'addprojects')">

            @if (projectid) {
            <input type="hidden" name="id" id="projectid" [ngModel]="projectid">
            }
            <label class="form-label">{{'Name' | translate}} <span class="text-red">*</span></label>
            <input type="text" #name="ngModel" [class.is-invalid]="name.invalid && name.touched" required
                class="form-control" name="name" id="name" [ngModel]="projectname">
            @if ((name.invalid && name.touched) || name.dirty) {
            <div>
                @if (name.errors?.['required']) {
                <small class="text-danger">{{'Name is required' | translate}}</small>
                }
            </div>
            }

            <div class="modal-footer border-top-0">
                <a href="javascript:;" class="btn btn-outline-danger" (click)="modal.dismiss('Close click')">{{'Close' |
                    translate}}</a>
                <button type="submit" [disabled]="addProjectData.invalid || sendingResponse['addprojects']"
                    class="btn btn-secondary" id="btnsave">{{'Save'| translate}}@if (sendingResponse['addprojects']) {
                    <i class="fa fa-spinner fa-spin mx-1"></i>
                    }</button>
            </div>
        </form>
    </div>
</ng-template>
<!-- // add Project to agent modal end -->
<!-- // edit Project to agent modal start -->
<ng-template #editProjectmodal let-modal>
    <div class="modal-header">
        <h5 class="modal-title">{{'Edit Project' | translate}}</h5>
        <button type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
        </button>
    </div>
    <div class="modal-body">
        <form #editProjectData="ngForm" (ngSubmit)="editProject(editProjectData, 'editproject')">

            @if (projectid) {
            <input type="hidden" name="id" [ngModel]="projectid">
            }
            <label class="form-label">{{'Name' | translate}} <span class="text-red">*</span></label>
            <input type="text" #name="ngModel" [class.is-invalid]="name.invalid && name.touched" required
                class="form-control" name="name" [ngModel]="projectname">
            @if ((name.invalid && name.touched) || name.dirty) {
            <div>
                @if (name.errors?.['required']) {
                <small class="text-danger">{{'Name is required' | translate}}</small>
                }
            </div>
            }

            <div class="modal-footer">
                <a href="javascript:;" class="btn btn-outline-danger" (click)="modal.dismiss('Close click')">{{'Close' |
                    translate}}</a>
                <button type="submit" [disabled]="editProjectData.invalid || sendingResponse['editproject']"
                    class="btn btn-secondary">{{'Update'| translate}}@if (sendingResponse['editproject']) {
                    <i class="fa fa-spinner fa-spin mx-1"></i>
                    }</button>
            </div>
        </form>
    </div>
</ng-template>
<!-- // edit Project to agent modal end -->
<!-- // Assignproject to agent modal start -->
<ng-template #assignProjectmodal let-modal>
    <div class="modal-header">
        <h5 class="modal-title">{{'AssignProject' | translate}}</h5>
        <button type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
        </button>
    </div>
    <div class="modal-body">
        <form #assProjectData="ngForm" (ngSubmit)="assignProject(assProjectData, 'assignproject')">
            <input type="hidden" name="projects_id" id="projects_id">
            <div class="modal-body">
                <div class="form-group">
                    <label class="form-label">{{'Select category' | translate}} <span class="text-danger">*</span>
                    </label>
                    <div class="custom-controls-stacked d-md-flex">
                        <ng-select required class="form-control" [items]="categories" [loading]="!categories"
                            #category_idselect [placeholder]="'Select category' | translate" [virtualScroll]="true"
                            bindLabel="name" [multiple]="true" [searchable]="true" dropdownPosition="auto"
                            bindValue="id" name="category_id" [ngModel]="selCat" #categorie="ngModel"
                            [class.is-invalid]="categorie.invalid && categorie.touched">
                            <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
                                <div><span>{{item?.name}}</span></div>
                            </ng-template>
                        </ng-select>
                    </div>
                    @if((categorie.invalid && categorie.touched) || categorie.dirty){
                    <div>
                        @if(categorie.errors?.['required']){
                        <small class="text-danger"> {{'categorie is required' | translate}}</small>
                        }
                    </div>
                    }
                </div>
                <div class="form-group">
                    <label class="form-label">{{'Projects' | translate}}</label>
                    <div class="custom-controls-stacked d-md-flex">
                        <input type="text" class="form-control" [disabled]="true"
                            [value]="'All Projects Selected' | translate">
                    </div>
                </div>
            </div>
            <div class="modal-footer border-top-0">
                <a href="javascript:;" class="btn btn-outline-danger" (click)="modal.dismiss('Close click')">{{'Close' |
                    translate}}</a>
                <button type="submit" [disabled]="assProjectData.invalid || sendingResponse['assignproject']"
                    class="btn btn-secondary">{{'Save' | translate}}@if (sendingResponse['assignproject']) {
                    <i class="fa fa-spinner fa-spin mx-1"></i>
                    }</button>
            </div>
        </form>
    </div>
</ng-template>
<!-- // Assignproject to agent modal end -->