@extends('website.includes.master')

@section('title')
    Product Detail
@endsection

@section('content')

    <div class="main-content main-content-details single no-sidebar">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcrumb-trail breadcrumbs">
                        <ul class="trail-items breadcrumb">
                            <li class="trail-item trail-begin">
                                <a href="{{ route('/') }}">Home</a>
                            </li>
                            <li class="trail-item trail-end active">
                                Splendid Diamond
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="content-area content-details full-width col-lg-9 col-md-8 col-sm-12 col-xs-12">
                    <div class="site-main">
                        <div class="details-product">
                            <div class="details-thumd">
                                <div class="image-preview-container image-thick-box image_preview_container">
                                    <img id="img_zoom"
                                         data-zoom-image="{{ URL::asset('admin/assets/uploads/'.$product->image)}}"
                                         src="{{ URL::asset('admin/assets/uploads/'.$product->image)}}" alt="img">
                                    <a href="#" class="btn-zoom open_qv"><i class="fa fa-search" aria-hidden="true"></i></a>
                                </div>
                                <div class="product-preview image-small product_preview">
                                    <div id="thumbnails" class="thumbnails_carousel owl-carousel" data-nav="true"
                                         data-autoplay="false" data-dots="false" data-loop="false" data-margin="10"
                                         data-responsive='{"0":{"items":3},"480":{"items":3},"600":{"items":3},"1000":{"items":3}}'>

                                        @forelse($product->images as $img)
                                            <a href="#"
                                               data-image="{{ URL::asset('admin/assets/uploads/'.$img->image)}}"
                                               data-zoom-image="{{ URL::asset('admin/assets/uploads/'.$img->image)}}"
                                               class="active">
                                                <img src="{{ URL::asset('admin/assets/uploads/'.$img->image)}}"
                                                     data-large-image="{{ URL::asset('admin/assets/uploads/'.$img->image)}}"
                                                     alt="img">
                                            </a>
                                        @empty
                                        @endforelse

                                    </div>
                                </div>
                            </div>
                            <div class="details-infor">
                                <h1 class="product-title">
                                    {{ $product->name }}
                                </h1>
                                <div class="availability">
                                    availability: {{ $product->stock }}</a>
                                </div>
                                <div class="price">
                                    @if(!empty($product->cut_price))
                                        <del>
                                            ${{ number_format($product->cut_price,2) }}
                                        </del>
                                    @endif
                                    <span>${{ number_format($product->price,2) }}</span>
                                </div>
                                {{ substr(strip_tags($product->description), 0, 100) }}
                                <div class="group-button mt-5" style="margin-top: 30px">
                                    <div class="quantity-add-to-cart">
                                        <div class="quantity">
                                            <div class="control">
                                                <a class="btn-number qtyminus quantity-minus" href="#">-</a>
                                                <input type="text" id="no_of_quantity" data-step="1" data-min="0" value="1" title="Qty"
                                                       class="input-qty qty" size="4">
                                                <a href="#" class="btn-number qtyplus quantity-plus">+</a>
                                            </div>
                                        </div>
                                        <button type="button" onclick="AddMultipleCart('{{ $product->id }}')"
                                                class="single_add_to_cart_button button cart_button">Add to cart
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-details-product">
                            <ul class="tab-link">
                                <li class="active">
                                    <a data-toggle="tab" aria-expanded="true"
                                       href="#product-descriptions">Descriptions </a>
                                </li>
                            </ul>
                            {!! $product->description !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection