@extends('layouts.portal')

@section('title'){{$page->name}} - @endsection
@section('meta_description'){{strip_tags($page->description)}}@endsection

@section('metas')
    <!-- Open Graph para Facebook -->
    <meta property="og:title" content="{{$page->name}}" />
    <meta property="og:type" content="page" />
    <meta property="og:url" content="{{ url()->current() }}" />
    <meta property="og:image" content="{{Voyager::image($page->banner_image)}}" />
    <meta property="og:description" content="{{strip_tags($page->description)}}" />
    <meta property="og:site_name" content="{{setting('site.title')}}" />
    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="{{'@'.Str::lower(setting('site.title'))}}">
    <meta name="twitter:title" content="{{$page->name}}">
    <meta name="twitter:description" content="{{strip_tags($page->description)}}">
    <meta name="twitter:creator" content="@IngenesisCol">
    <meta name="twitter:image:src" content="{{Voyager::image($page->banner_image)}}">
@endsection

@section('slider')
    <section id="particles-js" class="p-0 position-relative">
        <div class="slider-area" id="slider-area">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-12 text-md-center text-lg-center wow flipInX content-margin" data-wow-duration="1.5s" data-wow-delay="0.2s">
                        <div class="area-heading text-center text-lg-center">
                            <h1 class="text-white font-weight-bold mb-4">{!!$page->banner_text!!}</h1>
                        </div>
                    </div>
                </div>
                <ul class="page-breadcrumb link">
                    <li><a href="./">{{$label->traducir('label_home_page')->name}}</a></li>
                    <li><a href="#">{{$mnuPpalTop->title}}</a></li>
                    <li>{{ucfirst($page->name)}}</li>
                </ul>
            </div>
        </div>
        <canvas class="particles-js-canvas-el" width="2716" height="750" style="width: 100%; height: 100%;"></canvas>
    </section>
@endsection
 
@section('content')
    <div class="product-listing">
        <div class="container">

            <div class="row no-gutters">
    
                <div class="col-12 col-lg-3 sticky">
                    <div id="product-filter-nav" class="product-filter-nav mb-3">
                        
                        <div class="product-category">
                            <h5 class="filter-heading text-center text-lg-left mb-3">categoria titulo</h5>

                            <select id="family" name="family" class="form-control">
                                <option value="" selected>label_products_family</option>
                                    <option value="cat->id">cat->name</option>
                            </select><br><br>

                            <select id="collection" name="collection" class="form-control">
                                <option value="" selected>label_products_collection</option>
                                
                                    <option value="cat->id">cat->name</option>
                         
                            </select><br><br>
    
                           
                                <div>
                                    <input type="checkbox" id="design->id" name="design">
                                    <label for="design->id">design->name</label>
                                </div>
                         
                            
                        </div>
                        
                        <!--<button onclick="carga_contenidos($('#family').val(),$('#collection').val(),$('input:checkbox[name=design]:checked'))" class="btn pink-gradient-btn-into-black mt-1 rounded w-100">{{$label->traducir('btn_filter')->name}}</button>-->
    
                    </div>
                </div>
    
                <div class="col-md-12 col-lg-9 pt-5">
                    <div class="row">
    
                        <!--<div class="col-12 product-listing-heading">
                            <p class="mb-3"></p>
                        </div>-->
    
                        <div class="col-12 product-listing-products">
    
                            <div id="items_loader" class="text-center"><img src="{{asset('img/loader.gif')}}" width="30"></div>

                            <div id="products" class="product-list row"></div>
    
                        </div>
                    </div>
                </div>
    
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $(document).ready(function() {

        });
    </script>
@endsection