@extends('layouts.base')

@section('css')
{!! Minify::stylesheet('/css/studiesClassBank.css')->withFullUrl() !!}
@stop

@section('title')
Banco de clases
@stop
@section('description')
El banco de clases de Radio ECCA. Buscador de cursos para tomar clases online.
@stop

@section('content')
{!! Breadcrumbs::render('study-bank-class') !!}
<div class="container">
   <div class="titulo_categoria">
      <span>Banco de clases</span>
      <div class="subtitulo_categoria">Buscador</div>
   </div>
   <div class="titulo" id="coopera_titulo">
      Selección de módulo
   </div>
   <p>Use este buscador para encontrar los módulos que desee escuchar.
   </p>
   <div class="login-form">
      <form target="_blank" action="http://online.radioecca.org/banco/nw_buscar.php" method="get" name="formulario" id="formulario">
         <div class="form-group"> 
           <input autocomplete="off" class="form-control" placeholder="Por ejemplo: Inglés, Competencias clave..." required="required" name="clave" type="text" id="clave" accesskey="b">
         </div>
         <input type="submit" class="btn form-control" value="Buscar">
      </form>
   </div>
   <div class="msg"></div>
   <div class="audio-list-wrapper">  
   </div>
   <div class="spacer"></div>
</div>

@stop

@section('js-code-post')
{!! Minify::javascript('/js/custom.js')->withFullUrl() !!}
<script>
   $(document).ready(function () {
      
      $('form').submit(function (event) {
         $('#clave').keyup();
         event.preventDefault();
      });
      
      /*Listener para hacer la búsqueda dinámica a partir de 3 caractéres*/
      $('#clave').keyup(function (e) {
         clearTimeout($.data(this, 'timer'));
         if (e.keyCode == 13)
            search(true);
         else
            $(this).data('timer', setTimeout(search, 500));
      });
      
   });
   function cleanTextForUrl(text){
      var clean = text.toLowerCase()
            .replace(/[(]/g, '')
            .replace(/[)]/g, '')
            .replace(/[:]/g, '')
            .replace(/[áàäâå]/g, 'a')
            .replace(/[éèëê]/g, 'e')
            .replace(/[íìïî]/g, 'i')
            .replace(/[óòöô]/g, 'o')
            .replace(/[úùüû]/g, 'u')
            .replace(/[ýÿ]/g, 'y')
            .replace(/[ñ]/g, 'n')
            .replace(/[ç]/g, 'c')
            .replace(/^\-+|[^a-zA-Z0-9\/_| -]+|\-+$/g, '')
            .replace(/[\/_| -]+/g, '-');
      return clean;
   }
   /*Búsqueda en la base de datos*/
   function search(force) {
      var existingString = $("#clave").val();
      if (!force && existingString.length < 3) {
         $(".msg").html("");
         $(".audio-list-wrapper").html("");
         return; //wasn't enter, not > 2 char
      }
      var formData = {
         //'clave': escape(existingString)
         'clave': existingString
      };

      $.ajax({
         method: "GET",
         url: "http://online.radioecca.org/banco/nw_buscar.php",
         data: formData,
         success: function (jsonData) {
            var dataParsed = $.parseJSON(jsonData);
            var htmlOutput = "";
            if (dataParsed.status) {
               var urlPath = '{{route("study-bank-class")}}';
               for (var i in dataParsed.courseList) {
                  htmlOutput += '<li><a href=' + urlPath + '/' + dataParsed.courseList[i]["id"] + '/' + cleanTextForUrl(dataParsed.courseList[i]["name"]) + '>' + dataParsed.courseList[i]["name"] + '</a></li>';
               }
            }
            else {
               htmlOutput = "Su búsqueda no ha dado resutlado o ha introducido un término muy genérico.";
            }
            //Pinto en el lugar que toca en la pantalla
            if (i >= 0) {
               i = parseInt(i) + parseInt(1);
               $(".msg").html("Se han encontrado ( " + i + " ) cursos: ");
            } else {
               $(".msg").html("No se han encontrado cursos relacionados con la búsqueda.");
            }
            
            htmlOutput = '<ul>' + htmlOutput + '</ul>';
            $(".audio-list-wrapper").html(htmlOutput);
         },
         error:function(){
            htmlOutput = '<div style="font-size: 15px"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> Hay un problema con el banco de clases. Pronto estará solucionado.</div>';
            $(".audio-list-wrapper").html(htmlOutput);
         }
      });
   }
</script>
@stop