@extends('frontend.layouts.app')

@php
    $title = trim($data['product']->meta_title);
    if($title == null || $title == 'NULL')
        $title = $data['product']->name . ' - ' . app_name();
@endphp

@section('title', $title)

@if(trim($data['product']->meta_keywords) != null)
    @section('meta_keywords', $data['product']->meta_keywords)
@endif

@if(trim($data['product']->meta_description) != null)
    @section('meta_description', $data['product']->meta_description)
@endif

@if($data['product']->is_canonical == 'Y')
    @push('head-area')
        <link rel="canonical" href="{{ URL::to( '/' . $data['product']->slug ) }}" />
    @endpush
@endif

@section('content')

    <!--product area start-->
    <div class="product_details mt-30">

        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="product-details-tab">

                        <div id="main_image_container" class="">

                            @if(trim($data['product']->image) != '')
                                <a class="fancybox main_image_link" rel="ligthbox" href="up_data/products/images/large/{{ $data['product']->image }}">
                                    <img id="main_image" class="detail-page-image " src="up_data/products/images/medium/{{ $data['product']->image }}" />
                                </a>
                            @else
                                <img id="main_image" class="detail-page-image" src="up_data/na.jpg" alt="{{ $data['product']->name }}"/>
                            @endif

                        </div>

                        <div class="single-zoom-thumb">
                            <ul class="s-tab-zoom owl-carousel single-product-active" id="gallery_01">

                                @if($data['images']->count() > 1 || $data['sub_products']->count() > 0)
                                    @foreach($data['images'] as $image)

                                        <li>
                                            <a href="javascript:;" id="sp_{{ $image->id }}" class="gallary-item" data-image="up_data/products/images/medium/{{ $image->name }}" data-image-link="up_data/products/images/large/{{ $image->name }}">
                                                <img src="up_data/products/images/thumbnails/{{ $image->name }}" alt="{{ $data['product']->name }}"/>
                                            </a>
                                        </li>

                                    @endforeach
                                @endif

                                @foreach($data['sub_products'] as $sub_product)

                                    <li>
                                        <a href="javascript:;" id="sp_{{ $sub_product->id }}" class="gallary-item" data-image="up_data/products/images/medium/{{ $sub_product->image }}" data-image-link="up_data/products/images/large/{{ $sub_product->image }}">
                                            <img src="up_data/products/images/thumbnails/{{ $sub_product->image }}" alt="{{ $data['product']->name }}"/>
                                        </a>
                                    </li>

                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="product_d_right">

                            <h1 class="product-info sid-heading">{{ $data['product']->name }}</h1>

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



                        <div class="product-short-para">
                            <div class="product-info sid-short">

                                <div class="pb-3 product-sku">SKU: <span>{{ $data['product']->sku }}</span></div>

                                {!!  \App\Models\Product::printStockInformation($data['product']) !!}

                                @if(trim($data['product']->short_description) != null)
                                    <div class="product_desc pt-3">
                                        <p>
                                            {!! nl2br(strip_tags($data['product']->short_description)) !!}
                                        </p>
                                    </div>
                                @endif

                                {!!  \App\Models\Product::printAddtionalInformation($data['product']) !!}
                            </div>



                            @foreach($data['sub_products'] as $sub_product)
                                <div class="product-info d-none sid-{{ $sub_product->id }}">

                                    <div class="pb-3 product-sku">SKU: <span>{{ $sub_product->sku }}</span></div>

                                    {!!  \App\Models\Product::printStockInformation($data['product']) !!}

                                    @if(trim($sub_product->short_description) != null)
                                        <div class="product_desc">
                                            <p>
                                                {!! nl2br(strip_tags($sub_product->short_description)) !!}
                                            </p>
                                        </div>
                                    @endif

                                    {!!  \App\Models\Product::printAddtionalInformation($sub_product) !!}
                                </div>
                            @endforeach

                        </div>

                        <div class="product-detail-splitter pb-4"></div>

                        <form class="frm_add_to_cart" method="post" action="cart">
                            @csrf
                            @if($data['product']->type == 'variation')
                                <input type="hidden" name="parent_id" value="{{ $data['product']->id }}" />
                                <div class="product-variable-block">
                                    <div class="variation-select">
                                        <h5 class="title">Please select the variation you want to order</h5>

                                        @foreach($data['sub_products'] as $sub_product)
                                            <div class="form-check">
                                                <label class="form-check-label">
                                                    <input class="form-check-input" type="radio" name="product_id" data-sku="{{ $sub_product->sku }}" onclick="setVariation('{{ $sub_product->id }}')" value="{{ $sub_product->id }}">
                                                    {{ $sub_product->name }}
                                                </label>
                                            </div>
                                        @endforeach

                                        <br />

                                        @foreach($data['sub_products'] as $sub_product)
                                            <div class="price_box price product-info d-none sid-{{ $sub_product->id }}">

                                                @php
                                                    $price_info = \App\Models\Product::getPriceText($sub_product, 'detail');
                                                    echo $price_info['price_text'];
                                                @endphp

                                            </div>
                                        @endforeach
                                    </div>
                                </div>

                            @else

                                <div class="price_box">

                                    @php
                                        $price_info = \App\Models\Product::getPriceText($data['product'], 'detail');
                                        echo $price_info['price_text'];
                                    @endphp

                                </div>

                                <input type="hidden" name="product_id" value="{{ $data['product']->id }}" />

                            @endif

                            <div class="add_to_cart_button_container product_variant quantity @if($data['product']->type == 'variation') d-none @endif">
                                <label>quantity</label>
                                    <input min="1" name="qty" id="qty" max="100" value="1" type="number">
                                <button class="button btn-add-to-cart" type="submit" data-product-id="{{ $data['product']->id }}">add to cart</button>
                            </div>
                        </form>

                            <div class="product_meta">
                                Categories:
                                <span>
                                    @foreach($data['product']->categories as $cats)
                                        <a href="{{ $cats->slug }}">{{ $cats->name }}</a>
                                        @if (!$loop->last)
                                            ,
                                        @endif
                                    @endforeach
                                </span>
                            </div>

                    </div>


                </div>
            </div>
        </div>
    </div>
    <!--product details end-->

    <!--product info start-->
    <div class="product_d_info">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="product_d_inner">
                        <div class="product_info_button">
                            <ul class="nav" role="tablist">


                                <li>
                                    <a class="active" id="description-tab" data-toggle="tab" href="#description" role="tab" aria-controls="description" aria-selected="true">DESCRIPTION</a>
                                </li>
                                @if(count($data['videos']) > 0)
                                    <li>
                                        <a id="videos-tab" data-toggle="tab" href="#videos" role="tab" aria-controls="videos" aria-selected="false">VIDEOS</a>
                                    </li>
                                @endif
                                @if(count($data['files']) > 0)
                                    <li>
                                        <a id="files-tab" data-toggle="tab" href="#files" role="tab" aria-controls="files" aria-selected="false">FILES / MANUALS</a>
                                    </li>
                                @endif
                                <li >
                                    <a id="reviews-tab" data-toggle="tab" href="#reviews" role="tab" aria-controls="reviews" aria-selected="false">REVIEWS</a>
                                </li>
                            </ul>
                        </div>
                        <div class="tab-content">


                            <div class="tab-pane fade show active" id="description" role="tabpanel" aria-labelledby="description-tab">
                                <div class="product-full-para">
                                    <div class="product-info sid-short">
                                        @if(trim($data['product']->full_description) != null)
                                            {!! $data['product']->full_description !!}
                                        @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)
                                                {!! $sub_product->full_description !!}
                                            @endif
                                        </div>
                                    @endforeach

                                </div>
                            </div>


                            @if(count($data['videos']) > 0)
                                <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="col-3">
                                                <a href="javascript:;" onclick="open_video_modal('{{ $video->name }}');" class="product_video">
                                                    <span class="fa fa-play"></span>
                                                    <img src="{{ $img_path }}" class="img-thumbnail img-rounded" />
                                                </a>
                                                <div class="text-center pt--5">{{ $video->title }}</div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endif

                            @if(count($data['files']) > 0)
                                @php
                                    $fa_exts = ['.pdf' => 'fa-file-pdf', '.docx' => 'fa-file-word', '.doc' => 'fa-file-word', '.xlsx' => 'fa-file-excel', '.xls' => 'fa-file-excel'];
                                @endphp
                                <div class="tab-pane fade" id="files" role="tabpanel" aria-labelledby="files-tab">
                                    <div class="row">
                                        @foreach($data['files'] as $file)
                                            @php
                                                $file_path = 'up_data/products/files/'.$file->name;
                                                if($file->name == '' || !file_exists($file_path))
                                                {
                                                    continue;
                                                }
                                                $ext = strrchr($file->name,'.');
                                            @endphp
                                            <div class="col-2 text-center ">
                                                <a href="{{ $file_path }}" target="_blank">
                                                    <i class="fa {{ $fa_exts[$ext] }} fa-5x" aria-hidden="true"></i>
                                                    <div class="pt--5">{{ $file->title }}</div>
                                                </a>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endif

                            <div class="tab-pane fade" id="reviews" role="tabpanel" aria-labelledby="reviews-tab">
                                <div class="review-wrapper">
                                    @if(count($data['reviews']) > 0)
                                        <h2 class="title-lg mb--20">{{ count($data['reviews']) }} REVIEW FOR <em>{{ strtoupper($data['product']->name) }}</em></h2>
                                        @foreach($data['reviews'] as $review)
                                            <div class="review-comment mb--20">
                                                <div class="avatar">
                                                    <i class="fa fa-user fa-5x"></i>
                                                </div>
                                                <div class="text">
                                                    <div class="rating-widget mb--15">
                                                        @for($i = 1 ; $i <= 5 ; $i++)
                                                            <span class="single-rating"><i class="@if($review->rating >= $i) fas @else far @endif  fa-star"></i></span>
                                                        @endfor
                                                    </div>
                                                    <h6 class="author">{{ $review->name }} - <span class="font-weight-400">{{ date('M d, Y', strtotime($review->created_at)) }}</span> </h6>
                                                    <p>{{ $review->comments }}</p>
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif


                                    {!! Form::open(array('route' => ['frontend.review.store'], 'method' => 'POST', 'id' => 'review_form')) !!}
                                    @csrf
                                    {!! Form::hidden('product_id', $data['product']->id) !!}
                                    <h3 class="title-lg mb--20 pt--15">ADD A REVIEW</h3>
                                    <div class="alert alert-success d-none" id="review_message">
                                        <strong>Thank you!</strong> we have received your review and if required we will respond within 48 hours.
                                    </div>
                                    <div class="rating-row pt-2">
                                        <p class="d-block">Your Rating</p>
                                        <span class="rating-widget-block">
                                            <input type="radio" name="rating" value="1" id="star1">
                                            <label for="star1">Very Bad</label>&nbsp;
                                            <input type="radio" name="rating" value="2" id="star2">
                                            <label for="star2">Bad</label>&nbsp;
                                            <input type="radio" name="rating" value="3" id="star3">
                                            <label for="star3">Fair</label>&nbsp;
                                            <input type="radio" name="rating" value="4" id="star4">
                                            <label for="star4">Good</label>&nbsp;
                                            <input type="radio" name="rating" value="5" id="star5">
                                            <label for="star5">Excellent</label>
                                        </span>
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <label for="message">Comment</label>
                                                    <textarea name="comments" required id="comments" cols="30" rows="10" class="form-control"></textarea>
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label for="name">Name *</label>
                                                    <input type="text" required name="name" id="name" class="form-control">
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label for="email">Email *</label>
                                                    <input type="email" required name="email" id="email" class="form-control">
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label for="website">Phone</label>
                                                    <input type="text" id="phone" name="phone" class="form-control">
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="submit-btn">
                                                    <button type="submit" class="btn btn-info">Post Comment</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {!! Form::close() !!}
                                </div>
                            </div>


                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--product info end-->

    @if(isset($data['related_products']) && count($data['related_products']) > 0)
    <!--product area start-->
    <section class="product_area mb-60">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section_title">
                        <h2>Related Products</h2>
                    </div>
                    <div class="product_carousel product_column5 owl-carousel">


                        @foreach($data['related_products'] as $product)
                            {!! \App\Models\Product::productBlock($product, 'product-scroll') !!}
                        @endforeach


                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--product area end-->
    @endif
    @if(isset($data['recommended_products']) && count($data['recommended_products']) > 0)
    <!--product area start-->
    <section class="product_area mb-60">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section_title">
                        <h2>You May Also Like</h2>
                    </div>
                    <div class="product_carousel product_column5 owl-carousel">


                        @foreach($data['recommended_products'] as $product)
                            {!! \App\Models\Product::productBlock($product, 'product-scroll') !!}
                        @endforeach


                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--product area end-->
    @endif

    @push('after-scripts')
        @if($data['product']->type == 'variation' && $data['sid'] != '')
            <script>
                // $(document).ready(function() {
                //     setVariation('{{ $data['sid'] }}');
                // });
            </script>
        @endif
        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen">
        <script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
    @endpush

@endsection