@extends('template')

@section('title', 'Recetas')

@section('content')

@foreach (DB::table('contents')->where('id', 15)->get() as $content)    
    <div class="container-full section-banner-recetas" style="background-image:url('{{ $content->img1 }}');" data-stellar-background-ratio="0.2">  
      <h1 data-stellar-background-ratio="2">Recetas</h1>
      <div class="enlinea">
        <img src="{{asset($content->img2)}}" alt="">
      </div>
      <div class="asesorias">
        <img src="{{asset($content->img3)}}" alt="" data-toggle="modal" data-target=".bs-example-modal-lg" aria-hidden="true">
      </div>           
    </div>
@endforeach

<div class="container-full pt30" style="background-color: #F2F2F2">
  <div class="container redux">
    <div class="col-md-8">
      <h5>ETIQUETAS</h5><br>
      <span class="etiqueta showet" data="0" style="background-color: #fff; cursor: pointer;">TODOS</span>
      @php
          $etiquets = DB::select(DB::raw("SELECT * from etiquetas"));
      @endphp
      @foreach($etiquets as $key => $etiqueta)
          <span class="etiqueta showet" data="{{$etiqueta->id}}" style="background-color: #fff; cursor: pointer;">{{$etiqueta->name}}</span>
      @endforeach
    </div>
    <div class="col-md-4">
      <div class="box-busqueda">
        <input type="" name="" id="inbusqueda" placeholder="BÚSQUEDA RÁPIDA"><img src="{{asset('img/lupa.png')}}" class="busq ml20" style="cursor: pointer;">
      </div>
    </div>
  </div>

  <div class="container redux mt80 pb80">  
{{--       <div class="col-xs-12">
          @include('partials/resetas', [
          'resetas' => $resetas    
          ])   
      </div> --}}  
            <div class="col-xs-12 text-center pt100 pb100" id="loader">       
              <img src="{{ asset("img/loading.gif") }}" style="width: 200px; height:auto; ">
            </div>
            <div class="col-xs-12 product-list" id="productlist"></div>
  </div>
</div>


<script>
  window.NAME = 0;  
  window.ETIQUETAS = 0;  

  $( ".showet" ).click(function() {
    window.NAME = 0;
    $('#inbusqueda').val('');
    var select =  $(this);
    window.ETIQUETAS = select.attr("data");       
    $( ".showet" ).each(function() {
        $( this ).removeClass( "Currentet" );
    }); 
    $( this ).addClass( "Currentet" );    
    showresetas();
  });

  $( ".busq" ).click(function() { 
    window.NAME = 1;
    showresetas();
  });   

  function showresetas(){
    $.ajax({
      headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
       type: "POST",
       url: '{{url('/')}}/resetas/'+window.NAME+"/"+window.ETIQUETAS,
       data: {name: $('#inbusqueda').val()},
       beforeSend: function() {               
         $('#productlist').hide();
         $('#loader').show();          
       },
       complete: function(){
         $('#loader').hide();
         $('#productlist').show();
       },
       success: function( msg ) {                   
        $("#productlist").html(msg);                    
       }
    });
  }


  $( document ).ready(function() {
            
      showresetas();  

  });


</script>


@stop