@extends('corporative.layouts.app')

@section('seoheader')

    {!! $seo ?? '' !!}

    <link rel="stylesheet" href="{{ secure_asset('css/plugins/youtubegallerywall.css') }}">

@endsection

@section('plusblade')
    @include('utils.modals')
@endsection

@section('content')

    @include('utils.preloader')

    @include('corporative.layouts.header')

    <div class="breadcrumb-area mb-4">
        <div class="container-fluid custom-container">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('web') }}">Inicio</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('c.corporativo') }}">Corporativo</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('c.shop') }}">Catálogo</a></li>
                    <li class="breadcrumb-item">
                        <a href="{{ route('c.shop', ['categoria' => $product->menu->name2, 'c' => $product->menu->id_web_menu]) }}">
                            {{ $product->menu->name2  ?? ''}}
                        </a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{{ route('c.shop', ['qcategoria' => $product->category->name2, 'sc' => $product->id_categories]) }}">
                            {{ $product->category->name2  ?? ''}}
                        </a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{{ route('c.shop', ['qcategoria' => $product->category->name2, 'sc' => $product->id_categories, 'marca' => $product->brand->b_description]) }}">
                            {{ $product->brand->b_description  ?? ''}}
                        </a>
                    </li>
                    <li class="breadcrumb-item active">{{ $product->prod_description }}</li>
                </ol>
            </nav>
        </div>
    </div>

    <section class="single-product-page">
        <div class="container-fluid custom-container">
            <div class="row">
                <div class="col-lg-1 col-md-12">
                    <div class="product-single-thumb-image">
                        <ul class="product-single-thumb">
                            @forelse ($product->images as $g)
                                <li class="single-image">
                                    <img class="img-fluid border-1" src="{{ $g->op2 }}" alt="{{ $product->prod_description }}">
                                </li>
                            @empty
                                <li class="single-image">
                                    <img class="img-fluid border-1" src="{{ $product->prod_photo_one }}" alt="{{ $product->prod_description }}">
                                </li>
                            @endforelse
                        </ul>
                    </div>
                </div>
                <div class="col-lg-5 col-md-12">
                    <div class="single-product-image">
                        <div class="product-single-image">
                            @forelse ($product->images as $g)
                                <a title="Imagen referencial" style="cursor: zoom-in;" class="single-image fancybox-buttons" data-fancybox-group="button" href="{{ $g->resource_multimedias }}">
                                    <figure style="position:relative; display: inline-block;">
                                        <img src="{{ $g->op2 }}" alt="{{ $product->prod_description }}">
                                    </figure>
                                </a>
                            @empty
                                <a title="Imagen referencial"  style="cursor: zoom-in;" class="single-image fancybox-buttons" data-fancybox-group="button" href="{{ $product->prod_photo_two }}">
                                    <figure style="position:relative; display: inline-block;">
                                        <img src="{{ $product->prod_photo_one }}" alt="{{ $product->prod_description }}">
                                    </figure>
                                </a>
                            @endforelse
                        </div>
                        <div style="position:absolute;top:10px;opacity:0.5;color:#888">
                            <i class="fa fa-hand-pointer-o"></i> Imagen Referencial *
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="single-product-content">
                        <h1 class="product-title">{{ $product->prod_description }}</h1>
                        <div class="row mt-4">
                            <a class="col-md-2" target="_blank">
                                <img class="img-fluid border-1 border shadow-sm" src="{{ $product->brand->b_url }}" width="150" alt="{{ $product->brand->b_description }}">
                            </a>
                            <div class="col product-detail">
                                <span>MINICÓDIGO DEL PRODUCTO: {{ $product->prod_min_cod }}</span> <br>
                                <span>SKU: {{ $product->prod_code }}</span> <br>
                                <a>VER MÁS DE ESTA MARCA <i class="fa fa-chevron-right"></i></a> <br>
                            </div>
                        </div>
                        <div class="review-rating d-flex flex-wrap">
                            <ul class="rating">
                                <li class="{{ (isset($product->average_rate) && $product->average_rate < 2) ? '': 'rating-on' }}" ><i class="fas fa-star"></i></li>
                                <li class="{{ (isset($product->average_rate) && $product->average_rate < 3) ? '': 'rating-on' }}"><i class="fas fa-star"></i></li>
                                <li class="{{ (isset($product->average_rate) && $product->average_rate < 4) ? '': 'rating-on' }}"><i class="fas fa-star"></i></li>
                                <li class="{{ (isset($product->average_rate) && $product->average_rate < 5) ? '': 'rating-on' }}"><i class="fas fa-star"></i></li>
                                <li class="{{ (isset($product->average_rate) && $product->average_rate < 6) ? '': 'rating-on' }}"><i class="fas fa-star"></i></li>
                            </ul>
                        </div>

                        {{-- price --}}
                        <div class="mt-3">
                            {!! $product->detail->description !!}
                        </div>

                        <div class="my-3">
                            Más asesoria en:
                            <div class="section-socials">
                                <a class="whatsapp" href="{{ route('cwsprdm', ['t' => 'producto', 'c' => $product->id_products]) }}" target="_blank">
                                    <div class="icon"><i class="fab fa-whatsapp"></i></div>
                                    <div class="text">Compra vía WhatsApp</div>
                                </a>
                            </div>
                        </div>
                        <div class="reassurance-block p-3">
                            <div class="row">
                                <div class="col-sm-4">
                                    <div class="single-reassurance d-flex">
                                        <div class="reassurance-icon">
                                            <img class="" src="https://www.impacto.com.pe/storage/resource_multimedia/icon-1.png" alt="icon">
                                        </div>
                                        <div class="reassurance media-body">
                                            <span>Política de Seguridad</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="single-reassurance d-flex">
                                        <div class="reassurance-icon">
                                            <img class="" src="https://www.impacto.com.pe/storage/resource_multimedia/icon-2.png" alt="icon">
                                        </div>
                                        <div class="reassurance media-body">
                                            <span>Política de Entrega</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="single-reassurance d-flex">
                                        <div class="reassurance-icon">
                                            <img class="" src="https://www.impacto.com.pe/storage/resource_multimedia/icon-3.png" alt="icon">
                                        </div>
                                        <div class="reassurance media-body">
                                            <span>Política de Devolución</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @if (count($relations) > 0 )
        <section class="product-area">
            <div class="container-fluid custom-container">
                <div class="row justify-content-center">
                    <div class="col-lg-12">
                        <div class="text-left">
                            <h2 class="title border-bottom">
                                <p class="font-weight-bold"><a class="float-right text-impacto mt-4">ver todo <i class="fal fa-chevron-right"></i></a></p>
                                <a class="text-impacto font-weight-bold p-2 text-decoration-none">Productos que te pueden interesar</a>
                            </h2>
                        </div>
                    </div>
                </div>
                <div class="product-items">
                    <div class="row {{ (count($relations) < 5) ? '' : 'product-active'}}">
                        @foreach ($relations as $prod)
                            <div class="col-lg-2 py-2">
                                @include('corporative.components.product_item_list', ['product' => $prod])
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>

    @endif

    @if (count($product->reviews))
        @include('layouts.product_reviews_line', ['reviews' => $product->reviews])
    @endif

    <div class="container-fluid custom-container my-3">
        <h3 class="text-impacto font-weight-bold">Descripción del Producto</h3>
        <div>{!! $product->detail->html ?? 'Cargando...'  !!}</div>
    </div>
    <div class="container-fluid custom-container my-3">
        <h3 class="text-impacto font-weight-bold">Especificaciones técnicas:</h3>
        @if (!is_null($product->detail->details) && is_null($product->detail->specifications))
            <div class="table-responsive">
                <table class="table">
                    <tbody>
                        @php
                            $detail = explode('<line>', $product->detail->details)
                        @endphp
                        @for ($i = 0; $i < count($detail); $i++)
                            @php
                                $dd = $detail[$i] ?? '';
                                if (!strpos($dd, '<separator>')) {
                                    $dd .= '<separator>'. $dd;
                                }
                                $parts = explode('<separator>', $detail[$i]);
                            @endphp
                            <tr>
                                <td class="p-2"><b> {{ $standard_subcategory[$i]->content ?? 'N/D' }}: </b></td>
                                <td>{{ $parts[1] ?? $parts[0] }}</td>
                            </tr>
                        @endfor
                    </tbody>
                </table>
            </div>
        @else
            <div>{!! $product->detail->specifications ?? 'Cargando...'  !!}</div>
        @endif
    </div>

    @include('layouts.newsletter')

    @include('layouts.footer')

    @include('corporative.utils.backtop')

