<neu-container id="actions">
    <neu-button [routerLink]="['/admin', 'subscriptions']">Volver</neu-button>
    <neu-button (click)="change_subscription_screen = true;" *ngIf="us && us.end_date!=null">Cambiar tarifa</neu-button>
    <neu-button color="primary" (click)="save()">Guardar</neu-button>
</neu-container>

<ngx-skeleton-loader *ngIf="!us" class="container"  count="1" [theme]="{ 'border-radius': '15px', height: '520px', 'background-color': '#E1E4E8' }" ></ngx-skeleton-loader>
<neu-container class="container" id="left" *ngIf="us">
    <h2>Suscripción <span>- Identificador: {{ us.id }}</span> <neu-chip [color]="us.active ? 'secondary' : utilsService.getColor('seven')">{{ us.active ? 'Activa' : 'No activa' }}</neu-chip></h2>
    <div class="edit">
        <p *ngIf="!us.start_date">La suscripción no se ha pagado. De momento no se iniciará.</p>
        <p *ngIf="us.start_date && now < us.start_date">La suscripción se ha pagado. Se iniciará automáticamente.</p>
        <div class="input">
            <label>Fecha de inicio:</label>
            <neu-input type="date" disabled [ngModel]="us.start_date"></neu-input>
        </div>
        <span class="sep" *ngIf="us.end_date!=null && us.start_date!=null">-</span>
        <div class="input" *ngIf="us.end_date!=null && us.start_date!=null">
            <label>Fecha fin</label>
            <neu-input type="date" [(ngModel)]="us.end_date"></neu-input>
        </div>
        <div class="input">
            <label>Seleccionar rol:</label>
            <neu-select [(ngModel)]="us.role_id" *ngIf="roles">
                <neu-option *ngFor="let role of roles" [value]="role.id">{{ role.name }}</neu-option>
            </neu-select>
        </div>
        <neu-checkbox *ngIf="us.start_date" [checked]="us.end_date==null" (change)="$event ? toggleSubscriptionUnlimited() : null">{{ us.pricing.recharge_weekly ? 'Suscripción ilimitada' : 'Bono sin fecha límite' }}</neu-checkbox>
        <p>Tarifa: <a [routerLink]="['/admin', 'business']">{{ us.pricing.name }}</a></p>
    </div>
    <p>Si amplias la suscripción a través del desplegable de arriba, no se generará ninguna comanda nueva ni se contabilizará ninguna factura nueva.  Esta función está pensado para momentos excepcionales que necesitas ampliar, que no renovar, una suscripción. Útil para suscripciones para coaches por ejemplo.</p>
    
    <h2 *ngIf="us.active">Renovación</h2>
    <p *ngIf="us.active && !subscription_selection?.company.is_stripe_active">La renovación automática no está activada por parte de la empresa. Haz <a [routerLink]="['/admin', 'business']">click aquí</a> para configurarlo.</p>
    <p *ngIf="us.active && (!stripe_user || !stripe_user.is_stripe_active)">La renovación automática del usuario no está configurada por parte del usuario. Falta que configure un método de pago desde la app.</p>
    <p *ngIf="us.active && subscriptionHasAutomaticRenew()">La renovación automática está activada.</p>
    <neu-button color="primary" (click)="renew_subscription_screen = true;" *ngIf="us.active && us.end_date!=null && !subscriptionHasAutomaticRenew()">Renovar manualmente</neu-button>

    <neu-container style="margin-top: 20px; width: 100%;">
        <h2>Pedidos</h2>
        <p *ngIf="!us.box_orders || us.box_orders.length==0">
            No hay pedidos asociados a esta suscripción.
        </p>
        <neu-accordion *ngIf="us.box_orders && us.box_orders.length>0">
            <neu-expansion-panel *ngFor="let bo of us.box_orders">
                <neu-expansion-panel-header>
                    <neu-panel-title>#{{ bo.id}}</neu-panel-title>
                    <neu-panel-description>
                        <span class="date">{{ bo.created_at | date:'shortDate' }} - {{ bo.total | currency }}</span>
                        <neu-chip [color]="bo.payment.charged ? 'secondary' : utilsService.getColor('seven')">{{ bo.payment.charged ? 'Pagado' : 'No pagado' }}</neu-chip>
                    </neu-panel-description>
                </neu-expansion-panel-header>
                <p><b>Total:</b> {{ bo.total | currency }} (IVA incluido)</p>
                <p><b>Identificador de pago:</b> {{ bo.payment.id }}</p>
                <p><b>Estado:</b> {{ bo.payment.charged ? 'Pagado' : 'No pagado' }}</p>
                <p *ngIf="bo.payment.charged"><b>Factura: </b> #{{ bo.invoice.official_number }}. <a [routerLink]="['/billing', bo.id]">Ver factura</a></p>
                <neu-button color="primary" *ngIf="!bo.payment.charged" (click)="cobrar(bo)">Cobrar pedido</neu-button>
                <neu-button color="secondary" [routerLink]="['/admin', 'billing', bo.id]">Ver pedido</neu-button>
            </neu-expansion-panel>
        </neu-accordion>
    </neu-container>
</neu-container>

<ngx-skeleton-loader *ngIf="!us || !user_subscriptions" class="container"  count="1" [theme]="{ 'border-radius': '15px', height: '520px', 'background-color': '#E1E4E8' }" ></ngx-skeleton-loader>
<neu-container class="container" id="right" *ngIf="us && user_subscriptions">
    <div class="user">
        <img [src]="us.user.url_profile_photo" [alt]="us.user.name"/>
        <div class="basic-info">
            <h2>
                {{ us.user.name + ' ' + us.user.surnames }}
                <i [ngClass]="{'icon-male': us.user.gender==='M', 'icon-female': us.user.gender==='F'}"></i>
            </h2>
            <p><a href="mailto:{{us.user.email}}">{{ us.user.email }}</a></p>
            <p>{{ us.user.phone }}</p>
            <p>{{ us.user.weight + 'kg' }}. {{ us.user.height + 'cm' }}</p>            
        </div>
        <div class="address">
            <h3>Información</h3>
            <p>{{ us.user.address + ' ' + us.user.zipcode + ' ' + us.user.poblacio + ', ' + us.user.country }}</p>
            <p class="stripe">{{ (stripe_user && stripe_user.is_stripe_active) ? 'Tiene configurado los pagos automáticos.' : 'No tiene configurado los pagos automáticos.' }}</p>
        </div>
        <div *ngIf="us.user.nif" class="nif">
            <neu-chip color="secondary">DNI: {{ us.user.nif }}</neu-chip>
        </div>
    </div>
    <neu-container *ngIf="assists_chart && assists_chart.results">
        <h2 class="title-graph">Asistencia</h2>
            <ngx-charts-line-chart
                [results]="assists_chart.results"
                [gradient]="assists_chart.gradient"
                [xAxis]="assists_chart.showXAxis"
                [yAxis]="assists_chart.showYAxis"
                [xAxisTicks]="assists_chart.xAxisTicks"
                [legend]="assists_chart.showLegend"
                [legendTitle]=""
                [showXAxisLabel]="assists_chart.showXAxisLabel"
                [showYAxisLabel]="assists_chart.showYAxisLabel"
                [xAxisLabel]="assists_chart.xAxisLabel"
                [yAxisLabel]="assists_chart.yAxisLabel"
                [autoScale]="assists_chart.autoScale">
            </ngx-charts-line-chart>
    </neu-container>
    <neu-container class="user_subscriptions" *ngIf="user_subscriptions">
        <h2>Otras suscripciones</h2>
        <p *ngIf="user_subscriptions.length==0">Este usuario no tiene otras suscripciones con esta empresa.</p>
        <app-user-subscription
            *ngFor="let s of user_subscriptions"
            [subscription]="s"
            [user]="us.user"
            [routerLink]="['/admin', 'subscriptions', s.id]"
        ></app-user-subscription>
    </neu-container>
</neu-container>

