@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="{{$product->name}}" />
    <meta property="og:type" content="product" />
    <meta property="og:url" content="{{ url()->current() }}" />
    <meta property="og:image" content="{{Voyager::image($product->background_image)}}" />
    <meta property="og:description" content="{{strip_tags($product->intro)}}" />
    <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="{{$product->name}}">
    <meta name="twitter:description" content="{{strip_tags($product->intro)}}">
    <meta name="twitter:creator" content="@IngenesisCol">
    <meta name="twitter:image:src" content="{{Voyager::image($product->background_image)}}">
@endsection
 
@section('content')
<div class="about_content pt-5">
    <div class="container">
        <div class="row">
            <div class="col-12">

                <div class="product-body">
                    
                    <div class="pro-detail-sec row">
                        <div class="col-12">
                            <h4 class="pro-heading text-center text-lg-left">{{$label->traducir('label_products_title_catalog')->name}}</h4>
                        </div>
                    </div>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb text-center text-lg-left">
                            <li class="breadcrumb-item"><a href="#" onclick="open_link('{{route('pageCategory',['productos',$cat])}}')">{{ucfirst(strtolower($cat))}}</a></li>
                            <li class="breadcrumb-item" aria-current="page"><a href="#" onclick="open_link('{{route('pageSubCategory',['productos',$cat,$product->categoria($product->collection_id)->slug])}}')">{{$product->categoria($product->collection_id)->name}}</a></li>
                            <li class="breadcrumb-item">{{$product->diseno($product->design_id)->name}}</li>
                        </ol>
                    </nav>
                    <div class="row product-list">

                        <div class="col-12 col-lg-5 product-detail-slider">

                            <div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper-container mySwiper2">
                                <div class="swiper-wrapper">

                                    @php $images = json_decode($product->image); @endphp
                                    @foreach($images as $image)
                                        @php $image = explode(".",$image);@endphp
                                        <div class="swiper-slide">
                                            <a href="{{url('storage/'.$image[0].'-fullsize.'.$image[1])}}" data-fancybox="1" title="Zoom In">
                                                <img class="myimage"  src="{{url('storage/'.$image[0].'-fullsize.'.$image[1])}}" alt="{{$product->intro}}" title="{{$product->name}}"/>
                                            </a>
                                        </div>
                                    @endforeach

                                </div>
                                <div class="swiper-button-next"></div>
                                <div class="swiper-button-prev"></div>
                            </div>
                            <div thumbsSlider="" class="swiper-container mySwiper mt-3 mb-5">
                                <div class="swiper-wrapper">

                                    @foreach($images as $image)
                                        @php $image = explode(".",$image);@endphp
                                        <div class="swiper-slide">
                                            <img src="{{url('storage/'.$image[0].'-fullsize.'.$image[1])}}"/>
                                        </div>
                                    @endforeach

                                </div>
                            </div>

                        </div>

                        <div class="col-12 col-lg-7 text-center text-lg-left">
                            <div class="product-single-price">
                                <h2 class="pro-heading text-center text-lg-left uppercase">{{$product->name}}</h2>
                                <h4><span class="real-price">{{$label->traducir('label_products_collection')->name}} {{$product->categoria($product->collection_id)->name}}</span></h4>
                                <hr style="border: solid 1px #D9D9D9;">
                                <p class="pro-description">{{$product->datos($product->id)->intro}}</p>
                            </div>

                            <div class="row mb-3">
                                <div class="col-xs-6 col-md-3 col-lg-3">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <h6 class="pb-2 uppercase weight-700">{{$label->traducir('label_products_subtitle_finish')->name}}</h6>
                                        </div>
                                    </div>
                                    <div class="row justify-center">
                                        @foreach($product->acabados($product->id) as $application)
                                            <div class="col-md-12">
                                                <img src="{{Voyager::image($application->image)}}" width="40"> {{$application->name}}
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                                <div class="col-xs-6 col-md-3 col-lg-3">
                                    <h6 class="pb-2 uppercase weight-700">{{$label->traducir('label_products_subtitle_format')->name}}</h6>
                                    <ul>
                                        @foreach($product->formatos($product->id) as $format)
                                            <li>{{$format->name}}</li>
                                        @endforeach
                                    </ul>
                                </div>
                                <div class="col-xs-6 col-md-3 col-lg-3">
                                    <h6 class="pb-2 uppercase weight-700">{{$label->traducir('label_products_subtitle_thickness')->name}}</h6>
                                    <div class="row">
                                        @foreach($product->espesores($product->id) as $thickness)
                                            <div class="col-md-6">
                                                <span>{{$thickness->name}}</span>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                                <div class="col-xs-6 col-md-3 col-lg-3">
                                    <h6 class="pb-2 uppercase weight-700">{{$label->traducir('label_products_subtitle_substratum')->name}}</h6>
                                    <ul>
                                        @foreach($product->sustratos($product->id) as $substract)
                                            <li>{{$substract->name}}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>

                        @if($product->has_finish_info)
                            <div class="mb-3">
                                <p><small>{{$label->traducir('label_products_note_finishes')->name}}</small></p>
                            </div>
                        @endif

                            <div class="mb-3">
                                @if($product->tech_info <> "[]")
                                    @php $new_file = json_decode($product->tech_info)[0]; @endphp
                                    <a target="_blank" href="{{asset('storage/'.$new_file->download_link)}}" class="btn white-btn-with-border rounded mb-3 mr-3">{{$label->traducir('label_products_btn_download_tech_sheet')->name}}</a>
                                @endif
                                @if($product->texture)
                                    <a target="_blank" href="{{asset('storage/'.$product->texture)}}" download class="btn white-btn-with-border rounded mb-3">{{$label->traducir('label_products_btn_download_texture')->name}}</a>
                                @endif
                            </div>

                            <div class="product-checklist">
                                <ul>
                                    @if($product->has_carb2)<li><i class="fas fa-check"></i> {{$label->traducir('label_product_BeLine_available')->name}} <small>({{$label->traducir('label_product_on_request')->name}})</small></li>@endif
                                    @if($product->has_primaforza)<li><i class="fas fa-check"></i> {{$label->traducir('label_product_Primaforza_available')->name}} <small>({{$label->traducir('label_product_on_request')->name}})</small></li>@endif
                                    @if($product->has_primaext)<li><i class="fas fa-check"></i> {{$label->traducir('label_product_Primaext_available')->name}} <small>({{$label->traducir('label_product_on_request')->name}})</small></li>@endif
                                </ul>
                            </div>

                            <div class="dropdown-divider mt-3"></div>

                        @if($product->has_edge_link)
                            <a href="{{url('descargables')}}" class="red-to-black uppercase mb-3">{{$label->traducir('label_products_link_edgebanding')->name}}</a>
                            <div class="dropdown-divider mt-3"></div>
                        @endif

                            @php
                                /*
                                <div class="product-tags-list">
                                    <nav aria-label="breadcrumb">
                                        <ol class="breadcrumb mb-0">
                                            <li class="breadcrumb-item"><span class="d-inline">Categoría: <a href="#">Primacor</a></span></li>
                                            <li class="breadcrumb-item" aria-current="page"><p class="d-inline">Etiquetas: <a href="#">Suesca</a>, <a href="#">Chibcha</a>, <a href="#">Melaminas</a></li>
                                        </ol>
                                    </nav>
                                </div>

                                <div class="share-product-details">
                                    <ul class="share-product-icons">
                                        <li><p>Compartir:</p></li>
                                        <li><a href="https://www.facebook.com/sharer/sharer.php?u={{ url()->current() }}" target="_blank" title="Facebook" class="facebook-bg-hvr"><i class="fab fa-facebook-f" aria-hidden="true"></i></a></li>
                                        <li><a href="https://twitter.com/intent/tweet?text={{ $product->name }}&url={{ url()->current() }}&hashtags={{ $product->intro }}" class="twitter-bg-hvr" target="_blank" title="Twitter"><i class="fab fa-twitter" aria-hidden="true"></i></a> </li>
                                        <li><a href="https://www.linkedin.com/sharing/share-offsite/?url={{ url()->current() }}" target="_blank" title="Linkedin" class="linkedin-bg-hvr"><i class="fab fa-linkedin-in" aria-hidden="true"></i></a></li>
                                        <li><a href="https://co.pinterest.com/pin-builder/?url={{ url()->current() }}&media={{Voyager::image($product->background_image)}}&description={{ $product->name }}&method=button" target="_blank" class="pinterest-bg-hvr"><i class="fab fa-pinterest" aria-hidden="true"></i></a></li>
                                    </ul>
                                </div>*/ 
                            @endphp

                        </div>

                    </div>

                </div>

            </div>
        </div>
    </div>


    <!-- Más Info producto  -->
    @if($product->background_image)

        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="6000">
            @php $images = json_decode($product->background_image); @endphp
            @if(count($images) > 1)
            <ol class="carousel-indicators justify-right">@php $i = 0; @endphp
                @foreach($images as $image)
                    <li @if($i==0)class="active"@endif data-target="#carouselExampleIndicators" data-slide-to="{{$i}}">&nbsp;</li>@php $i++; @endphp
                @endforeach
            </ol>
            @endif
            <div class="carousel-inner">@php $i = 0; @endphp
                @foreach($images as $image)
                    <div class="carousel-item @if($i==0)active @endif" style="background: url('{{Voyager::image($image)}}') center center;height:750px;background-size:cover;">
                        <div class="carousel-caption text-center text-lg-left" style="margin-top:150px;">
                            <img src="{{Voyager::image($product->logo)}}" width="300">
                        </div>
                        <div class="overlay-carrousel" style="opacity: 0.1;"></div>
                    </div>
                    @php $i++; @endphp
                @endforeach
            </div>
            @if(count($images) > 1)
            <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>
            @endif
        </div>


        <!--<div class="product-detail-slider">

            <div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper-container mySwiper2">
                <div class="swiper-wrapper">

                    @php $images = json_decode($product->background_image); @endphp
                    @foreach($images as $image)
                        @php $image = explode(".",$image);@endphp
                        <div class="banner-section parallax-slide swiper-slide" style="background-image: url('{{url('storage/'.$image[0].'.'.$image[1])}}');">
                            <div class="container">
                                <div class="row">
                                    <div class="col-12 col-lg-4 text-left">
                                        <div class="banner-content-wrapper pt-15 pb-15">
                                            <img src="{{Voyager::image($product->logo)}}" width="300">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                    
                </div>
            </div>

        </div>-->

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


     <!-- Especificaciones -->    
     <div class="lastest_arrivals mb-4">
        <div class="container">
            <div class="row">

                <div class="col-12">

                    <div class="accordion" id="specifications_applications">
                        <div class="card">
                            <div class="card-header" id="headingOne">
                                <h2 class="mb-0">
                                    <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                        {{$label->traducir('label_product_accordion_specifications')->name}}
                                    </button>
                                </h2>
                            </div>

                            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#specifications_applications">
                                <div class="card-body">
                                    <div class="row text-center">

                                    @foreach($product->ventajas($product->id) as $advantage)
                                        <div class="col-xs-6 col-md-2 col-sm-4 mb-5">
                                            <img src="{{Voyager::image($advantage->image)}}" class="rounded-circle mb-2" title="{{$advantage->name}}" width="70"><!--data-toggle="tooltip" data-placement="top"-->
                                            <br>
                                            {{$advantage->name}}
                                        </div>
                                    @endforeach

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="headingTwo">
                                <h2 class="mb-0">
                                    <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                        {{$label->traducir('label_product_accordion_applications')->name}}
                                    </button>
                                </h2>
                            </div>
                            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#specifications_applications">
                                <div class="card-body">
                                    <div class="row">

                                    @foreach($product->usos_slug($cat) as $usage)
                                        <div class="col-md-12">
                                            <div class="row mb-5">
                                                <div class="col-md-12">{!!$usage->description!!}</div>
                                            </div>
                                        </div>
                                    @endforeach
                                        
                                        
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                      
                </div>
            </div>
        </div>
    </div>


    <!--Productos de la semana -->
    <div class="lastest_arrivals remove-margins">
        <div class="container">
            <div class="row">
                <div class="col-12 mb-4 text-center">
                    <h1 class="pt-5 spacing-5 text-black uppercase">{{$label->traducir('label_products_title_prod_week')->name}}</h1>
                </div>

                @foreach($product->productos_semana() as $prod)
                    <div class="col-md-6">
                        <div class="lastest_arrival_items item">
                            <div onclick="open_link('{{route('pageSubCategory',['producto',$sect->familia($prod->id)->slug,$prod->slug])}}')" class="card">
                                <div class="image-holder" style="max-height:350px;">
                                    @php $image = explode(".",json_decode($prod->image)[0]); @endphp
                                    <img src="{{url('storage/'.$image[0].'-fullsize.'.$image[1])}}" class="card-img-top" alt="{{$prod->name}}">
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-12 text-center">
                                            <h4 class="card-title spacing-5 weight-700 uppercase">{{$prod->name}}</h4>
                                        </div>
                                        <div class="col-12 text-center spacing-5">
                                            <p style="font-size:20px;">{{$label->traducir('label_products_collection')->name}} {{$product->categoria($prod->collection_id)->name}}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach

            </div>
        </div>
    </div>

</div>
@endsection

@section('before_js')
    <script src="{{asset('assets/vendor/js/popper.min.js')}}"></script>
@endsection

@section('js')
    <script>

        function open_link(url){
            window.open(url,"_self");
        }

        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })

        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