<div class="dashboard-content-area second-part">
    <app-error-message></app-error-message>
    <form #form="ngForm" *ngIf="!showLoader">
        <div class="ui-g ui-fluid">
            <div class="ui-g-12 ui-md-12">
                <div class="ui-g ui-fluid">
                    <div class="ui-g-12">
                        <div class="page-title mb-0">
                            <a [routerLink]="['/admin/list-workflow-templates']" class="arrow-btn-blue ml-0">
                                <img src="assets/images/arrow-left-prev_blue.svg">
                            </a>
                            {{editMode ? "Edit" : "Add"}} Workflow Template
                        </div>
                    </div>
                </div>
                <div class="ui-g ui-fluid">
                    <p-dialog #messageTemplateDialog [(visible)]="displayNewMessageTemplate" header="Message Template"
                              [positionLeft]="0" [modal]="true" [responsive]="true">
                        <app-edit-message-template (closeModal)="closeDialog($event)"
                                                   *ngIf="displayNewMessageTemplate"
                                                   [objectID]="selectedTemplateID"></app-edit-message-template>
                    </p-dialog>
                    <div class="ui-g-12 ui-g-offset-3 ui-md-6 h-60 text-center templateName">
                        <label (click)="toggleInput($event, 'TemplateName', true)" *ngIf="showLabel('TemplateName')"
                               for="TemplateNameId">{{workflow.TemplateName}}</label>
                        <input (blur)="toggleInput($event, 'TemplateName', false)" *ngIf="!showLabel('TemplateName')"
                               [(ngModel)]="workflow.TemplateName" [disabled]="showLoader"
                               class="form-control" id="TemplateNameId"
                               name="TemplateName" required/>
                    </div>
                </div>
                <!-- Start Pre stages -->
                <div class="ui-g ui-fluid">
                    <div class="ui-g-12 ui-md-12">
                        <p-panel *ngFor="let stage of preStages" [toggleable]="true"
                                 toggler="header" [collapsed]="true">
                            <p-header>
                                <span class="ui-panel-title">
                                    {{getStageHeader(stage)}}
                                </span>
                            </p-header>
                            <div class="form-group ui-g">
                                <div class="work-belonging ui-g-6 mb-0">
                                    <span class="calcField">Landing Page</span>
                                </div>
                                <div class="work-belonging ui-g-6 mb-0">
                                    <span class="calcField">Verification Page</span>
                                </div>
                                <div class="form-group ui-g-6">
                                    <label for="LandingButtonText">Button Text</label>
                                    <input [(ngModel)]="workflow.LandingButtonText" [disabled]="showLoader"
                                           class="form-control"
                                           fieldLabel="Landing Button Text"
                                           id="LandingButtonText" name="LandingButtonText"
                                           required
                                           tabindex="1" type="text">
                                </div>
                                <div class="form-group ui-g-6">
                                    <label for="VerificationHeaderText">Header Text</label>
                                    <input [(ngModel)]="workflow.VerificationHeaderText" [disabled]="showLoader"
                                           class="form-control"
                                           fieldLabel="Verification Header Text" id="VerificationHeaderText"
                                           name="VerificationHeaderText"
                                           required
                                           tabindex="2" type="text">
                                </div>
                                <div class="work-belonging ui-g-12 mb-0">
                                    <span class="calcField">Application</span>
                                </div>
                                <div class="form-group ui-g-12">
                                    <div class="ui-g">
                                        <div class="ui-g-3">
                                            <label for="CaptureCV">Capture CV</label>
                                            <p-inputSwitch [(ngModel)]="workflow.CaptureCV" [disabled]="showLoader"
                                                           name="CaptureCV" id="CaptureCV">
                                            </p-inputSwitch>
                                        </div>
                                        <div class="ui-g-3" *ngIf="workflow.CaptureCV">
                                            <label for="ThankYouSecondaryText">Mandatory</label>
                                            <p-inputSwitch [(ngModel)]="workflow.IsCVMandatory"
                                                           [disabled]="showLoader"
                                                           name="IsCVMandatory" id="IsCVMandatory">
                                            </p-inputSwitch>
                                        </div>
                                        <div class="ui-g-3">
                                            <label for="CaptureCL">Capture Cover Letter</label>
                                            <p-inputSwitch [(ngModel)]="workflow.CaptureCL" [disabled]="showLoader"
                                                           name="CaptureCL" id="CaptureCL">
                                            </p-inputSwitch>
                                        </div>
                                        <div class="ui-g-3" *ngIf="workflow.CaptureCL">
                                            <label for="IsCLMandatory">Mandatory</label>
                                            <p-inputSwitch [(ngModel)]="workflow.IsCLMandatory"
                                                           [disabled]="showLoader"
                                                           name="IsCLMandatory" id="IsCLMandatory">
                                            </p-inputSwitch>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group ui-g-6">
                                    <label for="VerificationHeaderText">Button Text</label>
                                    <input [(ngModel)]="workflow.ApplicationButtonText" [disabled]="showLoader"
                                           class="form-control"
                                           fieldLabel="Application Button Text"
                                           name="ApplicationButtonText"
                                           required
                                           tabindex="7" type="text">
                                </div>
                                <div class="form-group ui-g-6">
                                    <label class="mb-0">Action</label>
                                    <p-selectButton [(ngModel)]="workflow.ApplicationResponseAction"
                                                    [options]="responseActions"
                                                    name="ApplicationResponseAction"
                                                    optionLabel="Description" class="mt-10">
                                    </p-selectButton>
                                </div>
                                <div *ngIf="emailResponseSelected()" class="form-group ui-g-12">
                                    <div class="ui-g">
                                        <div class="ui-g-6">
                                            <label for="ThankYouHeaderText">Header Text for Thank You page</label>
                                            <input [(ngModel)]="workflow.ThankYouHeaderText" [disabled]="showLoader"
                                                   class="form-control" fieldLabel="Header Text for Thank You page"
                                                   id="ThankYouHeaderText" name="ThankYouHeaderText"
                                                   required
                                                   tabindex="8" type="text">
                                        </div>
                                        <div class="ui-g-6">
                                            <label for="ThankYouSecondaryText">Secondary Text</label>
                                            <input [(ngModel)]="workflow.ThankYouSecondaryText" [disabled]="showLoader"
                                                   class="form-control" fieldLabel="Secondary Text"
                                                   id="ThankYouSecondaryText" name="ThankYouSecondaryText" tabindex="9"
                                                   type="text">
                                        </div>
                                    </div>
                                </div>
                                <div class="work-belonging ui-g-12">
                                    <span class="calcField">Job Outline Page</span>
                                </div>
                                <div class="form-group ui-g-12">
                                    <label for="JobOutlineButtonText">Button Text</label>
                                    <input [(ngModel)]="workflow.JobOutlineButtonText" [disabled]="showLoader"
                                           class="form-control"
                                           fieldLabel="Job Outline Button Text" id="JobOutlineButtonText"
                                           name="JobOutlineButtonText"
                                           required
                                           tabindex="10" type="text">
                                </div>
                            </div>
                            <div class="ui-g form-group">
                                <!-- Start steps section -->
                                <ng-container *ngTemplateOutlet="stepsTemplate; context:{stage: stage}"></ng-container>
                                <!-- End steps section -->
                                <!-- Start messaging section -->
                                <ng-container
                                    *ngTemplateOutlet="messageTemplate; context:{stage: stage}"></ng-container>
                                <!-- End messaging section -->
                            </div>
                        </p-panel>
                    </div>
                </div>
                <!-- End Pre stages -->
                <div class="ui-g ui-fluid">
                    <div class="ui-g-6 text-right">
                        <h3>Stages</h3>
                    </div>
                    <div class="ui-g-3 ui-g-offset-3">
                        <button (click)="addStage()" [disabled]="showLoader" class="btn btn-primary add-more-btn"
                                tabindex="11">Add Stage
                        </button>
                    </div>
                </div>
                <div (dndDrop)="onDrop($event, genericStages, 000)"
                     class="ui-g ui-fluid" dndDropzone>
                    <div [hidden]="draggingId !== 000" dndPlaceholderRef
                         style="background: #CCCCCC; border: 1px dashed #000; width: 100%; height: 53px"></div>
                    <div (dndEnd)="onDragEnd($event)"
                         (dndStart)="onDragStart(stage, genericStages, 000)"
                         *ngFor="let stage of genericStages"
                         [dndDraggable]="stage"
                         class="ui-g-12 ui-md-12"
                         dndEffectAllowed="copy"
                         toggler="header">

                        <p-panel [toggleable]="true" #panel [collapsed]="true" toggler="header">
                            <p-header>
                                <span (click)="toggleInput($event, 'StageName'+stage.ObjectID, true)"
                                      *ngIf="showLabel('StageName'+stage.ObjectID)"
                                      id="StageName{{stage.ObjectID}}"
                                      class="ui-panel-title">
                                    {{getStageHeader(stage)}}
                                </span>
                                <input (blur)="toggleInput($event, 'StageName'+stage.ObjectID, false)"
                                       *ngIf="!showLabel('StageName'+stage.ObjectID)"
                                       [(ngModel)]="stage.Name" [disabled]="showLoader"
                                       class="form-control panel-header-input"
                                       id="StageName{{stage.ObjectID}}Id"
                                       name="StageName{{stage.ObjectID}}"
                                       pInputText required/>
                            </p-header>
                            <div class="ui-g form-group" *ngIf="!panel.collapsed">
                                <!-- Start steps section -->
                                <ng-container *ngTemplateOutlet="stepsTemplate; context:{stage: stage}"></ng-container>
                                <!-- End steps section -->
                                <!-- Start messaging section -->
                                <ng-container
                                    *ngTemplateOutlet="messageTemplate; context:{stage: stage}"></ng-container>
                                <!-- End messaging section -->
                            </div>
                        </p-panel>
                    </div>
                    <div class="ui-g-12 ui-md-12"></div>
                </div>
                <div class="ui-g ui-fluid">
                    <div class="ui-g-12">
                        <!-- Start Post Stages -->
                        <p-panel *ngFor="let stage of postStages" [toggleable]="true" toggler="header"
                                 [collapsed]="true" class="postStage">
                            <p-header>
                                <span class="ui-panel-title">
                                    {{getStageHeader(stage)}}
                                </span>
                            </p-header>
                            <div class="ui-g form-group">
                                <!-- Start messaging section -->
                                <ng-container
                                    *ngTemplateOutlet="messageTemplate; context:{stage: stage}"></ng-container>
                                <!-- End messaging section -->
                            </div>
                        </p-panel>
                        <!-- End Post Stages -->
                    </div>
                </div>
                <div class="ui-g ui-fluid">
                    <div class="ui-g-12 ui-md-12">
                        <div class="text-center form-group">
                            <button [disabled]="showLoader" class="btn btn-primary largeBtn greyBtn"
                                    routerLink="/admin/list-workflow-templates"
                                    type="button"
                                    value="Cancel">Cancel
                            </button>
                            <button (click)="saveWorkflowTemplate()" *ngIf="showSaveBtn()" [disabled]="showLoader"
                                    class="btn btn-primary largeBtn"
                                    type="button" value="Save">
                                Save
                            </button>
                            <button (click)="saveWorkflowTemplate(true)" *ngIf="showSaveCopyBtn()"
                                    [disabled]="showLoader"
                                    class="btn btn-primary largeBtn"
                                    type="button" value="Save As a Copy">
                                Save As a Copy
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <p-progressSpinner *ngIf="showLoader"></p-progressSpinner>
</div>
<p-confirmDialog header="Confirmation" key="RemoveRow" autoZIndex="false" baseZIndex="12000"
                 icon="pi pi-exclamation-triangle" appendTo="body">
