@extends('esencias.plantilla')
@section('contenido')
<section>
        <div class="row py-5">
            <div class="col-10">
                <h1>Pierdete en el mundo de las terapias<br>naturales, descubre sus propiedades<br>y explora tus emociones.
                </h1>
            </div>
        </div>
        <div class="row">
            <div class="col-8 py-3">
                <p>"En este portal podrás encontrar toda la información
                que necesites acerca de nuestros productos, podés buscar
                por esencias, por sistema florar, o por los síntomas que trata.".</p>
            </div>
        </div>
    </section>
</div>
</div>
<div class="container" class="searchContainer">
    <div class="row py-5">
        <div class="col-md-4 text-center">
            <a class="active" name="hipervinculo" id="hipervinculoIzquierdo" href="/sintomas">POR SINTOMA</a>
        </div>
        <div class="col-md-4 text-center">
            <a class="active" name="hipervinculo" id="hipervinculo" href="/index.php">POR ESENCIA</a>
        </div>
        <div class="col-md-4 text-center">
            <a class="active" name="hipervinculo" id="hipervinculoDerecho" href="/sistemafloral">POR SISTEMA DE ESCENCIAS</a>
        </div>
    </div>
    <div class="row py5">
        <div class="col-md-12">
            <h2 class="tituloNegrita">¿Qu&eacute; sistema floral busc&aacute;s?</h2>
        </div>
    </div>
    <div class="row py6">
        <div class="col-md-12" id="colbuscador">
            <div  id="buscadorCol">
                <i class="fa fa-search"></i>
                <select class=" selectpicker" data-live-search="true">
                    <option value="" select disable>Buscar</option>
                    @foreach (($array_productos_sistemescencias) as $sistemescencias)
                        <option value="{{ $sistemescencias->nombre }}">{{ $sistemescencias->nombre }}</option>  
                    @endforeach
                </select>
                <button name="botonSearch" id="botonSearch"><i class="fa fa-arrow-right"></i></button>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid" id="containerresultados">
    <div class="container">
        <div class="row py-2">
            <div class="col-md-12">
                <h2 id="resultados">Resultados</h2>
            </div>
        </div>
        <div class="row py-3">
            @if($array_productos_sistemescencias)
                @foreach($array_productos_sistemescencias as $sistemescencias)
                <div class="col-md-3 py-2">
                    <div class="card box-shadow">
                        <div class="card-header">
                            <img class="card-img-top" alt="" src="esencias/images/{{$sistemescencias->imagen }}" data-holder-rendered="true">
                        </div>
                        <div class="card-body">
                            <h3>{{$sistemescencias->nombre}}</h3>
                        </div>
                        <div class="card-footer">
                            <div class="col-md-12">
                                <label id="labelTipo"><strong>TIPO</strong>: <span style="color:rgb(216, 208, 208)">sistema floral</span></label>
                            </div>
                            <div class="col-md-12">
                                <button class="btn" id="buttoncardfoooter"  onclick="fAgregarAlCarrito({{ $sistemescencias->idproducto}})">+CARRITO</button>
                                <a type="button" class="btn"  href="/sistemafloral/{{$sistemescencias->idproducto}}" id="buttoncardfoooter">VER</a>  
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            @endif
        </div> 
        <div class="row py-5">
            <div class="offset-sm-3 col-sm-5 col-12">
                    <input type="email" class="form-control" placeholder="email" id="" name="subscripcion">
            </div><div class="col-sm-1 col-12 text-center pt-3 pt-sm-0">
                    <button  class="btn" class="form-control" name="botonsubscripcion" id="botonsubscripcion">SUSCRIBETE</button>
            </div>
        </div>
    </div>
</div>
<script>
    function fAgregarAlCarrito(idProducto){
        $.ajax({
            type: "GET",
            url: "{{ asset('/escencia/carrito') }}",
            data: { id:idProducto },
            async: true,
            dataType: "json",
            success: function (respuesta) {
                if (respuesta.err = "0") {
                    $("#cantidadDeProductos").html(respuesta.cantidad);
                } else {
                    alert("Error");
                }
            }
        });   
    }
</script> 
@endsection