@extends('layouts.app')



@section('seoheader')



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

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



    <script type="text/javascript">

      /*(function (s, y, n, di, go) {

        di = s.createElement(y);

        di.type = 'text/java'+y;

        di.async = true;

        di.src = n + Math.floor(Date.now() / 86400000);

        go = s.getElementsByTagName(y)[0];

        go.parentNode.insertBefore(di,go);

      }(document,'script', "https://content.syndigo.com/site/a622adff-2505-abda-969d-91ed8640af0d/tag.js?cv="));*/

    </script>



     <script type="text/javascript">

        /*window.SYNDI = window.SYNDI || [];

        SYNDI.push({!! json_encode($product->prod_min_cod) !!});*/

    </script>



@endsection



@section('plusblade')

    @include('utils.modals')

@endsection



@section('content')



    @include('utils.preloader')



    @include('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('catalogo') }}">Catálogo</a></li>

                    <li class="breadcrumb-item">

                        <a href="{{ route('catalogo', ['categoria' => $product->menu->name ?? '', 'c' => $product->menu->id_web_menu  ?? '']) }}">

                            {{ $product->menu->name  ?? ''}}

                        </a>

                    </li>

                    <li class="breadcrumb-item">

                        <a href="{{ route('catalogo', ['qcategoria' => $product->category->cat_description ?? '', 'sc' => $product->category->id_categories  ?? '']) }}">

                            {{ $product->category->cat_description  ?? ''}}

                        </a>

                    </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>

                        @if ($product->descuent && !Request::query('rmt'))

                            @if ($product->descuent->show_view == 1)

                            <span class="ofert-product">

                                ¡Ahorra!<br>

                                @if ($product->descuent->affect_price == 0)

                                    ${{ number_format(($product->descuent->amount - $product->price), 2) }}

                                @else

                                    ${{ number_format(($product->price - $product->descuent->amount), 2) }}

                                @endif

                            </span>

                            @elseif ($product->descuent->show_view == 2)

                                <span class="ofert-product">

                                    -{{ ($product->descuent->porcent) }}%

                                </span>

                            @endif

                        @endif

                    </div>

                </div>

                <div class="col-lg-6">

                    <div class="single-product-content">

                        <div class="row">

                            <div class="col-md-12">

                                <h1 class="product-title">{{ $product->prod_description }}</h1>

                            </div>

                            <div class="col-md-6">

                                <div class="row">

                                    <a class="col-md-4" target="_blank" href="{{ route('catalogo', ['marca' => $product->brand->b_description]) }}">

                                        <img class="img-fluid border-1 border shadow-sm" src="{{ $product->brand->b_url }}" width="150" alt="{{ $product->brand->b_description }}">

                                    </a>

                                    <div class="product-detail col-md-8">

                                        <span>MINICÓDIGO: {{ $product->prod_min_cod }}</span> <br>

                                        <span>PN: {{ $product->prod_code ?? '' }}</span> <br>

                                        <span>STOCK: {{ ($product->stock > 9) ? '+10' : $product->stock }}</span> <br>

                                        <a href="{{ route('catalogo', ['marca' => $product->brand->b_description]) }}">VER MÁS DE ESTA MARCA <i class="fa fa-chevron-right"></i></a> <br>

                                    </div>

                                    <div class="col-md-12">

                                        <btns-rating-stars-component product_id="{{ $product->id_products }}" rating="{{ $product->average_rate }}"></btns-rating-stars-component>

                                    </div>

                                    <div class="col-md-12">

                                        @foreach ($similars as $s)

                                            <h6>{{ $s->feature->name. ':' ?? '' }}</h6>

                                            <div class="prod-similars">

                                                @foreach ($s->relations as $p)

                                                    <a href="{{ route('productsingle', [ $p->product->slug ]) }}" title="{{ $p->content }}">

                                                        <img src="{{ $p->product->image }}" width="78px" alt="{{ $p->product->prod_description }}">

                                                        <span class="title">{{ $p->content }}</span>

                                                        <span class="price">${{ number_format($p->product->price, 2) }}</span>

                                                    </a>

                                                @endforeach

                                            </div>

                                        @endforeach

                                    </div>

                                    <div class="col-md-10 detail-short-custom hide-mobile">

                                        {!! $product->detail->description !!}

                                    </div>

                                    <div class="col-md-12">

                                        @if (Request::query('rmt') && !is_null($product->liquidation))

                                            <div class="bg-warning border-1 p-3">

                                                <b>Nota:</b> <br>

                                                {!! $product->liquidation->description !!}

                                            </div>

                                        @endif

                                    </div>

                                    {{-- <div class="col-md-12">

                                        <div class="product-wishlist-compare">

                                            Más información :

                                            <div class="btn-group-impacto-light-outline mb-3">

                                                <a data-toggle="modal" data-target="#ModalInfoCompraAsesor"> Compra con un asesor </a>

                                                <a data-toggle="modal" data-target="#ModalInfoDeliveryLima"> Delivery Lima </a>

                                                <a data-toggle="modal" data-target="#ModalInfoEnvioProvincia"> Envío a Provincia </a>

                                                <a data-toggle="modal" data-target="#ModalInfoModalidadPago"> Modalidades de Pago </a>

                                                <a data-toggle="modal" data-target="#ModalInfoProcesoCompra"> Proceso de Compra </a>

                                                <a data-toggle="modal" data-target="#ModalInfoRecojoAlmacen"> Recojo en Almacén </a>

                                            </div>

                                        </div>

                                    </div> --}}



                                </div>

                            </div>

                            <div class="col-md-6">

                                <div class="row">

                                    <div class="col-md-12">

                                        @if ($product->stock > 0)

                                            @if ($product->descuent && !Request::query('rmt'))

                                                <div class="container-countdown-2">

                                                    <div class="mx-auto d-flex">

                                                        <span class="title sc-title-{{ $product->id_products }}">La oferta termina en </span>

                                                        <div class="simply-countdown simply-countdown-{{ $product->id_products }}"

                                                            data-id="{{ $product->id_products }}"

                                                            data-date="{{ date('d-m-Y', strtotime($product->descuent->date_end)) }}"

                                                            data-time="{{ date('H:i', strtotime($product->descuent->date_end)) }}">

                                                            <span class="day"><span class="num"></span><span class="word"></span></span>

                                                            <span class="hour"><span class="num"></span><span class="word"></span></span>

                                                            <span class="min"><span class="num"></span><span class="word"></span></span>

                                                            <span class="sec"><span class="num"></span><span class="word"></span></span>

                                                        </div>

                                                    </div>

                                                </div>

                                            @endif

                                            <div class="product-price">

                                                <div class="h5">Pagando con Efectivo</div>

                                                @php

                                                    $price = $product->price;

                                                    $price2 = 0;

                                                    $price3 = $product->price_increment;

                                                    if ($product->descuent) {

                                                        $price = ($product->descuent->affect_price == 0) ? $product->price : $product->descuent->amount;

                                                        $price2 = ($product->descuent->affect_price == 0) ? $product->descuent->amount : $product->price;

                                                        $price3 = ($product->descuent->affect_price == 0) ? $price3 : ($product->descuent->amount + (($product->descuent->amount * $configGeneral->targetprice))) ;

                                                    }

                                                    if (request('rmt') && !is_null($product->liquidation)) {

                                                        $price = $product->liquidation->price;

                                                        $price2 = $product->price;

                                                        $price3 = $product->liquidation->price + ($product->liquidation->price * $configGeneral->targetprice);

                                                    }

                                                @endphp

                                                <span class="regular-price">

                                                    ${{ number_format($price, 2, '.', ' ') }} -

                                                    S/{{ number_format(($price * $configGeneral->cambio), 2, '.', ' ') }}

                                                </span>

                                                @if ($price2 > 0)

                                                    <span class="regular-price-2">antes <span>${{ number_format(($price2), 2) }}</span>

                                                @endif

                                            </div>

                                            <div class="product-price">

                                                <h5>Pagando con Tarjeta (+{{ $configGeneral->targetprice * 100 }}%)</h5>

                                                <span class="regular-price-3">

                                                    ${{ number_format($price3, 2, '.', ' ') }} -

                                                    S/{{ number_format(($price3 * $configGeneral->cambio), 2, '.', ' ') }}

                                                </span>

                                            </div>

                                            <div class="product-basic-info">

                                                <h5>El precio incluye IGV.</h5>

                                            </div>

                                            @if (!Request::query('rmt') || is_null($product->liquidation))

                                                <div class="addcart">

                                                    <product-single-btn-buy-now-component :product="{{ $product }}"></product-single-btn-buy-now-component>

                                                </div>

                                            @endif

                                        @else

                                            <h2 class="text-muted">No hay Stock disponible u.u</h2>

                                        @endif

                                    </div>

                                    <div class="col-md-7 my-2">

                                        <div class="section-socials">

                                            <a class="whatsapp" href="{{ route('wsprdm', ['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="col-md-10 container-ofert hide-mobile">

                                        <category-product-ofert-component :category_id="{{ $product->id_categories ?? 0 }}"></category-product-ofert-component>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </section>

    @if (count($products_relations) > 5 )
        @include('layouts.line_products', [
            'title' =>'Productos que te pueden interesar',
            'title_url' => '',
            'products' => $products_relations
        ])
    @endif

    @if (count($products_brands) > 5 )
        @include('layouts.line_products', [
            'title' =>'Productos relacionados con la marca',
            'title_url' => '',
            'products' => $products_brands
        ])
    @endif

    @if (count($products_comparisons) >= 1 && !is_null($product->detail->details))
        @include('layouts.products_comparation')
    @endif

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


    @if ($product->detail->html != null && $product->detail->html != '')
        <div class="container-fluid custom-container">
            <h3 class="text-impacto font-weight-bold">Descripción del Producto</h3>
            <div>{!! $product->detail->html ?? 'Cargando...'  !!}</div>
        </div>
    @endif

    @if ($product->detail->specifications != null && $product->detail->specifications != '')
        <div class="container-fluid custom-container">
            <h3 class="text-impacto font-weight-bold">Descripción del Producto</h3>
            <div>{!! $product->detail->specifications ?? 'Cargando...'  !!}</div>
        </div>
    @endif

    <div class="container-fluid custom-container my-3">
        <div class="row">
            <div class="col-md-6">
                <h3 class="text-impacto font-weight-bold">Especificaciones técnicas:</h3>
                    <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>
            </div>
            <div class="col-md-6">
                <div class="container-fluid custom-container">
                    {{-- <div class="fb-comments" data-href="{{ Request::url() }}" data-width="100%" data-height="100%" data-numposts="5"></div> --}}
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div id="syndi_inline"></div>
    </div>

    @include('layouts.newsletter')
    @include('layouts.footer')
    @include('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 src="{{ asset('js/plugins/jquery.barrating.min.js') }}"></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