<?php $__env->startSection('css'); ?>
<?php echo Minify::stylesheet('/css/studiesClassBank.css')->withFullUrl(); ?>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('title'); ?>
<?php echo e(Lang::get('student.classBank.banco de clases')); ?>

<?php $__env->stopSection(); ?>
<?php $__env->startSection('description'); ?>
   <?php echo e(Lang::get('student.classBank.el banco de clases de radio ecca')); ?>


<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
<?php echo Breadcrumbs::render('study-bank-class'); ?>

<div id="vueBancoClases" idioma=<?php echo e($codIdioma); ?> url=<?php echo e($url); ?> class="container">
   <div class="titulo_categoria">
      <span><?php echo e(Lang::get('student.classBank.banco de clases')); ?></span>
      <div class="subtitulo_categoria"><?php echo e(Lang::get('student.classBank.buscador')); ?></div>
   </div>
   <div class="titulo" id="coopera_titulo">
      <?php echo e(Lang::get('student.classBank.seleccion de modulo')); ?>

   </div>
   <p>
      <?php echo Lang::get('student.classBank.use este buscador'); ?>

   </p>
   <p>
      <?php echo e(Lang::get('student.classBank.le gustaria ver como funciona')); ?> <?php echo e(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>
         <?php echo e(Lang::get('student.classBank.demostracion')); ?>


      </button>
   </p>
   <div class="login-form">
      
         <div class="form-group"> 
            <input autocomplete="off" class="form-control" placeholder="<?php echo e(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">* <?php echo e(Lang::get('student.classBank.error busqueda')); ?></div>
         </div>
         <input id="submitBtn" type="button" v-on:click="searchAccion()" class="btn form-control" value="<?php echo e(Lang::get('student.classBank.buscar')); ?>">
         <input style="display:none;" id="submitBtnClear" type="button" v-on:click="clearAccion()" class="btn form-control">
      
   </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
      },
      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 = "<?php echo e(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
               var params = { params: {nombreAccion: this.nombreAccion, codIdioma: this.codIdioma } }
               axios
               .get(this.$el.attributes.url.value + '/getAccionesByNombre', params)
               .then(
                  response => {
                     this.acciones = response.data
                  })
            } else {
               this.error= true
            }
         },
         clearAccion: function() {
            this.error = false
            this.acciones = []
         }
      },
    });

           
</script>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('js-code-post'); ?>
<?php echo 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>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.base', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>