Sindbad~EG File Manager

@extends('layouts.app')
@section('content')
<style>
    body, html{ margin:0; padding:0;}
    .header{ border-top:1px solid white;background:white; color:#333; width:100%; font-family: 'Lobster', cursive; text-align:center}
    .menu{ background:#EAEAEA; color:white; width: 100%}
    .wrapper{ height:2000px; width:100%; padding-top:20px}
     
    .fixed{ background:#EAEAEA;position:fixed; top:0; width: 92%}
</style>

<link rel="stylesheet" type="text/css" href="{{ asset('iconselect.css')}}" >
<script type="text/javascript" src="{{ asset('iconselect.js')}}"></script>

<script type="text/javascript" src="{{ asset('iscroll.js')}}"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
input[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
input[type=radio] + img {
  cursor: pointer;
}
/* CHECKED STYLES */
input[type=radio]:checked + img {
  outline: 2px solid #AE0303;
}
input[type=radio]:checked + img {
  transform: scale(0.9);
  box-shadow: 0 0 5px #333;
  z-index: -1;
}

input[type=checkbox] + label {
  cursor: pointer;
}

input[type=checkbox] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

input[type=checkbox]:checked + label {
  outline: 2px solid #AE0303;
} 

input[type=checkbox]:checked + label {
  transform: scale(0.9);
  box-shadow: 0 0 5px #333;
  z-index: -1;
}

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}
.col6{
	margin-left: -50px !important;
}
</style>

<script>
    
var iconSelect;
var selectedText;

window.onload = function(){

@foreach ($formulario2 as $for)

    @for($i = 1; $i <= 5; $i++) 
        
        selectedText{{$for->id}}{{$i}} = document.getElementById('{{$for->id}}{{$i}}');
            
        document.getElementById('select-{{$for->id}}-{{$i}}').addEventListener('changed', function(e){
            selectedText{{$for->id}}{{$i}}.value = iconSelect{{$for->id}}{{$i}}.getSelectedValue();
        });

        document.getElementById("select-{{$for->id}}-{{$i}}").addEventListener("click", function() {
            cambio({{$for->id}});
        });

        iconSelect{{$for->id}}{{$i}} = new IconSelect("select-{{$for->id}}-{{$i}}", 
            {'selectedIconWidth':35,
            'selectedIconHeight':35,
            'selectedBoxPadding':5,
            'iconsWidth':35,
            'iconsHeight':35,
            'boxIconSpace':3,
            'vectoralIconNumber':8,
            'horizontalIconNumber':1});

        var icons = [];
        icons.push({'iconFilePath':'{{ asset("flecha.png") }}', 'iconValue':''});
        icons.push({'iconFilePath':'{{ asset("1.png") }}', 'iconValue':'1'});
        icons.push({'iconFilePath':'{{ asset("2.png") }}', 'iconValue':'2'});
        icons.push({'iconFilePath':'{{ asset("3.png") }}', 'iconValue':'3'});
        icons.push({'iconFilePath':'{{ asset("4.png") }}', 'iconValue':'4'});
        
        iconSelect{{$for->id}}{{$i}}.refresh(icons);

    @endfor

@endforeach

};

</script>
<div class="container header" style="background-color: #FFFFFF;">
    <img src="{{ asset('head2.png') }}" style="margin-top: -25px;" width="100%" alt="">
    <div class="row justify-content-center align-self-center">
        <div class="col-md-12"><br>
            <p align="center"><b>Si existen dudas o contas con inconvenientes, podes contactar a:</b></p><br>
        </div>
        <div class="col-md-3">
            
        </div>
        <div class="col-md-3">
            <p align="center"><img src="{{ asset('correo.png') }}" width="20%" alt=""></p>
            <h4 align="center" style="color: #ECC500;"><b>tutor@sumar.com.py</b></h4>
        </div>
        <div class="col-md-3">
            <p align="center"><img src="{{ asset('telefono.png') }}" width="20%" alt=""></p>
            <h4 align="center" style="color: #ECC500;"><b>0981 217 504</b></h4>
        </div>
        <div class="col-md-3">
            
        </div>
        <div class="col-md-12" style="background-color: #EAEAEA;border-radius:10px;">
             <p align="center" style="font-size: 18px; color: #891334;"><b>POR CADA ENUNCIADO DEBE SELECCIONAR LA CALIFICACIÓN QUE MÁS SE AJUSTA, EN BASE A SU CRITERIO.</b></p>
             @if (count($errors)>0)
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>
                                {{$error}}
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </div>
    </div>
</div><br><br>
<div class="container" style="background-color: #EAEAEA;">
    <div class="row justify-content-center align-self-center">
            {!! Form::open(array('url'=>'cuestionarios/servicio','method'=>'POST','autocomplete'=>'off','name'=>'form1')) !!}
            {{Form::token()}}
            <div class="container">
	            <div class="row menu">
	                <div class="col-md-6">
	                    <div>
	                        
	                    </div>
	                </div>
	                <div class="col-md-6" id="col6">
	                    <table class="table" style="table-layout: fixed;">
	                        <tr>
	                            <td style="color: black; width: 33%;text-align: center; border:2px solid #891334;width: 40px;vertical-align: middle !important;">Tiempo de respuesta</td>
	                            <td style="color: black; width: 33%;text-align: center; border:2px solid #891334;width: 40px;vertical-align: middle !important;">Trato</td>
	                            <td style="color: black; width: 33%;text-align: center; border:2px solid #891334;width: 40px;vertical-align: middle !important;">Trabajo en equipo</td>
	                            <td style="color: black; width: 33%;text-align: center; border:2px solid #891334;width: 40px;vertical-align: middle !important;">Actitud de servicio</td>
	                            <td style="color: black; width: 33%;text-align: center; border:2px solid #891334;width: 40px;vertical-align: middle !important;">Calidad de la respuesta</td>
	                        </tr>
	                    </table>
	                </div>
	            </div>
	        </div>
            @foreach ($formulario2 as $for)
                <div class="row">
                    <div class="col-md-6">
                        <div>
                            <p style="background-color: #FFFFFF;padding-left: 10px;padding-top: 10px;padding-bottom: 10px;border-radius: 10px;color: #000000;">{{$for->cuestionante}}</p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <table class="table" style="table-layout: fixed;">
                            <tr>
                                @for($i = 1; $i <= 5; $i++)
                                    <td style="width: 33%;"><input type="text" style="background-color: #636b6f; width: 0px !important;height: 0px !important;" id="{{$for->id}}{{$i}}" class="{{$for->id}}" name="{{$for->id}}{{$i}}"><div id="select-{{$for->id}}-{{$i}}" onclick="cambio({{$for->id}});" style="display: inline-block;"></div></td>
                                @endfor
                            </tr>
                        </table>
                    </div>
                </div>
            @endforeach
            
            <div class="col-md-12">
                <div class="form-group">
                    <input type="hidden" name="token" value="{{$token}}">
                </div>
                <div class="form-group">
                    <center><button class="btn btn-primary" type="submit">Enviar</button></center>
                </div>
            </div>
            {!!Form::close()!!}
        </div>
        <div class="col-md-12"><br>
            <p align="center" style="font-family: blog script;font-size: 30px; color: #891334;"><b>¡MUCHAS GRACIAS POR TU APORTE!</b></p><br>
        </div>
    </div>
</div>
<script>
    function cambio(val){
        //console.log($("."+val).val());
        var num = 0;
        $("."+val).each(function(){
            if ($(this).val() != "") {
                num = 1;
            }
        });
        console.log(num);
        if (num == 1) {
            $("."+val).attr("required","");
        }else{
            $("."+val).removeAttr("required");
        }
        //$("."+val).val();
        //$("."+val).attr("required","");
    }
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
posicionarMenu();
 
$(window).scroll(function() {    
    posicionarMenu();
});
 
function posicionarMenu() {
    var altura_del_header = $('.header').outerHeight(true);
    var altura_del_menu = $('.menu').outerHeight(true);
 
    if ($(window).scrollTop() >= altura_del_header){
        $('.menu').addClass('fixed');
        $('.wrapper').css('margin-top', (altura_del_menu) + 'px');
        $('#col6').addClass('col6');
        console.log("ejecutado");
    } else {
        $('.menu').removeClass('fixed');
        $('#col6').removeClass('col6');
        $('.wrapper').css('margin-top', '0');
    }
}
 
</script>
@endsection