<neu-container>
    <div id="date-selector">
        <div>
            <h3>Fecha de inicio del período</h3>
            <neu-input type="date" [(ngModel)]="date_ini" (change)="fetchData()"></neu-input><br>
        </div>
        <div>
            <h3>Fecha del final del período</h3>
            <neu-input type="date" [(ngModel)]="date_fi" (change)="fetchData()"></neu-input><br>
        </div>
    </div>
</neu-container>

<!--            MINI COMPONENTS AND CHART           -->
<div *ngIf="!loading_chart">
    <div class="row" *ngIf="subscriptionSelection && subscriptionSelection.role && subscriptionSelection.role.id<3">
        <div class="col-30" id="mini-components">
            <app-mini-info class="col-33"
                [info]="mini_ingresos"
            ></app-mini-info>
            <app-mini-info class="col-33"
                [info]="mini_ingresos_subtotal"
            ></app-mini-info>
            <app-mini-info class="col-33"
                [info]="mini_ingresos_vat"
            ></app-mini-info>
        </div>
        <div class="col-70">
            <neu-container class="chart" id="ingresos-chart">
                <div class="title-graph">Ingresos<div class="icon" matTooltip="{{toolTips['ingresos']}}"><neu-button>?</neu-button></div></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">
                </ngx-charts-line-chart>
            </neu-container>
        </div>
    </div>
</div>
<div *ngIf="loading_chart">
    <div class="row">
        <div class="col-30" id="mini-components">
            <div class="30">
                <ngx-skeleton-loader count="1" [theme]="{ 'border-radius': '15px', height: '125px', 'background-color': '#E1E4E8' }" ></ngx-skeleton-loader>
            </div>
            <div class="30">
                <ngx-skeleton-loader count="1" [theme]="{ 'border-radius': '15px', height: '125px', 'background-color': '#E1E4E8' }" ></ngx-skeleton-loader>
            </div>
            <div class="30">
                <ngx-skeleton-loader count="1" [theme]="{ 'border-radius': '15px', height: '125px', 'background-color': '#E1E4E8' }" ></ngx-skeleton-loader>
            </div>
        </div>
        <div class="col-70">
            <ngx-skeleton-loader count="1" [theme]="{ 'border-radius': '15px', height: '400px', 'background-color': '#E1E4E8' }" ></ngx-skeleton-loader>
        </div>
    </div>

</div>

<!--                RESUMEN PEDIDOS                 -->
<div id="resumen" *ngIf="!loading_orders">
    <neu-container id="pedidos">
        <div class="title-graph">Pedidos</div>
        <div class="icon icon-d"><neu-button shape="circle" (click)="downloadCSV()">
            <i id="icon-color" class="icon-download" style="margin: 0;"></i>
        </neu-button></div>

        <neu-container id="filter">
            <neu-paginator [length]="length" [pageSize]="pageSize" [page]="page" (pageChange)="pageChange($event)" *ngIf="length && pageSize"></neu-paginator>
            <neu-select [ngModel]="paid_filter" (ngModelChange)="setPaidFilter($event)">
                <neu-option [value]="3">Pagados y no pagados</neu-option>
                <neu-option [value]="1">No pagados</neu-option>
                <neu-option [value]="2">Pagados</neu-option>
            </neu-select>
        </neu-container>

        <neu-container id="table">
            <table class="neu-table">
                <thead>
                    <tr>
                        <th class="sortable" (click)="setSort('id')" [ngClass]="{'icon-up-dir': params.sort_col==='id' && params.sort_dir==='asc', 'icon-down-dir': params.sort_col==='id' && params.sort_dir==='desc'}">Id</th>
                        <th>Tipo</th>
                        <th class="expand sortable" (click)="setSort('created_at')" [ngClass]="{'icon-up-dir': params.sort_col==='created_at' && params.sort_dir==='asc', 'icon-down-dir': params.sort_col==='created_at' && params.sort_dir==='desc'}">Fecha de pedido</th>
                        <th class="expand">Estado</th>
                        <th class="sortable" (click)="setSort('invoice.created_at')" [ngClass]="{'icon-up-dir': params.sort_col==='sort_data_paid' && params.sort_dir==='asc', 'icon-down-dir': params.sort_col==='sort_data_paid' && params.sort_dir==='desc'}">Fecha factura</th>
                        <th class="expand sortable" (click)="setSort('total')" [ngClass]="{'icon-up-dir': params.sort_col==='total' && params.sort_dir==='asc', 'icon-down-dir': params.sort_col==='total' && params.sort_dir==='desc'}">Total</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let o of orders" [routerLink]="[o.id]">
                        <td>{{ o.id }}</td>
                        <td>
                            <neu-chip *ngIf="checkSubscription(o)" color="secondary">Suscripción</neu-chip>
                            <neu-chip *ngIf="!checkSubscription(o)" color="secondary">Pedido</neu-chip>
                        </td>
                        <td class="expand">{{ o.created_at | date:'dd/MM/yyyy' }}</td>
                        <td class="expand">
                            <neu-chip color="secondary" *ngIf="o.invoice">Pagado</neu-chip>
                            <neu-chip [color]="utilsService.getColor('seven')" *ngIf="!o.invoice">No pagado</neu-chip>
                        </td>
                        <td class="expand">{{ o.invoice ? (o.invoice.emitted_at | date:'dd/MM/yyyy') : '' }}</td>
                        <td class="expand">{{o.total | number:'1.2-2'}}€</td>
                    </tr>
                </tbody>
            </table>
        </neu-container>            
    </neu-container>
</div>
<div *ngIf="loading_orders">
    <ngx-skeleton-loader count="1" [theme]="{ 'border-radius': '15px', height: '400px', 'background-color': '#E1E4E8' }" ></ngx-skeleton-loader>
</div>