@extends('frontend.layouts.mobile')
@php
    $title = trim($data['product']->meta_title);
    if($title == null || $title == 'NULL')
        $title = $data['product']->name . ' - ' . app_name();
    if($data['product']->do_index == 'N' || $data['product']->status == 'N')
        $no_index = 'NOINDEX';  
@endphp
@section('title', $title)
@if(trim($data['product']->meta_keywords) != null || trim($data['product']->competitor_skus) != null)
    @section('meta_keywords', $data['product']->meta_keywords . ', ' . $data['product']->competitor_skus)
@endif
@if(trim($data['product']->meta_description) != null)
    @section('meta_description', $data['product']->meta_description)
@endif
@if($data['product']->is_canonical == 'Y')
    @php
        if($data['product']->canonical_url != '')
            $url = $data['product']->canonical_url;
        else
            $url = URL::to( '/' . $data['product']->slug);
    @endphp
@else
    @php
        $url = URL::current();
    @endphp
@endif
@push('head-area')
    <link rel="canonical" href="{{ $url }}" />
    @if(isset($no_index))
        <META NAME="ROBOTS" CONTENT="{{ $no_index }}">
    @endif
@endpush
@php
    $videos = [];
    if($data['product']->video_id > 0)
    {
        $videos[$data['product']->video_id] = $data['product']->video;
    }
    if($data['product']->video_id2 > 0)
    {
        $videos[$data['product']->video_id2] = $data['product']->video2;
    }
    if($data['product']->video_id3 > 0)
    {
        $videos[$data['product']->video_id3] = $data['product']->video3;
    }

    $set_items = [];

    $set_products = \App\Models\Product::printSetProducts($data['product'], 'mobile');
    if(trim($set_products) != null)
        $set_items[$data['product']->id] = $set_products;
@endphp
@section('content')

