@extends('template.layoutAdmin', ['activeButton'=>'personal'])

@section('title')
{{  trans('turnos.tituloTurnos') }}
@endsection

@section('cabecera')
<h1>
    {{trans('turnos.turnosTrabajadores')  }}
    <small>{{ trans('turnos.mensajeAyuda') }}</small>
  </h1>  
@endsection

@section('contenido')
<div class="col-12">

  <div class="row">
    <div class="col text-center">
      <button type="button" class="btn btn-outline-success btn-lg btn-block" style="background-color: #bcf1b4" onclick="mostrarFormularioActivos()"
        data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapseActivos">
        {{ trans('turnos.activos') }} 
      </button>
    </div>
    <div class="col text-center">
      <button type="button" class="btn btn-outline-info btn-lg btn-block" style="background-color: #aec4ee" onclick="mostrarFormularioRegistro()"
        data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapseRegistro">
        {{ trans('turnos.registro') }} 
      </button>
    </div>
  </div>

  <div class="collapse" id="collapseActivos">
    <hr>
    <div class="box">
      <div class="box-header">
        <div class="row">
          <div class="col-md-6">
            <h3 class="box-title font-weight-300"> {{  trans('turnos.listTurnosActivos') }} </h3>
          </div>
        </div>
      </div>
      <div class="box-body">
        <table class="table table-bordered table-responsive">
          <thead>
            <tr>
              <th class="text-center">#</th>
              <th class="text-center"> {{  trans('turnos.imagen') }} </th>
              <th class="text-center"> {{  trans('turnos.nombre') }} </th>
              <th class="text-center"> {{  trans('turnos.cargo') }} </th>
              <th class="text-center"> {{  trans('turnos.entrada') }} </th>
              <th class="text-center"> {{  trans('turnos.salida') }} </th>
              <th class="text-center"> {{  trans('turnos.horasTotal') }} </th>
            </tr>
          </thead>
          <tbody>
            @php $id = 1; @endphp
            @foreach ($activos as $item) 
              @if ($item->salida == null)                 
                <tr>
                  <td class="text-center"><br>{{$id}}</td>
                  <td class="text-center">
                    @if ($item->trabajador->fotoPerfil <> "0") 
                      <img src="{{env('Image')}}{{$item->trabajador->fotoPerfil}}" class="imageUser rounded-circle" alt="Usuario"  accept="image/*" width="80x">
                    @else
                      @if ($item->trabajador->idGenero == 9)
                        <img src="{{env('Image').'/'.env('SERVIDOR').'/'.env('MULTISERVER').'/imagenGeneros/imagenMan/man.png'}}" class="imageUser rounded-circle" alt="Masculino"   width="200px">
                      @else
                        <img src="{{env('Image').'/'.env('SERVIDOR').'/'.env('MULTISERVER').'/imagenGeneros/imagenWomen/women.png' }}" class="imageUser rounded-circle" alt="Femenino"  accept="image/*"  width="200px">
                      @endif
                    @endif
                  </td>
                  <td class="text-center"><br>{{$item->trabajador->nombre}} {{$item->trabajador->apellido}}</td>
                  <td class="text-center">
                    <br>
                    @if($item->trabajador->funPerfil)
                      @if($item->trabajador->funEmpladoCaja)
                        <h5 class="font-weight-300">{{$item->trabajador->funPerfil->nombre}} -  {{$item->trabajador->funEmpladoCaja->funCajaEmplado->nombre}} </h5>
                      @else
                        @if($item->trabajador->funEmpleadoComanda)
                          <h5 class="font-weight-300">{{$item->trabajador->funPerfil->nombre}} - {{$item->trabajador->funEmpleadoComanda->funComandaEmplado->nombre}}</h5>
                        @else
                          <h5 class="font-weight-300">{{$item->trabajador->funPerfil->nombre}}</h5>
                        @endif
                      @endif
                    @endif
                  </td>
                  <td class="text-center"><br>{{$item->entrada}}</td>
                  <td class="text-center">
                    <br>
                    <span class="badge" style="background: #4d6bf0"> {{  trans('turnos.proceso') }}	</span>
                  </td>
                  <td class="text-center"><br>- -</td> 
                </tr>
                @php $id++; @endphp
              @endif 
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="collapse " id="collapseRegistro">
    <hr>
    <div class="box">
      <div class="box-header">        
        <div class="row">
          <div class="col-md-6">
            <h3 class="box-title font-weight-300"> {{  trans('turnos.listTurnosRegistro') }} </h3>
          </div>
          <div class="col-md-6 text-right">
            @if(request()->all() != null)
              <a href="{{route('turnosShow')}}" class="btn btn-danger"><i class="fa fa-trash"></i></a>
            @endif
            <a class="btn btn-outline-info" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
              <i class="fa fa-filter" aria-hidden="true"></i>  {{  trans('turnos.filtroBusqueda') }} 
            </a>
          </div>
        </div>
      </div>
      <div class="box-body">
        <div class="col-12">
          <div class="collapse" id="collapseExample">
            <div class="card card-body">
              <form action="" method="get">
                <div class="row">
                  <div class="col-6">
                    <div class="form-group">
                      <label for="fecha"> {{  trans('turnos.fechaEntrada') }} </label>
                      <input type="text"
                        name="fecha"
                        class="form-control"
                        id="fecha" 
                        autocomplete="off"
                        placeholder=" "
                      >
                    </div>
                  </div>
                  <div class="col-6">
                    <div class="form-group">
                      <label for="nombre"> {{  trans('turnos.nombreBusqueda') }} </label>
                      <input type="text" 
                        name="nombre"
                        class="form-control"
                        autocomplete="off"
                        placeholder=" {{  trans('turnos.nombreBusqueda') }} "
                      >
                    </div>
                  </div>
                  <div class="col-6">
                    <div class="form-group">
                      <label for="apellido"> {{  trans('turnos.apellido') }} </label>
                      <input type="text" 
                        name="apellido"
                        class="form-control"
                        autocomplete="off"
                        placeholder=" {{  trans('turnos.apellido') }} "
                      >
                    </div>
                  </div>
                  <div class="col-6">
                    <div class="form-group">
                      <label for="estado"> {{  trans('turnos.estadoTurno') }} </label>
                      <select name="estado" id="estado"  class="form-control">
                        <option value=""> {{  trans('turnos.seleccionar') }}	</option>
                        <option value="1"> {{  trans('turnos.enProceso') }}	</option>
                        <option value="0"> {{  trans('turnos.Finalizado') }}	</option>
                      </select>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-12 text-center">
                    <input type="submit" class="btn btn-info btn-sm" value="{{  trans('turnos.buscar') }}">
                  </div>
                </div>
              </form>
            </div>
            <hr>
          </div>
        </div>
        <table class="table table-bordered table-responsive">
          <thead>
            <tr>
              <th class="text-center">#</th>
              <th class="text-center"> {{  trans('turnos.imagen') }} </th>
              <th class="text-center"> {{  trans('turnos.nombre') }} </th>
              <th class="text-center"> {{  trans('turnos.cargo') }} </th>
              <th class="text-center"> {{  trans('turnos.entrada') }} </th>
              <th class="text-center"> {{  trans('turnos.salida') }} </th>
              <th class="text-center"> {{  trans('turnos.horasTotal') }} </th>
            </tr>
          </thead>
          <tbody>
            @php $id = 1; @endphp
            @foreach ($turnos as $item)                  
              <tr>
                <td class="text-center"><br>{{$id}}</td>
                <td class="text-center">
                  @if ($item->trabajador->fotoPerfil <> "0") 
                    <img src="{{env('Image')}}{{$item->trabajador->fotoPerfil}}" class="imageUser rounded-circle" alt="Usuario"  accept="image/*" width="80x">
                  @else
                    @if ($item->trabajador->idGenero == 9)
                      <img src="{{env('Image').'/'.env('SERVIDOR').'/'.env('MULTISERVER').'/imagenGeneros/imagenMan/man.png'}}" class="imageUser rounded-circle" alt="Masculino"   width="200px">
                    @else
                      <img src="{{env('Image').'/'.env('SERVIDOR').'/'.env('MULTISERVER').'/imagenGeneros/imagenWomen/women.png' }}" class="imageUser rounded-circle" alt="Femenino"  accept="image/*"  width="200px">
                    @endif
                  @endif
                </td>
                <td class="text-center"><br>{{$item->trabajador->nombre}} {{$item->trabajador->apellido}}</td>
                <td class="text-center">
                  <br>
                  @if($item->trabajador->funPerfil)
                    @if($item->trabajador->funEmpladoCaja)
                      <h5 class="font-weight-300">{{$item->trabajador->funPerfil->nombre}} -  {{$item->trabajador->funEmpladoCaja->funCajaEmplado->nombre}} </h5>
                    @else
                      @if($item->trabajador->funEmpleadoComanda)
                        <h5 class="font-weight-300">{{$item->trabajador->funPerfil->nombre}} - {{$item->trabajador->funEmpleadoComanda->funComandaEmplado->nombre}}</h5>
                      @else
                        <h5 class="font-weight-300">{{$item->trabajador->funPerfil->nombre}}</h5>
                      @endif
                    @endif
                  @endif
                </td>
                <td class="text-center"><br>{{$item->entrada}}</td>
                @if ($item->salida != null)
                  <td class="text-center"> <br>{{$item->salida}}</td>
                  <td class="text-center"><br>{{$item->restaHoras($item->entrada, $item->salida)}}</td>
                @else
                  <td class="text-center">
                    <br>
                    <span class="badge" style="background: #4d6bf0"> {{  trans('turnos.proceso') }}	</span>
                  </td>
                  <td class="text-center"><br>- -</td> 
                @endif
              </tr>
              @php $id++; @endphp
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
@endsection

@section('js')
<script>
  var collapseVincular = document.getElementById('collapseVinculacion');
  var collapseRegistro = document.getElementById('collapseRegistro');

  function mostrarFormularioActivos() {

    if (collapseActivos.style.display === 'block') {
      if(collapseRegistro.style.display === "block"){
        collapseRegistro.style.display = 'none';
      }
      collapseActivos.style.display = 'none';
    }else if (collapseActivos.style.display === 'none' || collapseActivos.style.display === '') {
      if(collapseRegistro.style.display === "block"){
        collapseRegistro.style.display = 'none';
      }
      collapseActivos.style.display = 'block';
    }
  }

  function mostrarFormularioRegistro() {
    if (collapseRegistro.style.display === 'block') {
      if(collapseActivos.style.display === "block"){
        collapseActivos.style.display = 'none';
      }
      collapseRegistro.style.display = 'none';
    }else if (collapseRegistro.style.display === 'none' || collapseRegistro.style.display === '') {
      if(collapseActivos.style.display === "block"){
        collapseActivos.style.display = 'none';
      }
      collapseRegistro.style.display = 'block';
    }
  }

  $( document ).ready(function() {
      $( "#fecha" ).datepicker({format: 'yyyy/mm/dd'});
    });
</script>
@endsection