@extends('voyager::master')

@section('page_title', __('voyager::generic.'.(isset($dataTypeContent->id) ? 'edit' : 'add')).' '.$dataType->display_name_singular)

@section('css')
    <style>
        .panel .mce-panel {
            border-left-color: #fff;
            border-right-color: #fff;
        }

        .panel .mce-toolbar,
        .panel .mce-statusbar {
            padding-left: 20px;
        }

        .panel .mce-edit-area,
        .panel .mce-edit-area iframe,
        .panel .mce-edit-area iframe html {
            padding: 0 10px;
            min-height: 350px;
        }

        .mce-content-body {
            color: #555;
            font-size: 14px;
        }

        .panel.is-fullscreen .mce-statusbar {
            position: absolute;
            bottom: 0;
            width: 100%;
            z-index: 200000;
        }

        .panel.is-fullscreen .mce-tinymce {
            height:100%;
        }

        .panel.is-fullscreen .mce-edit-area,
        .panel.is-fullscreen .mce-edit-area iframe,
        .panel.is-fullscreen .mce-edit-area iframe html {
            height: 100%;
            position: absolute;
            width: 99%;
            overflow-y: scroll;
            overflow-x: hidden;
            min-height: 100%;
        }
		
		.progress {
			height: 20px;
		}		
		
		.progress-bar {
			line-height: 20px;
		}		
		
		
    </style>
@stop

@section('page_header')
    <h1 class="page-title">
        <i class="{{ $dataType->icon }}"></i>
        {{ __('voyager::generic.viewing').' '.$dataType->display_name_singular }}&nbsp;
 @can('edit', $dataTypeContent)
        <a href="{{ route('voyager.'.$dataType->slug.'.edit', $dataTypeContent->getKey()) }}" class="btn btn-info">
            <span class="glyphicon glyphicon-pencil"></span>&nbsp;
            {{ __('voyager::generic.edit') }}
        </a>
        @endcan
        <a href="{{ route('voyager.'.$dataType->slug.'.index') }}" class="btn btn-warning">
            <span class="glyphicon glyphicon-list"></span>&nbsp;
            {{ __('voyager::generic.return_to_list') }}
        </a>		
    </h1>
    @include('voyager::multilingual.language-selector')
@stop
@section('content')
    <div class="page-content container-fluid">
	
		<div class="row">
			<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
				<h2>{{$dataTypeContent->titulo}}</h2>
			</div>	
		</div>	
	
	@php
		$categorias = App\CampanhasEvento::where('campanhas_id','=',$dataTypeContent->id)
		->groupBy('campanhas_categorias_id')
		->get();		
	@endphp	
	
	
	
		
		<div class="row">
			<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
				<form id="frmDadosVotacao">
					<div class="row">
						<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
							<div class="form-group">
								<label>Selecione uma Categoria</label>
								<select id="categoria" name="categoria" class="form-control">
									<option value="0">Selecione...</option>
									@foreach($categorias as $categoria)
										<option value="{{$categoria->categorias->id}}">{{$categoria->categorias->nome}}</option>
									@endforeach
								</select>
							</div>
						</div>
						<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
							<div class="form-group">
								<label>Selecione uma Subcategoria</label>
								<select name="subcategoria" id="subcategoria" class="form-control" >
									<option value="0">Selecione uma categoria primeiro</option>
								</select>
							</div>	
						</div>
					</div>
				</form>	
			</div>
		</div>
		
		<div class="row">
			<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="participantes">
				
			</div>
		</div>
		
	</div>        
@stop
@section('javascript')

	<script>
	
	function numeroParaMoeda(n, c, d, t){
		c = isNaN(c = Math.abs(c)) ? 2 : c, d = d == undefined ? "," : d, t = t == undefined ? "." : t, s = n < 0 ? "-" : "", i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", j = (j = i.length) > 3 ? j % 3 : 0;
		return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
	}	
	
		$("#categoria").on("change", function(){
			$("#participantes").html("");
			if($(this).val() > 0){
				$.ajax({
					url: "/subcategorias/"+$(this).val(),	
					headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
					type: "POST",
					dataType: "json",
					success: function(data){
						$("#subcategoria").html("");
						$("#subcategoria").append('<option value="">Selecione...</option>');
						for(x=0; x < data.subcategorias.length ; x++){
							$("#subcategoria").append('<option value="'+data.subcategorias[x].id+'">'+data.subcategorias[x].nome+'</option>');
						}
					},
					error: function(data) {
						
					}			
				});
			} else {
				$("#subcategoria").html("");
				$("#subcategoria").append('<option value="">Selecione uma categoria</option>');
			}
		});
		
		
	$("#subcategoria").on("change", function(){
			if($(this).val() > 0){
				$.ajax({
					url: "/participantes/{{$dataTypeContent->id}}/"+$("#categoria").val()+"/"+$(this).val(),	
					headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
					type: "POST",
					dataType: "json",
					success: function(data){
						$("#participantes").html("");
						$("#participantes").append('<div id="noticias" class="row" ></div>');
						for(x=0; x < data.participantes.length ; x++){
							
							var percentual = data.participantes[x].votos / (parseInt(data.total) / 100); 
							
							$("#noticias").append(
								'<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">'+
									'<div class="panel panel-bordered">'+
										'<div class="entry-image" style="background-image: url({{setting("site.url_imagens")}}'+data.participantes[x].foto+'); background-position: center; background-repeat: no-repeat;background-size: cover; height: 300px; margin-bottom: 0px;">'+
										'</div>'+
										'<div class="entry-title">'+
											'<h3 style="text-align:center; margin-bottom: 1px;">'+data.participantes[x].nome+'</h3>'+
										'</div>'+
										'<div class="entry-content">'+
											'<h2 style="text-align:center;"><strong>'+data.participantes[x].votos+' Voto(s)</strong></h2>'+
											'<div class="panel-body">'+
												'<div class="progress">'+
												  '<div class="progress-bar bg-success" role="progressbar" style="width: '+percentual+'%;" aria-valuenow="'+percentual+'" aria-valuemin="0" aria-valuemax="100">'+numeroParaMoeda(percentual,1,',','.')+'%</div>'+
												'</div>'+
											'</div>'+
										'</div>'+
									'</div>'+
								'</div>'
							);	
						}
					},
					error: function(data) {
						
					}			
				});
			} else {
				$("#participantes").html("");
			}
		});				
		
		
	</script>
@stop