<app-error-page 
    *ngIf="!subscription_selection"
    iconClass="icon-snatch"
    h2="Ups... Tienes el selector a nivel de empresa."
    p="Por favor selecciona un box con el selector."
></app-error-page>

<neu-container id="filter" *ngIf="subscription_selection">
    <neu-button id="today-button" *ngIf="!isSame()" (click)="today()">Hoy</neu-button>
    <div id="paginator">
        <div id="paginate-buttons">
            <button class="previous" (click)="previous()"><i class="icon-left-arrow"></i></button>
            <button class="next" (click)="next()"><i class="icon-right-arrow"></i></button>
        </div>
        <span id="day">{{ start_date | date:'EEE d' }}{{ !isMobile ? (' - ' + (end_date | date:'EEE d MMMM y')) : '' }}</span>
    </div>
    <neu-select id="coach-select" placeholder="Selecciona un coach" [(ngModel)]="coach_selected" *ngIf="coaches">
        <neu-option *ngFor="let coach of coaches" [value]="coach">{{ coach.name }}</neu-option>
    </neu-select>
    <neu-select id="training-room-select" placeholder="Selecciona una sala" [ngModel]="training_room_selected" (ngModelChange)="selectTrainingRoom($event)">
        <neu-option *ngIf="training_rooms && training_rooms.length > 1" [value]="-1">Vista general</neu-option>
        <neu-option *ngFor="let tr of training_rooms" [value]="tr">{{ tr.name }}</neu-option>
    </neu-select>
    <neu-button color="primary" (click)="toggleWeekGenerator()" *ngIf="training_room_selected">Generar semana</neu-button>
    <neu-button (click)="toggleWorkoutSection()" [ngClass]="{'neu-pressed': secondary_workouts}" *ngIf="training_room_selected">Workouts</neu-button>
</neu-container>

