@extends('layouts.base')

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

@section('title')
{{Lang::get('student.classBank.banco de clases')}}
@stop
@section('description')
   {{Lang::get('student.classBank.el banco de clases de radio ecca')}}

@stop

@section('content')
{!! Breadcrumbs::render('study-bank-class') !!}
<div id="vueBancoClases" idioma={{$codIdioma}} url={{$url}} class="container">
   <div class="titulo_categoria">
      <span>{{Lang::get('student.classBank.banco de clases')}}</span>
      <div class="subtitulo_categoria">{{Lang::get('student.classBank.buscador')}}</div>
   </div>
   <div class="titulo" id="coopera_titulo">
      {{Lang::get('student.classBank.seleccion de modulo')}}
   </div>
   <p>
      {!! Lang::get('student.classBank.use este buscador') !!}
   </p>
   <p>
      {{Lang::get('student.classBank.le gustaria ver como funciona')}} {{Lang::get('student.classBank.haga click en el siguiente boton y vea la demostracion')}}
      <button id="demoBtn" type="button" class="btn btn-default" aria-label="Left Align">
         <span class="glyphicon glyphicon-question-sign" aria-hidden="true">
         </span>
         {{Lang::get('student.classBank.demostracion')}}

      </button>
   </p>
   <div class="login-form">
      
         <div class="form-group"> 
            <input autocomplete="off" class="form-control" placeholder="{{Lang::get('student.classBank.por ejemplo')}}" 
               v-model="nombreAccion" required="required" name="clave" type="text" id="clave" accesskey="b">
            <div style="color: red; margin-left:15px;" v-if="hasError">* {{Lang::get('student.classBank.error busqueda')}}</div>
         </div>
         <input id="submitBtn" type="button" v-on:click="searchAccion()" class="btn form-control" value="{{Lang::get('student.classBank.buscar')}}" :style="showNoResults ? 'margin-bottom:30px;' : ''">
         <input style="display:none;" id="submitBtnClear" type="button" v-on:click="clearAccion()" class="btn form-control">
         <span v-if="showNoResults" style="font-size:20px;">{{Lang::get('student.classBank.sin resultados')}}</span>
   </div>
   
   <div class="audio-list-wrapper">  
      <ul v-if="hasAcciones">
         <div v-for="acc in getAcciones" :key="acc.id">
            <li ><a href="#" v-on:click="goto_route(acc)">@{{acc.nombre}}</a></li>
         </div>
      </ul>
   </div>
   <div class="spacer"></div>
</div>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
   new Vue({
      el: '#vueBancoClases',
      props:{
      },
        
      data: { 
         codIdioma: "",
         acciones: [],
         nombreAccion: "",
         error: false,
         showNoResults: false
      },
      created: function() {},
      computed: {
         hasAcciones: function() {
            return (this.acciones !== undefined) && (this.acciones.length > 0)
         },
         getAcciones: function() {
            return this.acciones
         },
         hasError: function() {
            return this.error
         }
      },
      mounted () {
        this.codIdioma = this.$el.attributes.idioma.value
      },
    
      methods: {
         
         goto_route: function(accion) {
            route = "{{route('study-listen-class', ['id' => '?id?', 'nombre' => '?nombre?'])}}"
            route = route.replace('?id?', accion.id)
            route = route.replace('?nombre?', accion.nombre)
            location.href = route
         },
         
         searchAccion: function() {
            this.nombreAccion = document.getElementById("clave").value
            if (this.nombreAccion.length > 2) {
               this.error = false
               this.showNoResults = false
               var params = { params: {nombreAccion: this.nombreAccion, codIdioma: this.codIdioma } }
               axios
               .get(this.$el.attributes.url.value + '/getAccionesByNombre', params)
               .then(
                  response => {
                     this.acciones = response.data
                     if (this.acciones.length === 0) {
                        this.showNoResults = true;
                     }
                  })
            } else {
               this.error= true
            }
         },
         clearAccion: function() {
            this.error = false
            this.acciones = []
         }
      },
    });

           
</script>
@stop

@section('js-code-post')
{!! Minify::javascript('/js/custom.js')->withFullUrl() !!}
<script>
   $(document).ready(function () {
      $("#demoBtn").click(function () {
         $("#submitBtnClear").click();
         $("#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, 750));
      });

   });
   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) {
         document.getElementById("submitBtnClear").click()   
         return; //wasn't enter, not > 2 char
      }
      
      document.getElementById("submitBtn").click()
   }
</script>
@stop