@extends('layouts.master')
@section('page')
    <title>{{$product->name}} | {{setting('site.title')}}</title>
@endsection
@section('content')
    <div class="container">
        @if (session()->has('success_message'))
            <div class="alert alert-success">
                {{ session()->get('success_message') }}
            </div>
        @endif
        @if(count($errors) > 0)
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
    </div>
    <section class="section page-content pt-80 pb-80">
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class=" align-items-center ">
                        <a href="{{ route('shop') }}" style="color: #595959; text-decoration:none;">Go Back
                            <i class="fas fa-arrow-left"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="product-img-style text-center">
                        @if ($product->quantity <= 0)
                            <span class="product-badges"> 
                                <span class="outofstock">Out <br> of Stock</span>
                            </span>
                        @endif
                        <img class="card-img-top border-bottom" src="{{ Voyager::image($product->thumbnail('small')) }}" alt="{{$product->name}}">
                    </div>
                </div>
                <div class="col-lg-6 mt-5 mt-lg-0 text-center">
                    <h3 class="text-dark  mt-10 mb-10">{{$product->name}}</h3>
                    @if ($product->price > 0)
                        @if($product->on_sale)
                            <h3 class="font-secondery mt-20" >
                                <span style="text-decoration: line-through; color:#aaa;">$ {{$product->price}}</span>
                                <span class="text-dark">$ {{$product->on_sale}}</span>
                            </h3>
                        @else
                            <h3 class="font-secondery text-dark mt-20" >
                                $ {{$product->price}}
                            </h3>
                        @endif
                        
                    @endif
                    <hr>
                    <div class="mb-20">
                        @if ($product->quantity <= 0)
                            <p class="font-w-700" style="color: #d33733">Currently out of stock</p>
                            @else
                            <p class="font-w-700" style="color: #d33733">In Stock</p>
                        @endif
                    </div>
                    <div class=" align-items-center mt-30">
                        @if (Auth::check() && $product->quantity > 0)
                            <div class="row">
                                @if ($product->price > 0)

                                    <div class="col-md-12  justify-content-center">
                                        <select id="myquantity" class="quan" name="quantity" onchange="myFunction()">
                                            @for ($i = 1; $i <= $product->quantity ; $i++)
                                                <option value="{{$i}}">{{ $i }}</option>
                                            @endfor
                                        </select>

                                        <a id="quick-add-to-bag" data-id="{{$product->slug}}" class="btn btn-sm btn-primary1" data-style="expand-right" data-spinner-color="#e4dbd0" data-hint="Add to Cart" style="border-radius: 500px; color: white">
                                            <i class="fas fa-shopping-cart"></i> Add to Cart
                                        </a>
                                    </div>
                                @else
                                    <div class="col-md-12">
                                        <a target="_blank" href="https://wa.me/+9611880553" class="btn btn-sm btn-primary1" style="border-radius: 500px; color: white">Ask for price</a>
                                    </div>
                                @endif
                            </div>
                        @elseif(!Auth::check() && $product->quantity > 0)
                        @if ($product->price > 0)
                            <div class="row">
                                <div class="col-md-12">
                                    <a data-toggle="modal" data-target="#loginModal" class="btn btn-sm btn-primary1" data-style="expand-right" data-spinner-color="#e4dbd0" data-hint="Add to Cart" style="border-radius: 500px; color: white">
                                        <i class="fas fa-shopping-cart"></i> Add to Cart
                                    </a>
                                </div>
                            </div>
                          @else
                          <div class="col-md-12">
                                <a target="_blank" href="https://wa.me/+9611880553" class="btn btn-sm btn-primary1" style="border-radius: 500px; color: white">Ask for price</a>
                          </div>
@endif

                        @endif
                    </div>

                    @php
                        $images=json_decode($product->gallery,true);    
                    @endphp
                        
                        @if ($images && count($images) > 0 )
                            <div class="row mt-5 text-center">
                                @foreach ($images as $item)
                                    <div class="col-md-3">
                                        <a href="{{  Voyager::image( $item) }}" data-fancybox="gallery" data-caption="{{$product->name}} #{{$loop->index}}">
                                            <img src="{{ Voyager::image($product->getThumbnail($item, 'thumb')) }}" alt="{{$product->name}} | Techsupport" />
                                        </a>
                                    </div>
                                @endforeach
                            
                            </div>
                        @endif
                </div>
            </div>
            <div class="row mt-50">
                <div class="col-md-12">
                    <div class="border-bottom-tab">
                        <ul class="nav nav-tabs justify-content-center" id="myTab" role="tablist">
                            @if ($product->description)
                                <li class="nav-item" role="presentation">
                                    <p class="nav-link text-reset active">Description</p>
                                </li>
                            @endif
                        </ul>
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="desc" role="tabpanel">
                                <div class="pt-30">
                                    @if ($product->description)
                                        <p>{!! $product->description !!}</p>
                                    @endif 
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @if($relatedProducts->count() > 0)
                <div class="row mt-60">
                    <div class="col-md-12">
                        <h3 class="text-dark text-center mb-40">Related Products</h3>
                    </div>
                    @foreach ($relatedProducts as $item)
                        <div class="col-lg-4 col-md-6">
                            <div class="card border-0 product-item shadow-sm mb-30">
                                <a href="{{ route('product', ['slug' => $item->slug]) }}">
                                    <img class="card-img-top border-bottom" src="{{ Voyager::image($item->thumbnail('medium')) }}" alt="{{$item->name}}">
                                </a>
                                <div class="card-body">
                                    <div class="show-on-hover">
                                        <a href="{{ route('product', ['slug' => $item->slug]) }}" class="btn btn-primary1 rounded-pill">View Details</a>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between">
                                        <small class="text-uppercase font-w-600">
                                            <a class="item_title" href="{{ route('product', ['slug' => $item->slug]) }}">{{$item->name}}</a>
                                        </small>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between">
                                        @if ($product->on_sale)
                                        <h4 class="font-w-700  font-secondery" style="text-decoration: line-through;color: #aaa; font-size: 18px;">$ {{$product->price}}</h4>
                                        <h4 style="font-size: 18px;" class="font-w-700 text-dark font-secondery">$ {{$product->on_sale}}</h4>
                                        @else
                                            @if ($product->price > 0)
                                                <h4 style="font-size: 18px;" class="font-w-700 text-dark font-secondery">$ {{$product->price}}</h4>
                                            @else
                                               <a target="_blank" href="https://wa.me/+9611880553" style="color: #595959;">Ask for price</a>
                                            @endif
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                    <div class="col-md-12 text-center mt-20">
                        <a href="{{route('shop')}}" class="btn btn-primary1" style="border-radius: 500px">More Products</a>
                    </div>
                </div>
            @endif
        </div>
    </section>
@endsection

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"/>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
<script>
    Fancybox.bind("[data-fancybox]", {});
</script>
@endpush