<div id="content" *ngIf="subscription_selection">
    <div id="primary" class="layout" [ngClass]="{'active': active_primary}">
        <ngx-skeleton-loader *ngIf="!events" class="container"  count="1" [theme]="{ 'border-radius': '15px', height: '650px', 'background-color': '#E1E4E8' }" ></ngx-skeleton-loader>
        <neu-container id="calendar" *ngIf="events">
            <div [ngSwitch]="view">
                <mwl-calendar-week-view
                    *ngSwitchCase="CalendarView.Week"
                    [viewDate]="viewDate"
                    [events]="events"
                    [locale]="locale"
                    [weekStartsOn]="weekStartsOn"
                    [weekendDays]="weekendDays"
                    (eventClicked)="eventClicked($event.event)"
                    (eventTimesChanged)="eventTimesChanged($event)"
                    [refresh]="refresh"
                    (hourSegmentClicked)="hourSegmentClicked($event.date)"
                ></mwl-calendar-week-view>
                <mwl-calendar-day-view
                    *ngSwitchCase = "CalendarView.Day"
                    [viewDate]="viewDate"
                    [events]="events"
                    [locale]="locale"
                    (eventClicked)="eventClicked($event.event)"
                    (eventTimesChanged)="eventTimesChanged($event)"
                    [refresh]="refresh"
                    (hourSegmentClicked)="hourSegmentClicked($event.date)"
                ></mwl-calendar-day-view>
            </div>
            <app-training-session-detail 
                [ts]="detail_ts" 
                [coaches]="coaches"
                *ngIf="detail_active"
                (close)="detailClosed($event)"
                [isMobile]="isMobile"
                [training_types]="training_types"
            ></app-training-session-detail>
        </neu-container>
    </div>
    
    <div id="secondary" class="layout" [ngClass]="{'inactive': inactive_secondary, 'active': active_secondary}">
        <div class="secondary-content" *ngIf="secondary_workouts">
            <div class="header">
                <h2><i class="icon-dumbbell"></i>Programa un workout</h2>
                <div class="search">
                    <neu-button shape="circle"
                                class="more-info"
                                *ngIf="(workout_search && workout_search.length > 0) || (filtered_workouts && filtered_workouts.length > 0)"
                                (click)="workout_search = null; filtered_workouts = [];"><i class="icon-left-arrow"></i></neu-button>
                    <neu-input  type="text" 
                                placeholder="Buscar un workout" 
                                [ngModel]="workout_search"
                                (ngModelChange)="$event ? searchWorkouts({ name: $event }) : null;"></neu-input>
                </div>
            </div>
            <div class="scrollable">
                <ul class="categories" *ngIf="workouts_by_category && (!workout_search || workout_search.length==0) && (!filtered_workouts || filtered_workouts.length==0)">
                    <li class="category" *ngFor="let cat of workouts_by_category" (click)="searchWorkouts({ category: cat.category, scope: cat.scope })">
                        <span class="name">{{ cat.scope==="general" ? cat.category : (cat.scope!=="custom" ? "Err: Sin scope" : (cat.category==="general" ? "Mis Workouts" : ("Mis Workouts - " + cat.category))) }}</span>
                        <span class="number">{{ cat.number }}</span>
                        <i class="icon-right-arrow"></i>
                    </li>
                </ul>
                <ul class="workouts" *ngIf="filtered_workouts">
                    <li *ngFor="let w of filtered_workouts" mwlDraggable [dropData]="{ event: w }" dragActiveClass="drag-active">
                        <div style="overflow: hidden; padding: 20px;">
                            <p>
                                <span class="name" *ngIf="w.name">{{ w.name }}</span>
                                <span class="date" *ngIf="w.box_id">{{ w.updated_at | date:'shortDate' }}</span>
                                <neu-chip color="primary" *ngIf="w.category">{{ w.category }}</neu-chip>
                            </p>
                            <p>
                                <span>{{ getWorkoutDescription(w) }}</span>
                                <neu-button class="more-info" shape="circle" [routerLink]="['/workouts', w.id]"><i class="icon-right-arrow"></i></neu-button>
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
            <neu-button color="primary" [routerLink]="['/workouts']" size="full-width">Crear workout</neu-button>    
        </div>
        <div class="secondary-content" *ngIf="secondary_weeks && secondary_weeks_main">
            <div class="header">
                <h2><i class="far fa-clock"></i>Generar semana</h2>
            </div>
            <div class="scrollable">
                <p *ngIf="!calendar_templates || calendar_templates.length==0">No tienes ninguna plantilla de calendario creada.</p>
                <div class="generate-calendar-inputs">
                    <label for="generate_week_date_start">Desde: </label>
                    <neu-input type="datetime-local" [(ngModel)]="generate_week_date_start" id="generate_week_date_start" name="generate_week_date_start"></neu-input>
                    <label for="generate_week_date_end">Hasta: </label>
                    <neu-input type="datetime-local" [(ngModel)]="generate_week_date_end" id="generate_week_date_end" name="generate_week_date_end"></neu-input>
                    <label for="generate_week_training_type_id">Seleccionar tipo de sesión:</label>
                    <neu-select [(ngModel)]="generate_week_training_type_id" placeholder="Selecciona...">
                        <neu-option *ngFor="let tt of training_types" [value]="tt.id">{{ tt.name }}</neu-option>
                    </neu-select>
                </div>
                <ul class="templates">
                    <li *ngFor="let ct of calendar_templates">
                        <h3 class="name">{{ getTemplateDescription(ct) }}</h3>
                        <p>De {{ ct.start_day_time }}h a {{ ct.end_day_time }}h</p>
                        <p>Duración: {{ ct.default_duration }} minutos.</p>
                        <p>Tiempo entre sesiones: {{ ct.time_between_wods ? (ct.time_between_wods + ' min.') : '-' }}</p>
                        <p *ngIf="ct.calendar_template_exclusions">{{ getTemplateExclusionsDescription(ct) }}</p>
                        <div class="buttons">
                            <neu-button color="primary" (click)="generateWeek(ct)">Generar</neu-button>
                            <neu-button color="secondary" (click)="navigatePlantilla(ct)">Editar</neu-button>
                        </div>
                    </li>
                </ul>
            </div>
            <neu-button color="primary" size="full-width" (click)="navigatePlantilla(null)">Crear plantilla</neu-button>
        </div>
        <div class="secondary-content edit-template" *ngIf="secondary_weeks && secondary_weeks_detail">
            <div class="header">
                <h2>
                    <neu-button class="more-info" shape="circle" (click)="navigatePlantillaMain()"><i class="icon-left-arrow"></i></neu-button>
                    <i class="far fa-clock"></i>{{ (secondary_weeks_template && secondary_weeks_template.id) ? 'Editar plantilla' : 'Nueva plantilla' }}
                </h2>
            </div>
            <div class="scrollable edit-template">
                <label>Días de la semana</label>
                <neu-multi-toggle [(ngModel)]="secondary_weeks_template.days">
                    <neu-toggle [value]="1">L</neu-toggle>
                    <neu-toggle [value]="2">M</neu-toggle>
                    <neu-toggle [value]="3">X</neu-toggle>
                    <neu-toggle [value]="4">J</neu-toggle>
                    <neu-toggle [value]="5">V</neu-toggle>
                    <neu-toggle [value]="6">S</neu-toggle>
                    <neu-toggle [value]="7">D</neu-toggle>
                </neu-multi-toggle>
                <label>Duración de la sesión (minutos)</label>
                <neu-input type="number" [(ngModel)]="secondary_weeks_template.default_duration" placeholder="Duración"></neu-input>
                <label>Tiempo entre WODS (minutos)</label>
                <neu-input type="number" [(ngModel)]="secondary_weeks_template.time_between_wods" placeholder="Tiempo entre sesiones"></neu-input>
                <label>Hora de inicio del dia</label>
                <neu-input type="time" step="1" [(ngModel)]="secondary_weeks_template.start_day_time" placeholder="Hora inicio"></neu-input>
                <label>Hora fin del dia</label>
                <neu-input type="time" step="1" [(ngModel)]="secondary_weeks_template.end_day_time" placeholder="Hora fin"></neu-input>
                <label>Excepciones</label>
                <p>Añade intervalos en los que no habrá sesiones (p.e, a la hora de comer).</p>
                <neu-container class="excl" *ngFor="let excl of secondary_weeks_template.calendar_template_exclusions; let i = index;">
                    <neu-button (click)="removeException(secondary_weeks_template, i)" class="more-info" shape="circle" size="small"><i class="icon-trash"></i></neu-button>
                    <h3>Excepción #{{ i+1 }}</h3>
                    <label>de:</label>
                    <neu-input type="time" step="1" [(ngModel)]="excl.start_time_exclusion"></neu-input>
                    <label>hasta:</label>
                    <neu-input type="time" step="1" [(ngModel)]="excl.end_time_exclusion"></neu-input>
                </neu-container>
                <neu-button color="secondary" class="add-exception" (click)="addException(secondary_weeks_template)">Añadir excepción</neu-button>
            </div>
            <neu-button color="primary" size="full-width" [disabled]="!isTemplateComplete(secondary_weeks_template)" (neu_click)="savePlantilla(secondary_weeks_template)" style="margin-bottom: 15px;">Guardar plantilla</neu-button>
            <neu-button size="full-width" (neu_click)="borrarPlantilla(secondary_weeks_template)">Borrar plantilla</neu-button>
        </div>
    </div>
</div>    