</p-confirmDialog>


<ng-template #stepsTemplate let-stage="stage">
    <div class="ui-g-12 ui-md-12">
        <div class="form-group row">
            <div class="col-md-6">
                <h3>Steps</h3>
            </div>
            <div *ngIf="stepTypes && stepTypes.length" class="col-md-offset-2 col-md-4">
                <app-select-2 (valChange)="addStep($event, stage)" [data]="stepTypes"
                              [value]="stepTypes[0]"
                              fieldLabel="Description">
                </app-select-2>
            </div>
        </div>
        <div *ngIf="stage.Steps.length===0">
            No steps added...
        </div>

        <div (dndDrop)="onDrop($event, stage.Steps, stage.ObjectID)"
             [class.disable-drop]="draggingId!=null && draggingId !== stage.ObjectID"
             dndDropzone>
            <div [hidden]="draggingId !== stage.ObjectID" dndPlaceholderRef
                 style="background: #CCCCCC; border: 1px dashed #000; width: 50%; height: 53px"></div>
            <div *ngFor="let step of stage.Steps" class="ui-g">
                <div (dndEnd)="onDragEnd($event)"
                     (dndStart)="onDragStart(step, stage.Steps, stage.ObjectID)"
                     [dndDraggable]="step"
                     class="ui-g-6"
                     dndEffectAllowed="copy">
                    <div class="ui-g">
                        <div class="col-md-8 interactive">
                            <h4>{{step.StepType.Description}}</h4>
                        </div>
                        <div class="col-md-4">
                            <button (click)="removeStep(step, stage)"
                                    [disabled]="showLoader" icon="ui-icon-close"
                                    pButton
                                    type="button"></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <hr/>
    </div>
