@extends('layout.administrator.layout')

@section('css')
<style type="text/css">
  .contenedor {

    display: flex;
    width: 300px;
    height: 40px;
    color: black;
    font-size: 20px;
    line-height: 40px;

    position: absolute;
    top: 17px;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    overflow: hidden;

  }

  .cambio {
    list-style: none;
    padding-left: 10px;
    animation: cambiar 7s infinite;
  }

  .cambio,
  p {
    margin: 0;
  }

  .imgLogoDomiciliary {
    width: 50px;
    height: 50px;
    border-radius: 5px;
  }

  .imgDetails {
    width: 100%;
  }

  @keyframes cambiar {

    0% {
      margin-top: 0;
    }

    20% {
      margin-top: 0;
    }

    25% {
      margin-top: -40px;
    }

    50% {
      margin-top: -40px;
    }

    55% {
      margin-top: -80px;
    }

    80% {
      margin-top: -80px;
    }

    85% {
      margin-top: -40px;
    }

    95% {
      margin-top: -40px;
    }

    100% {
      margin-top: 0;
    }
  }
</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">{{$activos}} | <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">{{$inactivos}} | <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">{{$papelera}} | <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">Crear domiciliario</h3>
          </div>
        </div>
      </div>

      <div class="col-12">
        @if ($errors->any())
        <div class="alert alert-danger">
          <ul>
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
          </ul>
        </div>
        @endif
      </div>

      <form action="{{route('administrator.domiciliary.store')}}" method="post" files="true" enctype="multipart/form-data">
        @csrf
        <div class="card-body">
          <div class="row">
            <div class="col-md-6">
              <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 @error('name') is-invalid @enderror" value="{{old('name')}}" required>
                <small class="text-danger">{{ $errors->first('name') }}</small>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label for="idLastName" class="control-label">Apellidos *</label>
                <input type="text" id="idLastName" name="lastName" placeholder="Apellidos" required autocomplete="off" class="form-control @error('lastName') is-invalid @enderror" value="{{old('lastName')}}">
                <small class="text-danger">{{ $errors->first('lastName') }}</small>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label for="idDocumentType" class="control-label">Tipo de documento *</label>
                <select class="form-control hg_select @error('documentType') is-invalid @enderror" id="idDocumentType" name="documentType" required>
                  @foreach ($documentType as $type)
                  <option value="{{$type->id}}">{{$type->name}}</option>
                  @endforeach
                </select>
                <small class="text-danger">{{ $errors->first('documentType') }}</small>
              </div>
            </div>
            <div class="col-md-6">
              <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 input-number @error('document') is-invalid @enderror" value="{{old('document')}}" required>
                <small class="text-danger">{{ $errors->first('document') }}</small>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label for="idEmail" class="control-label">Correo *</label>
                <input type="email" id="idEmail" name="email" placeholder="Correo" autocomplete="off" class="form-control @error('email') is-invalid @enderror" value="{{old('email')}}" required>
                <small class="text-danger">{{ $errors->first('email') }}</small>
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group">
                <label for="idPassword" class="control-label">Contraseña</label>
                <input type="password" id="idPassword" name="password" placeholder="Contraseña" autocomplete="off" class="form-control @error('password') is-invalid @enderror">
                <small class="text-danger">{{ $errors->first('password') }}</small>
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group">
                <label for="idPasswordConfirmation" class="control-label">Repetir contraseña</label>
                <input type="password" id="idPasswordConfirmation" name="passwordConfirmation" placeholder="Repetir contraseña" autocomplete="off" class="form-control @error('passwordConfirmation') is-invalid @enderror">
                <small class="text-danger">{{ $errors->first('passwordConfirmation') }}</small>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label for="idAddress" class="control-label">Dirección</label>
                <input type="text" id="idAddress" name="address" placeholder="Dirección" autocomplete="off" class="form-control @error('address') is-invalid @enderror" value="{{old('address')}}">
                <small class="text-danger">{{ $errors->first('address') }}</small>
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group">
                <label for="idTelephone" class="control-label">Teléfono</label>
                <input type="text" id="idTelephone" name="telephone" placeholder="Teléfono" autocomplete="off" class="form-control @error('telephone') is-invalid @enderror" value="{{old('telephone')}}">
                <small class="text-danger">{{ $errors->first('telephone') }}</small>
              </div>
            </div>
            <div class="col-md-3">
              <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 input-number @error('cellPhone') is-invalid @enderror" value="{{old('cellPhone')}}" required>
                <small class="text-danger">{{ $errors->first('cellPhone') }}</small>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label for="idTransport" class="control-label">Transporte *</label>
                <select class="form-control hg_select @error('transport') is-invalid @enderror" id="idTransport" name="transport" required>
                  @foreach ($transport as $listTransport)
                  <option value="{{$listTransport->id}}">{{$listTransport->name}}</option>
                  @endforeach
                </select>
                <small class="text-danger">{{ $errors->first('transport') }}</small>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label for="idPhoto" class="control-label">Foto *</label>
                <input type="file" id="idPhoto" name="photo" autocomplete="off" class="form-control @error('photo') is-invalid @enderror" required>
                <small class="text-danger">{{ $errors->first('photo') }}</small>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label for="idDocumentPhoto" class="control-label">Documento *</label>
                <input type="file" id="idDocumentPhoto" name="documentPhoto" autocomplete="off" class="form-control @error('documentPhoto') is-invalid @enderror" required>
                <small class="text-danger">{{ $errors->first('documentPhoto') }}</small>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label for="idSoatPhoto" class="control-label">Soat *</label>
                <input type="file" id="idSoatPhoto" name="soatPhoto" autocomplete="off" class="form-control @error('soatPhoto') is-invalid @enderror" required>
                <small class="text-danger">{{ $errors->first('soatPhoto') }}</small>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <button type="submit" class="btn btn_admin btn-block"><i class="fa fa-floppy-o"></i> Guardar</button>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection