@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-8 p-0">
    @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
      {{session('success')}}
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    @endif
    @if(session('danger'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
      {{session('danger')}}
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    @endif
    <div class="card shadow">
      <div class="card-header border-0">
        <div class="row align-items-center">
          <div class="col-8">
            <h3 class="mb-0">Editar domiciliario</h3>
          </div>
        </div>
      </div>

      <form action="{{route('administrator.domiciliary.update', [$domiciliary->id])}}" method="post" files="true" enctype="multipart/form-data">
        @method('PUT')
        @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="{{$domiciliary->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="{{$domiciliary->last_name}}">
                <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}}" {{$domiciliary->id_number_type_vp == $type->id ? 'selected' : ''}}>{{$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="{{$domiciliary->id_number}}" required>
                <small class="text-danger">{{ $errors->first('document') }}</small>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <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="{{$domiciliary->email}}" required>
                <small class="text-danger">{{ $errors->first('email') }}</small>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6">
              <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-6">
              <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-12">
              <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="{{$domiciliary->domiciliaryData->address}}">
                <small class="text-danger">{{ $errors->first('address') }}</small>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6">
              <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="{{$domiciliary->phone}}">
                <small class="text-danger">{{ $errors->first('telephone') }}</small>
              </div>
            </div>
            <div class="col-md-6">
              <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="{{$domiciliary->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" accept=".jpg,.png,.jpeg" name="photo" autocomplete="off" class="inputImg form-control @error('photo') is-invalid @enderror">
                <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" accept=".jpg,.png,.jpeg,.pdf" name="documentPhoto" autocomplete="off" class="form-control @error('documentPhoto') is-invalid @enderror">
                <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" accept=".jpg,.png,.jpeg,.pdf" name="soatPhoto" autocomplete="off" class="form-control @error('soatPhoto') is-invalid @enderror">
                <small class="text-danger">{{ $errors->first('soatPhoto') }}</small>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md">
              <div class="form-group">
                <label for="idTipoDom" class="control-label">Tipo de domiciliario *</label>
                <select class="form-control hg_select @error('idTipoDom') is-invalid @enderror" id="idTipoDom" name="idTipoDom" required>
                  @foreach ($tipo as $key => $value)
                    @if ($details->tipoDomiciliario == $value->id)
                    <option value="{{$value->id}}" selected>{{$value->name}}</option>
                    @else
                    <option value="{{$value->id}}">{{$value->name}}</option>
                    @endif
                  @endforeach
                </select>
                <small class="text-danger">{{ $errors->first('idTipoDom') }}</small>
              </div>
            </div>
            <div class="col-md" id="restaurantes" style="display: none;">
                <div class="form-group">
                  <label for="idVinculacion" class="control-label">Vincular a un Restaurante *</label>
                  <select class="form-control hg_select @error('idVinculacion') is-invalid @enderror" id="idVinculacion" name="idVinculacion">
                    <option value="" selected disabled>Seleccione un restaurante</option>
                    @foreach ($restaurantes as $key => $value)
                      @if (($vinculado->IdRestaurante ?? 0) == $value->idUsuario)
                      <option value="{{$value->idUsuario}}" selected>{{$value->userName}}</option>
                      @else
                      <option value="{{$value->idUsuario}}">{{$value->userName}}</option>
                      @endif
                    @endforeach
                  </select>
                  <small class="text-danger">{{ $errors->first('idVinculacion') }}</small>
                </div>
              </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="form-group">
                <label for="idTipoPago" class="control-label">Tipo de Pago *</label>
                <select class="form-control hg_select @error('idTipoPago') is-invalid @enderror" id="idTipoPago" name="idTipoPago" required>
                  @foreach ($pago as $key => $value)
                    @if ($details->tipoPago == $value->id)
                    <option value="{{$value->id}}" selected>{{$value->name}}</option>
                    @else
                    <option value="{{$value->id}}">{{$value->name}}</option>
                    @endif
                  @endforeach
                </select>
                <small class="text-danger">{{ $errors->first('idTipoPago') }}</small>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <button type="submit" class="btn btn-primary btn-block"><i class="fa fa-floppy-o"></i> Guardar cambios</button>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
  <div class="col-4">
    <div class="card">
      <div class="card-body">
        <div class="row">
          <div class="col-md-12">
            @if(!empty($domiciliary->photo) && Storage::disk('public')->exists('domiciliary/photo/'.$domiciliary->photo))
            <img id="logoTheme" class="imgDetails imgUpdate" src="{{ asset('storage/domiciliary/photo/'.$domiciliary->photo) }}">
            @else
            <img id="logoTheme" class="imgDetails imgUpdate" src="https://d1nhio0ox7pgb.cloudfront.net/_img/g_collection_png/standard/512x512/delivery_man.png">
            @endif
          </div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <form action="{{route('administrator.domiciliary.state', [$domiciliary->id])}}" method="post" files="true" enctype="multipart/form-data">
          @method('PUT')
          @csrf
          <div class="row">
            <div class="col-md-12">
              <div class="form-group">
                <label for="idStateDelivery" class="control-label">Estado de domiciliario *</label>
                <select class="form-control hg_select @error('stateDelivery') is-invalid @enderror" id="idStateDelivery" name="stateDelivery" required>
                  @foreach (Config::get('const.state_delivery') as $key => $state)
                  <option value="{{$key}}">{{$state['name']}}</option>
                  @endforeach
                </select>
                <small class="text-danger">{{ $errors->first('stateDelivery') }}</small>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="form-group">
                <label for="idState" class="control-label">Estado del sistema *</label>
                <select class="form-control hg_select @error('state') is-invalid @enderror" id="idState" name="state" required>
                  @foreach (Config::get('const.states') as $key => $state)
                  <option value="{{$key}}">{{$state['name']}}</option>
                  @endforeach
                </select>
                <small class="text-danger">{{ $errors->first('state') }}</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 cambios</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
@endsection

@section('js')
<script type="text/javascript">
  $(document).ready(function() {
    $('.input-number').on('input', function() {
      this.value = this.value.replace(/[^0-9]/g, '');
    });

    $('.input-nit').on('input', function() {
      this.value = this.value.replace(/[^0-9-]/g, '');
    });

    var documentType = '{{$domiciliary->id_number_type_vp}}';
    if (documentType != null) {
      $("#idDocumentType").val(documentType);
    }

    var transport = '{{$domiciliary->domiciliaryData->transport_vp}}';
    if (transport != null) {
      $("#idTransport").val(transport);
    }

    var stateDelivery = '{{$domiciliary->domiciliaryData->state_delivery}}';
    if (stateDelivery != null) {
      $("#idStateDelivery").val(stateDelivery);
    }

    var state = '{{$domiciliary->state}}';
    if (state != null) {
      $("#idState").val(state);
    }

    var tipoDom = '{{$details->tipoDomiciliario}}';
    if (tipoDom == 22) {
        $('#restaurantes').css('display', '')
    }

  });

  $('#idTipoDom').on('change', () => {
    if($("#idTipoDom").val() == 22)
    {
        $('#restaurantes').css('display', '')
    }else{
        $('#restaurantes').css('display', 'none')
    }
  })
</script>
@endsection