<div id="change-pricing" *ngIf="change_subscription_screen || renew_subscription_screen">
    <neu-container *ngIf="change_subscription_screen">
        <h2>Cambiar suscripción</h2>
        <label>Selecciona una tarifa</label>
        <neu-select [(ngModel)]="selected_pricing" *ngIf="pricings" placeholder="Selecciona una tarifa o bono...">
            <neu-option *ngFor="let p of pricings" [value]="p">{{ p.name }}</neu-option>
        </neu-select>
        <p *ngIf="selected_pricing && selected_pricing.recharge_weekly">Esta suscripción tiene una duración de {{ selected_pricing.days }} días.</p>
        <p *ngIf="selected_pricing && !selected_pricing.recharge_weekly">Esta tarifa es un bono de {{ selected_pricing.wod_counter + selected_pricing.open_counter + selected_pricing.total_counter }} sesiones. {{ selected_pricing.days ?  'Tiene una caducidad de ' + selected_pricing.days + ' días.' : 'No tiene caducidad.' }}</p>
        <p>Para usar una renovación automática tiene que ser configurada desde la aplicación móvil por el propio usuario.</p>
        <neu-radio-group [(ngModel)]="override">
            <neu-radio-button [value]="true">Cancelar la tarifa actual y empezar ahora la suscripción</neu-radio-button>
            <neu-radio-button [value]="false" *ngIf="us.end_date!=null">Empezar la suscripción cuando finalice la actual</neu-radio-button>
        </neu-radio-group>
        <p *ngIf="override!=null" style="margin-bottom: 20px;">
            <i *ngIf="override===true">La nueva suscripción empezará hoy y se cancelará la actual.</i>
            <i *ngIf="override===false">La nueva suscripción empezará cuando se termine la actual, la cual no se renovará.</i>
        </p>

        <neu-checkbox [(ngModel)]="marcar_como_pagado">Marcar como pagado</neu-checkbox>
        <p *ngIf="selected_pricing && marcar_como_pagado">Se generará un pedido nuevo (<b>{{ selected_pricing.price | currency }}</b>), una nueva factura y se marcará como pagado.</p>
        <p *ngIf="selected_pricing && !marcar_como_pagado">Se generará un pedido nuevo (<b>{{ selected_pricing.price | currency }}</b>), pero no se marcará como pagado.</p>

        <div class="buttons">
            <neu-button (click)="change_subscription_screen = false;">Cancelar</neu-button>
            <neu-button color="primary" [disabled]="!selected_pricing || override==null" (neu_click)="processSubscriptionChange()">Cambiar suscripción</neu-button>
        </div>
    </neu-container>
    <neu-container *ngIf="renew_subscription_screen">
        <h2>Renovar suscripción</h2>
        <p>Tarifa: <a [routerLink]="['/admin', 'business']">{{ us.pricing.name }}</a></p>
        <p>Para usar una renovación automática tiene que ser configurada desde la aplicación móvil por el propio usuario.</p>
        <neu-checkbox [(ngModel)]="marcar_como_pagado">Marcar como pagado</neu-checkbox>
        
        <p *ngIf="marcar_como_pagado">Se generará un pedido nuevo (<b>{{ us.pricing.price | currency }}</b>), una nueva factura y se marcará como pagado.</p>
        <p *ngIf="!marcar_como_pagado">Se generará un pedido nuevo (<b>{{ us.pricing.price | currency }}</b>) pero la suscripción aún no estará activa. No se generará ninguna factura aún.</p>
        
        <p *ngIf="!us.pricing.recharge_weekly">El bono se ampliará <b>{{ selected_pricing.wod_counter + selected_pricing.open_counter + selected_pricing.total_counter }}</b> sesiones. {{ us.pricing.days ? 'Tendrá ' + us.pricing.days + ' días para agotarlo.' : 'No hay una restricción de tiempo para este bono.' }}</p>
        <p *ngIf="us.pricing.recharge_weekly">La suscripción se ampliará <b>{{ us.pricing.days }} días</b> hasta <b>{{ next_period_date_end | date:'shortDate' }}</b>.</p>
        <div class="buttons">
            <neu-button (click)="renew_subscription_screen = false;">Cancelar</neu-button>
            <neu-button color="primary" (neu_click)="processSubscriptionRenew()">Renovar suscripción</neu-button>
        </div>
    </neu-container>
</div>