<div class="main-content">
  <div class="container-fluid">
    <mat-tab-group (selectedTabChange)="tabChanged($event)">
        <mat-tab label="Clientes">&nbsp;</mat-tab>
        <mat-tab label="Invitaciones">&nbsp;</mat-tab>
    </mat-tab-group>

    <div class="row" *ngIf="activeCustomers">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header card-header-green">
                    <h4 class="card-title ">Clientes</h4>
                    <p class="card-category">Maestro de clientes</p>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <mat-form-field class="example-full-width">
                                <input matInput placeholder="Filtrar por nombre" [(ngModel)]="filter.name">
                            </mat-form-field>
                        </div>
                        <div class="col-md-4">
                            <mat-form-field class="example-full-width">
                                <mat-select placeholder="Región" [(ngModel)]="filter.state">
                                    <mat-option *ngFor="let state of states" [value]="state.id">
                                        {{state.name}}
                                    </mat-option>
                                </mat-select>
                            </mat-form-field>
                        </div>
                        <div class="col-md-4 sys-actions">
                            <button mat-raised-button color="primary" (click)="filterdata()">Filtrar</button>
                            <!--<button mat-raised-button class="create" (click)="addCustomer()">Agregar</button>-->
                        </div>
                    </div>
                    
                    <div class="table-responsive">
                        <table class="table table-hover table-bordered">
                            <thead>
                                <th>Avatar</th>
                                <th>RUT</th>
                                <th>Nombre</th>
                                <th>Email</th>
                                <th>Saldo Cuenta</th>
                                <th>Saldo Recetas</th>
                                <th>Ult. Conexión</th>
                                <th>Opciones</th>
                            </thead>
                            <tbody>
                                <tr *ngIf="customers.length == 0">
                                    <td colspan="8">No existen registros disponibles</td>
                                </tr>
                                <tr *ngFor="let customer of customers; let i = index;">
                                    <td><img src="{{customer.avatar == '' ? '/assets/img/default.png' : customer.avatar}}" class="erp-avatar" /></td>
                                    <td>{{customer.card_code | rut }}</td>
                                    <td>{{customer.first_name}} {{customer.last_name}}</td>
                                    <td>{{customer.email}}</td>
                                    <td>$ {{customer.account_balance | number}} <a (click)="seeAccount(i)"><i class="fa fa-plus-square-o fa-fw"></i></a></td>
                                    <td>{{customer.prescription_balance | number}} grs <a (click)="seePrescription(i)"><i class="fa fa-plus-square-o fa-fw"></i></a></td>
                                    <td>{{customer.seen_at | date:'dd/MM/yyyy HH:mm'}}</td>
                                    <td>
                                        <button mat-stroked-button color="primary" (click)="editCustomer(i)">Editar</button>
                                        <button mat-stroked-button color="warn" (click)="deletecustomer(i)">Eliminar</button>
                                        <button mat-stroked-button (click)="messageUser(i)"><i class="fa fa-envelope"></i></button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row" *ngIf="activeInvitations">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header card-header-green">
                    <h4 class="card-title ">Invitaciones</h4>
                    <p class="card-category">Estado de invitaciones pendientes</p>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-12 sys-actions">
                            <button mat-raised-button color="primary" (click)="addInvitation()">Agregar invitación</button>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-hover table-bordered">
                            <thead>
                                <th>Fecha invitación</th>
                                <th>RUT</th>
                                <th>Invitado por</th>
                                <th>Opciones</th>
                            </thead>
                            <tbody>
                                <tr *ngIf="invitations.length == 0">
                                    <td colspan="4">No existen registros disponibles</td>
                                </tr>
                                <tr *ngFor="let invitation of invitations; let i = index;">
                                    <td>{{invitation.created_at | date:'dd/MM/yyyy HH:mm' }}</td>
                                    <td>{{invitation.card_code | rut }}</td>
                                    <td>{{invitation.created_by_name}}</td>
                                    <td>
                                        <button mat-stroked-button color="warn" [swal]="{ type: 'warning', title: '¿Borrar Invitación?', text: '', confirmButtonText: 'Confirmar borrar', cancelButtonText: 'Cancelar', showCancelButton: true, focusCancel: true }" (confirm)="deleteInvitation(i)">Eliminar</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
    

  </div>
</div>
