{% extends "futstats/panelbase.html" %}
{% block body-wrapper %}  
<style>
body {
    background-size:100% 100%;
    background-repeat: no-repeat;
    background-color:#080111!important;
    background-image:none;
    }
.axisLabels.yaxisLabel{
	color:#cff0f0;
	}
.axisLabels.xaxisLabel{
	color:#cff0f0;
	}
label{
    color: lightcyan!important;
}
.error{
    color: red!important;
}
select{
    color:black;
}
</style>
<script>

var series = [{
        data: {{total|safe}},
		label: "Total"
        
    },
    {
        data: {{hit|safe}},
        label: "Encerts"
    }
];
var dataset = [
    {
		label:"Encerts per jornada",
        data: {{data|safe}},
        yaxis: 1,
        points: { symbol: "circle", fillColor: "#F96F06", show: true },
        lines: { show: true }
    }, {
		label: "Promig encerts",
        data: {{avg|safe}},
        yaxis: 1,
        points: { symbol: "triangle", fillColor: "#0062FF", show: true },
        lines: {show:true, fill:true}
    }
];
var xAxisLabels = {{labels|safe}};

var options2 = {
        xaxis: {
		axisLabel: 'Classe',
			ticks:xAxisLabels,
            minTickSize: 1,
        },
		yaxis: {
		axisLabel: 'Nombre de pronostics'
        },
        series: {
            bars: {
                show: true,
                barWidth: .75,
                align: "center"
            },
            
        },
		grid: {
            hoverable: true,
            clickable: true

            //mouseActiveRadius: 30  //specifies how far the mouse can activate an item
        },


        valueLabels: {
            show: true
        }
    };


var options = {
legend: {
position: "nw",noColumns:2
	},
    series: {
      lines: { show: true },
      points: { show: true },
    },
	xaxis:
	{        
	axisLabel: 'Numero jornada',
	tickColor:"#cff0f0",
    tickDecimals: 0
	},
	yaxis:
	{      
	axisLabel: 'Percentatge',
	min:0, max: 100,
	tickSize: 10, 
    tickDecimals: 0
	},
	grid: { hoverable: true, autoHighlight: true },
	tooltip: true,
                    tooltipOpts: {
                        content: '%y.0%',
                        shifts: {
                            x: -20,
                            y: -50
                        }
                    }
  };

</script>

<div class="row" style="
    margin-left: -5rem;
	margin-right: -4rem;
	margin-top: 20px;
">
  <div class="large-5 columns">
 <form id="my_form" action="predict" method="post">
 {% csrf_token %}
	<div class="row" style="
    margin-top: 20px;
">
    <div  class="large-6 columns">
      <label>Equip local:
         <div id="predictor">
	</div>
      </label>
    </div>
	<div  class="large-6 columns">
      <label>Equip visitant:
         <div id="predictor2">
	</div>
      </label>
    </div>
  </div>

  <div class="row" style="
    margin-top: 15px;
">
    <div class="large-12 columns">
      <label>Temporades anteriors a utilitzar (mínim dues):</label><label for="checkboxes[]" generated="true" class="error"></label>
    </div>
  </div>
<div class="row">
    <div class="large-12 columns">
      <input name="checkboxes[]" id="checkbox1" type="checkbox" value="07" checked class="select"><label for="checkbox1">2007</label>
         <input name="checkboxes[]" id="checkbox2" type="checkbox" value="08" checked class="select"><label for="checkbox2">2008</label>
         <input name="checkboxes[]" id="checkbox3" type="checkbox" value="09" checked class="select"><label for="checkbox3">2009</label>
      <input name="checkboxes[]" id="checkbox4" type="checkbox" value="10" checked class="select"><label for="checkbox4">2010</label>
      <input name="checkboxes[]" id="checkbox5" type="checkbox" value="11" checked class="select"><label for="checkbox5">2011</label>
    </div>
    <div class="large-12 columns">
      <input name="checkboxes[]" id="checkbox6" type="checkbox" value="12" checked class="select"><label for="checkbox6">2012</label>
      <input name="checkboxes[]" id="checkbox7" type="checkbox" value="13" checked class="select"><label for="checkbox7">2013</label>
      <input name="checkboxes[]" id="checkbox8" type="checkbox" value="14" checked class="select"><label for="checkbox8">2014</label>
    </div>
  </div>

<div class="row">
<div class="large-12 columns">

      <label>Moral del equip: (negatiu afavoreix local, positiu visitant)<div id="SliderOutput1"></div></label>
  			<div class="range-slider" data-slider data-options="start: -100; end: 100; display_selector: #SliderOutput1; step: 5;"> <span class="range-slider-handle"></span> <span class="range-slider-active-segment"></span> <input id="moral" type="hidden" name="moral"></div>
<label>Factor Camp: (negatiu afavoreix local, positiu visitant)<div id="SliderOutput2"></div></label>
			<div class="range-slider" data-slider data-options="start: -100; end: 100; display_selector: #SliderOutput2; step: 5;"> <span class="range-slider-handle"></span> <span class="range-slider-active-segment"></span> <input id="camp" name="camp" type="hidden"></div>

  
  		</div>
  		</div>
  <div class="row">
  <div  class="large-12 columns text-center">
    <input class="button" type="submit" value="Pronosticar" name="submit" />
	</div>
	</div>
	  
