@extends('layouts.app', ['isProduct' => TRUE])

@section('content')
    @php $supplier = $product->suppliers()->first(); @endphp

    <style>.woocommerce-product-gallery {
            opacity: 1 !important;
        }

        img.wp-post-image {
            max-height: 600px;
            padding: 0px;
            margin: 30px !important;
        }

        .single-product #primary .entry-summary .woocommerce-product-add-cart .nice-select {
            border-radius: 4px !important;
            margin-bottom: 10px;
            background: #f8f8f8 !important;
            color: black;
            border: 1px solid #efefef;
        }

        h3.product-price {
            font-size: 14pt;
            background: #ecffdd;
            color: #73b043;
            padding: 8px;
            display: inline-block;
        }

        .woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
            background: white;
            padding: 15px;
            border: 1px solid #f8f8f8;
        }

        .woocommerce-tab-content {
            background: white;
        }
    </style>
    <div class="container content-container"  style="margin-top: 30px; padding-bottom: 40px; background:white">
        <div class="row content-row">
            @include('pages.product._sidebar')
            <div class="col-xl-9" id="primary">


                <div id="shop-breadcrumb">
                    <ul class="cms-breadcrumb">
                        <li><a class="breadcrumb-entry" href="/"> <i class="fas fa-home"></i>Home</a></li>
                        <li><a class="breadcrumb-entry" href="/">Shop</a></li>
                        @php $category = $product->categories()->first(); @endphp
                        <li><a class="breadcrumb-entry"
                               href="{{ route('category',$category->slug) }}">{{ $category->name }}</a></li>
                        <li><a class="breadcrumb-entry"
                               href="{{ route('product', $product->id) }}">{{$product->name}}</a></li>
                    </ul>
                </div>
                <div class="woocommerce-notices-wrapper d-none">
                    <div class="woocommerce-message" role="alert">
                        <a href="/cart/" tabindex="1"
                           class="button wc-forward">View cart</a>
                        <span class="addMessageCart"></span>
                    </div>
                </div>

                @if(session('success'))
                    <div class="col-sm-12 p-t-20">
                        <div class="alert alert-success" role="alert">
                            <h4> {!! session('success') !!}</h4>
                        </div>
                    </div>
                @endif


                @if ($errors->any())
                    <div class="col-sm-12 p-t-20">
                        <div class="alert alert-danger ">
                            @foreach ($errors->all() as $error)
                                <h4>{{ $error }}</h4>
                            @endforeach
                        </div>
                    </div>
                @endif

                <div class="row no-gutters-sm">
                    <div class="col-12">

                        <div id="product-534"
                             class="product type-product post-534 status-publish first instock product_cat-jams product_cat-jams-spreads product_tag-pasta product_tag-spirals product_tag-tricolore has-post-thumbnail featured taxable shipping-taxable purchasable product-type-variable">

                            <div class="woocommerce-summary-wrap row">
                                <div class="woocommerce-gallery col-xl-6 col-lg-6 col-md-12">
                                    <div class="woocommerce-product-gallery woocommerce-product-gallery--with-images woocommerce-product-gallery--columns-4 images"
                                         data-columns="4"
                                         style="opacity: 0; transition: opacity .25s ease-in-out;">
                                        <figure class="woocommerce-product-gallery__wrapper">
                                            <div data-thumb="{{ ($product->getFirstMediaUrl('images') &&  $product->getFirstMediaUrl('images') != '') ? $product->getFirstMediaUrl('images') :  asset('/images/noimage.jpg') }}"
                                                 data-thumb-alt=""
                                                 class="woocommerce-product-gallery__image"><a
                                                        href="{{ ($product->getFirstMediaUrl('images') &&  $product->getFirstMediaUrl('images') != '') ? $product->getFirstMediaUrl('images') :  asset('/images/noimage.jpg') }}"><img
                                                            src="{{ ($product->getFirstMediaUrl('images') &&  $product->getFirstMediaUrl('images') != '') ? $product->getFirstMediaUrl('images') :  asset('/images/noimage.jpg') }}"
                                                            class="wp-post-image" alt=""
                                                            title="{{ $product->name }}"
                                                            data-caption=""
                                                            data-large_image_width="0" data-large_image_height="0"
                                                            data-src="{{ ($product->getFirstMediaUrl('images') &&  $product->getFirstMediaUrl('images') != '') ? $product->getFirstMediaUrl('images') :  asset('/images/noimage.jpg') }}"
                                                            data-large_image="{{ ($product->getFirstMediaUrl('images') &&  $product->getFirstMediaUrl('images') != '') ? $product->getFirstMediaUrl('images') :  asset('/images/noimage.jpg') }}"
                                                            srcset="{{ ($product->getFirstMediaUrl('images') &&  $product->getFirstMediaUrl('images') != '') ? $product->getFirstMediaUrl('images') :  asset('/images/noimage.jpg') }} 201w, {{ ($product->getFirstMediaUrl('images') &&  $product->getFirstMediaUrl('images') != '') ? $product->getFirstMediaUrl('images') :  asset('/images/noimage.jpg') }} 113w"
                                                            sizes="(max-width: 400px) 100vw, 400px"/></a>
                                            </div>
                                        </figure>
                                    </div>
                                </div>
                                <div class="col-xl-6 col-lg-6 col-md-12">
                                    <div class="summary entry-summary">
                                        <h1 class="product_title entry-title">
                                            {{ $product->name }}</h1>
                                        <div class="woocommerce-product-subtitle">{{$category->name}}
                                            / {{$supplier->name}}</div>
                                        <div class="product-attr-inner attr-tooltip">
                                            <a href="{{ route('category',$category->slug) }}">
                                                @if($product->is_instant) <i class=""
                                                                             style="background-color: #89c33b; border-color: #89c33b;">I</i>
                                                <span>Available for Instant Collection</span>
                                                @else
                                                    <i class=""
                                                       style="background-color: #b4733b; border-color: #b4733b;">48H</i>
                                                    <span>Available within 48 Hours</span>
                                                @endif
                                            </a>
                                        </div>
                                        <div class="woocommerce-product-add-cart">

                                            <form class="variations_form cart"
                                                  action="{{ route('cart.add', $product->id) }}" method="post"
                                                  data-product_id="534">
                                                {{ csrf_field() }}

                                                <table class="" cellspacing="0">
                                                    <tbody>
                                                    <tr>
                                                        <td class="label"><label
                                                                    for="pa_sizes">Sizes</label></td>
                                                        <td class="value value woo-variation-items-wrapper">
                                                            <select class="no-round-input" id="item-product"
                                                                    name="item">
                                                                @foreach($items as $item)
                                                                    <option value="{{ $item->id }}"
                                                                            data-price="{{ $product->getBuyablePrice($item) }}">{{ $item->name }}
                                                                        - &pound;{{ $product->getBuyablePrice($item) }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="label">Price</td>
                                                        <td class="value">
                                                            <div class="quantity-select">
                                                                <span class="priceInformation"></span>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="label">Quantity</td>
                                                        <td class="value quantity">
                                                            <input
                                                                    type="number"
                                                                    id="quantity"
                                                                    class="input-text qty text"
                                                                    step="1"
                                                                    min="1"
                                                                    max=""
                                                                    name="quantity"
                                                                    value="1"
                                                                    title="Qty"
                                                                    size="4"
                                                                    inputmode="numeric"/>
                                                        </td>
                                                    </tr>
                                                    </tbody>
                                                </table>

                                                <div class="single_variation_wrap">
                                                    <div class="woocommerce-variation-add-to-cart variations_button">

                                                        <button type="submit"
                                                                class="single_add_to_cart_button button alt">
                                                            Add
                                                            Cart
                                                        </button>
                                                    </div>
                                                </div>

                                            </form>

                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="woocommerce-custom-tabs">
                                <div class="woocommerce-tab-item">
                                    <div class="woocommerce-tab-heading">
                                        Product Description
                                    </div>
                                    <div class="woocommerce-tab-content">
                                        <p>{!! $product->description !!}</p>
                                    </div>
                                </div>
                                <div class="woocommerce-tab-item">
                                    <div class="woocommerce-tab-heading">Specification</div>
                                    <div class="woocommerce-tab-content">
                                        <div class="specifications_block">
                                            <table class="shop_attributes table-bordered">
                                                <tbody>

                                                <tr>
                                                    <th>Supplier</th>
                                                    <td><a class="breadcrumb-link"
                                                           href="{{ route('suppliers.getSupplier',$supplier->id) }}">{{$supplier->name}}</a>
                                                    </td>
                                                </tr>


                                                <tr>
                                                    <th>Ingredients</th>
                                                    <td class="product_weight">
                                                        {{$product->ingredients}}
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <th>Shelf Life</th>
                                                    <td class="product_weight">
                                                        {{$product->shelf_life}}
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <th>Allergen Information</th>
                                                    <td class="product_weight">
                                                        {{$product->allergen_info}}
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <th>Category</th>
                                                    <td class="product_dimensions">
                                                        {{$product->categories()->first()->name}}
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <th>SKU</th>
                                                    <td class="product_color">
                                                        {{$product->sku}}
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
    @if($product->categories()->first()->id == 5 || $product->categories()->first()->parent_id
    == 5)
        <div class="under25">
            <img src="/under25.jpg" alt="Challenge 25"
                 style="width: 100%; margin-bottom: 10px;">
        </div>
    @endif

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection


@section('myjsfile')
    <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="pswp__bg"></div>
        <div class="pswp__scroll-wrap">
            <div class="pswp__container">
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
            </div>
            <div class="pswp__ui pswp__ui--hidden">
                <div class="pswp__top-bar">
                    <div class="pswp__counter"></div>
                    <button class="pswp__button pswp__button--close" aria-label="Close (Esc)"></button>
                    <button class="pswp__button pswp__button--share" aria-label="Share"></button>
                    <button class="pswp__button pswp__button--fs" aria-label="Toggle fullscreen"></button>
                    <button class="pswp__button pswp__button--zoom" aria-label="Zoom in/out"></button>
                    <div class="pswp__preloader">
                        <div class="pswp__preloader__icn">
                            <div class="pswp__preloader__cut">
                                <div class="pswp__preloader__donut"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                    <div class="pswp__share-tooltip"></div>
                </div>
                <button class="pswp__button pswp__button--arrow--left"
                        aria-label="Previous (arrow left)"></button>
                <button class="pswp__button pswp__button--arrow--right"
                        aria-label="Next (arrow right)"></button>
                <div class="pswp__caption">
                    <div class="pswp__caption__center"></div>
                </div>
            </div>
        </div>
    </div>

    <script type="application/javascript">
        $(document).ready(function () {

            $('#content .quantity').append('<span class="quantity-icon"><i class="quantity-down zmdi zmdi-minus"></i><i class="quantity-up zmdi zmdi-plus"></i></span>');
            $('.quantity-up').on('click', function () {
                $(this).parents('.quantity').find('input[type="number"]').get(0).stepUp();
                $(this).parents('.quantity').find('input[type="number"]').get(0).blur()
                $('.woocommerce-cart-form .actions .button').removeAttr('disabled');
                calculatePrice();
            });
            $('.quantity-down').on('click', function () {
                $(this).parents('.quantity').find('input[type="number"]').get(0).stepDown();
                $(this).parents('.quantity').find('input[type="number"]').get(0).blur()
                $('.woocommerce-cart-form .actions .button').removeAttr('disabled');
                calculatePrice();
            });

            $('.woocommerce-cart button[name="update_cart"]').on('click', function () {
                $('#content .quantity').append('<span class="quantity-icon"><i class="quantity-down zmdi zmdi-minus"></i><i class="quantity-up zmdi zmdi-plus"></i></span>');
            });

            $('.variations_form.cart').on('submit', function (event) {
                event.preventDefault();
                event.stopPropagation();
                let product = {{$product->id}};
                let item = $("#item-product").val();
                let quantity = $("#quantity").val();
                $.ajax({
                    url: '/addToCartAPI/' + product + '/' + quantity,
                    type: 'POST',
                    data: {
                        item: item,
                        product: product,
                        quantity: quantity
                    },
                    success: (e) => {
                        console.log(e);
                    }, error: (e) => {
                        console.log(e);
                        //window.location.reload();
                    }
                });
            });


            function calculatePrice() {
                        @if($items && count($items) > 0)
                let item = $("#item-product option:selected")[0];
                if (typeof item == "undefined") {
                    item = $("#item-product option")[0];
                }
                let itemPrice = $(item).data("price");
                        @else
                let itemPrice = '{{ $product->getBuyablePrice() }}';
                        @endif

                const qty = $("#quantity").val()
                $(".priceInformation").html("&pound;" + parseFloat((qty * itemPrice)).toFixed(2))
                console.log(item);

            }

            $(document).on("blur", "#item-product", function() {
                calculatePrice();
            })

            $(document).on("change", "#item-product", function() {
                calculatePrice();
            })

            $(document).on("blur", "#quantity", function() {
                calculatePrice();
            })
            $(document).on("change", "#quantity", function() {
                calculatePrice();
            })

            $(document).on("blur", "#quantity", function() {
                calculatePrice();
            })
            calculatePrice();

        })
    </script>
    <link rel='stylesheet' id='up.social.icons-css'
          href='https://demo.cmssuperheroes.com/themeforest/raworganic/wp-content/plugins/user-press/acess/css/socicon.css?ver=5.5.1'
          type='text/css' media='all'/>
    <link rel='stylesheet' id='photoswipe-css'
          href='https://demo.cmssuperheroes.com/themeforest/raworganic/wp-content/plugins/woocommerce/assets/css/photoswipe/photoswipe.min.css?ver=4.4.1'
          type='text/css' media='all'/>
    <link rel='stylesheet' id='photoswipe-default-skin-css'
          href='https://demo.cmssuperheroes.com/themeforest/raworganic/wp-content/plugins/woocommerce/assets/css/photoswipe/default-skin/default-skin.min.css?ver=4.4.1'
          type='text/css' media='all'/>
    <script type='text/javascript'
            src='https://demo.cmssuperheroes.com/themeforest/raworganic/wp-content/plugins/woocommerce/assets/js/zoom/jquery.zoom.min.js?ver=1.7.21'
            id='zoom-js'></script>
    <script type='text/javascript'
            src='https://demo.cmssuperheroes.com/themeforest/raworganic/wp-content/plugins/js_composer/assets/lib/bower/flexslider/jquery.flexslider-min.js?ver=6.0.5'
            id='flexslider-js'></script>
    <script type='text/javascript'
            src='https://demo.cmssuperheroes.com/themeforest/raworganic/wp-content/plugins/woocommerce/assets/js/photoswipe/photoswipe.min.js?ver=4.1.1'
            id='photoswipe-js'></script>
    <script type='text/javascript'
            src='https://demo.cmssuperheroes.com/themeforest/raworganic/wp-content/plugins/woocommerce/assets/js/photoswipe/photoswipe-ui-default.min.js?ver=4.1.1'
            id='photoswipe-ui-default-js'></script>
    <script type='text/javascript' id='wc-single-product-js-extra'>
        /* <![CDATA[ */
        var wc_single_product_params = {
            "i18n_required_rating_text": "Please select a rating",
            "review_rating_required": "yes",
            "flexslider": {
                "rtl": false,
                "animation": "slide",
                "smoothHeight": true,
                "directionNav": false,
                "controlNav": "thumbnails",
                "slideshow": false,
                "animationSpeed": 500,
                "animationLoop": false,
                "allowOneSlide": false
            },
            "zoom_enabled": "1",
            "zoom_options": [],
            "photoswipe_enabled": "1",
            "photoswipe_options": {
                "shareEl": false,
                "closeOnScroll": false,
                "history": false,
                "hideAnimationDuration": 0,
                "showAnimationDuration": 0
            },
            "flexslider_enabled": "1"
        };
        /* ]]> */
    </script>
    <script type='text/javascript'
            src='/wp-content/plugins/woocommerce/assets/js/frontend/single-product.min9e95.js'
            id='wc-single-product-js'></script>
    <script type='text/javascript'
            src='/wp-content/plugins/woocommerce/assets/js/frontend/cart-fragments.min9e95.js?ver=3.8.0'></script>
    <script type='text/javascript'
            src='/wp-content/themes/raworganic/assets/js/bootstrap.mincce7.js?ver=4.0.0'></script>
    <script type='text/javascript' src='/wp-includes/js/comment-reply.minb62d.js?ver=5.1.6'></script>
    <script type='text/javascript'
            src='/wp-content/themes/raworganic/assets/js/headroom.min4b68.js?ver=1.0.4'></script>
    <script type='text/javascript'
            src='/wp-content/themes/raworganic/assets/js/headroom4b68.js?ver=1.0.4'></script>
    <script type='text/javascript'
            src='/wp-content/themes/raworganic/assets/js/translucent.mindc98.js?ver=all'></script>
    <script type='text/javascript'
            src='/wp-content/themes/raworganic/assets/js/nice-select.mindc98.js?ver=all'></script>
    <script type='text/javascript'
            src='/wp-content/themes/raworganic/assets/js/enscrolldc98.js?ver=all'></script>
    <script type='text/javascript'
            src='/wp-content/themes/raworganic/assets/js/match-height-min8a54.js?ver=1.0.0'></script>
    <script type='text/javascript'
            src='/wp-content/themes/raworganic/assets/js/sidebar-scroll-fixed8a54.js?ver=1.0.0'></script>
    <script type='text/javascript'
            src='/wp-content/themes/raworganic/assets/js/magnific-popup.min8a54.js?ver=1.0.0'></script>
    <script type='text/javascript'>
        /* <![CDATA[ */
        var main_data = {"ajax_url": "https:\/\/demo.cmssuperheroes.com\/themeforest\/raworganic\/wp-admin\/admin-ajax.php"};
        /* ]]> */
    </script>
    <script type='text/javascript' src='/wp-content/themes/raworganic/assets/js/main4b68.js?ver=1.0.4'></script>
    <script type='text/javascript' src='/wp-includes/js/underscore.min4511.js?ver=1.8.3'></script>
    <script type='text/javascript' src='/wp-includes/js/wp-util.minb62d.js?ver=5.1.6'></script>
    <script type='text/javascript'>
        /* <![CDATA[ */
        var woo_variation_swatches_options = {"is_product_page": "1"};
        /* ]]> */
    </script>
    <script type='text/javascript' defer
            src='/wp-content/plugins/woo-variation-swatches/assets/js/frontend.min32bb.js?ver=1.0.66'></script>
    <script src="/product.js"></script>

    <script type='text/javascript'
            src="//platform-api.sharethis.com/js/sharethis.js#property=5cdcc0ec7ff0c00012df0aa2&product='inline-share-buttons'"
            async='async'></script>
    <style>
        span.priceInformation {
            font-size: 20pt;
            font-family: sans-serif;
        }
    </style>
    @if(session('html'))
        {!! session('html') !!}
    @endif

@endsection