@extends('layout.administrator.layout')

@section('css')
<style>
  .imgLogoDomiciliary {
    width: 50px;
    height: 50px;
    border-radius: 5px;
  }
</style>
@endsection

@section('sideBody')
<div class="card shadow">
  <div class="">
    <div class="tab-content" id="myTabContent">
      <div class="tab-pane fade  show active p-0 m-0" id="tabs-icons-text-1" role="tabpanel" aria-labelledby="tabs-icons-text-1-tab">
        <button type="button" class="list-group-item list-group-item-action p-1">
          <div class="row ml-2 mr-2">
            <div class="col">
              <h6 class="card-title text-uppercase text-muted mb-0">
                Domiciliarios</h6>
              <span class="h5 font-weight-bold mb-0">46 | <strong class="text-success text-uppercase">Activos</strong></span>
            </div>
            <div class="col-auto">
              <div class="icon-sm icon-shape bg-gradient-success text-white rounded-circle shadow">
                <i class="fas fa-user"></i>
              </div>
            </div>
          </div>
        </button>
        <button type="button" class="list-group-item list-group-item-action p-1">
          <div class="row ml-2 mr-2">
            <div class="col">
              <h6 class="card-title text-uppercase text-muted mb-0">
                Domiciliarios</h6>
              <span class="h5 font-weight-bold mb-0">55 | <strong class="text-muted text-uppercase">INACTIVOS</strong></span>
            </div>
            <div class="col-auto">
              <div class="icon-sm icon-shape bg-gradient-dark text-white rounded-circle shadow">
                <i class="fas fa-user"></i>
              </div>
            </div>
          </div>
        </button>
        <button type="button" class="list-group-item list-group-item-action p-1">
          <div class="row ml-2 mr-2">
            <div class="col">
              <h6 class="card-title text-uppercase text-muted mb-0">
                Domiciliarios</h6>
              <span class="h5 font-weight-bold mb-0">155 | <strong class="text-danger text-uppercase">Vetados</strong></span>
            </div>
            <div class="col-auto">
              <div class="icon-sm icon-shape bg-gradient-danger text-white rounded-circle shadow">
                <i class="fas fa-user"></i>
              </div>
            </div>
          </div>
        </button>
      </div>
    </div>
  </div>
</div>
<div class="card ml-2 mt-2" style="width: 18rem; display: contents;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">
      <a href="/administrator/domiciliary/create" class="btn btn-success btn-icon ml-sm-3 d-none d-md-block">
        <span class="btn-inner--icon">
          <i class="fas fa-plus-circle"></i>
        </span>
        <span class="nav-link-inner--text">Nuevo domiciliario</span>
      </a>
    </li>
    <li class="list-group-item">
      <a href="/administrator/domiciliary" class="btn btn-success btn-icon ml-sm-3 d-none d-md-block">
        <span class="btn-inner--icon">
          <i class="fas fa-list-ul"></i>
        </span>
        <span class="nav-link-inner--text">Listado de domiciliarios</span>
      </a>
    </li>
  </ul>
</div>
@endsection

@section('content')
<div class="row mt-2 mr-3 ml-3">
  <div class="col p-0">
    <div class="card shadow">
      <div class="card-header border-0">
        <div class="row align-items-center">
          <div class="col-8">
            <h3 class="mb-0">Solicitud de liquidaciones</h3>
          </div>
          <div class="col-4 text-right">
            <a href="{{route('administrator.liquidation.create')}}" class="btn btn-sm btn_admin"><i class="fas fa-plus"></i> Crear liquidación</a>
            <a href="javascript:;" onclick="openFilterTable()" class="btn btn-sm btn-neutral"><i class="fas fa-filter"></i> Filtros</a>
          </div>
        </div>
      </div>
      <div class="card-body" id="idFilterTable" style="display:none;">
        <form action="{{route('administrator.liquidation.index')}}" method="get">
          <div class="row">
            <div class="col-md-4">
              <div class="form-group">
                <label for="idName" class="control-label">Nombre</label>
                <input type="text" id="idName" name="name" placeholder="Nombre" autocomplete="off" class="form-control">
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label for="idDocument" class="control-label">Documento</label>
                <input type="text" id="idDocument" name="document" placeholder="Documento" autocomplete="off" class="form-control">
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label for="idCellphone" class="control-label">Celular</label>
                <input type="text" id="idCellphone" name="cellphone" placeholder="Celular" autocomplete="off" class="form-control">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label for="idReference" class="control-label">Referencia</label>
                <input type="text" id="idReference" name="reference" placeholder="Referencia" autocomplete="off" class="form-control">
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label for="idState" class="control-label">Estado</label>
                <select class="form-control" id="idState" name="state">
                  <option value="">Todos</option>
                  @foreach (Config::get('const.state_liquidation') as $key => $state)
                    <option value="{{$key}}">{{$state['name']}}</option>
                  @endforeach
                </select>
              </div>
            </div>
          </div>
          <div class="row justify-content-between">
            <div class="col-md-4">
              <a href="{{route('administrator.liquidation.index')}}" class="btn btn-danger">Limpiar</a>
            </div>
            <div class="col-md-4 text-right">
              <button type="submit" class="btn btn-info">Filtrar</button>
            </div>
          </div>
        </form>
      </div>
      <div class="table-responsive">
        <table class="table align-items-center table-flush">
          <thead class="thead-light text-center">
            <tr>
              <th class="text-center">Referencia</th>
              <th class="text-center">Nombre</th>
              <th class="text-center">Identificación</th>
              <th class="text-center">Celular</th>
              <th class="text-center">Valor</th>
              <th class="text-center">Estado</th>
              <th class="text-center">Opciones</th>
            </tr>
          </thead>
          <tbody class="text-center">
            @if (count($liquidations)>0)
              @foreach ($liquidations as $liquidation)
                <tr>
                  <td style="vertical-align:middle;"><strong>{{$liquidation->reference}}</strong></td>
                  <td style="vertical-align:middle;">{{$liquidation->getDeliveryMan->getData->name . ' ' . $liquidation->getDeliveryMan->getData->last_name}}</td>
                  <td style="vertical-align:middle;">{{$liquidation->getDeliveryMan->getData->id_number}}</td>
                  <td style="vertical-align:middle;">{{$liquidation->getDeliveryMan->getData->cellphone}}</td>
                  <td style="vertical-align:middle;">${{number_format($liquidation->value, 0, ',', '.')}}</td>
                  <td style="vertical-align:middle;">
                    <strong class="text-{{Config::get('const.state_liquidation')[$liquidation->state]['type']}} text-uppercase">{{Config::get('const.state_liquidation')[$liquidation->state]['name']}}</strong>
                  </td>
                  <td style="vertical-align:middle;">
                    <a href="{{route('administrator.liquidation.show', [$liquidation->id])}}" class="btn btn_admin btn-sm"><i class="fas fa-eye"></i> Ver mas</a>
                  </td>
                </tr>
              @endforeach
            @else
              <tr>
                <td colspan="7">No se encontraron liquidaciones</td>
              </tr>
            @endif
          </tbody>
        </table>
      </div>
      <div class="card-footer py-4">
        <nav class="d-flex justify-content-end" aria-label="...">
          {!! $liquidations->appends(Request::all())->render() !!}
        </nav>
      </div>
    </div>
  </div>
</div>

@endsection

@section('js')
  <script type="text/javascript">
    function openFilterTable() {
      $("#idFilterTable").slideToggle("slow");
    }
  </script>
@endsection