@extends("layouts.app")
@section("content")

    <div class="main-slider">
        <img class="img-fluid w-100" src="{{ asset('images/innerBnnr.jpg') }}" alt="First slide">
        <div class="carousel-caption">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <h1 class="text-uppercase">PRODUCT DETAIL</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END: Main Slider -->


    <section class="productDetail">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="productImgMain">
                        <div class="product-detail-slider">
                            @foreach($product->product_catalog as $productImage)
                                <div>
                                    <img
                                            src="{{ empty($productImage->product_images) ? asset('images/placeholder.png') : asset('uploads/products/' . $productImage->product_images) }}"
                                            alt="">
                                </div>
                            @endforeach
                        </div>
                        <div class="product-detail-nav">
                            @foreach($product->product_catalog as $productImage)
                                <div>
                                    <img
                                            src="{{ empty($productImage->product_images) ? asset('images/placeholder.png') : asset('uploads/products/' . $productImage->product_images) }}"
                                            alt="">
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="prodctdetailContent">
                        <h2>{{ $product->product_name }}</h2>

                        @if($product_sale_price > 0)
                            <span>$<s>{{ $product->product_current_price }}</s> {{ $product_sale_price }}</span>
                        @elseif($product->product_current_price > 0)
                            <span>${{ $product->product_current_price }}</span>
                        @endif
                        <p><span>{!! $product->description !!}</span>
                        </p>
                        @if($product->product_stock == 'yes' && $btn_enable)
                            @include('includes.add-to-cart-form')
                        @endif
                        @if(!$btn_enable)
                            <p class="text-danger">Canvas not set!</p>
                        @endif

                        <div class="mt-4 border-top pt-3">
                            <h5>Share on Social Media</h5>
                            {!! Share::page(url()->current(), "Product: ".$product->product_name)
                                    ->facebook()
                                    ->twitter()
                                    ->linkedin() !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('script')
    <script>
        $('#minus-qty').css("margin-top");
        $('#minus-qty').click(function () {
            var crtval = $(this).next('.input-quantity').val();
            if (crtval < 2) {
                // alert('Quanty Must Be 1');
                toastr.error('Quantity Must Be 1');
            } else {
                var cartval = parseInt(crtval) - parseInt(1);
                //alert(cartval);
                $(this).next('.input-quantity').append().val(cartval);
            }
        });

        //add quantity
        $('#plus-qty').click(function () {
            var crtval = $(this).prev('.input-quantity').val();
            var cartval = parseInt(crtval) + parseInt(1);
            //alert(cartval);
            toastr.success('Quantity Updated Successfully');
            $(this).prev('.input-quantity').append().val(cartval);
        });
    </script>
@endsection

@push('page-scripts')
    <script src="{{asset('js/share.js')}}"></script>
@endpush