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

<div class="card">
    <div class="card-header  border-0">
        <h4 class="card-title">{{ 'Addons' | translate | titlecase }}</h4>
        <div class="card-options mt-sm-max-2 d-md-max-block">
            @if(permission?.includes('Addon Add')){
            <a (click)="addonDetails(createAnn)" href="javascript:;"
                class="btn btn-secondary mb-md-max-2 me-3 text-capitalize" id="addaddonmodal">
                {{ 'Upload Addon' | translate | titlecase }}</a>
            }
        </div>
    </div>

    <div class="card-body">
        <div class="table-responsive spruko-delete">
            <div class="table-responsive">
                <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>

                        <!-- Addon Type Column -->
                        <ng-container matColumnDef="addonType">
                            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="addonType">
                                {{'Addon Type' | translate}}
                            </th>
                            <td mat-cell *matCellDef="let row">
                                {{'Storage' | translate | titlecase}}
                            </td>
                        </ng-container>
                        <!-- name Column -->
                        <ng-container matColumnDef="name">
                            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="name"> {{'name' |
                                translate}}
                            </th>
                            <td mat-cell *matCellDef="let row">
                                {{row?.name.slice(0, 40)}}
                            </td>
                        </ng-container>
                        <!-- Icon Column -->
                        <ng-container matColumnDef="icon">
                            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="icon"> {{'Icon' |
                                translate}}
                            </th>
                            <td mat-cell *matCellDef="let row">
                                @if(row?.['icon']){
                                <img [src]="row['icon']" width="50px" height="50px" alt="erre">
                                }
                                @if(row?.['image']){
                                <img [src]="row['image']" width="50px" height="50px" alt="erre">
                                }
                            </td>
                        </ng-container>
                        <!-- Version Column -->
                        <ng-container matColumnDef="version">
                            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="version"> {{'Version' |
                                translate}}
                            </th>
                            <td mat-cell *matCellDef="let row">
                                {{row?.version}}
                            </td>
                        </ng-container>


                        <!-- Status Column -->
                        <ng-container matColumnDef="status">
                            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="status"> {{'Status' |
                                translate}} </th>
                            <td mat-cell *matCellDef="let row ; let i = index">
                                @if(permission?.includes('Addon Edit') && !row?.link){
                                <label class="custom-switch form-switch mb-0">
                                    <input [disabled]="sendingResponse['addonsStatusChange'+i]" type="checkbox"
                                        name="status"
                                        (click)="addonsStatusChange($event.target, row, 'addonsStatusChange'+i)"
                                        id="myonoffswitch{{row?.id}}" [value]="row?.status"
                                        class="custom-switch-input tswitch" [checked]="row?.status == 1 ? true: false">
                                    <span class="custom-switch-indicator"></span>
                                </label>
                                @if(sendingResponse['addonsStatusChange'+i]){
                                <i class="fa fa-spinner fa-spin mx-1"></i>
                                }
                                }@else{
                                ~
                                }
                            </td>
                        </ng-container>

                        <!-- lastUpdated  Column -->
                        <ng-container matColumnDef="lastupdated">
                            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="lastupdated">
                                {{'Last Updated ' | translate}}
                            </th>
                            <td mat-cell *matCellDef="let row">
                                @if(row?.created_at != '~~'){
                                {{row?.created_at | date : 'MMMM d, Y' }}
                                }@else{~}
                            </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(row?.link){
                                    <a href="{{ row?.['link'] }}" class="btn btn-success" target="_blank">
                                        {{ row?.['buttonName'] | translate | titlecase }}</a>
                                    }
                                    @if(permission?.includes('Addon Edit') && !row?.link){
                                    <button type="button" aria-label="view" class="action-btns1 m-1"
                                        (click)="editAddonDetails(editAnn, row)"><i
                                            class="feather feather-edit text-primary"
                                            [ngbTooltip]="'View' | translate"></i></button>
                                    }
                                </div>
                            </td>
                        </ng-container>

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

                    </table>
                    <mat-paginator #paginator showFirstLastButtons [pageSizeOptions]="[10, 25, 50, 100]"
                        aria-label="Select page of users" [length]="paginator?.length"
                        [pageIndex]="paginator?.pageIndex" [pageSize]="paginator?.pageSize">
                    </mat-paginator>

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

    <!-- // Category model start -->
    <ng-template #createAnn let-modal>
        <div class="modal-header">
            <h4 class="card-title">{{'Create Addon' | translate}}</h4>
            <button type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
            </button>
        </div>
        <div class="modal-body">
            <div class="single-page customerpage">
                <div class="wrapper wrapper2 box-shadow-0 border-0">
                    <div class="card-body border-top-0 pt-4">
                        <form #groupcreate="ngForm"
                            (ngSubmit)="createAddon(groupcreate, FileUploadloader, 'createAddonMod')">
                            <div class="row">
                                <div class="form-group">
                                    <label class="form-label">
                                        {{ 'Application purchase code' | translate | titlecase }}<span
                                            class="text-red">*</span>
                                    </label>
                                    <input
                                        (keyup)="addonsApplicationEnavatoVerifyApplicationPurchaseCode($event.target, 'createAddonMod')"
                                        type="text" name="applicationPurchasecode" class="form-control"
                                        placeholder="Enter your application purchase code" id="applicationPurchasecode"
                                        required ngModel>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">{{ 'Addon purchase code' | translate | titlecase }}<span
                                            class="text-red">*</span></label>
                                    @if(addonEle){
                                    <input type="text"
                                        (keyup)="addonsApplicationEnavatoVerifyAddonPurchaseCode($event.target, 'createAddonMod')"
                                        name="purchasecode" class="form-control"
                                        placeholder="Enter your addon purchase code" id="purchasecode" required ngModel>
                                    }@else{
                                    <input type="text" name="code" class="form-control"
                                        placeholder="Enter your addon purchase code" required disabled ngModel>
                                    }
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Add ZIP File<span class="text-red ">*</span></label>
                                    <div class="custom-file-upload">
                                        @if(zipFileEle){
                                        <input type="file" name="addon"
                                            id="addon" class="form-control square-file-input"
                                            (change)="addZipFile($event)" accept=".zip" required ngModel>
                                        }@else{
                                            <span>Enter the valid Addon purchase code.</span>
                                        }
                                    </div>
                                </div>
                                <div class="form-group d-none" id="loadingIndicator" #FileUploadloader>
                                    <i class="fa fa-spinner fa-spin fa-2x"></i>
                                    <span>please don't refresh it take some time .</span>
                                </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['createAddonMod']"
                                    class="btn btn-secondary">{{'Save' | translate}}
                                    @if(sendingResponse['createAddonMod']){
                                        <i class="fa fa-spinner fa-spin mx-1"></i>
                                    }
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </ng-template>
    <!-- // Category model end -->
    <ng-template #editAnn let-modal>
        <div class="modal-header">
            <h4 class="card-title">{{'Edit Addon' | translate}}</h4>
            <button type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
            </button>
        </div>
        <div class="modal-body">
            <div class="single-page customerpage">
                <div class="wrapper wrapper2 box-shadow-0 border-0">
                    <div class="card-body border-top-0 pt-4 form-fields-container">
                        <form #groupedit="ngForm" (ngSubmit)="editAddon(groupedit, 'editAddon')">
                            <div class="row" id="addonData">
                                @for (fieldName of credentials?.[0]; let i = $index; track fieldName) {
                                <div class="form-group">
                                    <label [for]="fieldName" class="form-label">
                                        <span class="addon" id="label"></span>{{fieldName}}<span
                                            class="text-red">*</span></label>
                                    <input id="{{fieldName}}" type="text" [name]="fieldName"
                                        [ngModel]="credentials?.[3]?.[credentials?.[4]?.[i]]" class="form-control"
                                        [placeholder]="'Enter ' + fieldName" required>
                                </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]="groupedit.invalid || sendingResponse['editAddon']"
                                    class="btn btn-secondary">{{'Update' | translate}}
                                    @if(sendingResponse['editAddon']){
                                    <i class="fa fa-spinner fa-spin mx-1"></i>
                                    }
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </ng-template>


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