@extends('layouts/contentLayoutMaster')

@section('title', 'Input')

@section('content')

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
@foreach ( $positivas as $positiva )
<style>
        .hide{{$positiva->id}} {
        display: none;
        }

        .myDIV{{$positiva->id}}:hover + .hide{{$positiva->id}} {
        display: block;
        color: red;
        margin-bottom: 20px !important;
        padding-left: 38px;
        }

        .myDIV{{$positiva->id}}:hover {
            margin-bottom: 2px !important;
        }
</style>
@endforeach

@foreach ( $negativas as $negativa )
<style>
        .hide{{$negativa->id}} {
        display: none;
        }

        .myDIV{{$negativa->id}}:hover + .hide{{$negativa->id}} {
        display: block;
        color: red;
        padding-left: 50px;
        margin-bottom: 20px !important;
        }

        .myDIV{{$negativa->id}}:hover {
            margin-bottom: 2px !important;
        }
</style>
@endforeach
<!-- Basic Inputs start -->
<section id="basic-input">
  <div class="row">
    <div class="col-md-12">
    <div class="card">
        <div class="card-header">
           <a href="/dashboard/editar/empleado/{{$empleado->id_empleado}}" class="btn btn-danger col-md-3">Atras</a>
        </div>
    </div>
      <div class="card">
        <div class="card-header" style="text-align:center;display:block">
          <h4 class="card-title">Calificar Colaborador</h4>
        </div>
        <p style="padding-left: 1.5rem;">Califique a su colaborador, tenga en cuenta que el numero a lado de la casilla es el valor que usted le dará por cada perfil.</p>
          <p style="color:red;padding-left: 1.5rem;"><strong>Toda calificación que su promedio sea negativo será investigado.</stron></p>
        <div class="card-body">
          <div class="row">
          <div class="col-12">
          <form method="POST" action="/dashboard/crear_calificacion" id="colaborador" enctype="multipart/form-data">
          {!! csrf_field() !!}

          <input type="hidden" name="empleado" class="form-control" value="{{$empleado->id_empleado}}" readonly id="basicInput" placeholder="Cédula" />

          <div class="row">
                <div class="col-md-5" style="    border: 2px solid #7367f0;
    border-radius: 25px;padding:20px;">
                    <h1>Fortaleza a Valorar</h1>
                    @foreach ( $positivas as $positiva )
                    <div class="form-check myDIV{{$positiva->id}}" style="margin-bottom: 15px;">
                            <strong> {{$positiva->puntaje}} </strong>
                            <input class="form-check-input" onchange="verifica_valor();"  name="{{$positiva->id}}" value="{{$positiva->puntaje}}" type="checkbox" id="inlineCheckbox{{$positiva->id}}"   />
                            <label class="form-check-label" for="inlineCheckbox{{$positiva->id}}">{{$positiva->nombre}} <i class="fa fa-question-circle" aria-hidden="true"></i></label>
                        </div>

                        <div class="hide{{$positiva->id}}" style="margin-bottom: 5px">
                            <small class="text-muted"> {{$positiva->descripcion}}</small>
                        </div>
                    @endforeach
                </div>
                <div id="div" class="col-md-2" style="text-align: center;
                background-color: #2EB207;
                height: 100px;
                color: white !important;
                border-radius: 20px;">

                        <h1 style="color: white !important">Nota<h1>
                        <h1 style="color: white !important" id="puntos"><h1>
                </div>

                <div class="col-md-5" style="    border: 2px solid #7367f0;
    border-radius: 25px; padding:20px;">
     <h1>Aspecto A Mejorar</h1>
     @foreach ( $negativas as $negativa )
            <div class="form-check myDIV{{$negativa->id}}" style="margin-bottom: 15px;">

                            <input class="form-check-input" onchange="verifica_valor();" name="{{$negativa->id}}"  value="{{$negativa->puntaje}}" type="checkbox" id="inlineCheckbox{{$negativa->id}}"   />
                            <label class="form-check-label" for="inlineCheckbox{{$negativa->id}}"><strong> {{$negativa->puntaje}} </strong>{{$negativa->nombre}}
                            <i class="fa fa-question-circle" aria-hidden="true"></i>
                        </label>
                        </div>

                        <div class="hide{{$negativa->id}}" style="margin-bottom: 5px">
                            <small class="text-muted"> {{$negativa->descripcion}}</small>
                        </div>
                    @endforeach
                </div>
            </div>

            <br><br>
            <p style="color:red;padding-left: 1.5rem;"><strong>Tenga en cuenta que solo tendra 24 horas para cambiar la calificación de ser necesario.</stron></p>
            <input onclick="document.getElementById('colaborador').submit();" type="submit" class="btn btn-outline-primary  form-control" value="Guardar"   />
            </form>


          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- Basic Inputs end -->

