<title>Employment Types</title>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6">
            <app-breadcrumb [title]="'Employment Types'" [active_item]="'Employment Types'">
            </app-breadcrumb>
        </div>
        <div class="col-sm-6 text-right">
            <div ngbDropdown class="btn-group">
                <div class="ml-2">
                    <a title="{{ 'employment_type_tooltip_add_employment_type' |translate}}" href="javascript:;"
                        class="btn btn-sm btn-info filterbtn" (click)="modalOpen(basicmodal)">
                        <i class="icon-plus"></i>
                    </a>

                </div>
            </div>
        </div>
        <div class="col-sm-12">
            <mat-drawer-container class="example-container" autosize>
                <div class="card">

                    <ng-container *ngIf="employmentTypes && employmentTypes.length > 0 else NoEmploymentTypes">
                        <div class="table-responsive userlist-table">
                            <table class=" maintable mat-elevation-z8 table-striped table-vcenter box-shadow-none"
                                mat-table [dataSource]="employmentTypes" multiTemplateDataRows aria-label="">
                                <ng-container matColumnDef="id">
                                    <th mat-header-cell *matHeaderCellDef style="width:75px">#</th>
                                    <td mat-cell *matCellDef="let element; let i = dataIndex;" style="width:75px">
                                        {{i+1}}
                                        <a *ngIf="element.childEmploymentType && element.childEmploymentType.length > 0"
                                            title="{{ 'employment_type_tooltip_child_employment_type' |translate}}"
                                            href="javascript:;" (click)="element.isExpanded = !element.isExpanded;">
                                            <i [ngClass]="element.isExpanded ? 'icon-angle-up' : 'icon-angle-down'"></i>
                                        </a>
                                    </td>
                                </ng-container>
                                <ng-container matColumnDef="name">
                                    <th mat-header-cell *matHeaderCellDef translate>{{'lbl_name'| translate}} </th>
                                    <td mat-cell *matCellDef="let element">
                                        <div *ngIf="element.name else NoValue">
                                            {{element.name}}
                                        </div>
                                        <ng-template #NoValue>
                                            --
                                        </ng-template>
                                    </td>
                                </ng-container>
                                <!-- <ng-container matColumnDef="status">
                                    <th mat-header-cell *matHeaderCellDef translate>{{'lbl_status'| translate}}</th>
                                    <td mat-cell *matCellDef="let element">
                                        <ng-container *ngIf="element.isActive else InActive">
                                            <span class="label text-success d-flex">
                                                <div class="dot-label bg-success mr-1"></div>
                                                <span>{{'lbl_active'| translate}}</span>
                                            </span>
                                        </ng-container>
                                        <ng-template #InActive>
                                            <span class="label text-warning d-flex">
                                                <div class="dot-label bg-secondary mr-1"></div>
                                                <span>{{'lbl_in_active'| translate}}</span>
                                            </span>
                                        </ng-template>
                                    </td>
                                </ng-container> -->
                                <ng-container matColumnDef="action">
                                    <th mat-header-cell *matHeaderCellDef translate class="text-right">{{'lbl_action'|
                                        translate}}</th>
                                    <td mat-cell *matCellDef="let element" class="text-right"
                                        style="align-items: center;display: flex;">

                                        <div class="media-body text-right icon-state">
                                            <label title="{{ 'tooltip_lbl_change_status' |translate}}" class="switch"
                                                title="{{ 'employment_type_tooltip_active_nactive_button' |translate}}"
                                                style="top:7px" *ngIf="isEditPermission">
                                                <input type="checkbox" (click)="changeStatus(element)"
                                                    [(ngModel)]="element.isActive"><span class="switch-state"
                                                    [ngClass]="element.isActive ? 'bg-success' : 'bg-secondary'"></span>
                                            </label>
                                        </div>
                                        <a *ngIf="isWritePermission"
                                            title="{{ 'employment_type_tooltip_add_child_employment_type' |translate}}"
                                            href="javascript:;" class="btn btn-sm btn-info filterbtn"
                                            (click)="addChildEmploymentTypeDialog(element,basicmodal)">
                                            <i class="icon-plus"></i>
                                        </a>

                                        <a *ngIf="isEditPermission"
                                            title="{{ 'employment_type_tooltip_edit_employment_type' |translate}}"
                                            href="javascript:;" class="btn btn-sm btn-info filterbtn"
                                            (click)="editDialog(element,basicmodal)">
                                            <i class="icon-pencil"></i>
                                        </a>
                                    </td>
                                </ng-container>
                                <ng-container matColumnDef="expandedDetail">
                                    <td mat-cell *matCellDef="let element;" [attr.colspan]="displayColumns.length">
                                        <div class="row student-element-detail"
                                            [@detailExpand]="element.isExpanded ? 'expanded' : 'collapsed'">
                                            <table mat-table class="innerTable mat-elevation-z8"
                                                [dataSource]="element.childEmploymentType" aria-label="">
                                                <ng-container matColumnDef="id">
                                                    <th mat-header-cell *matHeaderCellDef> <span
                                                            style="font-weight:600">#</span>
                                                    </th>
                                                    <td mat-cell *matCellDef="let element;let j = index">
                                                        {{j + 1}}
                                                    </td>
                                                </ng-container>
                                                <ng-container matColumnDef="name">
                                                    <th mat-header-cell *matHeaderCellDef>
                                                        <span style="font-weight:600" translate>{{'lbl_name'|
                                                            translate}}
                                                        </span>
                                                    </th>
                                                    <td mat-cell *matCellDef="let element">
                                                        {{element.name}}
                                                    </td>
                                                </ng-container>
                                                <!-- <ng-container matColumnDef="status">
                                                    <th mat-header-cell *matHeaderCellDef translate>{{'lbl_status'|
                                                        translate}}</th>
                                                    <td mat-cell *matCellDef="let element">
                                                        <ng-container *ngIf="element.isActive else InActive">
                                                            <span class="label text-success d-flex">
                                                                <div class="dot-label bg-success mr-1"></div>
                                                                <span>{{'lbl_active'| translate}}</span>
                                                            </span>
                                                        </ng-container>
                                                        <ng-template #InActive>
                                                            <span class="label text-warning d-flex">
                                                                <div class="dot-label bg-secondary mr-1"></div>
                                                                <span>{{'lbl_in_active'| translate}}</span>
                                                            </span>
                                                        </ng-template>
                                                    </td>
                                                </ng-container> -->
                                                <ng-container matColumnDef="action">
                                                    <th mat-header-cell *matHeaderCellDef translate>{{'lbl_action'|
                                                        translate}}</th>
                                                    <td mat-cell *matCellDef="let element" class="text-right"
                                                        style="align-items: center;display: flex;">
                                                        <div class="media-body text-right icon-state">
                                                            <label class="switch" style="top:7px">
                                                                <input type="checkbox" (click)="changeStatus(element)"
                                                                    [(ngModel)]="element.isActive">
                                                                <span class="switch-state"
                                                                    [ngClass]="element.isActive ? 'bg-success' : 'bg-secondary'"></span>
                                                            </label>
                                                        </div>
                                                        <a title="{{ 'employment_type_tooltip_edit_child_employment_type' |translate}}"
                                                            href="javascript:;" class="btn btn-sm btn-info filterbtn"
                                                            (click)="editDialog(element,basicmodal)">
                                                            <i class="icon-pencil"></i>
                                                        </a>
                                                    </td>
                                                </ng-container>
                                                <tr mat-header-row *matHeaderRowDef="displayColumns; sticky: true"
                                                    style="
                                                    width: 100%; display: table; table-layout: fixed;">
                                                </tr>
                                                <tr mat-row *matRowDef=" let element;let j=index; columns:displayColumns
                                                    ;" style="
                                                    width: 100%; display: table; table-layout: fixed;">
                                                </tr>
                                            </table>
                                        </div>
                                    </td>
                                </ng-container>
                                <tr mat-header-row *matHeaderRowDef="displayColumns; sticky: true"></tr>
                                <tr mat-row *matRowDef="let element; columns: displayColumns;"
                                    class="student-element-row" [class.student-expanded-row]="element.isExpanded"></tr>
                                <tr mat-row *matRowDef="let row; columns: ['expandedDetail']"
                                    class="student-detail-row">
                                </tr>
                            </table>
                        </div>
                    </ng-container>
                    <ng-template #NoEmploymentTypes>
                        <div class="d-flex vertical-center nodata">
                        </div>
                    </ng-template>
                </div>

            </mat-drawer-container>
        </div>
    </div>
