@extends('layouts.app')

@section('content')
<div class="container-fluid">

<div class="form-group">
    <ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" href="#">Todos</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Nuevos</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">En curso</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Gestionados</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Finalizados</a>
    </li>
    </ul>
</div>

<div class="form-group form-inline filter-group">    
    <input type="text" class="form-control" placeholder="Buscar...">

    <select name="cars" class="custom-select">
        <option selected>Categoria</option>
        <option value="volvo">Volvo</option>
        <option value="fiat">Fiat</option>
        <option value="audi">Audi</option>
    </select>

    <select name="cars" class="custom-select">
        <option selected>Autor</option>
        <option value="volvo">Volvo</option>
        <option value="fiat">Fiat</option>
        <option value="audi">Audi</option>
    </select>

    <select name="cars" class="custom-select">
        <option selected>Asignado</option>
        <option value="volvo">Volvo</option>
        <option value="fiat">Fiat</option>
        <option value="audi">Audi</option>
    </select>

    <select name="cars" class="custom-select">
        <option selected>Empresa</option>
        <option value="volvo">Volvo</option>
        <option value="fiat">Fiat</option>
        <option value="audi">Audi</option>
    </select>

    <select name="pais" class="form-control">
        <option selected>Pais</option>
        <option>Argentina</option>
        <option>Mexico</option>
        <option>Colombia</option>
    </select>

</div>


<table class="table table-hover table-cursor-pointer">
    <thead>    
        <tr>
            <th>#</th>
            <th>Area</th>
            <th>Asunto</th>
            <th>Autor</th>
            <th>Empresa</th>
            <th class="text-center">Estado</th>
            <th style="padding-left:2rem;">Creado</th>
            <th>Actualizado</th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr class="table-warning">
            <td style="width:2%;"><span class="badge">23</span></td>
            <td style="width:5%;"><span class="badge badge-vacio">Compras</span></td>
            <td>Solicitud de compra <span class="badge badge-warning">Nuevo</span></td>
            <td>Nicolás Manzanos</td>
            <td>Leverbox</td>
            <td style="width:6%" class="text-center"><span class="badge badge-vacio btn-block">Pendiente</span></td>
            <td style="padding-left:2rem;width:160px;">Hace 2 días</td>
            <td style="width:150px">-</td>
            <td style="width:3rem;">
                <span class="nav-item dropdown">
                    <a class="text-dark dropdown-toggle" href="#" data-toggle="dropdown" style="background:transparent;"></a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="#">Asignar</a>
                        <a class="dropdown-item" href="#">Cambiar area</a>
                        <a class="dropdown-item" href="#">Rechazar</a>
                        <a class="dropdown-item" href="#">Eliminar</a>
                    </div>
                </span>
            </td>
            <td style="width:2rem;">
                <div class="custom-control custom-checkbox" style="margin:0;padding:0;cursor:pointer;">
                    <input type="checkbox" class="custom-control-input" id="customCheck1" name="example1">
                    <label class="custom-control-label" for="customCheck1"></label>
                </div>
            </td>
        </tr>
        <tr>
            <td><span class="badge">23</span></td>
            <td><span class="badge badge-vacio">Compras</span></td>
            <td>Solicitud de compra <span class="badge badge-warning">Nuevo</span></td>
            <td>Nicolás Manzanos</td>
            <td>Leverbox</td>
            <td class="text-center"><span class="badge badge-vacio btn-block">Pendiente</span></td>
            <td style="padding-left:2rem;">Hace 2 días</td>
            <td>-</td>
            <td>
                <span class="nav-item dropdown">
                    <a class="text-dark dropdown-toggle" href="#" data-toggle="dropdown" style="background:transparent;"></a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="#">Asignar</a>
                        <a class="dropdown-item" href="#">Cambiar area</a>
                        <a class="dropdown-item" href="#">Rechazar</a>
                    </div>
                </span>
            </td>
            <td>
                <div class="custom-control custom-checkbox" style="margin:0;padding:0;cursor:pointer;">
                    <input type="checkbox" class="custom-control-input" id="customCheck2" name="example1">
                    <label class="custom-control-label" for="customCheck2"></label>
                </div>
            </td>
        </tr>
        <tr>
            <td><span class="badge">23</span></td>
            <td><span class="badge badge-vacio">Compras</span></td>
            <td>Solicitud de compra</td>
            <td>Nicolás Manzanos</td>
            <td>Leverbox</td>
            <td class="text-center"><span class="badge badge-secondary btn-block">En curso</span></td>
            <td style="padding-left:2rem;">Hace 2 días</td>
            <td>Hace 36 minutos</td>
            <td>
                <span class="nav-item dropdown">
                    <a class="text-dark dropdown-toggle" href="#" data-toggle="dropdown" style="background:transparent;"></a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="#">Asignar</a>
                        <a class="dropdown-item" href="#">Cambiar area</a>
                        <a class="dropdown-item" href="#">Rechazar</a>
                    </div>
                </span>
            </td>
            <td>
                <div class="custom-control custom-checkbox" style="margin:0;padding:0;cursor:pointer;">
                    <input type="checkbox" class="custom-control-input" id="customCheck3" name="example1">
                    <label class="custom-control-label" for="customCheck3"></label>
                </div>
            </td>
        </tr>
        <tr>
            <td><span class="badge">23</span></td>
            <td><span class="badge badge-vacio">Compras</span></td>
            <td>Compra PC para puesto nuevo</td>
            <td>Nicolás Manzanos</td>
            <td>Leverbox</td>
            <td><span class="badge badge-dark btn-block">Gestionado</span></td>
            <td style="padding-left:2rem;">Hace 6 días</td>
            <td>Hace 1 día</td>
            <td>
                <span class="nav-item dropdown">
                    <a class="text-dark dropdown-toggle" href="#" data-toggle="dropdown" style="background:transparent;"></a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="#">Asignar</a>
                        <a class="dropdown-item" href="#">Cambiar area</a>
                        <a class="dropdown-item" href="#">Rechazar</a>
                    </div>
                </span>
            </td>
            <td>
                <div class="custom-control custom-checkbox" style="margin:0;padding:0;cursor:pointer;">
                    <input type="checkbox" class="custom-control-input" id="customCheck4" name="example1">
                    <label class="custom-control-label" for="customCheck4"></label>
                </div>
            </td>
        </tr>
        <tr class="table-success">
            <td><span class="badge">23</span></td>
            <td><span class="badge badge-vacio">RRHH</span></td>
            <td>Período de vacaciones</td>
            <td>Federico Chavez</td>
            <td>Leverbox</td>
            <td><span class="badge badge-success btn-block">Finalizado</span></td>
            <td style="padding-left:2rem;">Hace 12 días</td>
            <td>Hace 11 días</td>
            <td>
                <span class="nav-item dropdown">
                    <a class="text-dark dropdown-toggle" href="#" data-toggle="dropdown" style="background:transparent;"></a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="#">Asignar</a>
                        <a class="dropdown-item" href="#">Cambiar area</a>
                        <a class="dropdown-item" href="#">Rechazar</a>
                    </div>
                </span>
            </td>
            <td>
                <div class="custom-control custom-checkbox" style="margin:0;padding:0;cursor:pointer;">
                    <input type="checkbox" class="custom-control-input" id="customCheck5" name="example1">
                    <label class="custom-control-label" for="customCheck5"></label>
                </div>
            </td>
        </tr>

    </tbody>
</table>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Free se la come</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...asdfadfgsfghsfghsfghsf
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-success">Aceptar</button>
      </div>
    </div>
  </div>
</div>

</div>
@endsection