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

<!--Add Currencies List -->
<div class="col-xl-12 col-lg-12 col-md-12">
    <div class="card ">
        <div class="card-header border-0">

            <h4 class="card-title mb-md-max-2">{{'Currencies' | translate}}</h4>
            <div class="card-options">
                @if(permission?.includes('Currencies Add')){
                <a (click)="createAddspaceModel(createAnn)" href="javascript:void(0)"
                    class="btn btn-secondary me-3">{{'Add Currencies' | translate}}</a>
                }
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <div class="table-options">
                    <div class="custom-buttons">
                        @if(permission?.includes('Currencies Delete')){
                        <button type="button" [disabled]="sendingResponse['addspacemassDelete']"
                            (click)="massDeleteAddspaces('addspacemassDelete')" id="massdeletenotify"
                            class="btn btn-outline-light btn-sm mb-4 "><i class="fe fe-trash"></i>
                            {{'Delete' | translate}}
                            @if(sendingResponse['addspacemassDelete']){
                            <i class="fa fa-spinner fa-spin mx-1"></i>
                            }
                        </button>
                        }
                    </div>
                    <mat-form-field class="pull-right">
                        <input type="text" matInput (keyup)="applyFilter($event)" [placeholder]="'search' | translate"
                            #input>
                    </mat-form-field>
                </div>

                <div>
                    @if(isloader){
                    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
                    }
                    <table class="table table-bordered ticketdeleterow border-bottom text-nowrap w-100 dataTable "
                        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> {{'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>
                        <!-- Checkbox Column -->
                        <ng-container matColumnDef="select">
                            <th scope="col" class="wpx-40 text-center" mat-header-cell *matHeaderCellDef>
                                <mat-checkbox (change)="$event ? toggleAllRows() : null"
                                    [checked]="selection.hasValue() && isAllSelected()"
                                    [indeterminate]="selection.hasValue() && !isAllSelected()"
                                    [aria-label]="checkboxLabel()">
                                </mat-checkbox>
                            </th>
                            <td mat-cell class="wpx-40 text-center" *matCellDef="let row">
                                @if(permission?.includes('Currencies Delete') && row.code != 'USD'){
                                    <mat-checkbox (click)="$event.stopPropagation()"
                                        (change)="$event ? selection.toggle(row) : null"
                                        [checked]="selection.isSelected(row)" [aria-label]="checkboxLabel(row)">
                                    </mat-checkbox>
                                }
                            </td>
                        </ng-container>

                        <!-- Title Column -->
                        <ng-container matColumnDef="code">
                            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="code">
                                {{'currency Code' | translate}}
                            </th>
                            <td mat-cell *matCellDef="let row">
                                {{row?.code}}
                            </td>

                        </ng-container>
                        <!-- Symbol -->
                        <ng-container matColumnDef="symbol">
                            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="symbol">
                                {{'Symbol' | translate}}
                            </th>
                            <td mat-cell *matCellDef="let row">
                                {{currencies[row?.code]}}
                            </td>

                        </ng-container>
                        <ng-container matColumnDef="exchangerate">
                            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="exchangerate">
                                {{'Exchange rate' | translate}}
                            </th>
                            <td mat-cell *matCellDef="let row">
                                {{numberFormat(row?.conversion_factor, 2, '.', '')}}
                            </td>

                        </ng-container>
                        <ng-container matColumnDef="createdat">
                            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="createdat">
                                {{'Created At' | translate}}
                            </th>
                            <td mat-cell *matCellDef="let row">
                                {{row?.created_at | date : setting?.date_format : timezone }}
                            </td>

                        </ng-container>
                        <!-- Status Column -->
                        <ng-container matColumnDef="status">
                            <th scope="col" mat-header-cell *matHeaderCellDef> {{'Status' | translate}} </th>
                            <td mat-cell *matCellDef="let row ; let i = index">
                                @if(permission?.includes('Currencies Edit') && row.code != 'USD'){
                                <label class="custom-switch form-switch mb-0">
                                    <input [disabled]="sendingResponse['AddspaceEditStatus'+i]" type="checkbox"
                                        name="groupstatus"
                                        (click)="AddspaceStatusChange($event.target, row, 'AddspaceEditStatus'+i)"
                                        id="myonoffswitch{{row?.id}}" [value]="row?.groupstatus"
                                        class="custom-switch-input tswitch" [checked]="row?.status == 1 ? true: false">
                                    <span class="custom-switch-indicator"></span>
                                </label>
                                @if(sendingResponse['AddspaceEditStatus'+i]){
                                <i class="fa fa-spinner fa-spin mx-1"></i>
                                }
                                }
                            </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>
                                    @if(permission?.includes('Currencies Edit') && row.code != 'USD'){
                                    <button type="button" aria-label="view" class="action-btns1 m-1"
                                        (click)="editAddspaceDetails(createAnn, row)"><i
                                            class="feather feather-edit text-primary"
                                            [ngbTooltip]="'View' | translate"></i></button>
                                    }
                                    @if(permission?.includes('Currencies Delete') && row.code != 'USD'){
                                    <button type="button" aria-label="delete"
                                        [disabled]="sendingResponse['AddspaceEdit'+i]"
                                        (click)="deleteAddspace(row, 'AddspaceEdit'+i)"
                                        class="action-btns1 delete-category m-1" id="show-delete"><i
                                            class="feather feather-trash-2 text-danger "
                                            [ngbTooltip]="'Delete' | translate"></i>
                                        @if(sendingResponse['AddspaceEdit'+i]){
                                        <i class="fa fa-spinner fa-spin mx-1"></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 Currencies List -->

<!-- // Category model start -->
<ng-template #createAnn let-modal>
    <div class="modal-header">
        <h4 class="card-title">{{addspaceObj.id ? ('Edit Currencies' | translate) : ('Create Currencies' | translate)}}
        </h4>
        <button type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
        </button>
    </div>
    <div class="modal-body">
        <form #groupcreate="ngForm" (ngSubmit)="createAddspace(groupcreate, 'createAddSpace')">
            <input type="hidden" class="form-control" name="currencyId" id="name" [ngModel]="addspaceObj.id">

            <div class="modal-body row">
                <div class="col-xl-12">
                    <div class="form-group">
                        <label class="form-label">{{'Currency Code' | translate}} <span
                                class="text-red">*</span></label>
                        <ng-select class="form-control" [items]="currencyList" #select
                            [placeholder]="'Select Agent' | translate" [loading]="!currencyList" [virtualScroll]="true"
                            bindLabel="name" #title="ngModel" [multiple]="false" [searchable]="true"
                            dropdownPosition="auto" bindValue="name" name="code" [ngModel]="addspaceObj.code"
                            (change)="updateCode($event)">
                            <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
                                <div><span>{{item?.name}}</span></div>
                            </ng-template>
                        </ng-select>
                        @if((title.invalid && title.touched) || title.dirty){
                        <div>
                            @if(title.errors?.['required']){
                            <small class="text-danger"> {{'Title is required' | translate}}</small>
                            }
                        </div>
                        }
                    </div>
                </div>
                <div class="col-xl-12">
                    <div class="form-group">
                        <label class="form-label">{{'currency Symbol' | translate}} <span
                                class="text-red">*</span></label>
                        <input required [class.is-invalid]="title.invalid && title.touched" type="text" readonly
                            class="form-control" name="symbol" id="name" [ngModel]="updatedCode" #title="ngModel">
                        @if((title.invalid && title.touched) || title.dirty){
                        <div>
                            @if(title.errors?.['required']){
                            <small class="text-danger"> {{'Title is required' | translate}}</small>
                            }
                        </div>
                        }
                    </div>
                </div>
                <div class="col-xl-12">
                    <div class="form-group">
                        <label class="form-label">{{'Symbol Position' | translate}}<span
                                class="text-red">*</span></label>
                        <ng-select class="form-control" [items]="positionArray" #select
                            [placeholder]="'Select Agent' | translate" [loading]="!positionArray" [virtualScroll]="true"
                            bindLabel="name" #title="ngModel" [multiple]="false" [searchable]="true"
                            dropdownPosition="auto" bindValue="id" name="position" [ngModel]="addspaceObj.position">
                            <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
                                <div><span>{{item?.name}}</span></div>
                            </ng-template>
                        </ng-select>
                        @if((title.invalid && title.touched) || title.dirty){
                        <div>
                            @if(title.errors?.['required']){
                            <small class="text-danger"> {{'Link is required' | translate}}</small>
                            }
                        </div>
                        }
                    </div>
                </div>
                <div class="col-xl-6">
                    <div class="form-group">
                        <label class="form-label">{{'Conversion Factor' | translate}} <span
                                class="text-red">*</span></label>
                        <input required [class.is-invalid]="title.invalid && title.touched" type="number"
                            class="form-control" name="conversion_factor" id="name"
                            [ngModel]="addspaceObj.conversion_factor" #title="ngModel">
                        @if((title.invalid && title.touched) || title.dirty){
                        <div>
                            @if(title.errors?.['required']){
                            <small class="text-danger"> {{'Title is required' | translate}}</small>
                            }
                        </div>
                        }
                    </div>
                </div>
                <div class="col-xl-6">
                    <div class="form-group">
                        <label class="form-label">{{'Decimals' | translate}} <span class="text-red">*</span></label>
                        <input required [class.is-invalid]="title.invalid && title.touched" type="number"
                            class="form-control" name="decimal" id="name" [ngModel]="addspaceObj.decimal"
                            #title="ngModel">
                        @if((title.invalid && title.touched) || title.dirty){
                        <div>
                            @if(title.errors?.['required']){
                            <small class="text-danger"> {{'Title is required' | translate}}</small>
                            }
                        </div>
                        }
                    </div>
                </div>
                <div class="col-xl-12">
                    <div class="form-group">
                        <div class="switch_section">
                            <div class="switch-toggle d-flex mt-4">
                                <label class="form-label pe-2">{{'Status' | translate}}</label>
                                <span class="onoffswitch2">
                                    <input type="checkbox" name="status" id="myonoffswitchcreateTicket"
                                        class=" toggle-class onoffswitch2-checkbox" [ngModel]="addspaceObj.status"
                                        [checked]="addspaceObj.status">
                                    <label for="myonoffswitchcreateTicket"
                                        class="toggle-class onoffswitch2-label"></label>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </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]="groupcreate.invalid || sendingResponse['createAddSpace']"
                    class="btn btn-secondary">{{'Save' | translate}}
                    @if(sendingResponse['createAddSpace']){
                    <i class="fa fa-spinner fa-spin mx-1"></i>
                    }
                </button>
            </div>
        </form>
    </div>
</ng-template>



<ng-template #noper>
    ~
</ng-template>