<div id="content">
    <div id="primary" class="layout active">
        <div class="col">
            <ngx-skeleton-loader *ngIf="!company" class="container"  count="1" [theme]="{ 'border-radius': '15px', height: '350px', 'background-color': '#E1E4E8' }" ></ngx-skeleton-loader>
            <neu-container class="section" *ngIf="company">
                <div class="title-row">
                    <h2><i class="icon-commercial"></i>Mi negocio</h2>
                    <neu-button color="primary" (neu_click)="company_edit_mode = true;" *ngIf="!company_edit_mode">Editar</neu-button>
                    <div class="logo" *ngIf="company_edit_mode">
                        <img [src]="company.logo_url" [alt]="company.name" />
                        <label for="upload-logo">Cambiar</label>
                        <input id="upload-logo" name="upload-logo" type="file" accept="image/*" (change)="uploadCompanyImage($event.target.files)">
                    </div>
                </div>
                <div class="show" *ngIf="!company_edit_mode">
                    <p>
                        <b>Nombre comercial</b>: {{ company.name }}<br>
                        <b>Eslógan</b>: {{ company.slogan }}<br>
                        <b>Correo electrónico</b>: {{ company.email }}<br>
                        <b>Teléfono de contacto</b>: {{ company.phone }}<br>
                        <b>Dirección</b>: {{ company.address }}<br>
                        <b>Ciudad</b>: {{ company.city }}<br>
                        <b>País</b>: {{ company.country }}
                    </p>
                </div>
                <div class="edit" *ngIf="company_edit_mode">
                    <form #f1="ngForm">
                        <h3>Información de contacto</h3>
                        <div class="row">
                            <div class="input">
                                <label>Nombre comercial</label>
                                <neu-input required type="text" [(ngModel)]="company.name" name="name" placeholder="Nombre comercial"></neu-input>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input">
                                <label>Eslógan (opcional)</label>
                                <neu-input type="text" [(ngModel)]="company.slogan" name="slogan" placeholder="Eslógan"></neu-input>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input">
                                <label>Correo electrónico de contacto</label>
                                <neu-input required type="email" [(ngModel)]="company.email" name="email" placeholder="Correo electrónico"></neu-input>
                            </div>
                            <div class="input">
                                <label>Teléfono de contacto</label>
                                <neu-input required type="text" [(ngModel)]="company.phone" name="phone" placeholder="Teléfono de contacto"></neu-input>
                            </div>
                        </div>
                        
                        <h3>Información comercial</h3>
                        <div class="row">
                            <div class="input">
                                <label>Dirección comercial</label>
                                <neu-input required type="text" [ngModel]="company.address" (ngModelChange)="company.address = $event; company.fact_address_line1 = sync_fact_and_commercial_info ? $event : company.fact_address_line1" name="address" placeholder="Dirección comercial"></neu-input>
                            </div>
                            <div class="input">
                                <label>Ciudad</label>
                                <neu-input required type="text" [ngModel]="company.city" (ngModelChange)="company.city = $event; company.fact_city = sync_fact_and_commercial_info ? $event : company.fact_city" name="city" placeholder="Ciudad"></neu-input>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input">
                                <label>Código postal</label>
                                <neu-input required type="number" [ngModel]="company.zipcode" (ngModelChange)="company.zipcode = $event; company.fact_zipcode = sync_fact_and_commercial_info ? $event : company.fact_zipcode" name="zipcode" placeholder="Código postal"></neu-input>
                            </div>
                            <div class="input">
                                <label>Provincia</label>
                                <neu-input required type="text" [ngModel]="company.county" (ngModelChange)="company.county = $event; company.fact_county = sync_fact_and_commercial_info ? $event : company.fact_county" name="county" placeholder="Provincia"></neu-input>
                            </div>
                            <div class="input">
                                <label>País</label>
                                <neu-select required [ngModel]="company.country" (ngModelChange)="company.country = $event; company.fact_country_code = sync_fact_and_commercial_info ? $event : company.fact_country_code" name="country">
                                    <neu-option *ngFor="let country of countries.default" [value]="country.alpha_2">{{ country.name }}</neu-option>
                                </neu-select>
                            </div>
                        </div>

                        <h3>Información de facturación</h3>
                        <p>La información de facturación será la información que se cogerá para realizar las facturas y los pagos.</p>
                        <div class="row">
                            <div class="input">
                                <neu-checkbox [ngModel]="sync_fact_and_commercial_info" (ngModelChange)="toggleSyncFlag($event)" name="sync_fact_and_commercial_info">Mi información de facturación es igual a la información comercial.</neu-checkbox>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input">
                                <label>Nombre de empresa registrado</label>
                                <neu-input required type="text" [(ngModel)]="company.fact_name" name="fact_name" placeholder="Nombre de empresa oficial"></neu-input>
                            </div>
                            <div class="input">
                                <label>CIF</label>
                                <neu-input required type="text" [(ngModel)]="company.cif" name="cif" placeholder="Número de identificación fiscal"></neu-input>
                            </div>
                            <div class="input" *ngIf="!sync_fact_and_commercial_info">
                                <label>Ciudad</label>
                                <neu-input required type="text" [(ngModel)]="company.city" name="city" placeholder="Ciudad"></neu-input>
                            </div>
                        </div>
                        <div class="row" *ngIf="!sync_fact_and_commercial_info">
                            <div class="input">
                                <label>Dirección (línea 1)</label>
                                <neu-input required type="text" [(ngModel)]="company.fact_address_line1" name="fact_address_line1" placeholder="Dirección (línea 1)"></neu-input>
                            </div>
                            <div class="input">
                                <label>Dirección (línea 2) (opcional)</label>
                                <neu-input type="text" [(ngModel)]="company.fact_address_line2" name="fact_address_line2" placeholder="Dirección (línea 2)"></neu-input>
                            </div>
                        </div>
                        <div class="row" *ngIf="!sync_fact_and_commercial_info">
                            <div class="input">
                                <label>Código postal</label>
                                <neu-input required type="number" [(ngModel)]="company.fact_zipcode" name="fact_zipcode" placeholder="Código postal"></neu-input>
                            </div>
                            <div class="input">
                                <label>Provincia</label>
                                <neu-input required type="text" [(ngModel)]="company.fact_county" name="fact_county" placeholder="Provincia"></neu-input>
                            </div>
                            <div class="input">
                                <label>País</label>
                                <neu-select required [(ngModel)]="company.fact_country_code" name="fact_country_code">
                                    <neu-option *ngFor="let country of countries.default" [value]="country.alpha_2">{{ country.name }}</neu-option>
                                </neu-select>
                            </div>
                        </div>

                        <h3>Información de contabilidad</h3>
                        <div class="row">
                            <div class="input">
                                <label>Prefijo de facturación (opcional)</label>
                                <neu-input type="text" [(ngModel)]="company.fact_prefix" name="fact_prefix" placeholder="Prefijo de facturación"></neu-input>
                            </div>
                            <div class="input">
                                <label>Serie de facturación</label>
                                <neu-input required type="text" [(ngModel)]="company.fact_serie" name="fact_serie" placeholder="Serie de facturación"></neu-input>
                            </div>
                        </div>
                        
                        <h3>Información de pagos automáticos</h3>
                        <p>Hit a Wod utiliza Stripe como pasarela de pago para que las empresas puedan facturar a sus clientes de forma automática. Consulta nuestra guía sobre como configurar Stripe con Hit a Wod.</p>
                        <div class="row">
                            <div class="input">
                                <label>Stripe Api Key (opcional)</label>
                                <neu-input type="text" [(ngModel)]="company.stripe_public_key" name="stripe_public_key" placeholder="Stripe API Key"></neu-input>
                            </div>
                            <div class="input">
                                <label>Stripe Private Key (opcional)</label>
                                <neu-input type="text" [(ngModel)]="company.stripe_private_key" name="stripe_private_key" placeholder="Stripe Private Key"></neu-input>
                            </div>
                        </div>

                        <div class="buttons">
                            <neu-button color="primary" [disabled]="!f1.valid" (neu_click)="updateCompany()">Actualizar</neu-button>
                        </div>
                    </form>
                </div>
            </neu-container>

            <ngx-skeleton-loader *ngIf="!pricings" class="container"  count="1" [theme]="{ 'border-radius': '15px', height: '350px', 'background-color': '#E1E4E8' }" ></ngx-skeleton-loader>
            <neu-container id="pricings" class="section" *ngIf="pricings">
                <div class="title-row">
                    <h2><i class="icon-price"></i>Mis tarifas</h2>
                    <neu-button color="primary" (neu_click)="addNewPricing()">Crear tarifa</neu-button>
                </div>
                <neu-accordion>
                    <neu-expansion-panel *ngFor="let p of pricings; let i = index">
                        <neu-expansion-panel-header>
                            <span *ngIf="!p.name">Tarifa sin nombre</span>
                            <b class="name" *ngIf="p.name">{{ p.name }}</b>
                            <span class="period"> - {{ p.days | daysToPeriod }}</span>
                            <neu-chip color="primary" class="price">{{ (!p.price || p.price==0) ? 'Gratis' : (p.price | currency) }}</neu-chip>
                            <span class="sessions">{{ p | pricingSessionsWeeklyText }}</span>
                        </neu-expansion-panel-header>
                        <form #f2="ngForm">
                            <h3>Información de tarifa</h3>
                            <div class="row">
                                <div class="input">
                                    <label>Nombre</label>
                                    <neu-input required type="text" name="name" [(ngModel)]="p.name" placeholder="Nombre"></neu-input>
                                </div>
                                <div class="input">
                                    <label>Descripción</label>
                                    <neu-input required type="text" name="description" [(ngModel)]="p.description" placeholder="Descripción"></neu-input>
                                </div>
                            </div>
                            <div class="row">
                                <div class="input" *ngIf="p.recharge_weekly == true">
                                    <label>Frecuencia</label>
                                    <neu-select [(ngModel)]="p.days" name="days" placeholder="Selecciona">
                                        <neu-option [value]="15">Quinzenal</neu-option>
                                        <neu-option [value]="30">Mensual</neu-option>
                                        <neu-option [value]="60">Bimensual</neu-option>
                                        <neu-option [value]="90">Trimestral</neu-option>
                                        <neu-option [value]="120">Quatrimestral</neu-option>
                                        <neu-option [value]="180">Semestral</neu-option>
                                        <neu-option [value]="365">Anual</neu-option>
                                    </neu-select>
                                </div>
                                <div class="input" *ngIf="p.recharge_weekly == false">
                                    <label>Días para gastar el bono</label>
                                    <div class="input inline">
                                        <neu-input *ngIf="p.days!=null" name="days" min="1" [(ngModel)]="p.days" placeholder="Días que estará disponible el bono"></neu-input>
                                        <neu-checkbox [checked]="p.days==null" (change)="p.days = $event.target.value ? null : 30">Días ilimitados</neu-checkbox>
                                    </div>
                                </div>
                                <div class="input">
                                    <label>Precio total (€)</label>
                                    <neu-input type="number" name="price" [(ngModel)]="p.price" placeholder="Precio"></neu-input>
                                </div>
                                <div class="input">
                                    <label>IVA (%)</label>
                                    <neu-input type="number" name="vat_included" [value]="p.vat_included*100" (change)="p.vat_included = ($event.target.value)/100" placeholder="IVA"></neu-input>
                                </div>
                            </div>
                            <div class="row">
                                <div class="input">
                                    <neu-checkbox [checked]="!p.recharge_weekly" (change)="p.recharge_weekly = !$event.target.value">Esta tarifa es un bono</neu-checkbox>
                                </div>
                            </div>
                            <h3>Información de entrenamientos</h3>
                            <p *ngIf="p.recharge_weekly">Selecciona los entrenamientos semanales que ofrecerá la tarifa.</p>
                            <p *ngIf="!p.recharge_weekly">Selecciona los entrenamientos que tendrá el bono.</p>
                            <div class="row">
                                <div class="input">
                                    <label>WODs</label>
                                    <div class="input inline">
                                        <neu-input required max="7" *ngIf="p.wod_counter!=null" type="number" min="0" name="wod_counter" [(ngModel)]="p.wod_counter" placeholder="Contador de WODs"></neu-input>
                                        <neu-checkbox [checked]="p.wod_counter==null" (change)="p.wod_counter = $event.target.value ? null : 1">{{ p.wod_counter==null && p.open_counter==null && p.total_counter == null ? 'Sesiones ilimitadas' : 'WODs ilimitados' }}</neu-checkbox>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="input">
                                    <label>Open Box</label>
                                    <div class="input inline">
                                        <neu-input required max="7" *ngIf="p.open_counter!=null" type="number" min="0" name="open_counter" [(ngModel)]="p.open_counter" placeholder="Contador de Opens"></neu-input>
                                        <neu-checkbox [checked]="p.open_counter==null" (change)="p.open_counter = $event.target.value ? null : 1">{{ p.wod_counter==null && p.open_counter==null && p.total_counter == null ? 'Sesiones ilimitadas' : 'Opens ilimitados' }}</neu-checkbox>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="input">
                                    <label>Sesiones totales</label>
                                    <div class="input inline">
                                        <neu-input required max="7" *ngIf="p.total_counter!=null" type="number" min="0" name="total_counter" [(ngModel)]="p.total_counter" placeholder="Contador sesiones de totales"></neu-input>
                                        <neu-checkbox [checked]="p.total_counter==null" (change)="p.total_counter = $event.target.value ? null : 1">{{ p.wod_counter==null && p.open_counter==null && p.total_counter == null ? 'Sesiones ilimitadas' : 'No usar este contador' }}</neu-checkbox>
                                    </div>
                                </div>
                            </div>
                            <p><i>Ejemplo de uso: Si quieres 4 sesiones semanales, indiferentemente del tipo (open o wod), deja en 0 las dos primeras cajas, y pon un 4 en la última caja. En cambio, si quieres 3 sesiones semanales, de las cuales sean 2 WODs y 1 Openbox estrictamente, pon la secuencia 2 - 1 - 0.</i></p>
                            <h3 *ngIf="company.boxes">Boxes donde se podrá asistir</h3>
                            <p *ngIf="company.boxes">A continuación marca los boxes a los que esta tarifa permitirá apuntarse.</p>
                            <div class="row" *ngFor="let b of company.boxes">
                                <div class="input">
                                    <neu-checkbox 
                                        [checked]="p.box_ids.indexOf(b.id)!=-1" 
                                        (change)="toggleBoxIdFromPricing($event.target.value, p, b.id, i)" 
                                    >{{ b.name }}</neu-checkbox>
                                </div>
                            </div>
                            <h3 *ngIf="p.recharge_weekly">Producto de Stripe</h3>
                            <p *ngIf="p.recharge_weekly">Si quieres que una suscripción pueda ser pagada de forma automática a través de Stripe, introduce aquí el id del plan de precios de Stripe que has creado referente a esta tarifa.</p>
                            <div *ngIf="p.recharge_weekly" class="row">
                                <div class="input">
                                    <label>Identificador de Stripe (opcional)</label>
                                    <neu-input type="text" name="stripe_id" [(ngModel)]="p.stripe_id" placeholder="El identificador de este plan de precios en Stripe"></neu-input>
                                </div>
                            </div>
                            <h3>Privacidad de {{ p.recharge_weekly ? 'la tarifa' : 'el bono' }}</h3>
                            <div class="row">
                                <div class="input">
                                    <neu-checkbox [(ngModel)]="p.is_public" name="is_public">{{ p.recharge_weekly ? 'Esta tarifa' : 'Este bono'}} es público para los atletas.</neu-checkbox>
                                </div>
                            </div>
                            <div class="buttons">
                                <neu-button *ngIf="p.id!=null" (neu_click)="deletePricing(p)">Eliminar</neu-button>
                                <neu-button color="primary" [disabled]="!f2.valid" (neu_click)="savePricing(p)">{{ p.id ? 'Actualizar' : 'Crear' }}</neu-button>
                            </div>
                        </form>
                    </neu-expansion-panel>
                </neu-accordion>
            </neu-container>     
        </div>
        <div class="col">
            <ngx-skeleton-loader *ngIf="!company || !company.boxes" class="container"  count="1" [theme]="{ 'border-radius': '15px', height: '250px', 'background-color': '#E1E4E8' }" ></ngx-skeleton-loader>
            <neu-container class="section" *ngIf="company && company.boxes">
                <div class="title-row">
                    <h2><i class="icon-box"></i>Mis boxes</h2>
                    <neu-button color="primary" (neu_click)="addNewBox()">Crear box</neu-button>
                </div>
                <neu-accordion>
                    <neu-expansion-panel *ngFor="let b of company.boxes; let i = index">
                        <neu-expansion-panel-header>
                            <span *ngIf="b.name"><b>{{ b.name }}</b>, {{ b.city }}</span>
                            <span *ngIf="!b.name"><i>Box sin información</i></span>
                        </neu-expansion-panel-header>
                        <form #f3="ngForm">
                            <div class="row">
                                <div class="input">
                                    <label>Nombre del box</label>
                                    <neu-input required type="text" [(ngModel)]="b.name" name="name" placeholder="Nombre del box"></neu-input>
                                </div>
                            </div>
                            <div class="row">
                                <div class="input">
                                    <label>Correo electrónico de contacto</label>
                                    <neu-input required type="email" [(ngModel)]="b.email" name="email" placeholder="Correo electrónico"></neu-input>
                                </div>
                                <div class="input">
                                    <label>Teléfono de contacto</label>
                                    <neu-input required type="text" [(ngModel)]="b.phone" name="phone" placeholder="Teléfono de contacto"></neu-input>
                                </div>
                            </div>
                            <div class="row">
                                <div class="input">
                                    <label>Dirección</label>
                                    <neu-input required type="text" [(ngModel)]="b.address" name="address" placeholder="Dirección"></neu-input>
                                </div>
                                <div class="input">
                                    <label>Ciudad</label>
                                    <neu-input required type="text" [(ngModel)]="b.city" name="city" placeholder="Ciudad"></neu-input>
                                </div>
                            </div>
                            <div class="row">
                                <div class="input">
                                    <label>Código postal</label>
                                    <neu-input required type="number" [(ngModel)]="b.postal_code" name="postal_code" placeholder="Código postal"></neu-input>
                                </div>
                                <div class="input">
                                    <label>Provincia</label>
                                    <neu-input required type="text" [(ngModel)]="b.county" name="county" placeholder="Provincia"></neu-input>
                                </div>
                                <div class="input">
                                    <label>País</label>
                                    <neu-select required required [(ngModel)]="b.country" name="country">
                                        <neu-option *ngFor="let country of countries.default" [value]="country.alpha_2">{{ country.name }}</neu-option>
                                    </neu-select>
                                </div>
                            </div>
                            <div class="buttons">
                                <neu-button *ngIf="b.id!=null" (neu_click)="deleteBox(b)">Eliminar</neu-button>
                                <neu-button color="secondary" *ngIf="b.id!=null" (neu_click)="edit_box_id = b.id; edit_box_settings_flag = true;">Editar ajustes</neu-button>
                                <neu-button color="primary" [disabled]="!f3.valid" (neu_click)="saveBox(b)">{{ b.id ? 'Actualizar' : 'Crear' }}</neu-button>
                            </div>
                        </form>
                    </neu-expansion-panel>
                </neu-accordion>
                <app-update-box-settings-dialog
                    *ngIf="edit_box_settings_flag===true && edit_box_id != null"
                    (close)="edit_box_settings_flag=false; edit_box_id = null;"
                    [box_id]="edit_box_id"
                ></app-update-box-settings-dialog>
            </neu-container>

            <ngx-skeleton-loader *ngIf="!discounts" class="container"  count="1" [theme]="{ 'border-radius': '15px', height: '250px', 'background-color': '#E1E4E8' }" ></ngx-skeleton-loader>
            <neu-container class="section" *ngIf="discounts">
                <div class="title-row">
                    <h2><i class="icon-pricing"></i>Mis descuentos</h2>
                    <neu-button color="primary" (neu_click)="addNewDiscount()">Crear descuento</neu-button>
                </div>
                <neu-accordion>
                    <neu-expansion-panel *ngFor="let d of discounts; let i = index">
                        <neu-expansion-panel-header>
                            <span *ngIf="d.description">{{ d.description }}</span>
                            <neu-chip *ngIf="d.description && d.price" color="primary" class="price">{{ d.price | currency }}</neu-chip>
                            <neu-chip *ngIf="d.description && d.percentatge" color="secondary" class="price">{{ '-' + d.percentatge + '%' }}</neu-chip>
                            <neu-chip class="status" [color]="d.active ? utilsService.getColor('six') : utilsService.getColor('seven')">
                                {{ d.active ? 'Activo' : 'Inactivo' }}
                            </neu-chip>

                            <span *ngIf="!d.description"><i>Descuento sin información</i></span>
                        </neu-expansion-panel-header>
                        <form #f4="ngForm">
                            <div class="row">
                                <div class="input">
                                    <label>Descripción del descuento</label>
                                    <neu-input required type="text" [(ngModel)]="d.description" name="description" placeholder="Descripción del descuento"></neu-input>
                                </div>
                            </div>
                            <div class="row">
                                <div class="input">
                                    <label>Condiciones del descuento</label>
                                    <neu-input required rows="10" type="textarea" [(ngModel)]="d.conditions" name="conditions" placeholder="Condiciones del descuento"></neu-input>
                                </div>
                            </div>
                            <div class="row">
                                <div class="input">
                                    <neu-radio-group #prcnt [value]="d.price ? false : true">
                                        <neu-radio-button *ngIf="d.id==null" [value]="false">Descuento por precio absoluto (€).</neu-radio-button>
                                        <neu-radio-button *ngIf="d.id==null" [value]="true">Descuento por porcentaje (%).</neu-radio-button>
                                    </neu-radio-group>
                                </div>
                                <div class="input" *ngIf="prcnt && prcnt.value==false">
                                    <label>Descuento en €</label>
                                    <neu-input [disabled]="d.id > 0" required min="1" type="number" [ngModel]="d.price" (ngModelChange)="d.price = $event; d.percentatge = null;" name="price" placeholder="Descuentos en euros"></neu-input>
                                </div>
                                <div class="input" *ngIf="prcnt && prcnt.value==true">
                                    <label>Descuento en porcentaje (de 0 a 100)</label>
                                    <neu-input [disabled]="d.id > 0" required min="1" max="100" type="number" [ngModel]="d.percentatge" (ngModelChange)="d.percentatge = $event; d.price = null;" name="percentatge" placeholder="Decimales separados por '.'"></neu-input>
                                </div>
                            </div>
                            <div class="row">
                                <div class="input">
                                    <neu-checkbox [(ngModel)]="d.active" name="active">Este descuento está activo.</neu-checkbox>
                                </div>
                            </div>
                            <div class="buttons">
                                <neu-button *ngIf="d.id!=null" (neu_click)="deleteDiscount(d)">Eliminar</neu-button>
                                <neu-button color="primary" [disabled]="!f4.valid" (neu_click)="saveDiscount(d)">{{ d.id ? 'Actualizar' : 'Crear' }}</neu-button>
                            </div>
                        </form>
                    </neu-expansion-panel>
                </neu-accordion>
            </neu-container>
        </div>
    </div>
    <div id="secondary" class="layout active">
        <app-active-plan id="active-plan" [pressed]="false" [vertical]="true" [more_options]="true"></app-active-plan>
    </div>
</div>