<div class="main-content">
  <div class="container-fluid">
      <div class="row">
          <div class="col-lg-3 col-md-6 col-sm-6">
              <div class="card card-stats">
                  <div class="card-header card-header-info card-header-icon">
                      <div class="card-icon">
                          <i class="material-icons">person</i>
                      </div>
                      <p class="card-category">Socios</p>
                      <h3 class="card-title">{{numeroSocios}}</h3>
                  </div>
              </div>
          </div>
          <div class="col-lg-3 col-md-6 col-sm-6">
              <div class="card card-stats">
                  <div class="card-header card-header-info card-header-icon">
                      <div class="card-icon">
                          <i class="material-icons">people</i>
                      </div>
                      <p class="card-category">Usuarios</p>
                      <h3 class="card-title">{{numeroUsuarios}}</h3>
                  </div>
              </div>
          </div>
          <div class="col-lg-3 col-md-6 col-sm-6">
              <div class="card card-stats">
                  <div class="card-header card-header-info card-header-icon">
                      <div class="card-icon">
                          <i class="material-icons">local_shipping</i>
                      </div>
                      <p class="card-category">Pedidos entregados</p>
                      <h3 class="card-title">{{pedidosEntregados}}</h3>
                  </div>
              </div>
          </div>
          <div class="col-lg-3 col-md-6 col-sm-6">
              <div class="card card-stats">
                  <div class="card-header card-header-info card-header-icon">
                      <div class="card-icon">
                        <i class="material-icons">local_shipping</i>
                      </div>
                      <p class="card-category">Pedidos pendientes</p>
                      <h3 class="card-title">{{pedidosPendientes}}</h3>
                  </div>
              </div>
          </div>
      </div>

      <div class="row">
          <div class="col-lg-3 col-md-6 col-sm-6">
              <div class="card card-stats">
                  <div class="card-header card-header-success card-header-icon">
                      <div class="card-icon">
                          <i class="material-icons">attach_money</i>
                      </div>
                      <p class="card-category">Ventas Hoy</p>
                      <h3 class="card-title">$ {{ventasHoy | number}}</h3>
                  </div>
              </div>
          </div>
          <div class="col-lg-3 col-md-6 col-sm-6">
              <div class="card card-stats">
                  <div class="card-header card-header-success card-header-icon">
                      <div class="card-icon">
                          <i class="material-icons">attach_money</i>
                      </div>
                      <p class="card-category">Ventas Semana</p>
                      <h3 class="card-title">$ {{ventasSemana | number}}</h3>
                  </div>
              </div>
          </div>
          <div class="col-lg-3 col-md-6 col-sm-6">
              <div class="card card-stats">
                  <div class="card-header card-header-success card-header-icon">
                      <div class="card-icon">
                          <i class="material-icons">attach_money</i>
                      </div>
                      <p class="card-category">Ventas Mes</p>
                      <h3 class="card-title">$ {{ventasMes | number}}</h3>
                  </div>
              </div>
          </div>
          <div class="col-lg-3 col-md-6 col-sm-6">
              <div class="card card-stats">
                  <div class="card-header card-header-success card-header-icon">
                      <div class="card-icon">
                        <i class="material-icons">attach_money</i>
                      </div>
                      <p class="card-category">Ventas Año</p>
                      <h3 class="card-title">$ {{ventasAno | number}}</h3>
                  </div>
              </div>
          </div> 
      </div>

      <div class="row">
        <div class="col-lg-3 col-md-6 col-sm-6">
            <div class="card card-stats">
                <div class="card-header card-header-warning card-header-icon">
                    <div class="card-icon">
                        <i class="material-icons">local_florist</i>
                    </div>
                    <p class="card-category">Ventas Hoy</p>
                    <h3 class="card-title">{{floresHoy | number}} grs</h3>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-6">
            <div class="card card-stats">
                <div class="card-header card-header-warning card-header-icon">
                    <div class="card-icon">
                        <i class="material-icons">local_florist</i>
                    </div>
                    <p class="card-category">Ventas Semana</p>
                    <h3 class="card-title">{{floresSemana | number}} grs</h3>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-6">
            <div class="card card-stats">
                <div class="card-header card-header-warning card-header-icon">
                    <div class="card-icon">
                        <i class="material-icons">local_florist</i>
                    </div>
                    <p class="card-category">Flores Mes</p>
                    <h3 class="card-title">{{floresMes | number}} grs</h3>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-6">
            <div class="card card-stats">
                <div class="card-header card-header-warning card-header-icon">
                    <div class="card-icon">
                      <i class="material-icons">local_florist</i>
                    </div>
                    <p class="card-category">Flores Año</p>
                    <h3 class="card-title">{{floresAno | number}} grs</h3>
                </div>
            </div>
        </div> 
    </div>

    <!--
    <div class="row">
        <div class="col-md-4">
            <div class="card card-chart">
                <div class="card-header card-header-success">
                    <div class="ct-chart" id="dailySalesChart"></div>
                </div>
                <div class="card-body">
                    <h4 class="card-title">Comportamiento semanal</h4>
                    <p class="card-category">
                        <span class="text-success"><i class="fa fa-long-arrow-up"></i> 55% </span> más ventas hoy.</p>
                </div>
                <div class="card-footer">
                    <div class="stats">
                        <i class="material-icons">access_time</i> actualizado a las 08:10
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card card-chart">
                <div class="card-header card-header-warning">
                    <div class="ct-chart" id="websiteViewsChart"></div>
                </div>
                <div class="card-body">
                    <h4 class="card-title">Evolución clientes</h4>
                    <p class="card-category">Comportamiento anual de clientes</p>
                </div>
                <div class="card-footer">
                    <div class="stats">
                        <i class="material-icons">access_time</i> año 2018
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card card-chart">
                <div class="card-header card-header-danger">
                    <div class="ct-chart" id="completedTasksChart"></div>
                </div>
                <div class="card-body">
                    <h4 class="card-title">Pedidos anual</h4>
                    <p class="card-category">Comportamiento pedidos anual</p>
                </div>
                <div class="card-footer">
                    <div class="stats">
                        <i class="material-icons">access_time</i> año 2018
                    </div>
                </div>
            </div>
        </div>
    </div>
    -->
    <div class="row">
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header card-header-tabs card-header-primary">
                    <div class="nav-tabs-navigation">
                        <div class="nav-tabs-wrapper">
                            <span class="nav-tabs-title">Pedidos:</span>
                            <ul class="nav nav-tabs" data-tabs="tabs">
                                <li class="nav-item">
                                    <a mat-button class="nav-link active" href="#programados" data-toggle="tab">
                                        <i class="material-icons">local_offer</i> Programados
                                        <div class="ripple-container"></div>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a mat-button class="nav-link" href="#transito" data-toggle="tab">
                                        <i class="material-icons">local_shipping</i> En transito
                                        <div class="ripple-container"></div>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a mat-button class="nav-link" href="#devueltos" data-toggle="tab">
                                        <i class="material-icons">autorenew</i> Devueltos
                                        <div class="ripple-container"></div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="tab-content">
                        <div class="tab-pane active" id="programados">
                            <table class="table">
                                <thead>
                                <tr>
                                    <th>Pedido</th>
                                    <th>Cliente</th>
                                    <th>Teléfono</th>
                                    <th>Repartidor</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr *ngFor="let r of arrayProgramados">
                                    <td>{{r.pedido}}</td>
                                    <td>{{r.first_name}} {{r.last_name}}</td>
                                    <td>{{r.phone}}</td>
                                    <td>{{r.repartidor}}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="tab-pane" id="transito">
                            <table class="table">
                                <thead>
                                <tr>
                                    <th>Pedido</th>
                                    <th>Cliente</th>
                                    <th>Teléfono</th>
                                    <th>Repartidor</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr *ngFor="let r of arrayTransito">
                                    <td>{{r.pedido}}</td>
                                    <td>{{r.first_name}} {{r.last_name}}</td>
                                    <td>{{r.phone}}</td>
                                    <td>{{r.repartidor}}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="tab-pane" id="devueltos">
                            <table class="table">
                                <thead>
                                <tr>
                                    <th>Pedido</th>
                                    <th>Cliente</th>
                                    <th>Teléfono</th>
                                    <th>Repartidor</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr *ngFor="let r of arrayDevueltos">
                                    <td>{{r.pedido}}</td>
                                    <td>{{r.first_name}} {{r.last_name}}</td>
                                    <td>{{r.phone}}</td>
                                    <td>{{r.repartidor}}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header card-header-warning">
                    <h4 class="card-title">Carga reparto</h4>
                    <p class="card-category">Basada en todos los pedidos</p>
                </div>
                <div class="card-body table-responsive">
                    <table class="table table-hover">
                        <thead class="text-warning">
                            <th>RUT</th>
                            <th>Repartidor</th>
                            <th>Pedidos entregados</th>
                            <th>Pedidos pendientes</th>
                        </thead>
                        <tbody>
                            <tr *ngFor="let r of arrayReparto">
                                <td>{{r.card_code}}</td>
                                <td>{{r.first_name}} {{r.last_name}}</td>
                                <td>{{r.entregados}}</td>
                                <td>{{r.pendientes}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
  </div>
</div>