</form>
  <div class="row">
  <div  class="large-12 columns text-center">
    <textarea id="result" rows="2" cols="50" disabled></textarea>
	</div>
	</div>
  </div>
  <div class="large-7 columns">
<div class="row">
  <div  class="large-12 columns text-center">
     <div id="flot-placeholder" style="width: 100%; height: 260px;"></div>
	<div id="plot" style="width: 100%; height: 260px;"></div>
  </div>
</div>
</div>
</div>
<script>
$(document).foundation();
$(document).ready(function () {
    jQuery.extend(jQuery.validator.messages, {
  required: "S'ha d'escollir un equip.",
minlength: jQuery.validator.format("S'han de seleccionar un minim de {0} temporades.")
});
    $.plot($("#flot-placeholder"), dataset, options);
	$.plot("#plot", series, options2);
	var imageUrl = {{ STATIC_URL }}+'img/team.JPG'
	$(".fade").hide(0).delay(0).fadeIn(3000)
	$('body').css('background-image', 'url('+imageUrl+')');
	var s = $('<select id="local" name="local" class="required"/>');
	var s2 = $('<select id="visitante" name="visitante" class="required"/>');
	data = {{teams|safe}};
	
	for(var val in data) {
		$('<option />', {value: data[val], text: data[val]}).appendTo(s);
        $('<option />', {value: data[val], text: data[val]}).appendTo(s2);
	}

	s.appendTo('#predictor'); // o
	$("#local").prepend("<option value=''></option>").val('');
	s2.appendTo('#predictor2');
	$("#visitante").prepend("<option value=''></option>").val('');
	
	/*$("#local").change(function () {
		$('#visitante').empty();
		var s = $('#visitante');
        var local = $('#local').val();
        for(var val in data) {
		if (data[val] != local){
		$('<option />', {value: data[val], text: data[val]}).appendTo(s);
		}
	}
    });
    $("#visitante").change(function () {
        $('#local').empty();
        var s = $('#local');
        var local = $('#visitante').val();
        for(var val in data) {
        if (data[val] != local){
        $('<option />', {value: data[val], text: data[val]}).appendTo(s);
        }
    }
    });*/

	var previousPoint = null,
    previousLabel = null;
	
	function showTooltip(x, y, color, contents) {
    $('<div id="tooltip">' + contents + '</div>').css({
        position: 'absolute',
        display: 'none',
        top: y - 40,
        left: x - 50,
        border: '2px solid ' + color,
        padding: '3px',
            'font-size': '9px',
            'border-radius': '5px',
            'background-color': '#fff',
            'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
        opacity: 0.9
    }).appendTo("body").fadeIn(200);
}
$("#plot").on("plothover", function (event, pos, item) {
    if (item) {
        if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
            previousPoint = item.dataIndex;
            previousLabel = item.series.label;
            $("#tooltip").remove();

            var x = item.datapoint[0];
            var y = item.datapoint[1];

            var color = item.series.color;

            showTooltip(item.pageX,
            item.pageY,
            color,
                item.series.label +" "+ item.series.xaxis.ticks[x].label + " : <strong>" + y + "</strong>");
        }
    } else {
        $("#tooltip").remove();
        previousPoint = null;
    }
});
jQuery.validator.addMethod("notEqual", function(value, element, param) {
 return this.optional(element) || value != $(param).val();
}, "Els equips han de ser diferents");

$("#my_form").validate({
    rules: {
    'local': {required: true, notEqual: "#visitante"},
    'visitante': {required: true, notEqual: "#local"},
    'checkboxes[]': {required: true,
                minlength: 2}
    },
    submitHandler: function(form) {
        request = $.ajax({
            data: $(form).serialize(), // get the form data
            type: $(form).attr('method'), // GET or POST
            url: $(form).attr('action'), // the file to call
            cache: false,
            });
            // Called on success.
            request.done(function(data) {
                console.log(data);
                var local = data.local;
                var visitant = data.visitant;
                var res = data.result;
                var message = data.message;
                var prob = data.prob;
                if (res == 'ok')
                {
                $("textarea#result").text(local+" - "+visitant+": " + message+ " , "+ prob+"%");
                }
                else{
                $("textarea#result").text(local+" - "+visitant+": " + message );

                }

            });
            // Called on failure.
            request.fail(function (jqXHR, textStatus, errorThrown){
                // log the error to the console
                console.error("The following error occurred: " + textStatus, errorThrown);
            });
            return false;
        }
    });

$(document).bind("ajaxSend", function(){
   run_waitMe('stretch');
 }).bind("ajaxComplete", function(){
   $('#my_form').waitMe('hide');
 });

$(document).foundation('slider', 'reflow');

function run_waitMe(effect){
$('#my_form').waitMe({
//none, rotateplane, stretch, orbit, roundBounce, win8, win8_linear, ios, facebook, rotation, timer, pulse.
effect: effect,
 
//place text under the effect (string).
text: 'Calculant, el guanyador del partit...\n (En funció de les temporades seleccionades el procés pot trigar més de 5 minuts)',
 
//background for container (string).
bg: 'rgba(255,255,255,0.7)',
 
//color for background animation and text (string).
color: 'black',
 
//change width for elem animation (string).
sizeW: '',
 
//change height for elem animation (string).
sizeH: ''
});
}
});


</script>
{% endblock %}