<!-- ...:::Start Product Single Section:::... -->
<div class="product-single-section section-gap-top-30">
        <div class="container">
            <div class="product-gallery-image">
                <!-- Slider main container -->
                <div class="swiper">
                    <!-- Additional required wrapper -->
                    <div class="swiper-wrapper">
                        <!-- Slides -->

                        {{-- Start Primary Image --}}
                        @if(trim($data['product']->image) != '')
                            <div class="swiper-slide product-slider-images">
                                <div class="product-gallery-single-item">
                                    <div class="image">
                                        <img class="img-fluid" src="up_data/products/images/medium/{{ $data['product']->image }}" alt="{{ $data['product']->name }}">
                                    </div>
                                </div>
                            </div>
                        @else
                            <div class="swiper-slide product-slider-images">
                                <div class="product-gallery-single-item">
                                    <div class="image">
                                        <img class="img-fluid" src="up_data/na.jpg" alt="{{ $data['product']->name }}">
                                    </div>
                                </div>
                            </div>
                        @endif
                        {{-- End Primary Image --}}

                        {{-- Start Seconday Primary Image --}}
                        @if($data['images']->count() > 1 || $data['sub_products']->count() > 0)
                            @foreach($data['images'] as $image)
                                @if($image->name != '')                                    
                                    <div class="swiper-slide product-slider-images">
                                        <div class="product-gallery-single-item">
                                            <div class="image">
                                                <img class="img-fluid" src="up_data/products/images/medium/{{ $image->name }}" alt="{{ $data['product']->name }}">
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        @endif
                        {{-- End Seconday Primary Image --}}

                        {{-- Start Sub Products and Their Images --}}
                        @foreach($data['sub_products'] as $sub_product)
                            @php
                                $sp_images = $sub_product->files()->where('type', 'images')->get();
                            @endphp
                            @foreach($sp_images as $image)
                                @if($image)
                                    <div class="swiper-slide product-slider-images sub-prd-imgs-{{ $sub_product->id }}">
                                        <div class="product-gallery-single-item">
                                            <div class="image">
                                                <img class="img-fluid" src="up_data/products/images/medium/{{ $image->name }}" alt="{{ $sub_product->name }}">
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            @endforeach

                            @php
                                if($sub_product->video_id > 0)
                                {
                                    $videos[$sub_product->video_id] = $sub_product->video;
                                }
                                if($sub_product->video_id2 > 0)
                                {
                                    $videos[$sub_product->video_id2] = $sub_product->video2;
                                }
                                if($sub_product->video_id3 > 0)
                                {
                                    $videos[$sub_product->video_id3] = $sub_product->video3;
                                }

                                $set_products = \App\Models\Product::printSetProducts($sub_product, 'mobile');
                                if(trim($set_products) != null)
                                    $set_items[$sub_product->id] = $set_products;
                            @endphp

                        @endforeach
                        {{-- End Sub Products and Their Images --}}
                        
                    </div>
                </div>
                <!-- If we need pagination -->
                <div class="swiper-pagination"></div>
                {{-- <div class="product-tag">
                    <span class="tag-discount">40% OFF</span>
                    <a href="wishlist.html" aria-label="Wishlist" class="btn btn--size-33-33 btn--center btn--round btn--color-radical-red btn--bg-white btn--box-shadow"><i class="icon icon-carce-heart"></i></a>
                </div> --}}
            </div>

        </div>

        <div class="container px-0">
            <div class="product-gallery-details">

                {{-- Start Product Title --}}
                <h1 class="title product-info sid-heading">{{ $data['product']->name }}</h1>
                @foreach($data['sub_products'] as $sub_product)
                    <h2 class="title product-info d-none sid-{{ $sub_product->id }}">{{ $sub_product->name }}</h2>
                @endforeach
                {{-- End Product Title --}}

                {{-- Start Short Info --}}
                <div class="product-info sid-short">
                    @if(trim($data['product']->short_description) != null)
                        <p class="text">{!! nl2br(strip_tags($data['product']->short_description)) !!}</p>
                    @endif
                </div>
                @foreach($data['sub_products'] as $sub_product)
                    <div class="product-info d-none sid-{{ $sub_product->id }}">
                        @if(trim($sub_product->short_description) != null)
                            <p>
                                {!! nl2br(strip_tags($sub_product->short_description)) !!}
                            </p>
                        @endif
                    </div>
                @endforeach
                {{-- End Short Info --}}

                <form class="frm_add_to_cart" method="post" action="cart">
                        @csrf
                <ul class="product-variable-lists">

                    {{-- Start Product SKUs --}}
                    @if($data['product']->type != 'variation')
                        <li class="list-item">
                            <div class="left">SKU</div>
                            <div class="right">
                                {{ $data['product']->sku }}
                            </div>
                        </li>
                        @php
                            $stock_info = \App\Models\Product::printStockInformation($data['product'], 'mobile');  
                        @endphp
                        
                        {!!  $stock_info['message'] !!}
                    @else
                        @foreach($data['sub_products'] as $sub_product)
                            <li class="product-info d-none li-data li-sid-{{ $sub_product->id }}">
                                <div class="left">SKU</div>
                                <div class="right">
                                    {{ $sub_product->sku }}
                                </div>
                            </li>
                                
                            @php
                                $stock_info = \App\Models\Product::printStockInformation($sub_product, 'mobile');
                            @endphp
                            {!!  $stock_info['message'] !!}
                        @endforeach
                    @endif
                    {{-- End Product SKUs --}}

                    {{-- Start Product Variation Selector --}}
                    @if($data['product']->type == 'variation')
                    <li class="list-item single-form-item">
                        <div class="left">{{ \App\Models\Product::$variation_caption_mobile[$data['product']->variation_select] }}</div>
                        <div class="right">

                            <select style="max-width: 100%; border: 2px solid #e2e7ea;border-radius: 10px;padding: 10px;width: -webkit-fill-available;font-size: 14px;width: 100%;" class="form-control" id="product_id" name="product_id" onchange="setVariation(this.value)">
                                <option value="">Please Select ...</option>
                                @foreach($data['sub_products'] as $sub_product)
                                    @php
                                        $caption = $sub_product->name;
                                        if(trim($sub_product->variation_caption) != null)
                                            $caption = $sub_product->variation_caption; 
                                        $price_info = \App\Models\Product::getPriceText($sub_product, 'detail');          
                                    @endphp
                                    <option data-discount="{{ $price_info['discount_percentage'] }}" data-is-set="{{ $sub_product->is_set }}" data-engravable="{{ $sub_product->engravable }}" data-sku="{{ $sub_product->sku }}" value="{{ $sub_product->id }}" id="{{ $sub_product->sku }}">{{ $caption }}</option>
                                @endforeach
                            </select>

                        </div>
                    </li>
                    @else
                        <input type="hidden" name="product_id" value="{{ $data['product']->id }}">
                    @endif
                    {{-- End Product Variation Selector --}}

                    <li id="li-qty-container" class="@if($data['product']->type == 'variation') d-none @else list-item @endif">
                        <div class="left">QTY</div>
                        <div class="right">
                            <div class="product-quantity">
                                <div class="num-block skin-2">
                                    <div class="num-in">
                                        <span class="minus dis"></span>
                                        <label for="quan-1" class="visually-hidden"></label>
                                        <input id="quan-1" name="qty" type="text" class="in-num" value="1" readonly="">
                                        <span class="plus"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    
                </ul>

                <div class="price-n-cart product-info @if($data['product']->type == 'variation') d-none @endif">
                    @if($data['product']->type == 'variation')
                        @foreach($data['sub_products'] as $sub_product)
                            @php
                                $price_info = \App\Models\Product::getPriceText($sub_product, 'detail');   
                            @endphp
                        <span class="price product-info d-none sid-{{ $sub_product->id }}">{!! \App\Models\Product::getPriceMobile($price_info) !!}</span>
                        @endforeach
                    @else
                        @php
                            $price_info = \App\Models\Product::getPriceText($data['product'], 'detail');   
                        @endphp
                        <span class="price">{!! \App\Models\Product::getPriceMobile($price_info) !!}</span>
                    @endif
                    <button type="button" class="btn cart btn-add-to-cart"><span class="icon"><i class="icon icon-carce-cart"></i></span>Add to Cart</button>
                </div>

                </form> 

                <section class="accordion">
                    <section class="accordion-tabs">
                        @if(trim($data['product']->full_description) != null) <button class="accordion-tab accordion-active" data-actab-group="0" data-actab-id="0">Description</button> @endif
                        @if(count($set_items) > 0)
                            <button class="accordion-tab" data-actab-group="0" data-actab-id="6">What's Included in This Set</button>
                        @endif
                        {{-- <button class="accordion-tab" data-actab-group="0" data-actab-id="1">Specificaitons</button> --}}
                        @if($data['faqs'] != null)
                            <button class="accordion-tab" data-actab-group="0" data-actab-id="2">FAQs</button>
                        @endif
                        @if(count($data['videos']) > 0 || count($videos) > 0)
                            <button class="accordion-tab" data-actab-group="0" data-actab-id="3">Videos</button>
                        @endif
                        @if(trim(strip_tags($data['warranty'])) != null)
                            <button class="accordion-tab" data-actab-group="0" data-actab-id="4">Warranty</button>
                        @endif
                    </section>
                    <section class="accordion-content">
                        @if(trim($data['product']->full_description) != null)
                            <article class="accordion-item accordion-active" data-actab-group="0" data-actab-id="0">
                                <h4 class="accordion-item__label">Description</h4>
                                <div class="accordion-item__container product-description">
                                
                                {{-- Start Full Info --}}
                                <div class="product-info sid-short">
                                    @if(trim($data['product']->full_description) != null)
                                        <p class="text">{!! $data['product']->full_description !!}</p>
                                    @endif
                                </div>
                                @foreach($data['sub_products'] as $sub_product)
                                    <div class="product-info d-none sid-{{ $sub_product->id }}">
                                        @if(trim($sub_product->full_description) != null)
                                            <p>
                                                {!! $sub_product->full_description !!}
                                            </p>
                                        @endif
                                    </div>
                                @endforeach
                                {{-- End Full Info --}}

                                </div>
                            </article>
                        @endif
                        @if(count($set_items) > 0)
                            <article class="accordion-item" data-actab-group="0" data-actab-id="6">
                                <h4 class="accordion-item__label">What's Included in This Set</h4>
                                <div class="accordion-item__container">
                                    @foreach($set_items as $id => $set)
                                        <div>
                                            {!! $set !!}
                                        </div>
                                    @endforeach
                                </div>
                            </article>
                        @endif
                        {{-- <article class="accordion-item" data-actab-group="0" data-actab-id="1">
                            <h4 class="accordion-item__label">Specificaitons</h4>
                            <div class="accordion-item__container">
                            <p>reprehenderit temporibus, assumenda cupiditate consequatur soluta odit ex repudiandae delectus cumque, provident hic sed quod? Quis, nam. Similique eaque quae vel recusandae expedita qui sint fugiat, nisi assumenda et ex molestiae atque deleniti magni, ipsam libero!</p>
                            </div>
                        </article> --}}
                        @if($data['faqs'] != null)
                            <article class="accordion-item" data-actab-group="0" data-actab-id="2">
                                <h4 class="accordion-item__label">FAQs</h4>
                                <div class="accordion-item__container">
                                    @include('includes.partials.mobile-faqs')
                                </div>
                            </article>
                        @endif
                        @if(count($data['videos']) > 0 || count($videos) > 0)
                        <article class="accordion-item" data-actab-group="0" data-actab-id="3">
                            <h4 class="accordion-item__label">Videos</h4>
                            <div class="accordion-item__container">
                            
                                    
                                    <div class="tab-pane fade" id="videos" role="tabpanel" aria-labelledby="videos-tab">
                                        <div class="row">
                                            @foreach($data['videos'] as $video)
                                                @php
                                                    $img_path = 'up_data/products/videos/thumbnails/'.$video->video_thumbnail;
                                                    if($video->video_thumbnail == '' || !file_exists($img_path))
                                                        $img_path = 'up_data/na.jpg';
                                                @endphp
                                                <div class="video-container">
                                                    <a href="javascript:;" onclick="open_video_modal('{{ $video->name }}');" class="product_video">
                                                        <img src="mobile/assets/images/icons/icon-play.png" class="icon-video-play" />
                                                        <img src="{{ $img_path }}" class="img-thumbnail img-rounded" />
                                                    </a>
                                                    <div class="text-center pt--5">{{ $video->title }}</div>
                                                </div>
                                            @endforeach
                                            @foreach($videos as $video)
                                                @if(isset($video->video_id))
                                                <div class="video-container">
                                                    <a href="#video_modal" rel="modal:open" onclick="open_video_modal('{{ $video->video_id }}','external','{{ $video->source }}');" class="product_video">
                                                        <img src="mobile/assets/images/icons/icon-play.png" class="icon-video-play" />
                                                        <img src="{{ $video->large_url }}" class="img-thumbnail img-rounded" />
                                                    </a>
                                                    <div class="text-center pt--5">{{ $video->title }}</div>
                                                </div>
                                                @endif
                                            @endforeach
                                        </div>
                                    </div>
                                


                            </div>
                        </article>
                        @endif
                        @if(trim(strip_tags($data['warranty'])) != null)
                            <article class="accordion-item" data-actab-group="0" data-actab-id="4">
                                <h4 class="accordion-item__label">Warranty</h4>
                                <div class="accordion-item__container">
                                    {!! $data['warranty'] !!}
                                </div>
                            </article>
                        @endif
                    </section>
                </section>


                {{-- <p class="text">
                    Ipsum available, but the majority have suffered alteration in
                    some form, by injected humour, randomised words which.
                    don't look even slightly believable. If you are going to use a
                    passage of Lorem Ipsum, you need
                </p> --}}
            </div>
        </div>
    </div>
<!-- ...:::End Product Single Section:::... -->
<div id="video_modal" class="modal">
    <div id="video_modal_div"></div>
    {{-- <a href="#" rel="modal:close">Close</a> --}}
</div>
    @push('after-scripts')
        <script src="mobile/assets/js/tabs.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
        @if($data['product']->type == 'variation')
        <script>
            @if($data['sid'] != '')

                $(document).ready(function() {
                    setVariation('{{ $data['sid'] }}');
                });

            @endif

            $(document).ready(function() {
                let hash = window.location.hash;
                if(hash)
                {
                    setVariation(hash, true, true);
                }
            });
        </script>
    @endif
    @endpush
@endsection