@extends('frontend.layouts.app')
@section('meta_title'){{ $detailedProduct->meta_title }}@stop
@section('meta_description'){{ $detailedProduct->meta_description }}@stop
@section('meta_keywords'){{ $detailedProduct->tags }}@stop
@section('meta')
<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="{{ $detailedProduct->meta_title }}">
<meta itemprop="description" content="{{ $detailedProduct->meta_description }}">
<meta itemprop="image" content="{{ uploaded_asset($detailedProduct->meta_img) }}">
<!-- Twitter Card data -->
<meta name="twitter:card" content="product">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="{{ $detailedProduct->meta_title }}">
<meta name="twitter:description" content="{{ $detailedProduct->meta_description }}">
<meta name="twitter:creator" content="@author_handle">
<meta name="twitter:image" content="{{ uploaded_asset($detailedProduct->meta_img) }}">
<meta name="twitter:data1" content="{{ single_price($detailedProduct->unit_price) }}">
<meta name="twitter:label1" content="Price">
<!-- Open Graph data -->
<meta property="og:title" content="{{ $detailedProduct->meta_title }}" />
<meta property="og:type" content="og:product" />
<meta property="og:url" content="{{ route('product', $detailedProduct->slug) }}" />
<meta property="og:image" content="{{ uploaded_asset($detailedProduct->meta_img) }}" />
<meta property="og:description" content="{{ $detailedProduct->meta_description }}" />
<meta property="og:site_name" content="{{ get_setting('meta_title') }}" />
<meta property="og:price:amount" content="{{ single_price($detailedProduct->unit_price) }}" />
<meta property="product:price:currency" content="{{ \App\Models\Currency::findOrFail(get_setting('system_default_currency'))->code }}" />
<meta property="fb:app_id" content="{{ env('FACEBOOK_PIXEL_ID') }}">
@endsection
@section('content')
<section class="mb-4 pt-3">
<div class="container">
<div class="bg-white shadow-sm rounded p-3">
<div class="row">
<div class="col-xl-5 col-lg-6 mb-4">
<div class="sticky-top z-3 row gutters-10">
@php
$photos = explode(',', $detailedProduct->photos);
@endphp
<div class="col order-1 order-md-2">
<div class="aiz-carousel product-gallery" data-nav-for='.product-gallery-thumb' data-fade='true' data-auto-height='true'>
@foreach ($photos as $key => $photo)
<div class="carousel-box img-zoom rounded">
<img class="img-fluid lazyload"
src="{{ static_asset('assets/img/placeholder.jpg') }}"
data-src="{{ uploaded_asset($photo) }}"
onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder.jpg') }}';">
</div>
@endforeach
@foreach ($detailedProduct->stocks as $key => $stock)
@if ($stock->image != null)
<div class="carousel-box img-zoom rounded">
<img class="img-fluid lazyload"
src="{{ static_asset('assets/img/placeholder.jpg') }}"
data-src="{{ uploaded_asset($stock->image) }}"
onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder.jpg') }}';">
</div>
@endif
@endforeach
</div>
</div>
<div class="col-12 col-md-auto w-md-80px order-2 order-md-1 mt-3 mt-md-0">
<div class="aiz-carousel product-gallery-thumb" data-items='5' data-nav-for='.product-gallery' data-vertical='true' data-vertical-sm='false' data-focus-select='true' data-arrows='true'>
@foreach ($photos as $key => $photo)
<div class="carousel-box c-pointer border p-1 rounded">
<img class="lazyload mw-100 size-50px mx-auto"
src="{{ static_asset('assets/img/placeholder.jpg') }}"
data-src="{{ uploaded_asset($photo) }}"
onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder.jpg') }}';">
</div>
@endforeach
@foreach ($detailedProduct->stocks as $key => $stock)
@if ($stock->image != null)
<div class="carousel-box c-pointer border p-1 rounded" data-variation="{{ $stock->variant }}">
<img class="lazyload mw-100 size-50px mx-auto"
src="{{ static_asset('assets/img/placeholder.jpg') }}"
data-src="{{ uploaded_asset($stock->image) }}"
onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder.jpg') }}';">
</div>
@endif
@endforeach
</div>
</div>
</div>
</div>
<div class="col-xl-7 col-lg-6">
<div class="text-left">
<h1 class="mb-2 fs-20 fw-600">
{{ $detailedProduct->getTranslation('name') }}
</h1>
<div class="row align-items-center">
@if ($detailedProduct->est_shipping_days)
<div class="col-auto ml">
<small class="mr-2 opacity-50">{{ translate('Estimate Shipping Time')}}: </small>{{ $detailedProduct->est_shipping_days }} {{ translate('Days') }}
</div>
@endif
</div>
<hr>
<div class="row align-items-center">
<div class="col-auto">
<small class="mr-2 opacity-50">{{ translate('Sold by')}}: </small><br>
@if ($detailedProduct->added_by == 'seller' && get_setting('vendor_system_activation') == 1)
<a href="{{ route('shop.visit', $detailedProduct->user->shop->slug) }}" class="text-reset">{{ $detailedProduct->user->shop->name }}</a>
@else
{{ translate('Inhouse product') }}
@endif
</div>
@if (get_setting('conversation_system') == 1)
<div class="col-auto">
<button class="btn btn-sm btn-soft-primary" onclick="show_chat_modal()">{{ translate('Message Seller')}}</button>
</div>
@endif
@if ($detailedProduct->brand != null)
<div class="col-auto">
<a href="{{ route('products.brand',$detailedProduct->brand->slug) }}">
<img src="{{ uploaded_asset($detailedProduct->brand->logo) }}" alt="{{ $detailedProduct->brand->getTranslation('name') }}" height="30">
</a>
</div>
@endif
</div>
<hr>
<div class="row no-gutters mt-3">
<div class="col-sm-2">
<div class="opacity-50 my-2">{{ translate('Auction Will End')}}:</div>
</div>
<div class="col-sm-10">
@if($detailedProduct->auction_end_date > strtotime("now"))
<div class="aiz-count-down align-items-center" data-date="{{ date('Y/m/d H:i:s', $detailedProduct->auction_end_date) }}"></div>
@else
<p>Ended</p>
@endif
</div>
</div>
<hr>
<div class="row no-gutters mt-3">
<div class="col-sm-2">
<div class="opacity-50 my-2">{{ translate('Starting Bid')}}:</div>
</div>
<div class="col-sm-10">
<span class="opacity-50 fs-20">
{{ single_price($detailedProduct->starting_bid) }}
</span>
@if($detailedProduct->unit != null)
<span class="opacity-70">/{{ $detailedProduct->getTranslation('unit') }}</span>
@endif
</div>
</div>
<hr>
@if(Auth::check() && Auth::user()->product_bids->where('product_id',$detailedProduct->id)->first() != null)
<div class="row no-gutters">
<div class="col-sm-2">
<div class="opacity-50">{{ translate('My Bidded Amount')}}:</div>
</div>
<div class="col-sm-10">
<span class="opacity-50 fs-20">
{{ single_price(Auth::user()->product_bids->where('product_id',$detailedProduct->id)->first()->amount) }}
</span>
</div>
</div>
<hr>
@endif
@php $highest_bid = $detailedProduct->bids->max('amount'); @endphp
<div class="row no-gutters my-2">
<div class="col-sm-2">
<div class="opacity-50">{{ translate('Highest Bid')}}:</div>
</div>
<div class="col-sm-10">
<strong class="h3 fw-600 text-primary">
@if($highest_bid != null)
{{ single_price($highest_bid) }}
@endif
</strong>
</div>
</div>
<hr>
@php $min_bid_amount = $highest_bid != null ? $highest_bid+1 : $detailedProduct->starting_bid; @endphp
@if($detailedProduct->auction_end_date >= strtotime("now"))
<div class="mt-3">
@if(Auth::check() && $detailedProduct->user_id == Auth::user()->id)
<span class="badge badge-inline badge-danger">{{ translate('Seller Can Not Place Bid to His Own Product') }}</span>
@else
<button type="button" class="btn btn-primary buy-now fw-600 " onclick="bid_modal()">
<i class="las la-gavel"></i>
@if(Auth::check() && Auth::user()->product_bids->where('product_id',$detailedProduct->id)->first() != null)
{{ translate('Change Bid')}}
@else
{{ translate('Place Bid')}}
@endif
</button>
@endif
</div>
@endif
<div class="row no-gutters mt-4">
<div class="col-sm-2">
<div class="opacity-50 my-2">{{ translate('Share')}}:</div>
</div>
<div class="col-sm-10">
<div class="aiz-share"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="mb-4">
<div class="container">
<div class="row gutters-10">
<div class="col-xl-12 order-0 order-xl-1">
<div class="bg-white mb-3 shadow-sm rounded">
<div class="nav border-bottom aiz-nav-tabs">
<a href="#tab_default_1" data-toggle="tab" class="p-3 fs-16 fw-600 text-reset active show">{{ translate('Description')}}</a>
@if($detailedProduct->video_link != null)
<a href="#tab_default_2" data-toggle="tab" class="p-3 fs-16 fw-600 text-reset">{{ translate('Video')}}</a>
@endif
@if($detailedProduct->pdf != null)
<a href="#tab_default_3" data-toggle="tab" class="p-3 fs-16 fw-600 text-reset">{{ translate('Downloads')}}</a>
@endif
@if($detailedProduct->auction_product == 0)
<a href="#tab_default_4" data-toggle="tab" class="p-3 fs-16 fw-600 text-reset">{{ translate('Reviews')}}</a>
@endif
</div>
<div class="tab-content pt-0">
<div class="tab-pane fade active show" id="tab_default_1">
<div class="p-4">
<div class="mw-100 overflow-hidden text-left aiz-editor-data">
<?php echo $detailedProduct->getTranslation('description'); ?>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab_default_2">
<div class="p-4">
<div class="embed-responsive embed-responsive-16by9">
@if ($detailedProduct->video_provider == 'youtube' && isset(explode('=', $detailedProduct->video_link)[1]))
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/{{ explode('=', $detailedProduct->video_link)[1] }}"></iframe>
@elseif ($detailedProduct->video_provider == 'dailymotion' && isset(explode('video/', $detailedProduct->video_link)[1]))
<iframe class="embed-responsive-item" src="https://www.dailymotion.com/embed/video/{{ explode('video/', $detailedProduct->video_link)[1] }}"></iframe>
@elseif ($detailedProduct->video_provider == 'vimeo' && isset(explode('vimeo.com/', $detailedProduct->video_link)[1]))
<iframe src="https://player.vimeo.com/video/{{ explode('vimeo.com/', $detailedProduct->video_link)[1] }}" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
@endif
</div>
</div>
</div>
<div class="tab-pane fade" id="tab_default_3">
<div class="p-4 text-center ">
<a href="{{ uploaded_asset($detailedProduct->pdf) }}" class="btn btn-primary">{{ translate('Download') }}</a>
</div>
</div>
<div class="tab-pane fade" id="tab_default_4">
<div class="p-4">
<ul class="list-group list-group-flush">
@foreach ($detailedProduct->reviews as $key => $review)
@if($review->user != null)
<li class="media list-group-item d-flex">
<span class="avatar avatar-md mr-3">
<img class="lazyload"
src="{{ static_asset('assets/img/placeholder.jpg') }}"
onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder.jpg') }}';"
@if($review->user->avatar_original !=null)
data-src="{{ uploaded_asset($review->user->avatar_original) }}"
@else
data-src="{{ static_asset('assets/img/placeholder.jpg') }}"
@endif
>
</span>
<div class="media-body text-left">
<div class="d-flex justify-content-between">
<h3 class="fs-15 fw-600 mb-0">{{ $review->user->name }}</h3>
<span class="rating rating-sm">
@for ($i=0; $i < $review->rating; $i++)
<i class="las la-star active"></i>
@endfor
@for ($i=0; $i < 5-$review->rating; $i++)
<i class="las la-star"></i>
@endfor
</span>
</div>
<div class="opacity-60 mb-2">{{ date('d-m-Y', strtotime($review->created_at)) }}</div>
<p class="comment-text">
{{ $review->comment }}
</p>
</div>
</li>
@endif
@endforeach
</ul>
@if(count($detailedProduct->reviews) <= 0)
<div class="text-center fs-18 opacity-70">
{{ translate('There have been no reviews for this product yet.') }}
</div>
@endif
@if(Auth::check())
@php
$commentable = false;
@endphp
@foreach ($detailedProduct->orderDetails as $key => $orderDetail)
@if($orderDetail->order != null && $orderDetail->order->user_id == Auth::user()->id &&
$orderDetail->delivery_status == 'delivered' &&
\App\Models\Review::where('user_id', Auth::user()->id)->where('product_id', $detailedProduct->id)->first() == null)
@php
$commentable = true;
@endphp
@endif
@endforeach
@if ($commentable)
<div class="pt-4">
<div class="border-bottom mb-4">
<h3 class="fs-17 fw-600">
{{ translate('Write a review')}}
</h3>
</div>
<form class="form-default" role="form" action="{{ route('reviews.store') }}" method="POST">
@csrf
<input type="hidden" name="product_id" value="{{ $detailedProduct->id }}">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="" class="text-uppercase c-gray-light">{{ translate('Your name')}}</label>
<input type="text" name="name" value="{{ Auth::user()->name }}" class="form-control" disabled required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="" class="text-uppercase c-gray-light">{{ translate('Email')}}</label>
<input type="text" name="email" value="{{ Auth::user()->email }}" class="form-control" required disabled>
</div>
</div>
</div>
<div class="form-group">
<label class="opacity-60">{{ translate('Rating')}}</label>
<div class="rating rating-input">
<label>
<input type="radio" name="rating" value="1" required>
<i class="las la-star"></i>
</label>
<label>
<input type="radio" name="rating" value="2">
<i class="las la-star"></i>
</label>
<label>
<input type="radio" name="rating" value="3">
<i class="las la-star"></i>
</label>
<label>
<input type="radio" name="rating" value="4">
<i class="las la-star"></i>
</label>
<label>
<input type="radio" name="rating" value="5">
<i class="las la-star"></i>
</label>
</div>
</div>
<div class="form-group">
<label class="opacity-60">{{ translate('Comment')}}</label>
<textarea class="form-control" rows="4" name="comment" placeholder="{{ translate('Your review')}}" required></textarea>
</div>
<div class="text-right">
<button type="submit" class="btn btn-primary mt-3">
{{ translate('Submit review')}}
</button>
</div>
</form>
</div>
@endif
@endif
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
@endsection
@section('modal')
<div class="modal fade" id="chat_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-zoom product-modal" id="modal-size" role="document">
<div class="modal-content position-relative">
<div class="modal-header">
<h5 class="modal-title fw-600 h5">{{ translate('Any query about this product')}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form class="" action="{{ route('conversations.store') }}" method="POST" enctype="multipart/form-data">
@csrf
<input type="hidden" name="product_id" value="{{ $detailedProduct->id }}">
<div class="modal-body gry-bg px-3 pt-3">
<div class="form-group">
<input type="text" class="form-control mb-3" name="title" value="{{ $detailedProduct->name }}" placeholder="{{ translate('Product Name') }}" required>
</div>
<div class="form-group">
<textarea class="form-control" rows="8" name="message" required placeholder="{{ translate('Your Question') }}">{{ route('product', $detailedProduct->slug) }}</textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary fw-600" data-dismiss="modal">{{ translate('Cancel')}}</button>
<button type="submit" class="btn btn-primary fw-600">{{ translate('Send')}}</button>
</div>
</form>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="login_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-zoom" role="document">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title fw-600">{{ translate('Login')}}</h6>
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true"></span>
</button>
</div>
<div class="modal-body">
<div class="p-3">
<form class="form-default" role="form" action="{{ route('cart.login.submit') }}" method="POST">
@csrf
<div class="form-group">
@if (addon_is_activated('otp_system'))
<input type="text" class="form-control h-auto form-control-lg {{ $errors->has('email') ? ' is-invalid' : '' }}" value="{{ old('email') }}" placeholder="{{ translate('Email Or Phone')}}" name="email" id="email">
@else
<input type="email" class="form-control h-auto form-control-lg {{ $errors->has('email') ? ' is-invalid' : '' }}" value="{{ old('email') }}" placeholder="{{ translate('Email') }}" name="email">
@endif
@if (addon_is_activated('otp_system'))
<span class="opacity-60">{{ translate('Use country code before number') }}</span>
@endif
</div>
<div class="form-group">
<input type="password" name="password" class="form-control h-auto form-control-lg" placeholder="{{ translate('Password')}}">
</div>
<div class="row mb-2">
<div class="col-6">
<label class="aiz-checkbox">
<input type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }}>
<span class=opacity-60>{{ translate('Remember Me') }}</span>
<span class="aiz-square-check"></span>
</label>
</div>
<div class="col-6 text-right">
<a href="{{ route('password.request') }}" class="text-reset opacity-60 fs-14">{{ translate('Forgot password?')}}</a>
</div>
</div>
<div class="mb-5">
<button type="submit" class="btn btn-primary btn-block fw-600">{{ translate('Login') }}</button>
</div>
</form>
<div class="text-center mb-3">
<p class="text-muted mb-0">{{ translate('Dont have an account?')}}</p>
<a href="{{ route('user.registration') }}">{{ translate('Register Now')}}</a>
</div>
@if(get_setting('google_login') == 1 ||
get_setting('facebook_login') == 1 ||
get_setting('twitter_login') == 1)
<div class="separator mb-3">
<span class="bg-white px-3 opacity-60">{{ translate('Or Login With')}}</span>
</div>
<ul class="list-inline social colored text-center mb-5">
@if (get_setting('facebook_login') == 1)
<li class="list-inline-item">
<a href="{{ route('social.login', ['provider' => 'facebook']) }}" class="facebook">
<i class="lab la-facebook-f"></i>
</a>
</li>
@endif
@if(get_setting('google_login') == 1)
<li class="list-inline-item">
<a href="{{ route('social.login', ['provider' => 'google']) }}" class="google">
<i class="lab la-google"></i>
</a>
</li>
@endif
@if (get_setting('twitter_login') == 1)
<li class="list-inline-item">
<a href="{{ route('social.login', ['provider' => 'twitter']) }}" class="twitter">
<i class="lab la-twitter"></i>
</a>
</li>
@endif
</ul>
@endif
</div>
</div>
</div>
</div>
</div>
@if($detailedProduct->auction_product == 1)
{{-- Bid Modal --}}
<div class="modal fade" id="bid_for_product" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">{{ translate('Bid For Product') }} <small>({{ translate('Min Bid Amount: ').$min_bid_amount }})</small> </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
<form class="form-horizontal" action="{{ route('auction_product_bids.store') }}" method="POST" enctype="multipart/form-data">
@csrf
<input type="hidden" name="product_id" value="{{ $detailedProduct->id }}">
<div class="form-group">
<label class="form-label">
{{translate('Place Bid Price')}}
<span class="text-danger">*</span>
</label>
<div class="form-group">
<input type="number" step="0.01" class="form-control form-control-sm" name="amount" min="{{ $min_bid_amount }}" placeholder="{{ translate('Enter Amount') }}" required>
</div>
</div>
<div class="form-group text-right">
<button type="submit" class="btn btn-sm btn-primary transition-3d-hover mr-1">{{ translate('Submit') }}</button>
</div>
</form>
</div>
</div>
</div>
</div>
@endif
@endsection
@section('script')
<script type="text/javascript">
function show_chat_modal(){
@if (Auth::check())
$('#chat_modal').modal('show');
@else
$('#login_modal').modal('show');
@endif
}
function bid_modal(){
@if (Auth::check() && (Auth::user()->user_type == 'customer' || Auth::user()->user_type == 'seller'))
$('#bid_for_product').modal('show');
@else
$('#login_modal').modal('show');
@endif
}
</script>
@endsection
|