@extends('layouts.frontend.frontend_main')

@section('title')
    @lang('frontend_lang.product_details')
@endsection

@section('css')
<link href="{{ asset('frontend/vendor/lightbox2/css/lightbox.min.css') }}" rel="stylesheet" />
@endsection

@section('content')
    <div class="gambo-Breadcrumb">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            {{--<li class="breadcrumb-item"><a href="index.html">Home</a></li>--}}
                            {{--<li class="breadcrumb-item"><a href="shop_grid.html">Vegetables & Fruits</a></li>--}}
                            {{--<li class="breadcrumb-item active" aria-current="page">Product Title</li>--}}

                            <li class="breadcrumb-item"><a href="{{ route('frontend.home.index') }}">@lang('frontend_lang.home')</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('frontend.product.index') }}">@lang('frontend_lang.products')</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{ $product->name }}</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <div class="all-product-grid">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <div class="product-dt-view">
                        <div class="row">
                            <div class="col-lg-4 col-md-4">
                                <div id="sync1" class="owl-carousel owl-theme">
                                    <div class="item">
                                        <img src="{{ productImageUrl($product->sku) }}" alt="" >
                                    </a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-8 col-md-8">
                                <div class="product-dt-right">
                                    @php
                                        $offerPrice = productOfferPrice($product->id, $product->price)
                                    @endphp
                                    <h2>{{ $product->name }}</h2>
                                    <div class="no-stock">
                                        <p class="pd-no">@lang('frontend_lang.sku')<span>{{ $product->sku }}</span></p>
                                        @if(!empty($offerPrice['end_date']))
                                            <div class="pd-no">
                                                <p>@lang('frontend_lang.expired_date') {{ $offerPrice['end_date'] }}</p>
                                            </div>
                                        @endif
                                    </div>
                                    <p class="pp-descp">
                                        {{ $product->short_description }}
                                    </p>
                                    <div class="product-group-dt">
                                        <ul>
                                            @if($offerPrice['amount'] > 0)
                                                <li>
                                                    <div class="main-price color-discount">
                                                        @lang('frontend_lang.price')
                                                        <span>
                                                        <i class="fa fa-gbp" aria-hidden="true"></i>
                                                        <label class="{{ auth()->guard('web')->user() ? '' : 'blur-price' }}">
                                                            @if(auth()->user())
                                                                {{ $offerPrice['amount'] }}
                                                            @else
                                                                00
                                                            @endif
                                                        </label>
                                                    </span>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="main-price mrp-price">
                                                        @lang('frontend_lang.unit_price')
                                                        <i class="fa fa-gbp" aria-hidden="true"></i>
                                                        <label class="{{ auth()->guard('web')->user() ? '' : 'blur-price' }} mrp-price">
                                                            @if(auth()->user())
                                                                {{ $product->price }}
                                                            @else
                                                                00
                                                            @endif
                                                        </label>
                                                    </div>
                                                </li>
                                            @else
                                                <li>
                                                    <div class="main-price color-discount">
                                                        @lang('frontend_lang.price')
                                                        <span>
                                                        <i class="fa fa-gbp" aria-hidden="true"></i>
                                                        <label class="{{ auth()->guard('web')->user() ? '' : 'blur-price' }}">
                                                            @if(auth()->user())
                                                                {{ $product->price }}
                                                            @else
                                                                00
                                                            @endif
                                                        </label>
                                                    </span>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="main-price">
                                                        @lang('frontend_lang.unit_price')
                                                        <span>
                                                        <i class="fa fa-gbp" aria-hidden="true"></i>
                                                        <label class="{{ auth()->guard('web')->user() ? '' : 'blur-price' }}">
                                                            @if(auth()->user())
                                                                {{ $product->unit_price }}
                                                            @else
                                                                00
                                                            @endif
                                                        </label>
                                                    </span>
                                                    </div>
                                                </li>
                                            @endif

                                            @if(!empty($product->pack_size))
                                                <li>
                                                    <div class="quantity-detail ">
                                                        <p class="product-page-size">{{ trans('frontend_lang.pkd').$product->pack_size }}</p>
                                                    </div>
                                                </li>
                                            @endif
                                        </ul>
                                        @if($product->inventory_management == \App\Models\Product::INVENTORY_MANAGEMENT_NO)
                                        <ul class="gty-wish-share">
                                            <li>
                                                <div class="qty-product">
                                                    <div class="quantity buttons_added">
                                                        <input type="button" value="-" class="minus minus-btn">
                                                        <input type="number" step="1" name="quantity" value="1" id="pd-qty" class="input-text qty text pd-qty"  max="100" min="1">
                                                        <input type="button" value="+" class="plus plus-btn">
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>

                                        <ul class="ordr-crt-share">
                                            <li>
                                                <button class="add-cart-btn hover-btn addToCartDetail" data-id="{{ $product->id }}"><i class="uil uil-shopping-cart-alt"></i>@lang('frontend_lang.add_to_cart')</button></li>
                                        </ul>
                                        @endif
                                    </div>
                                    @if($product->inventory_management == \App\Models\Product::INVENTORY_MANAGEMENT_YES)
                                    <div class="outofstock-div mt-4">
                                        <p>@lang('frontend_lang.out_of_stock')</p>
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="pdpt-bg">
                        <div class="pdpt-title">
                            <h4>@lang('frontend_lang.product_details')</h4>
                        </div>
                        <div class="pdpt-body scrollstyle_4">
                            <div class="pdct-dts-1">
                                <div class="pdct-dt-step">
                                    <h4>@lang('frontend_lang.description')</h4>
                                    <p>{{ $product->long_description }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4">
                    <div class="pdpt-bg" style="margin-top: 0px">
                        <div class="pdpt-title">
                            <h4>
                                @lang('frontend_lang.related_products')
                            </h4>
                        </div>
                        <div class="pdpt-body scrollstyle_4" style="    height: 840px;">
                            @foreach($relatedProducts as $relatedProduct)
                                @php
                                    $offerPrice = productOfferPrice($relatedProduct->id, $relatedProduct->price)
                                @endphp

                                <div class="cart-item border_radius">
                                    <a href="{{ route('frontend.product.show',['product' => $relatedProduct->slug]) }}" title="{{ $relatedProduct->name }}">
                                        <img src="{{ productImageUrl($relatedProduct->sku) }}"  alt="" style="width: 80px;">

                                    </a>
                                    <div class="cart-text">
                                        <a href="{{ route('frontend.product.show',['product' => $relatedProduct->slug]) }}">
                                            <h4>{{ $relatedProduct->name }}</h4>
                                        </a>
                                        <div class="cart-radio">

                                        </div>
                                        <div class="qty-group">
                                            <div class="quantity buttons_added">
                                                <input type="button" value="-" class="minus minus-btn">
                                                <input type="number" step="1" name="quantity" value="1" max="100" min="1" class="input-text qty text pd-qty">
                                                <input type="button" value="+" class="plus plus-btn">
                                            </div>
                                            <span class="cart-icon"><i class="uil uil-shopping-cart-alt addToCartDetail cartspace" data-id="{{ $relatedProduct->id }}"></i></span>
                                            <div class="cart-item-price" >
                                                <i class="fa fa-gbp" aria-hidden="true" style="margin-top: 3px"></i> &nbsp;
                                                <label class="{{ auth()->guard('web')->user() ? '' : 'blur-price' }}">
                                                    @if(auth()->user())
                                                        {{ $offerPrice['amount'] > 0 ? $offerPrice['amount'] : $relatedProduct->price }}
                                                    @else
                                                        00
                                                    @endif
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script src="{{ asset('frontend/vendor/lightbox2/js/lightbox.min.js') }}"></script>
    <script>
        $(document).ready(function () {
            $(document).find('.lb-nav').remove();
        })
    </script>
@endsection