<div id="content">
    <neu-container>
        <div id="options-dashboard">
            <div class="icon icon-25"><neu-button shape="round" (click)="refresh()" style="width: 35px; height: 35px;">
                <i id="icon-color" class="icon-spin"></i>
            </neu-button></div>
            
            <div id="date-selector">
                <div>
                    <h3>Desde</h3>
                    <neu-input type="date" [(ngModel)]="date_ini" (change)="fetchData()"></neu-input><br>
                </div>
                <div>
                    <h3>Hasta</h3>
                    <neu-input type="date" [(ngModel)]="date_fi" (change)="fetchData()"></neu-input><br>
                </div>
            </div>
        </div>
    </neu-container>

    <div id="dashboard" *ngIf="!loading">
        <div class="row" id="mini-components">
            <app-mini-info class="col-33"
                *ngIf="mini_ingresos && !coach"
                [info]="mini_ingresos"
            ></app-mini-info>
            <app-mini-info [className]="!coach ? 'col-33' : 'col-50'"
                *ngIf="mini_news"
                [info]="mini_news"
            ></app-mini-info>
            <app-mini-info [className]="!coach ? 'col-33' : 'col-50'"
                *ngIf="mini_olds"
                [info]="mini_olds"
            ></app-mini-info>
        </div>
        <!-- INGRESOS -->
        <neu-container class="chart" id="ingresos-chart" *ngIf="!coach">
            <h2 class="title-graph">Ingresos netos <div class="icon" matTooltip="{{toolTips['ingresos']}}"><neu-button>?</neu-button></div></h2>
            <div class="no-info" *ngIf="!ingresos_chart"> No hay datos a mostrar</div>
            <ngx-charts-line-chart *ngIf="ingresos_chart"
                [scheme]="ingresos_chart.colorScheme"
                [results]="ingresos_chart.results"
                [gradient]="ingresos_chart.gradient"
                [xAxis]="ingresos_chart.showXAxis"
                [yAxis]="ingresos_chart.showYAxis"
                [xAxisTicks]="ingresos_chart.xAxisTicks"
                [legend]="ingresos_chart.showLegend"
                [legendTitle]=""
                [yAxisTickFormatting]="axisFormatEuro"
                [showXAxisLabel]="ingresos_chart.showXAxisLabel"
                [showYAxisLabel]="ingresos_chart.showYAxisLabel"
                [xAxisLabel]="ingresos_chart.xAxisLabel"
                [yAxisLabel]="ingresos_chart.yAxisLabel"
                [autoScale]="ingresos_chart.autoScale"
                (select)="onSelect($event)">
            </ngx-charts-line-chart>
        </neu-container>

        <!-- ACTIVIDAD Y CONSUMO -->
        <div class="row">
            <!-- ACTIVIDAD -->
            <div class="col-40">
                <neu-container class="chart" id="actividad-chart">
                    <h2 class="title-graph">Actividad en el Box <div class="icon" matTooltip="{{toolTips['actividad_box']}}"><neu-button>?</neu-button></div></h2>
                    <div class="no-info" *ngIf="!actividad_chart"> No hay datos a mostrar</div>
                    <ngx-charts-bar-vertical *ngIf="actividad_chart"
                        [scheme]="actividad_chart.colorScheme"
                        [results]="actividad_chart.results"
                        [gradient]="actividad_chart.gradient"
                        [xAxis]="actividad_chart.showXAxis"
                        [yAxis]="actividad_chart.showYAxis"
                        [legend]="actividad_chart.showLegend"
                        [showXAxisLabel]="actividad_chart.showXAxisLabel"
                        [showYAxisLabel]="actividad_chart.showYAxisLabel"
                        [xAxisLabel]="actividad_chart.xAxisLabel"
                        [yAxisLabel]="actividad_chart.yAxisLabel"
                        (select)="onSelect($event)">
                    </ngx-charts-bar-vertical>
                </neu-container>
            </div>
            <!-- CONSUMO -->
            <div class="col-60" *ngIf="!coach">
                <neu-container class="chart" id="consumo-chart">
                    <h2 class="title-graph">Consumo de créditos <div class="icon" matTooltip="{{toolTips['consumo_creditos']}}"><neu-button>?</neu-button></div></h2>
                    <div class="no-info" *ngIf="!consumo_chart"> No hay datos a mostrar</div>
                    <ngx-charts-bar-horizontal *ngIf="consumo_chart"
                        [scheme]="consumo_chart.colorScheme"
                        [results]="consumo_chart.results"
                        [gradient]="consumo_chart.gradient"
                        [xAxis]="consumo_chart.showXAxis"
                        [yAxis]="consumo_chart.showYAxis"
                        [xAxisTickFormatting]="axisFormatPercentatge"
                        [legend]="consumo_chart.showLegend"
                        [showXAxisLabel]="consumo_chart.showXAxisLabel"
                        [showYAxisLabel]="consumo_chart.showYAxisLabel"
                        [xAxisLabel]="consumo_chart.xAxisLabel"
                        [yAxisLabel]="consumo_chart.yAxisLabel"
                        [barPadding]="consumo_chart.barPadding"
                        (select)="onSelect($event)">
                    </ngx-charts-bar-horizontal>
                </neu-container>
                <div id="ranking">
                    <div class="no-info" *ngIf="!max_min_users"> No hay datos a mostrar</div>
                    <div class="row no-margin" *ngIf="max_min_users">
                        <div class="col-50 neu-container">
                            <h3>Los habituales</h3>
                            <div>
                                <div *ngIf="max_min_users[0] && max_min_users[0].user" class="purple-div">
                                    <span class="name-ranking">
                                        {{max_min_users[0].user}}
                                    </span>
                                </div>
                                <div *ngIf="max_min_users[1] && max_min_users[1].user" class="purple-div">
                                    <span class="name-ranking">
                                        {{max_min_users[1].user}}
                                    </span>
                                </div>
                                <div *ngIf="max_min_users[2] && max_min_users[2].user" class="purple-div">
                                    <span class="name-ranking">
                                        {{max_min_users[2].user}}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-50 neu-container">
                            <h3>Los menos habituales</h3>
                            <div>
                                <div *ngIf="max_min_users[3] && max_min_users[3].user" class="purple-div">
                                    <span class="name-ranking">
                                        {{max_min_users[3].user}}
                                    </span>
                                </div>
                                <div *ngIf="max_min_users[4] && max_min_users[4].user" class="purple-div">
                                    <span class="name-ranking">
                                        {{max_min_users[4].user}}
                                    </span>
                                </div>
                                <div *ngIf="max_min_users[5] && max_min_users[5].user" class="purple-div">
                                    <span class="name-ranking">
                                        {{max_min_users[5].user}}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- OCUPACIÓN -->
            <div class="col-60"  *ngIf="coach">
                <neu-container class="chart" id="actividad-chart">
                    <h2 class="title-graph">Ocupación del Box <div class="icon" matTooltip="{{toolTips['ocupacio_box']}}"><neu-button>?</neu-button></div></h2>
                    <div class="no-info" *ngIf="!ocupacion_box"> No hay datos a mostrar</div>
                    <ngx-charts-bar-vertical *ngIf="ocupacion_box"
                        [scheme]="ocupacion_box.colorScheme"
                        [results]="ocupacion_box.results"
                        [gradient]="ocupacion_box.gradient"
                        [xAxis]="ocupacion_box.showXAxis"
                        [yAxis]="ocupacion_box.showYAxis"
                        [legend]="ocupacion_box.showLegend"
                        [showXAxisLabel]="ocupacion_box.showXAxisLabel"
                        [showYAxisLabel]="ocupacion_box.showYAxisLabel"
                        [xAxisLabel]="ocupacion_box.xAxisLabel"
                        [yAxisLabel]="ocupacion_box.yAxisLabel"
                        [yAxisTickFormatting]="axisFormatPercentatge"
                        [barPadding]="actividad_chart.barPadding"
                        (select)="onSelect($event)">
                    </ngx-charts-bar-vertical>
                </neu-container>
            </div>
        </div>

        <!-- SUBSCRIPCIONES POR FINALIZAR -->
        <div class="row" *ngIf="!coach && subscriptions_ending">
            <neu-container style="width: 100%;">
                <h2 class="title-graph">Suscripciones que finalizan <div class="icon" matTooltip="{{toolTips['subscriptions_ending']}}"><neu-button>?</neu-button></div></h2>
                <p *ngIf="!subscriptions_ending ||subscriptions_ending.length==0">No hay suscripciones de atletas que terminen pronto.</p>
                <app-user-subscription
                    *ngFor="let s of subscriptions_ending"
                    [routerLink]="['/admin', 'subscriptions', s.id]"
                    [subscription]="s"
                ></app-user-subscription>
            </neu-container>
        </div>

        <!-- SUBSCRIPCIONES EN PRORROGA -->
        <div class="row" *ngIf="!coach && subscriptions_prorroga">
            <neu-container style="width: 100%;">
                <h2 class="title-graph">Suscripciones en prórroga <div class="icon" matTooltip="{{toolTips['subscriptions_prorroga']}}"><neu-button>?</neu-button></div></h2>
                <p *ngIf="!subscriptions_prorroga || subscriptions_prorroga.length==0">No hay suscripciones de atletas en prórroga.</p>
                <app-user-subscription
                    *ngFor="let s of subscriptions_prorroga"
                    [routerLink]="['/admin', 'subscriptions', s.id]"
                    [subscription]="s"
                ></app-user-subscription>
            </neu-container>
        </div>

        <!-- CLASES IMPARTIDAS -->
        <neu-container class="chart" id="ingresos-chart">
            <h2 class="title-graph">Clases Impartidas <div class="icon" matTooltip="{{toolTips['clases_impartidas']}}"><neu-button>?</neu-button></div></h2>
            <div class="no-info" *ngIf="!clases_impartidas"> No hay datos a mostrar</div>
            <ngx-charts-line-chart *ngIf="clases_impartidas"
                [scheme]="clases_impartidas.colorScheme"
                [results]="clases_impartidas.results"
                [gradient]="clases_impartidas.gradient"
                [xAxis]="clases_impartidas.showXAxis"
                [yAxis]="clases_impartidas.showYAxis"
                [xAxisTicks]="clases_impartidas.xAxisTicks"
                [legend]="clases_impartidas.showLegend"
                [showXAxisLabel]="clases_impartidas.showXAxisLabel"
                [showYAxisLabel]="clases_impartidas.showYAxisLabel"
                [xAxisLabel]="clases_impartidas.xAxisLabel"
                [yAxisLabel]="clases_impartidas.yAxisLabel"
                [autoScale]="clases_impartidas.autoScale"
                (select)="onSelect($event)">
            </ngx-charts-line-chart>
        </neu-container>

        <!-- SUBSCRIPCIONES DE USUARIO Y OCUPACIÓN -->
        <div class="row" *ngIf="!coach">
            <!-- SUBSCRIPCIONES DE USUARIO -->
            <div class="col-60">
                <neu-container class="chart" id="suscripciones-tarifa-chart">
                    <h2 class="title-graph">Suscripciones de usuarios por tarifa <div class="icon" matTooltip="{{toolTips['subscripciones_tarifa']}}"><neu-button>?</neu-button></div></h2>
                    <div class="no-info" *ngIf="!suscripcions_tarifa"> No hay datos a mostrar</div>
                    <ngx-charts-pie-chart *ngIf="suscripcions_tarifa"
                        [scheme]="suscripcions_tarifa.colorScheme"
                        [results]="suscripcions_tarifa.results"
                        [legend]="suscripcions_tarifa.legend"
                        [legendPosition]="suscripcions_tarifa.legendPosition"
                        [legendTitle]="'Tarifas'"
                        [labels]="suscripcions_tarifa.labels"
                        [doughnut]="suscripcions_tarifa.doughnut"
                        (select)="onSelect($event)"
                        (activate)="onActivate($event)"
                        (deactivate)="onDeactivate($event)">
                    </ngx-charts-pie-chart>
                </neu-container>
            </div>
            <!-- OCUPACIÓN -->
            <div class="col-40">
                <neu-container class="chart" id="actividad-chart">
                    <h2 class="title-graph">Ocupación del Box <div class="icon" matTooltip="{{toolTips['ocupacio_box']}}"><neu-button>?</neu-button></div></h2>
                    <div class="no-info" *ngIf="!ocupacion_box"> No hay datos a mostrar</div>
                    <ngx-charts-bar-vertical *ngIf="ocupacion_box"
                        [scheme]="ocupacion_box.colorScheme"
                        [results]="ocupacion_box.results"
                        [gradient]="ocupacion_box.gradient"
                        [xAxis]="ocupacion_box.showXAxis"
                        [yAxis]="ocupacion_box.showYAxis"
                        [legend]="ocupacion_box.showLegend"
                        [showXAxisLabel]="ocupacion_box.showXAxisLabel"
                        [showYAxisLabel]="ocupacion_box.showYAxisLabel"
                        [xAxisLabel]="ocupacion_box.xAxisLabel"
                        [yAxisLabel]="ocupacion_box.yAxisLabel"
                        [yAxisTickFormatting]="axisFormatPercentatge"
                        [barPadding]="actividad_chart.barPadding"
                        (select)="onSelect($event)">
                    </ngx-charts-bar-vertical>
                </neu-container>
            </div>
        </div>
    </div>

    <!--                    LOADER                  -->
    <div id="dashboard" *ngIf="loading">
        <div class="row" id="mini-components">
            <div class="col-33" *ngIf="!coach">
                <ngx-skeleton-loader count="1" [theme]="{ 'border-radius': '15px', height: '120px', 'background-color': '#E1E4E8' }" ></ngx-skeleton-loader>
            </div>
            <div [className]="!coach ? 'col-33' : 'col-50'">
                <ngx-skeleton-loader count="1" [theme]="{ 'border-radius': '15px', height: '120px', 'background-color': '#E1E4E8' }" ></ngx-skeleton-loader>
            </div>
            <div [className]="!coach ? 'col-33' : 'col-50'">
                <ngx-skeleton-loader count="1" [theme]="{ 'border-radius': '15px', height: '120px', 'background-color': '#E1E4E8' }" ></ngx-skeleton-loader>
            </div>
        </div>
        <!-- INGRESOS -->
        <ngx-skeleton-loader count="1" [theme]="{ 'border-radius': '15px', height: '400px', 'background-color': '#E1E4E8' }" ></ngx-skeleton-loader>

        <!-- ACTIVIDAD Y CONSUMO -->
        <div class="row">
            <!-- ACTIVIDAD -->
            <div class="col-40">
                <ngx-skeleton-loader count="1" [theme]="{ 'border-radius': '15px', height: '400px', 'background-color': '#E1E4E8' }" ></ngx-skeleton-loader>
            </div>
            <!-- CONSUMO -->
            <div class="col-60" *ngIf="!coach">
                <ngx-skeleton-loader count="1" [theme]="{ 'border-radius': '15px', height: '250px', 'background-color': '#E1E4E8' }" ></ngx-skeleton-loader>
                <ngx-skeleton-loader count="1" [theme]="{ 'border-radius': '15px', height: '135px', 'background-color': '#E1E4E8' }" ></ngx-skeleton-loader>
            </div>

            <!-- OCUPACIÓN -->
            <div class="col-40" *ngIf="coach">
                <ngx-skeleton-loader count="1" [theme]="{ 'border-radius': '15px', height: '400px', 'background-color': '#E1E4E8' }" ></ngx-skeleton-loader>
            </div>
        </div>

        <!-- SUBSCRIPCIONES POR FINALIZAR -->
        <ngx-skeleton-loader *ngIf="!coach" count="1" [theme]="{ 'border-radius': '15px', height: '400px', 'background-color': '#E1E4E8' }" ></ngx-skeleton-loader>

        <!-- CLASES IMPARTIDAS -->
        <ngx-skeleton-loader count="1" [theme]="{ 'border-radius': '15px', height: '400px', 'background-color': '#E1E4E8' }" ></ngx-skeleton-loader>

        <!-- SUBSCRIPCIONES DE USUARIO Y OCUPACIÓN -->
        <div class="row" *ngIf="!coach">
            <!-- SUBSCRIPCIONES DE USUARIO -->
            <div class="col-60">
                <ngx-skeleton-loader count="1" [theme]="{ 'border-radius': '15px', height: '400px', 'background-color': '#E1E4E8' }" ></ngx-skeleton-loader>
            </div>
            <!-- OCUPACIÓN -->
            <div class="col-40">
                <ngx-skeleton-loader count="1" [theme]="{ 'border-radius': '15px', height: '400px', 'background-color': '#E1E4E8' }" ></ngx-skeleton-loader>
            </div>
        </div>
    </div>

    <div id="first-info">
        <app-active-plan *ngIf="this.subscriptionSelection && this.subscriptionSelection.company" id="active-plan"></app-active-plan>
    </div>
    
</div>