@extends('layouts.portal')

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

@section('metas')
    <!-- Open Graph para Facebook -->
    <meta property="og:title" content="{{$cat->name}}" />
    <meta property="og:type" content="page" />
    <meta property="og:url" content="{{ url()->current() }}" />
    <meta property="og:image" content="{{Voyager::image($cat->banner)}}" />
    <meta property="og:description" content="{{strip_tags($cat->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="{{$cat->name}}">
    <meta name="twitter:description" content="{{strip_tags($cat->description)}}">
    <meta name="twitter:creator" content="@IngenesisCol">
    <meta name="twitter:image:src" content="{{Voyager::image($cat->banner)}}">
@endsection
 
@section('content')
<div class="about_content pt-0">

    <!-- Imagen de colección -->
    @if($cat->image)
    <div class="banner-section" style="background-image: url('{{Voyager::image($cat->banner)}}');">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center text-lg-right">
                    <div class="banner-content-wrapper pt-15 pb-15">
                        <h1 class="uppercase weight-700 text-white pr-3 mb-0 spacing-5" style="margin-bottom:-20px!important;">{{$label->traducir('label_title_collection')->name}}</h1>
                        <img src="{{Voyager::image($cat->image)}}" width="300">
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- descripción de colección -->
    @if($cat->description)
    <div class="lastest_arrivals">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="banner-content-wrapper pt-15 pb-15">
                        {!!$cat->description!!}
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- Productos de colección -->
    <div class="col-12 product-listing-products">
        <div class="container">
            <div class="product-list row items-center">

                @foreach ($product->productos($cat->id) as $prod)
                    <div class="col-12 col-md-6 col-lg-3 manage-color-hover wow fadeInLeft" data-wow-delay=".2s">
                        <div class="product-item lastest_arrivals mb-4">

                            @php $images = json_decode($prod->image); $image = explode(".",$images[0]); @endphp
                            <div class="lastest_arrival_items item">
                                <div class="card">
                                    <a href="{{route('pageSubCategory',['producto',$sect->familia($prod->id)->slug,$prod->slug])}}" rel="noopener">
                                        <span class="video" style="top:80%">
                                            <h3 class="uppercase weight-700 text-shadow-5">{{$prod->name}}</h3>
                                            <!--<img src="{{asset('img/icons/plus.svg')}}" style="width:40px; opacity:0.7;">-->
                                        </span>
                                    </a>
                                    <div class="image-holder" style="height:320px;">
                                        <a href="{{route('pageSubCategory',['producto',$sect->familia($prod->id)->slug,$prod->slug])}}" rel="noopener">
                                            <img src="{{url('storage/'.$image[0].'-fullsize.'.$image[1])}}" alt="{{ $prod->name }}" width="1244" height="954" alt="{{ $prod->name }}" class="rounded">
                                        </a>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>


    <!-- Banners de colección -->
    <div class="lastest_arrivals">
            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="6000">
                <ol class="carousel-indicators justify-right">@php $i = 0; @endphp
                    @foreach($product->banners($cat->id) as $j => $prod)
                    @if($prod->background_image)
                    @php $images = json_decode($prod->background_image); @endphp
                    @foreach($images as $k => $image)
                        <li @if($i==0)class="active"@endif data-target="#carouselExampleIndicators" data-slide-to="{{$i}}">&nbsp;</li>@php $i++; @endphp
                    @endforeach @endif
                    @endforeach
                </ol>
                <div class="carousel-inner">@php $i = 0; @endphp
                    @foreach($product->banners($cat->id) as $j => $prod)
                    @if($prod->background_image)
                    @php $images = json_decode($prod->background_image); @endphp
                    @foreach($images as $k => $image)
                        <div class="carousel-item @if($i==0)active @endif" style="background: url('{{Voyager::image($image)}}') center center;height:700px;background-size:cover;">
                            <div class="carousel-caption text-center text-lg-left" style="margin-top:150px;">
                                <img src="{{Voyager::image($prod->logo)}}" width="300">
                            </div>
                            <div class="overlay-carrousel"></div>
                        </div>
                        @php $i++; @endphp
                    @endforeach @endif
                    @endforeach
                </div>
                <a class="carousel-control-prev" role="button" href="#carouselExampleIndicators" data-slide="prev">
                    <img src="https://primadera.inggen.com/img/left_arrow.svg" width="22"><span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" role="button" href="#carouselExampleIndicators" data-slide="next">
                    <img src="https://primadera.inggen.com/img/right_arrow.svg" width="22"><span class="sr-only">Next</span>
                </a>
            </div>

            <!--<div class="container p-5 bg-cream">
                <div class="row">
                    <div class="col-md-12">
                        {!!$product->datos($product->id)->description!!}
                    </div>
                </div>
            </div>-->
    </div>



    <div class="col-md-12 mb-4 mt-5 text-center">
        <a class="btn white-btn-with-border rounded uppercase" href="{{route('productos')}}">{{$label->traducir('label_button_see_complete_catalog')->name}}</a>
    </div>

</div>

<!-- habla con nosotros  -->
{!!$product->ver_seccion('23')->content!!}

@endsection


@section('js')
    <script>

        $(function () {$('[data-toggle="tooltip"]').tooltip()})
            
        function open_link(url){
            window.open(url,"_self");
        }

        var swiper = new Swiper(".mySwiper", {
            spaceBetween: 10,
            slidesPerView: 4,
            freeMode: true,
            watchSlidesVisibility: true,
            watchSlidesProgress: true,
        });
        var swiper2 = new Swiper(".mySwiper2", {
            spaceBetween: 10,
            navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
            },
            thumbs: {
            swiper: swiper,
            },
        });
    </script>
@endsection