@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. El banco de clases <b>busca automáticamente según vaya escribiendo</b> en el campo que tiene disponible
      debajo. La búsqueda empieza a partir de la introducción de <b> tres</b> o más letras.
   </p>
   <p>
      ¿Le gustaría ver cómo funciona? Haga click en el siguiente botón y vea la demostración.
      <button id="demoBtn" type="button" class="btn btn-default" aria-label="Left Align">
         <span class="glyphicon glyphicon-question-sign" aria-hidden="true">
         </span>
         Demostración
      </button>
   </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, Competencia clave..." required="required" name="clave" type="text" id="clave" accesskey="b">
         </div>
         <input id="submitBtn" 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 () {
      $("#demoBtn").click(function () {
         $("#clave").attr('readonly', 'true');
         $("#submitBtn").addClass('disabled');
         setTimeout(function () {
            $("#clave").val("i");
            setTimeout(function () {
               $("#clave").val("in");
               setTimeout(function () {
                  $("#clave").val("ing");
                  setTimeout(function () {
                     $("#clave").val("ingl");
                     setTimeout(function () {
                        $("#clave").val("ingle");
                        setTimeout(function () {
                           $("#clave").val("ingles").keyup();
                           $("#clave").removeAttr('readonly');
                           $("#submitBtn").removeClass('disabled');
                        }, 500);
                     }, 500);
                  }, 500);
               }, 500);
            }, 500);
         }, 500);
      });

      $('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