<div class="row">
  <div class="page-wrapper chiller-theme toggled">
    <nav id="sidebar" class="sidebar-wrapper">
      <menu-admin name={{name}}></menu-admin>
      <link-exit></link-exit>
    </nav>

    <main class="page-content">
      <div class="container-fluid justify-content-md-center">

        <div class="row">
          <div class="col-md-8">
            <h2>Seller {{ seller.name }}</h2>
          </div>

          <div class="col-md-3">
              <a href="#/alteration-seller/{{ seller.id }}" class="btn btn-primary">Alterar Cadastro</a>
          </div>

        </div>


        <p ng-show="mensagem.length" class="alert alert-info">{{mensagem}}</p>

        <div class="row form-login" ng-init="inicio()">

          <div class="col-md-5">
            <div class="card border-dark mb-3" style="width: 25rem;">
              <div class="card-header text-white bg-dark"><i class="fas fa-user"></i> {{ seller.name }}</div>
              <div class="card-body text-dark">
                <p class="card-text">CNPJ: {{ seller.cnpj }}</p>
                <p class="card-text">Responsável/Diretor: {{ seller.boss }}</p>
                <p class="card-text">Telefone: {{ seller.phone }} / {{ seller.whatsapp }}</p>
                <p class="card-text">E-mail: {{ seller.email }}</p>
              </div>
            </div>
          </div>

          <div class="col-md-5">
            <div class="card border-dark mb-3" style="width: 25rem;">
              <div class="card-header text-white bg-dark"><i class="fas fa-map-marker-alt"></i> Endereço </div>
              <div class="card-body text-dark">
                <p class="card-text">{{ seller.street }}, {{ seller.numberAdress }} {{ seller.complementAdress }} - Bairro: {{ seller.neighborhood }}</p>
                <p class="card-text">{{ seller.city }} - {{ seller.state }} </p>
                <p class="card-text">CEP: {{ seller.postalCode }}</p>
                <p class="card-text">Doca Vtex: {{ seller.warehouseId }}</p>
              </div>
            </div>
          </div>


        </div>

        <div class="row">
          <div class="col-md-5">
            <div class="card border-dark mb-3" style="width: 25rem;">
              <div class="card-header text-white bg-dark"><i class="fas fa-dollar-sign"></i> Dados Bancários </div>
              <div class="card-body text-dark">
                <p class="card-text">Agência: {{ seller.agency }} | Conta {{ seller.accountType }}: {{ seller.accountNumber }} | {{ seller.bank }}</p>
              </div>
            </div>
          </div>

        </div>

        <div class="row form-login">
          <div class="col-md-5">
            <h3>Vendas do Seller</h3>
          </div>
          <div class="col-md-6">
            <input type="text" ng-model="procurar" class="form-control mb-2" placeholder="Digite sua busca">
          </div>
        </div>

        <form name="datafilter" ng-submit="sub()">
          <div class="row form-login mb-3">
            <div class="col-md-3">
              <h5 class="align-middle text-center text-monospace">Filtrar por Data</h5>
            </div>

            <div class="col-md-3">
              <input type="date" class="form-control" ng-model="start">
            </div>
            <div class="col-md-3">
              <input type="date" class="form-control" ng-model="final">
            </div>

            <div class="col-md-1">
              <button type="submit" class="btn btn-primary" ng-disabled="datafilter.$invalid">Filtrar</button>
            </div>

            <div class="col-md-2">
              <a href="" role="button" ng-click="reload()" class="btn btn-dark">Listar Todos</a>
            </div>

          </div>
        </form>

        <div class="row form-login">
          <div class="col">
          <table class="table">
            <thead>
              <tr>
                <th scope="col">Data</th>
                <th scope="col">Pedido</th>
                <th scope="col">Cliente</th>
                <th scope="col">CPF</th>
                <th scope="col">Valor Total</th>
                <th scope="col">Status</th>
                <th scope="col"></th>
              </tr>
            </thead>
            <tbody dir-paginate="o in orders | filter:procurar | itemsPerPage:8 | orderBy: '-creationDate' ">
              <tr>
                <th scope="row">{{ o.creationDate | date:'dd/MM/yyyy' }}</th>
                <td>{{ o.orderId }}</td>
                <td>{{ o.clientFirstName }} {{ o.clientLastName }}</td>
                <td>{{ (o.clientCpf).slice(0,3)+"."+(o.clientCpf).slice(3,6)+"."+(o.clientCpf).slice(6,9)+"-"+(o.clientCpf).slice(9,11) }}</td>
                <td>{{ (o.value / 100).toFixed(2).replace(".", ",") }}</td>
                <td ng-class="{'text-success':o.status=='invoiced', 'text-danger':o.status=='canceled', 'text-secondary':o.status=='ready-for-handling' || o.status=='handling'}">{{ o.statusDescription }}</td>
                <td><a href="#/orders/{{ o.orderId }}" class="btn btn-outline-primary btn-sm">Detalhes</a></td>
              </tr>
            </tbody>
          </table>
        </div>

      </div>

      <div class="row justify-content-md-center">

        <nav>
          <dir-pagination-controls max-size="5" boundary-links="false"></dir-pagination-controls>
        </nav>

      </div>

      </div>
    </main>

  </div>

</div>
