<div class="panel-viewer-wrapper">

    <div class="panel-viewer-title">
        <mat-icon>chat</mat-icon>
        {{'label.deployment-channels.title' | translate}}
    </div>

    <div class="panel-viewer-body">

        <!-- <div class="row pb-2 text-center">

            <div class="col-12">
                <h1>{{'label.deployment-channels' | translate}}</h1>
            </div>
        </div> -->
        <div class="row pb-2  justify-content-center">
            <div class="col-md-6 col-sm-12">

                <!-- <div class="alert alert-warning" *ngIf="!viewMode">
                    <i class="fa fa-warning"></i>&nbsp;&nbsp;<span
                        [innerHTML]="'label.summary.warning' | translate"></span>
                </div> -->

                <h4 class="mt-3">
                    <!-- <button class="pull-right" mat-icon-button (click)="addChannel()" *ngIf="!viewMode && isAvaliableChannels">
                        <i class="fa fa-plus"></i>
                    </button> -->
                    <button type="button" class="btn btn-outline-primary btn-sm pull-right" (click)="addChannel()"
                        *ngIf="!viewMode && (deploymentChannels && deploymentChannels.length) && isAvaliableChannels">
                        <i class="fa fa-file"></i>
                        <span class="visible-md-inline visible-lg-inline visible-xl-inline">
                            {{'Añadir canal' | translate}}
                        </span>
                    </button>
                    <b>{{'label.channels' | translate}}</b>
                </h4>

                <mat-accordion *ngIf="!isLoadingDataChannel">
                    <form [formGroup]="formGroup" novalidate autocomplete="off">
                        <mat-expansion-panel *ngFor="let channel of deploymentChannels; let i = index"
                            [expanded]="step === i" (opened)="setStep(i)">
                            <mat-expansion-panel-header class="right-aligned-header" [collapsedHeight]="'60px'">
                                <mat-panel-title>
                                    <img [src]="channel.channelImage" class="icon">
                                    <div>
                                        <span style="margin-right: 8px;">{{ channel.channelName }}</span>
                                        <ng-container *ngIf="channel?.suggestTitle && channel?.suggestDetail">
                                            <ng-template #popContent><div [innerHTML]="channel?.suggestDetail"></div></ng-template>
                                            <ng-template #popoverTitle><div [innerHTML]="channel?.suggestTitle"></div></ng-template>
                                            <i class="fa fa-info-circle" placement="top" style="color: rgba(0, 0, 0, 0.54);"
                                            [ngbPopover]="popContent"
                                            [popoverTitle]="popoverTitle" triggers="hover"></i>
                                        </ng-container>
                                        <!-- <small class="text-muted">{{ channel.name }}</small> -->
                                    </div>
                                </mat-panel-title>
                                <mat-panel-description>
                                    <!-- <label class="label label-success"
                                        *ngIf="channel.active">{{'label.active' | translate}}</label>
                                    <label class="label label-default"
                                        *ngIf="!channel.active">{{'label.inactive' | translate}}</label> -->
                                    <mat-slide-toggle [(ngModel)]="channel.active" [disabled]="viewMode"
                                        style="margin-top: 0;" [ngModelOptions]="{standalone: true}" color="primary"
                                        (click)="$event.stopPropagation();">
                                        <span *ngIf="channel.active">{{'label.active' | translate}}</span>
                                        <span *ngIf="!channel.active">{{'label.inactive' | translate}}</span>
                                    </mat-slide-toggle>
                                </mat-panel-description>
                            </mat-expansion-panel-header>

                            <div formGroupName="{{channel.channelName}}">
                                    <div class="row">
                                        <!-- <div class="col-6">
                                            <mat-form-field class="amd-form-control">
                                                <mat-label>{{'label.name' | translate}}</mat-label>
                                                <input matInput maxlength="80" [type]="text" required="true"
                                                    [disabled]="viewMode" [(ngModel)]="channel.name"
                                                    [ngModelOptions]="{standalone: true}">
                                            </mat-form-field>
                                        </div> -->
                                        <!-- <div class="col-6">
                                            <mat-slide-toggle [(ngModel)]="channel.active" [disabled]="viewMode"
                                                [ngModelOptions]="{standalone: true}" color="primary">
                                                <span *ngIf="channel.active">{{'label.active' | translate}}</span>
                                                <span *ngIf="!channel.active">{{'label.inactive' | translate}}</span>
                                            </mat-slide-toggle>
                                        </div> -->
                                    </div>
                                    <div class="row" *ngFor="let field of channel.parameters">
                                        
                                        <div class="col-12">
                                            
                                                <!-- 
                                                    [pattern]="field.regex"
                                                -->
                                                <div *ngIf="field.channelParamName != 'twillio-number' && field.name != 'twillio-number'">

                                                    <mat-form-field class="amd-form-control">
                                                        <mat-label>{{field.label | dynamicTranslate: {param: field.traductions} }}:
                                                        </mat-label>
                                                    <input matInput [maxlength]="field.maxlength"
                                                    [disabled]="viewMode"
                                                    [type]="(field.type ? field.type : 'text')"
                                                    [required]="field.required"
                                                    [pattern]="field?.regex" [formControlName]="field.name || field.channelParamName ">

                                                    </mat-form-field>
                                                </div>
                                                
                                                
                                                
                                                <!-- <mat-error *ngIf="fieldForm.errors?.pattern">
                                                    {{ 'Formato inválido'  | translate }}</mat-error> -->
                                                    <!-- <mat-error *ngFor="let error of getErrors(channel.channelName, field.name, field.label)">{{ 'message.error.' + error.name  | translate : error.prop}} </mat-error> -->
                                            

                                        </div>
                                        <div class="col-12">
                                            <div *ngIf="field.channelParamName == 'twillio-number' || field.name == 'twillio-number'">
                                                
                                                <form [formGroup]="numbersForm">
                                                    <div *ngFor="let twilio_number of twilio_parameters_numbers; let i = index;">
                                
                                                        <div class="row">
                                                            <div class="form-group col-xl-6">
                                                                <!-- <input matInput placeholder="Teléfono" label="agent_form_number" ng2TelInput
                                                                    (keypress)="numericOnly($event)" type="number" [ng2TelInputOptions]="{autoHideDialCode: false, initialCountry: 'pe', separateDialCode:true}"
                                                                    [formGroup]="formGroup" class="form-control" type="text"
                                                                    [ngClass]="{ 'is-invalid': submitted && f.phone.errors }" /> -->
                                                                <input type="text" matInput  ng2TelInput 
                                                                    placeholder="Teléfono"
                                                                    [formControlName]="twilio_number.indice"
                                                                    [maxLength]="15" 
                                                                    (countryChange)="onCountryChange($event,twilio_number.indice)"
                                                                    [ng2TelInputOptions]="{autoHideDialCode: false, separateDialCode:true}"
                                                                    style="background: linear-gradient(#d7cdcd, rgb(241, 229, 229)) center bottom 1px /calc(100% - 10px) 2px no-repeat;"
                                                                    (intlTelInputObject)="$event.setCountry(twilio_number.pais)"
                                                                      />
                                                                <!-- <span id="valid-msg" class="hide invalid-feedback">✓ Valid</span> -->
                                                                <span id="error-msg" class="hide"></span>
                                                                <div *ngIf="submitted && f.phone.errors" class="invalid-feedback">
                                                                    <div *ngIf="f.phone.errors.required">Phone is required</div>
                                                                    <div *ngIf="f.phone.errors.minlength">Phone must be at least
                                                                        10 numbers.</div>
                                                                </div>
                                                            </div>
                                                            <div class="form-group col-xl-6" *ngIf="!viewMode">
                                                                <button type="button" class="btn btn-delete pull-right"
                                                                    (click)="deleteNumber(i)">
                                                                    <span class="fa fa-trash"></span>
                                                                </button>
                                                            </div>
                                                        </div>
                                                    
                                                    </div>
                                                </form>
                                                
                                                    
                                                

                                                <div class="row">
                                                    <div class=" col-12" style="text-align: center;" *ngIf="!viewMode">
                                                        <button [disabled]="false" type="button"
                                                            class="btn btn-success " (click)="addNumber()">
                                                            {{ 'btn.add' | translate }}
                                                        </button>
                                                    </div>
                                                </div>
            
                                            </div>
                                        </div>
                                    </div>
                            </div>

                            <mat-action-row *ngIf="!viewMode">
                                <button mat-button color="warn" (click)="deleteChannel(i)">
                                    <i
                                        class="fa fa-trash"></i><span>&nbsp;&nbsp;{{'label.delete-channel' | translate}}</span>
                                </button>
                            </mat-action-row>
                        </mat-expansion-panel>
                    </form>
                </mat-accordion>

                <div *ngIf="!(deploymentChannels && deploymentChannels.length)" class="border-all text-center">
                    <button type="button" class="btn btn-outline-primary btn-sm" (click)="addChannel()"
                        *ngIf="!viewMode && isAvaliableChannels">
                        <i class="fa fa-file"></i>
                        <span class="visible-md-inline visible-lg-inline visible-xl-inline">
                            {{'Añadir canal' | translate}}
                        </span>
                    </button>
                    <!-- {{'label.delete-channel' | translate}} -->
                </div>
            </div>

        </div>
    </div>

    <div class="footer-bar">
        <div class="row">
            <div class="col-12">
                <button mat-stroked-button matStepperPrevious class="pull-left" [disabled]="loading">
                    <i class="fa fa-chevron-left"></i>
                    <span class="pl-1">{{'btn.previous' | translate}}</span>
                </button>
                <button mat-stroked-button color="primary" type="submit" (click)="saveAgent()" class="pull-right"
                    *ngIf="!viewMode || loading" [disabled]="loading">
                    <span class="pr-1">{{'btn.save' | translate}}</span>
                    <i class="fa fa-chevron-right"></i>
                </button>
                <button mat-stroked-button (click)="exit()" class="pull-right" *ngIf="loading? false:viewMode">
                    <span class="pr-1">{{'application.options.exit' | translate}}</span>
                    <i class="fa fa-logout"></i>
                </button>
            </div>
        </div>
    </div>

</div>