</ng-template>


<ng-template let-stage="stage" #messageTemplate>
    <div class="ui-g-12 ui-md-12">
        <div class="form-group row">
            <div class="ui-g-12 ui-md-6">
                <label> Automatically progress to next stage</label>
            </div>
            <div class="ui-g-12 ui-md-4">
                <p-inputSwitch [(ngModel)]="stage.AutoProgress" [disabled]="showLoader"
                               name="AutoProgress{{stage.ObjectID}}">
                </p-inputSwitch>
            </div>
        </div>
        <div class="form-group row">
            <div class="ui-g-12 ui-md-6">
                <label> Use messaging</label>
            </div>
            <div class="ui-g-12 ui-md-4">
                <p-inputSwitch [(ngModel)]="stage.UseMessaging" [disabled]="showLoader"
                               (ngModelChange)="removeIconClass()"
                               name="UseMessaging{{stage.ObjectID}}">
                </p-inputSwitch>
            </div>
        </div>
        <p-panel [collapsed]="!stage.UseMessaging" *ngIf="stage.UseMessaging" [toggleable]="stage.UseMessaging"
                 header="{{stageMessagesCount(stage)}}" toggler="header" class="messaging">
            <div class="form-group row">
                <div class="col-md-offset-9 col-md-3">
                    <button (click)="addMessage(stage)" *ngIf="stage.UseMessaging"
                            [disabled]="showLoader"
                            class="btn btn-primary add-more-btn" tabindex="11">Add
                        Message
                    </button>
                </div>
            </div>
            <!-- Display Pre Stage Messages here -->
            <div *ngFor="let message of stage.WorkFlowMessages" class="form-group row">
                <div *ngIf="stage.UseMessaging && !message.IsWithdrawalMessage"
                     class="col-lg-12 col-md-12 mb-10">
                    <div class="col-md-3" *ngIf="stage.StageType.IsPreStage">
                        <label>&nbsp;</label>
                        <p-multiSelect [(ngModel)]="message.ApplicantSources"
                                       [disabled]="showLoader"
                                       [filter]="false"
                                       [options]="applicantSources"
                                       [panelStyle]="{minWidth:'12em'}"
                                       class="form-control"
                                       name="applicantSources{{message.ObjectID}}"
                                       optionLabel="Description">
                        </p-multiSelect>
                    </div>
                    <div class="col-md-2">
                        <label>After</label>
                        <p-inputMask (change)="generateDelayString(message)"
                                     (onBlur)="toggleInput($event, 'Delay'+message.ObjectID, false)"
                                     (onFocus)="toggleInput($event, 'Delay'+message.ObjectID, true)"
                                     *ngIf="!showLabel('Delay'+message.ObjectID) || !message.Delay"
                                     [(ngModel)]="message.Delay"
                                     [disabled]="showLoader"
                                     [id]="'Delay'+message.ObjectID"
                                     class="form-control"
                                     mask="9?9:99:99"
                                     name="Delay{{message.ObjectID}}">
                        </p-inputMask>
                        <div (click)="toggleInput($event, 'Delay'+message.ObjectID, true)"
                             *ngIf="showLabel('Delay'+message.ObjectID) && message.Delay">
                            <label>{{message.DelayString}}</label>
                        </div>
                    </div>
                    <div class="col-md-1">
                        <label for="Variance{{message.ObjectID}}">+/-</label>
                        <input [(ngModel)]="message.Variance"
                               [disabled]="showLoader"
                               (change)="generateVarianceString(message)"
                               (blur)="toggleInput($event, 'Variance'+message.ObjectID, false)"
                               (focusin)="toggleInput($event, 'Variance'+message.ObjectID, true)"
                               class="form-control" id="Variance{{message.ObjectID}}"
                               *ngIf="!showLabel('Variance'+message.ObjectID) || !message.Variance"
                               name="Variance{{message.ObjectID}}" type="text">
                        <div
                            (click)="toggleInput($event, 'Variance'+message.ObjectID, true)"
                            *ngIf="showLabel('Variance'+message.ObjectID) && message.Variance">
                            <label>{{message.VarianceString}}</label>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <label title="Business Hours only" class="mb-0">Business Hours
                            only</label>
                        <p-checkbox [(ngModel)]="message.BusinessHoursOnly"
                                    binary="true"
                                    name="BusinessHoursOnly{{message.ObjectID}}">
                        </p-checkbox>
                    </div>
                    <div class="col-md-3">
                        <label>Send</label>
                        <p-dropdown (onChange)="showMessageTemplateDialog($event, message)"
                                    [(ngModel)]="message.MessageTemplate"
                                    [autoDisplayFirst]="false"
                                    [options]="messageTemplates"
                                    filter="true"
                                    name="messageTemplate{{message.ObjectID}}"
                                    optionLabel="TemplateName">
                            <ng-template let-message pTemplate="selectedItem">
                                <i class="{{getMessageClass(message.value)}}"></i>
                                <span
                                    class="dropdown-text">{{message.label}}</span>
                            </ng-template>
                            <ng-template let-selectedMsg pTemplate="item">
                                <div class="ui-helper-clearfix"
                                     style="position: relative;height: 25px;">
                                    <i class="{{getMessageClass(selectedMsg.value)}}"></i>
                                    <div class="dropdown-text">{{selectedMsg.label}}</div>
                                </div>
                            </ng-template>
                        </p-dropdown>
                    </div>
                    <div class="col-md-1 text-center">
                        <button (click)="configureMessageTemplate(message)"
                                [disabled]="showLoader" icon="ui-icon-settings"
                                pButton
                                type="button">
                        </button>
                        <button (click)="removeMessage(message, stage)"
                                *ngIf="!message.IsWithdrawalMessage" [disabled]="showLoader"
                                icon="ui-icon-close"
                                pButton type="button">
                        </button>
                    </div>
                </div>
            </div>

            <div *ngFor="let message of stage.WorkFlowMessages" class="form-group row">
                <div *ngIf="stage.UseMessaging && message.IsWithdrawalMessage"
                     class="ui-g ui-g-3">
                    <h4 class="ui-g-offset-1">Withdrawal Process</h4>
                </div>
                <div *ngIf="stage.UseMessaging && message.IsWithdrawalMessage"
                     class="col-lg-12 col-md-12 mb-10">
                    <div class="col-md-2">
                        <label>After</label>
                        <p-inputMask (change)="generateDelayString(message)"
                                     (onBlur)="toggleInput($event, 'Delay'+message.ObjectID, false)"
                                     (onFocus)="toggleInput($event, 'Delay'+message.ObjectID, true)"
                                     *ngIf="!showLabel('Delay'+message.ObjectID) || !message.Delay"
                                     [(ngModel)]="message.Delay"
                                     [disabled]="showLoader"
                                     [id]="'Delay'+message.ObjectID"
                                     class="form-control"
                                     mask="9?9:99:99"
                                     name="Delay{{message.ObjectID}}">
                        </p-inputMask>
                        <div (click)="toggleInput($event, 'Delay'+message.ObjectID, true)"
                             *ngIf="showLabel('Delay'+message.ObjectID) && message.Delay">
                            <label>{{message.DelayString}}</label>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <label for="Variance{{message.ObjectID}}">+/-</label>
                        <input [(ngModel)]="message.Variance"
                               [disabled]="showLoader"
                               (change)="generateVarianceString(message)"
                               (blur)="toggleInput($event, 'Variance'+message.ObjectID, false)"
                               (focusin)="toggleInput($event, 'Variance'+message.ObjectID, true)"
                               class="form-control" id="Variance{{message.ObjectID}}"
                               *ngIf="!showLabel('Variance'+message.ObjectID) || !message.Variance"
                               name="Variance{{message.ObjectID}}" type="text">
                        <div
                            (click)="toggleInput($event, 'Variance'+message.ObjectID, true)"
                            *ngIf="showLabel('Variance'+message.ObjectID) && message.Variance">
                            <label>{{message.VarianceString}}</label>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <label title="Business Hours only" class="mb-0">Business Hours
                            only</label>
                        <p-checkbox [(ngModel)]="message.BusinessHoursOnly"
                                    binary="true"
                                    name="BusinessHoursOnly{{message.ObjectID}}">
                        </p-checkbox>
                    </div>
                    <div class="col-md-4">
                        <label>Send</label>
                        <p-dropdown (onChange)="showMessageTemplateDialog($event, message)"
                                    [(ngModel)]="message.MessageTemplate"
                                    [autoDisplayFirst]="false"
                                    [options]="messageTemplates"
                                    filter="true"
                                    name="messageTemplate{{message.ObjectID}}"
                                    optionLabel="TemplateName">
                            <ng-template let-message pTemplate="selectedItem">
                                <i class="{{getMessageClass(message.value)}}"></i>
                                <span
                                    class="dropdown-text">{{message.label}}</span>
                            </ng-template>
                            <ng-template let-selectedMsg pTemplate="item">
                                <div class="ui-helper-clearfix"
                                     style="position: relative;height: 25px;">
                                    <i class="{{getMessageClass(selectedMsg.value)}}"></i>
                                    <div
                                        class="dropdown-text">{{selectedMsg.label}}</div>
                                </div>
                            </ng-template>
                        </p-dropdown>
                    </div>
                    <div class="col-md-2 text-center">
                        <button (click)="configureMessageTemplate(message)"
                                [disabled]="showLoader" icon="ui-icon-settings"
                                pButton
                                type="button">
                        </button>
                    </div>
                </div>
            </div>

        </p-panel>
        <!-- End displaying messages -->
        <hr/>
        <div *ngIf="isGeneric(stage)" class="ui-g-12 ui-md-6">
            <button (click)="removeStage(stage)" [disabled]="showLoader"
                    class="btn btn-primary add-more-btn">Remove Stage
            </button>
        </div>
    </div>
</ng-template>