@endsection

@section('link_scripts_custom')
    <script type="text/javascript" src="{{ secure_asset('js/plugins/zoombeta/jquery.mousewheel.pack.js?v=3.1.3') }}"></script>
	<script type="text/javascript" src="{{ secure_asset('js/plugins/zoombeta/jquery.fancybox.pack.js?v=2.1.5') }}"></script>
	<link rel="stylesheet" type="text/css" href="{{ secure_asset('js/plugins/zoombeta/jquery.fancybox.css?v=2.1.5') }}" media="screen" />
    <link rel="stylesheet" type="text/css" href="{{ secure_asset('js/plugins/zoombeta/helpers/jquery.fancybox-thumbs.css?v=1.0.7')}}" />
    <script type="text/javascript" src="{{ secure_asset('js/plugins/zoombeta/helpers/jquery.fancybox-thumbs.js?v=1.0.7')}}"></script>

    <script type="text/javascript" src="{{ secure_asset('js/plugins/youtubegallerywall.js')}}"></script>
@endsection

@section('scripts_custom')
    <script>
        $('.fancybox').fancybox();

        $('.fancybox-buttons').fancybox({
            openEffect  : 'fade',
            closeEffect : 'fade',
            padding : 0,
            margin: 0,
            autoSize : true,
            prevEffect : 'fade',
            nextEffect : 'fade',
            closeBtn  : true,
            helpers : {
                title : {
                    type : 'over',
                },
                thumbs : {
                    width  : 50,
                    height : 50
                }
            },
            afterLoad : function() {
                this.title = (this.title ? '' + this.title : '');
            }
        });

        $('.review-list-videos').youtubegallery();
    </script>
@endsection