<div class="popup-general">
    <div class="row">
        <div class="col-lg-12">
            <div class="popup-title">
                <img src="{{ logoSrc }}" with="25" height="25">
                <span class="header-popup-text">{{ title | translate }}</span>
                <div class="pull-right">
                    <button type="button" class="close" (click)="close()">×</button>
                </div>
            </div>
        </div>
    </div>

    <div mat-dialog-content class="dialog-content">
        <!-- <p>{{ message | translate}} </p>
        <xdf-json-view [data]="json" [levelOpen]="1"></xdf-json-view> -->
        <form [formGroup]="form" name="form" autocomplete="off" novalidate>

            <div class="group-content">
                <div class="row">
                    <div class="form-group col-12">
                        <xdf-input name="description" label="calendar_exception_description" type="text"
                            [required]="true" placeholder="calendar_exception_description" [formGroup]="form"
                            [options]="{ maxLength: 1000, showLength: true}">
                        </xdf-input>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-6">
                        <xdf-select label="calendar_exception_type" name="calendarExceptionType" [values]="typeList"
                            [required]="true" placeholder="calendar_exception_type"
                            [disabled]="mode === 'view' || (mode !== 'new' && !record?.estadoPermiteEdicion)"
                            [formGroup]="form" [options]="{}">
                        </xdf-select>
                    </div>
                    <div class="form-group col-6">
                        <xdf-select label="calendar_exception_frequency" name="frequencyType" [values]="frequencyList"
                            [required]="true" placeholder="calendar_exception_frequency"
                            [disabled]="mode === 'view' || (mode !== 'new' && !record?.estadoPermiteEdicion)"
                            [formGroup]="form" [options]="{}" #mySelect
                            (onChangeSelected)='onOptionsSelected($event.value)'></xdf-select>
                    </div>
                </div>
            </div>
            <!-- de aqui empieza la configuracion semanal -->
            <div class="legend" *ngIf="form?.value?.frequencyType">
                <span class="group-title">{{ 'title.calendar_exception_frequency.config' | translate}}</span>
            </div>
            <div class="group-content" *ngIf="form?.value?.frequencyType=== 'W'">
                <div class="row">
                    <div class="form-group col-12">
                        <xdf-select label="calendar_exception_month" name="month" [values]="monthList" [required]="true"
                            placeholder="calendar_exception_month"
                            [disabled]="mode === 'view' || (mode !== 'new' && !record?.estadoPermiteEdicion)"
                            [formGroup]="form" [options]="{}"></xdf-select>
                    </div>
                </div>
                <div class="row" *ngIf="form?.value?.frequencyType=== 'W'">
                    <div class="form-group col-6">
                        <xdf-input name="weekOfMonth" label="calendar_exception_week" type="number" [required]="true"
                            placeholder="calendar_exception_week" [formGroup]="form" minlength="1" maxlength="4">
                        </xdf-input>
                    </div>
                    <div class="form-group col-6">
                        <xdf-select label="calendar_exception_dayweek" name="dayOfWeek" [values]="weekList"
                            [required]="true" placeholder="calendar_exception_dayweek"
                            [disabled]="mode === 'view' || (mode !== 'new' && !record?.estadoPermiteEdicion)"
                            [formGroup]="form" [options]="{}"></xdf-select>

                    </div>
                </div>
            </div>
            <div class="group-content" *ngIf="form?.value?.frequencyType === 'Y'">
                <div class="row">
                    <div class="form-group col-xl-6">
                        <byte-date-picker-anual [form]="form"></byte-date-picker-anual>
                    </div>
                </div>
            </div>
            <div class="group-content" *ngIf="form?.value?.frequencyType === 'R'">
                <div class="row">
                    <div class="form-group col-xl-6">
                        <xdf-datepicker name="from" label="calendar_exception_from"
                            placeholder="calendar_exception_from" [formGroup]="form" [required]="true"
                            [maxDate]="form?.value?.to">
                        </xdf-datepicker>

                    </div>
                    <div class="form-group col-xl-6">
                        <xdf-datepicker name="to" label="calendar_exception_to" placeholder="calendar_exception_to"
                            [formGroup]="form" [required]="true" [minDate]="form?.value?.from">
                        </xdf-datepicker>
                    </div>
                </div>
            </div>
            <div class="group-content" *ngIf="form?.value?.frequencyType === 'U'">
                <div class="row">
                    <div class="form-group col-xl-6">
                        <xdf-datepicker name="date" label="calendar_exception_date"
                            placeholder="calendar_exception_date" [formGroup]="form" [required]="false">
                        </xdf-datepicker>
                    </div>
                </div>
            </div>
        </form>


    </div>



    <div class="popup-footer">
        <div class="pull-right">
            <button class="btn btn-primary" (click)="ok()" *ngIf="mode !== 'view'"
                [disabled]="!calendarConfForm || form?.invalid">
                <span><i class="fa fa-floppy-o"></i>&nbsp;{{ 'btn.save' | translate }}</span>
            </button>
            &nbsp;
            <button class="btn btn-default" (click)="close()">
                <span>{{ 'btn.cancel' | translate }}</span>
            </button>
        </div>
    </div>
</div>