<div
                class="modal fade"
                id="buscar_empleado"
                tabindex="-1"
                aria-labelledby="exampleModalCenterTitle"
                aria-hidden="true"
              >
                <div class="modal-dialog modal-dialog-centered">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="exampleModalCenterTitle">Buscar Empleado</h5>
                     <!-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>-->
                    </div>
                    <div class="modal-body">
                    <div class="col-xl-12 col-md-6 col-12">
                    <form method="POST" action="/dashboard/buscar_empleado" id="busqueda_empleado">
                    {!! csrf_field() !!}
                        <div class="mb-1">
                          <label class="form-label" for="basicInput">Cédula</label>
                          <input type="text" class="form-control" id="basicInput" name="cedula" placeholder="Cédula" />
                        </div>
                      </div>

                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-outline-primary"  onclick="document.getElementById('busqueda_empleado').submit();" >Aceptar</button>
                        </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
<!-- Tooltip validations end -->
@endsection

@section('page-script')
  <!-- Page js files -->
  <script src="{{ asset(mix('js/scripts/forms/form-tooltip-valid.js'))}}"></script>
  <script>
      $(document).ready(function() {
        let valor=$('input[type=checkbox]:checked');
            let suma=0;
            var cambiar=false;
            var cambiar_verde=false;
            var cambiar_rojo=true;
            for (let index = valor.length -1; index >=0; index--) {

                suma= parseInt(valor[index].value)+suma;
                if (parseInt(valor[index].value)<0) {
                         cambiar=true;
                    }
                if (parseInt(valor[index].value)>0) {
                        cambiar_rojo=false;
                }

            }
            document.getElementById('puntos').innerHTML = suma;
            console.log(cambiar);
                if (cambiar) {
                    if (cambiar_rojo) {
                        document.getElementById("div").style.backgroundColor='#FF5252';
                    }else{
                        document.getElementById("div").style.backgroundColor='#F6BA0D';
                    }
                }else{
                    document.getElementById("div").style.backgroundColor='#2EB207';
                }
            });

            function verifica_valor(){

            let valor=$('input[type=checkbox]:checked');
            let suma=0;
            var cambiar=false;
            var cambiar_verde=false;
            var cambiar_rojo=true;
            for (let index = valor.length -1; index >=0; index--) {

                suma= parseInt(valor[index].value)+suma;
                if (parseInt(valor[index].value)<0) {
                         cambiar=true;
                    }
                if (parseInt(valor[index].value)>0) {
                        cambiar_rojo=false;
                }

            }
            document.getElementById('puntos').innerHTML = suma;
            console.log(cambiar);
                if (cambiar) {
                    if (cambiar_rojo) {
                        document.getElementById("div").style.backgroundColor='#FF5252';
                    }else{
                        document.getElementById("div").style.backgroundColor='#F6BA0D';
                    }
                }else{
                    document.getElementById("div").style.backgroundColor='#2EB207';
                }
        }
  </script>


@endsection