{$menu}
<div class="row">
	<div class="col-sm-3">
		<select name="id_generacion" id="id_generacion" class="form-control" autocomplete="off">
			<option value="">Seleccionar Generación</option>
			{foreach from=$generaciones item=gen}
				<option value="{$gen->id}">{$gen->nombre}</option>
			{/foreach}
		</select>
	</div>
	<div class="col-sm-3">
		<select name="id_curso" id="id_curso" class="form-control" autocomplete="off">
			<option value="">Seleccionar materia</option>
		</select>
	</div>
	<div class="col-sm-3">
		<button class="btn btn-default btn-block" type="button" id="btnGenerarInforme">Informe</button>
	</div>
	<div class="col-sm-3">
		<button class="btn btn-default btn-block" type="button" id="btnExportar">Exportar a PDF</button>
	</div>
</div>
<br/>
<div class="row">
	<div class="col-sm-12">
		<div id="informe_html"></div>
		<form class="hidden" id="form_export" target="iframe_hidden" method="post" action="informes/exportar">
			<input type="hidden" name="id_generacion" id="input_id_generacion">
			<input type="hidden" name="id_curso" id="input_id_curso">
		</form>
		<iframe src="" class="hidden" name="iframe_hidden" id="iframe_hidden" frameborder="0"></iframe>
	</div>
</div>
{literal}
<script type="text/javascript">
	$(document).ready(function(){
		$('select#id_generacion').change(function (e) {
			var id_generacion = $('option:selected', this).val();
			if(id_generacion != ''){
				$('input#input_id_generacion').val(id_generacion);
				$.ajax({
					url: 'informes/cursos',
					dataType:'json',
					type: 'post',
					data: {id_generacion:id_generacion},
					beforeSend:function(){
						$('select#id_curso').empty();
					},
					success: function (data) {
						$('<option>').attr({
								value:''
							}).text('Seleccionar materia')
							.appendTo($('select#id_curso'));
						$.each(data, function(i,curso){
							$('<option>').attr({
								value:curso.id
							}).text(curso.clave + ' ' + curso.nombre)
							.appendTo($('select#id_curso'));
						})
					}
				});
			}
		});

		$('select#id_curso').change(function (e) {
			var id_curso = $('option:selected', this).val();
			if(id_curso != '')
				$('input#input_id_curso').val(id_curso)
		});
		
		$('button#btnGenerarInforme').click(function () {
			var id_generacion = $('select#id_generacion');
			var id_curso = $('select#id_curso');
			var id_clase = $('select#id_clase');
			var message = '';
			var error = false;
			if(id_generacion.val() == ""){
				message = 'Seleccione la generación';
				error = true;
			}
			if(id_curso.val() == ""){
				message = 'Seleccione la materia';
				error = true;
			}
			if(error){
				swal('Error', message, 'error')
			}
			else{
				$.ajax({
					url: 'informes/informe',
					type: 'post',
					dataType:'html',
					data: {
						id_generacion:id_generacion.val(),
						id_curso:id_curso.val()
					},
					beforeSend:function(){
						$('div#informe_html').empty().html('<p class="text-center"><i>Cargando informe</i></p>')
					},
					success: function (data) {
						$('div#informe_html').empty().html(data)
					}
				});
			}
		});

		$('button#btnExportar').click(function (e) {
			$("form#form_export").submit();
		});
	})
</script>
{/literal}