@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->banner)
    <div class="banner-section" style="background-image: url('{{Voyager::image($cat->banner)}}');">
        <div class="container">
            <div class="row">
                <div class="col-md-6 text-center text-md-right">
                </div>
                <div class="col-md-6 text-center text-md-left">
                    <div class="banner-content-wrapper pt-10 pb-10">
                        {!!$cat->description!!}
                        <!--<a class="btn white-btn-with-border rounded mb-5" href="http://local.primadera.com/productos/primacor">Ver catálogo</a>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- Contenido familia -->
    @if($cat->content)
    <div class="pt-5 pb-5">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="banner-content-wrapper pt-15 pb-15">
                        {!!$cat->content!!}
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif


    <!-- Especificaciones -->    
    <div class="pt-5 pb-5">
        <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($cat->id) 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>


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

</div>
@endsection

@section('modal')
    <div id="mdl_video" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="position: absolute;top: 10px;right: 18px;z-index: 100;">
            <span aria-hidden="true" style="font-size: 40px;">&times;</span>
            </button>
            <div class="modal-body">
                <div id="mdl_content">
                    <iframe src="" frameborder="0" height="516"></iframe>
                </div>
            </div>
        </div>
        </div>
    </div>
@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,
                },
            });

            $(".ver-video").click(function(e){
                $("#mdl_content>iframe").attr("src",$(this).data('video'));
                $("#mdl_video").modal("show");
                e.preventDefault;
            });

            $("#mdl_video").on("hidden.bs.modal", function () {
                $("#mdl_content>iframe").attr("src","#");
            });
        });
    </script>
@endsection