</div>
<ng-template #basicmodal let-modal>
    <div>
        <form [formGroup]="employmentTypeForm">
            <div class="modal-header">
                <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
                <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body pd-20">
                <div class="form-group">
                    <label for="name">{{'lbl_name'| translate}} <span style="color: red;">*</span></label>
                    <input class="form-control" type="text" name="cName" formControlName="name" required onlyAlphabets>
                    <mat-error
                        *ngIf="(employmentTypeForm.get('name') && !employmentTypeForm.get('name')!.valid && employmentTypeForm.get('name')!.touched)">
                        {{'message_lbl_name_is_required'| translate}}
                    </mat-error>
                </div>
                <div *ngIf="selectedEmploymentType && selectedEmploymentType.length > 0 && isShowParentSelection"
                    class="form-group mb-2">
                    <div class="col-form-label">{{'placeholder_lbl_select_employment_type'| translate}}</div>
                    <ng-select [items]="selectedEmploymentType" class="js-example-basic-single p-0"
                        formControlName="parentId"
                        placeholder="{{ 'placeholder_lbl_select_employment_type' |translate}}" bindLabel="name"
                        bindValue="id" name="parentCategory"></ng-select>
                </div>

            </div>
            <div class="modal-footer">
                <button class="btn btn-info filterbtn btn-sm" (click)="insertEmploymentType(employmentTypeForm)">
                    {{'button_lbl_save'| translate}}
                </button>
                <button class="btn btn-secondary filterbtn btn-sm" (click)="closeDialog()">
                    {{'button_lbl_cancel'| translate}}
                </button>
            </div>
        </form>
    </div>
</ng-template>