@extends('template.main-template')

@section('content')
    <div class="main-content">
        <div class="container">
            <ul class="breadcrumb">
                <li><a href="#">Home</a></li>
                <li class="active">{{ $product->product_title }} </li>
            </ul>
            <div class="product-details-content">
                <div class="col-md-6 col-sm-6">
                    <div class="product-img-box">
                        <a id="image-view" title="Product Image">

                            <img id="image" src="{{ asset('storage/' . $product->images[0]->file) }}" alt="Product" />

                        </a>
                        <div class="product-thumb">
                            <ul class="thumb-content">
                                @foreach ($product->images as $image)
                                    <li class="thumb active"><a href="{{ asset('storage/' . $image->file) }}"
                                            title="thumb product view1" onclick="swap(this);return false;"><img
                                                src="{{ asset('storage/' . $image->file) }}" alt="thumb product1" /></a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                    <!-- End product-img-box -->
                </div>
                <div class="col-md-6 col-sm-6">
                    <div class=" space-30">
                        <h1>{{ $product->product_title }}</h1>
                        @if ($product->category)
                            <p>{{ $product->category->category_title }}</p>
                        @else
                            <p>Uncategorized</p>
                        @endif
                    </div>
                    <!-- End product-name -->
                    {{-- <div class="rating">
                    <div class="overflow-h">
                        <div class="icon-rating">
                            <input type="radio" id="star-horizontal-rating-1" name="star-horizontal-rating" checked="">
                            <label for="star-horizontal-rating-1"><i class="fa fa-star"></i></label>
                            <input type="radio" id="star-horizontal-rating-2" name="star-horizontal-rating" checked="">
                            <label for="star-horizontal-rating-2"><i class="fa fa-star"></i></label>
                            <input type="radio" id="star-horizontal-rating-3" name="star-horizontal-rating" checked="">
                            <label for="star-horizontal-rating-3"><i class="fa fa-star"></i></label>
                            <input type="radio" id="star-horizontal-rating-4" name="star-horizontal-rating">
                            <label for="star-horizontal-rating-4"><i class="fa fa-star"></i></label>
                            <input type="radio" id="star-horizontal-rating-5" name="star-horizontal-rating">
                            <label for="star-horizontal-rating-5"><i class="fa fa-star"></i></label>
                        </div>
                        <ul>
                            <li>3 Rating(s)</li>
                            <li><a href="#" title="add your rating">Add Your Rating</a></li>
                        </ul>
                    </div>
                </div> --}}
                    <!-- End Rating -->
                    <div class="wrap-price space-30 space-padding-tb-30">
                        <p class="price">{{ formatMoney($product->price, true) }}</p>
                    </div>

                    @if (count($product->specifications) > 0)
                        <h2>Features:</h2>
                    @endif
                                        <table class="table table-responsive table-striped">
                        @foreach ($product->specifications as $specs)
                            @if ($specs->key == 'Color' || $specs->key == 'Pack Size')
                                @php
                                    $shown = true;
                                @endphp
                            @endif
                            @if ($specs->key != 'Color' && $specs->key != 'Pack Size')
                                <tr>
                                    <td>{{ $specs->key }}</td>
                                    <td>{{ $specs->value }}</td>
                                </tr>
                            @endif
                        @endforeach
                    </table>



                    @if ($shown)

                    <div class="options">
                        <div class="title-product">
                            <h3>Options</h3>
                        </div>
                        <form class="form-horizontal">
                            @foreach ($product->specifications as $specs)
                                @if ($specs->key == 'Color' || $specs->key == 'Pack Size')
                                    @php
                                        $options = explode(',', $specs->value)
                                    @endphp
                                    <div class="form-group col-md-12">
                                        <label class=" control-label" for="inputName">{{ $specs->key }}</label>
                                        <select class="form-control">
                                            <option value="">- Please select -</option>

                                            @foreach ($options as $option)
                                                <option value="{{ $option }}">{{ $option }}</option>
                                            @endforeach

                                        </select>
                                    </div>
                                @endif
                            @endforeach
                        </form>
                        {{-- <div class="quantity space-30">
                            <p class="color-red">Repuired Fiields *</p>
                            <input type="number" size="4" class="input-text qty text" title="Qty" value="1" name="quantity" max="100" min="1" step="1">
                            <span class="price"></span>
                        </div> --}}
                        <!-- End quanity -->
                    </div>

                    @endif


                </div>
            </div>
            <!-- End product-details-content -->
            <div class="hoz-tab-container space-padding-tb-40">
                <ul class="tabs">
                    <li class="item" rel="description">Description</li>
                    {{-- <li class="item" rel="customer">Customer Review</li>
                <li class="item" rel="product-tags">Product tags</li> --}}
                </ul>
                <div class="tab-container">
                    <div id="description" class="tab-content">
                        {{ $product->long_description }}
                    </div>
                    <div id="customer" class="tab-content">
                        <div class="col-md-6">
                            <h3 class="space-10">Customer Review</h3>
                            <div class="space-10">
                                <p>Perfect <strong>Review by Tony</strong></p>
                                <div class="icon-rating">
                                    <p>Price:</p>
                                    <input type="radio" id="bird-horizontal-rating-1" name="bird-horizontal-rating"
                                        checked="">
                                    <label for="bird-horizontal-rating-1"><i class="fa fa-star"></i></label>
                                    <input type="radio" id="bird-horizontal-rating-2" name="bird-horizontal-rating"
                                        checked="">
                                    <label for="bird-horizontal-rating-2"><i class="fa fa-star"></i></label>
                                    <input type="radio" id="bird-horizontal-rating-3" name="bird-horizontal-rating">
                                    <label for="bird-horizontal-rating-3"><i class="fa fa-star"></i></label>
                                    <input type="radio" id="bird-horizontal-rating-4" name="bird-horizontal-rating">
                                    <label for="bird-horizontal-rating-4"><i class="fa fa-star"></i></label>
                                    <input type="radio" id="bird-horizontal-rating-5" name="bird-horizontal-rating">
                                    <label for="bird-horizontal-rating-5"><i class="fa fa-star"></i></label>
                                </div>
                                <p>Like (Posted on 16/07/2015)</p>
                            </div>
                            <div class="space-padding-tb-40">
                                <h4>Customer Review</h4>
                                <p>You're reviewing: Wash Out Parama</p>
                                <p>How do you rate this product?*</p>
                            </div>
                            <div class="space-10">
                                <h4>Customer Review</h4>
                                <form class="radio customer-radio">
                                    <input type="radio" id="star-1" value="1" name="star" />
                                    <label for="star-1">01 star</label>
                                    <input type="radio" id="star-2" value="2" name="star" />
                                    <label for="star-2">02 star</label>
                                    <input type="radio" id="star-3" value="3" name="star" />
                                    <label for="star-3">03 star</label>
                                    <input type="radio" id="star-4" value="4" name="star" checked />
                                    <label for="star-4">04 star</label>
                                    <input type="radio" id="star-5" value="5" name="star" />
                                    <label for="star-5">05 star</label>
                                </form>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label class=" control-label" for="inputName">Nick Name*</label>
                                    <input type="text" class="form-control" id="inputName" placeholder="Name">
                                </div>
                                <div class="form-group">
                                    <label class=" control-label" for="inputsumary">Summary of Your Review *</label>
                                    <input type="text" class="form-control" id="inputsumary" placeholder="Email">
                                </div>
                                <div class="form-group">
                                    <label class=" control-label" for="inputReview">Review*</label>
                                    <input type="text" class="form-control" id="inputReview" placeholder="Review*">
                                </div>
                                <button class="btn link-button link-button-v2" type="submit">Submit review</button>
                            </form>
                        </div>
                    </div>
                    <div id="product-tags" class="tab-content">
                        <h3 class="space-20">Product tags</h3>
                        <p>Other people marked this product with these tags</p>
                        <p>Sumer collection (2) </p>
                        <p>Fashion accessories (2)</p>
                        <a class="btn link-button link-button-v2" href="#" title="add tags">add tags</a>
                    </div>
                </div>
            </div>
            <!-- tab-container -->
            <div class="title-product">
                <h3>Related products</h3>
            </div>
            <!-- End title -->
            <div class="upsell-product products grid_full">
                @foreach ($mainProducts as $product)
                    @component('template.components.products.product_loop', ['product' => $product, 'size'])
                    @endcomponent
                @endforeach
            </div>
        </div>
        <!-- End container -->
    </div>
@endsection

@push('javascript')
    <script src="{{ asset('shop/js/cart.js') }}"></script>
    <script>
        cart.init()
    </script>
    <script type="text/javascript" src="{{ asset('template/js/owl.carousel.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('template/js/jquery.elevatezoom.js') }}"></script>
    <script type="text/javascript" src="{{ asset('template/js/store.js') }}"></script>
@endpush