<div id="order-detail-container" *ngIf="!loading && order">
    <neu-container id="invoice" *ngIf="order.invoice">
        <div class="row">
            <div id="empresa" [ngClass]="{'col-33': order.invoice, 'col-50': !order.invoice}">
                <h2 class="title-graph">Detalle de la empresa</h2>
                <neu-container>
                    <div class="info-address">
                        <div>
                            <h5>Nombre Fiscal</h5>
                            <p>{{order.invoice.from_fiscal_name}}</p>
                        </div>
                        <div>
                            <h5>CIF</h5>
                            <p>{{order.invoice.from_nif_cif}}</p>
                        </div>
                        <div>
                            <h5>Dirección Fiscal</h5>
                            <p>{{order.invoice.from_fiscal_address}}</p>
                        </div>
                    </div>
                </neu-container>
            </div>
            <div id="cliente" [ngClass]="{'col-33': order.invoice, 'col-50': !order.invoice}">
                <h2 class="title-graph">Detalle del cliente</h2>
                <neu-container>
                    <div class="info-address">
                        <div>
                            <h5>Nombre</h5>
                            <p>{{order.invoice.to_fiscal_name}}</p>
                        </div>
                        <div>
                            <h5>DNI/NIE</h5>
                            <p>{{order.invoice.to_nif_cif}}</p>
                        </div>
                        <div>
                            <h5>Dirección</h5>
                            <p>{{order.invoice.to_fiscal_address}}</p>
                        </div>
                    </div>
                </neu-container>
            </div>
            <div class="col-33" *ngIf="order.invoice">
                <h2 class="title-graph">Detalle del la factura</h2>
                <neu-container>
                    <div class="info-address">
                        <div>
                            <h5>Número de factura</h5>
                            <div class="invoice-editable" *ngIf="!edit_codi">
                                <p>{{order.invoice.official_number}}</p>
                                <neu-button (click)="edit_codi = true" class="icona" color="primary" size="small" shape="circle"><i class="icon-pencil"></i></neu-button>
                            </div>
                            <div class="invoice-editable" *ngIf="edit_codi" id="codi">
                                <div>
                                    <label>Prefijo</label>
                                    <neu-input type="text" [(ngModel)]="order.invoice.invoice_prefix"></neu-input>
                                </div>
                                <div>
                                    <label>Serie</label>
                                    <neu-input type="text" [(ngModel)]="order.invoice.invoice_serie"></neu-input>
                                </div>
                                <div>
                                    <label>Número</label>
                                    <neu-input type="text" [(ngModel)]="order.invoice.invoice_number"></neu-input>
                                </div>
                                <neu-button (click)="updateInvoice(); edit_codi = false" class="icona" color="primary" size="small" shape="circle"><i class="icon-ok"></i></neu-button>
                            </div>
                        </div>
                        <div>
                            <h5>Fecha de emisión</h5>
                            <div class="invoice-editable" *ngIf="!edit_date">
                                <p>{{order.invoice.emitted_date}}</p>
                                <neu-button (click)="edit_date = true" class="icona" color="primary" size="small" shape="circle"><i class="icon-pencil"></i></neu-button>
                            </div>
                            <div class="invoice-editable" *ngIf="edit_date">
                                <neu-input type="date" [(ngModel)]="emitted_date"></neu-input>
                                <neu-button (click)="updateInvoice(); edit_date = false" class="icona" color="primary" size="small" shape="circle"><i class="icon-ok"></i></neu-button>
                            </div>
                        </div>
                        <div *ngIf="order.payment.payment_type">
                            <h5>Método de pago</h5>
                            <p>{{order.payment.payment_type.name}}</p>
                        </div>
                    </div>
                </neu-container>
            </div>
        </div>
    </neu-container>
    <neu-container>
        <div class="title-graph">Detalle del pedido</div>
        <neu-container id="lines table">
            <table class="neu-table">
                <thead>
                    <tr>
                        <th class="expand">#</th>
                        <th>Tipo</th>
                        <th>Impuestos</th>
                        <th>Subtotal</th>
                        <th>Descuento</th>
                        <th>Total</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let l of order.lines">
                        <td class="expand">{{l.id}}</td>
                        <td>
                            <neu-chip *ngIf="l.user_subscription_id" color="secondary">Suscripción</neu-chip>
                            <neu-chip *ngIf="!l.user_subscription_id" color="secondary">Pedido</neu-chip>
                        </td>
                        <td>{{l.vat | number:'1.2-2'}}€</td>
                        <td>{{l.subtotal | number:'1.2-2'}}€</td>
                        <td>
                            <div *ngIf="!l.discount">0,00€</div>
                            <div *ngIf="l.discount && l.discount.price">
                                -{{ l.discount.price| number : '1.2-2' }}€
                            </div>
                            <div *ngIf="l.discount && !l.discount.price && l.discount.percentatge">
                                -{{ l.discount.percentatge }}%
                            </div>
                        </td>
                        <td>{{l.total | number:'1.2-2'}}€</td>
                    </tr>
                </tbody>
            </table>
        </neu-container>
        <div id="resumen-column">
            <div id="resumen-column-info">
                <h2 class="title-graph">Resumen</h2>
                <div>
                    <div id="resumen">
                        <div>
                            Subtotal {{ order.subtotal | number : '1.2-2' }} €
                        </div>
                        <div style="margin-top: 10px;">
                            Impuestos {{ order.vat | number : '1.2-2' }} €
                        </div>
                        <div *ngIf="order.discount && order.discount.price" style="margin-top: 10px;">
                            {{order.discount.description}}
                            -{{ order.discount.price| number : '1.2-2' }} €
                        </div>
                        <div *ngIf="order.discount && !order.discount.price && order.discount.percentatge" style="margin-top: 10px;">
                            {{order.discount.description}}
                            -{{ order.discount.percentatge }} %
                        </div>
                        <div style="margin-top: 10px;">
                            Total {{ order.total | number : '1.2-2' }} €
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </neu-container>
    
    <neu-container *ngIf="subscription_id">
        <div id="subscription-container">
            <h2 class="title-graph">Suscripción</h2>
            <app-user-subscription [subscription_id]="subscription_id"></app-user-subscription>
        </div>
    </neu-container>

    
    
</div>

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