@extends('layout.app')

@section('page-title', $productDetailsDto->title)
@section('meta_description', $productInfo['meta_description'])
@section('canonical-link')
    <link rel="canonical" href="{{ $productDetailsDto->canonical_link }}" />
@endsection

@if(PROD_ENV === true)
    @section('tracking')
        <!-- BEGIN: wtDataLayer - view_item -->
        <script>
            dataLayer.push({
                'event': "view_item",
                'ecommerce': {
                    'currency': "USD",
                    'value': {{ $productDetailsDto->info['price'] }},
                    'items': [{
                        'item_id': "{{ $productDetailsDto->product_id }}",
                        'item_name': "{{ $productDetailsDto->productModel->name }}",
                        'price': {{ $productDetailsDto->info['price'] }},
                        'item_category': "{{ $productDetailsDto->productModel->categoryModel->category_name }}",
                    }],
                    'purchase_type': '{{ $vv_purchase_type }}'
                }
            });
        </script>
        <!-- END: wtDataLayer - view_item  -->

        @if(!$GLOBALS['session']->admin)
            <!-- BEGIN: Pinterest -->
            <script>
                pintrk('track', 'Pagevisit', {
                    event_id: 'eventId0001',
                    product_id: '{{ $productId }}',
                    product_name: '{{ $productDetailsDto->productModel->name }}',
                    product_category: '{{ $productDetailsDto->productModel->categoryModel->category_name }}'
                });
            </script>
            <noscript>
                <img height="1" width="1" style="display:none;" alt=""
                    src="https://ct.pinterest.com/v3/?tid=<br />
<b>Warning</b>:  Use of undefined constant PINTEREST_TAG_ID - assumed 'PINTEREST_TAG_ID' (this will throw an Error in a future version of PHP) in <b>/home/staging/wt-git/wt/new-design/views/product_details.blade.php</b> on line <b>49</b><br />
PINTEREST_TAG_ID&event=pagevisit&noscript=1"
                />
            </noscript>
            <!-- END: Pinterest -->
        @endif
    @endsection
@endif

@section('after-css')
    <link rel="stylesheet" href="{{ asset('new-design/css/drift-basic.min.css') }}">
    <link rel="stylesheet" href="{{ asset('new-design/css/photoswipe.css') }}">
@endsection

@section('content')
    <section class="flat-spacing-4 pt_0 product-details">
        <div class="tf-main-product section-image-zoom">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <div class="tf-product-media-wrap thumbs-bottom sticky-top">
                            <div class="thumbs-slider">
                                <div dir="ltr" class="swiper tf-product-media-main" id="gallery-swiper-started">
                                    <div class="swiper-wrapper" >
                                        @foreach($productDetailsDto->images as $image)
                                            <div class="swiper-slide" data-color="brown">
                                                <a href="{{ $image['big'] }}"
                                                   target="_blank"
                                                   class="item"
                                                   data-pswp-width="700px"
                                                   data-pswp-height="750px"
                                                >
                                                    <img class="tf-image-zoom lazyload"
                                                         data-zoom="{{ $image['big'] }}"
                                                         data-src="{{ $image['big'] }}"
                                                         src="{{ $image['big'] }}"
                                                         alt="{{ $image['alt'] }}"
                                                    >
                                                </a>
                                            </div>
                                        @endforeach
                                    </div>
                                    <div class="swiper-button-next button-style-arrow thumbs-next"></div>
                                    <div class="swiper-button-prev button-style-arrow thumbs-prev"></div>
                                </div>
                                <div dir="ltr" class="swiper tf-product-media-thumbs other-image-zoom"
                                     data-direction="horizontal"
                                >
                                    <div class="swiper-wrapper stagger-wrap">
                                        @foreach($productDetailsDto->images as $image)
                                            <div class="swiper-slide stagger-item" data-color="brown">
                                                <div class="item">
                                                    <img class="lazyload"
                                                         data-src="{{ $image['big'] }}"
                                                         src="{{ $image['big'] }}"
                                                         alt="{{ $image['alt'] }}"
                                                    >
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="tf-product-info-wrap position-relative">
                            <div class="tf-zoom-main"></div>
                            <form action="{{ WEB_PATH . 'new-design/add_to_cart.php' }}"
                                  method="post"
                                  id="add-to-cart-form"
                                  class="tf-product-info-list other-image-zoom"
                                  data-product-id="{{ $productDetailsDto->product_id }}"
                                  data-price="{{ number_format($productDetailsDto->info['price'], 2) }}"
                                  data-product-name="{{ $productDetailsDto->productModel->name }}"
                                  data-item-category="{{ $productDetailsDto->productModel->categoryModel->category_name }}"
                            >
                                <input type="hidden" name="product_id" value="{{ $productId }}">
                                <input type="hidden" name="action_name" value="add_to_cart">
                                <div class="tf-product-info-category">{{ $productDetailsDto->productModel->categoryModel->category_name }}</div>
                                <div class="tf-product-info-title">
                                    <h5>{{ $productDetailsDto->productModel->name }}</h5>
                                    <h6>{{ $productDetailsDto->productModel->name2 }}</h6>
                                </div>
                                <div class="tf-product-info-sku">SKU: {{ $productId }}</div>

                                @if($productDetailsDto->retail_display_off)
                                    @if(!$productDetailsDto->admin)
                                        <div class="row">
                                            <div class="tf-product-info-retail-off">
                                                This product is meant to be sold as part of set. To purchase it on its own,
                                                please call us at  and one of our sales associates 
                                                with be happy to assist you.
                                            </div>
                                            <div class="tf-product-info-view-in-sets">
                                                <a href="/new-design/products.php?view_in_sets={{ $productId }}" 
                                                   class="tf-btn btn-fill justify-content-center fw-6 fs-16 flex-grow-1 animate-hover-btn">View in Sets</a>
                                            </div>
                                        </div>
                                    @elseif($productDetailsDto->admin && $productDetailsDto->productModel->discontinued != 'yes')
                                        <div class="row">
                                            <div class="tf-product-info-retail-off admin">
                                                This product has retail_display OFF. Customers will only see pictures, measurements
                                                and description. They won't see prices and won't be able to add product to cart.
                                            </div>
                                        </div>
                                    @endif
                                @endif

                                @if( ( !$productDetailsDto->retail_display_off || 
                                       ($productDetailsDto->admin && $productDetailsDto->retail_display_off) ) && 
                                        $productDetailsDto->productModel->discontinued != 'yes' )
                                    @if($productId === 'GIFTCERT')
                                        <div class="gift-certificate">
                                            <fieldset class="box fieldset attributes_gift_amount_wrapper" id="">
                                                <label for="attributes_gift_amount" class="required">Amount</label>
                                                <input type="text"
                                                    name="attributes_gift_amount"
                                                    id="attributes_gift_amount"
                                                    class="form-control"
                                                    placeholder="0.00"
                                                >
                                            </fieldset>
                                        </div>
                                        <div class="gift-certificate">
                                            <fieldset class="box fieldset" id="attributes_send_date_wrapper">
                                                <label for="attributes_send_date" class="required">Date to send the gift certificate on</label>
                                                <input type="text"
                                                    name="attributes_send_date"
                                                    id="attributes_send_date"
                                                    class="form-control"
                                                >
                                            </fieldset>
                                        </div>
                                        <div class="gift-certificate">
                                            <fieldset class="box fieldset" id="attributes_sender_name_wrapper">
                                                <label for="attributes_sender_name" class="required">Your Name</label>
                                                <input type="text"
                                                    name="attributes_sender_name"
                                                    id="attributes_sender_name"
                                                    class="form-control"
                                                >
                                            </fieldset>
                                        </div>
                                        <div class="gift-certificate">
                                            <fieldset class="box fieldset" id="attributes_recipient_name_wrapper">
                                                <label for="attributes_recipient_name" class="required">Recipient's Name</label>
                                                <input type="text"
                                                    name="attributes_recipient_name"
                                                    id="attributes_recipient_name"
                                                    class="form-control"
                                                >
                                            </fieldset>
                                        </div>
                                        <div class="gift-certificate">
                                            <fieldset class="box fieldset" id="attributes_recipient_email_wrapper">
                                                <label for="attributes_recipient_email" class="required">Recipient's Email</label>
                                                <input type="text"
                                                    name="attributes_recipient_email"
                                                    id="attributes_recipient_email"
                                                    class="form-control"
                                                >
                                            </fieldset>
                                        </div>
                                        <div class="gift-certificate">
                                            <fieldset class="box fieldset" id="attributes_message_wrapper">
                                                <label for="attributes_message" class="required">Your Message</label>
                                                <textarea name="attributes_message"
                                                    id="attributes_message"
                                                    class="form-control"
                                                ></textarea>
                                            </fieldset>
                                        </div>
                                    @else
                                        <div class="tf-product-info-price">
                                            <!--
                                            @if($GLOBALS['session']->rc && !empty($productDetailsDto->info['reseller_sale_comparison_price']))
                                                <div class="compare-at-price">${{ number_format($productDetailsDto->info['reseller_sale_comparison_price'], 2) }}</div>
                                            @endif
                                            -->
                                            @if($productDetailsDto->info['price'] === $productDetailsDto->info['non_sale_price'])
                                                <div class="price">{!! $wtViewHelper->renderPrice($productDetailsDto->info['price']) !!}</div>
                                            @else
                                                <div class="compare-at-price">{!! $wtViewHelper->renderPrice($productDetailsDto->info['non_sale_price']) !!}</div>
                                                <div class="price-on-sale">{!! $wtViewHelper->renderPrice($productDetailsDto->info['price']) !!}</div>
                                            @endif
                                            <br>
                                            <p class="affirm-as-low-as" data-page-type="product" data-amount="{{ $productDetailsDto->info['price'] * 100 }}"></p>
                                        </div>
                                        <div class="tf-product-info-liveview d-none">
                                            <div class="liveview-count">22</div>
                                            <p class="fw-6">People are viewing this right now</p>
                                        </div>
                                        @include('partials.product_details._attributes', ['productDetailsDto' => $productDetailsDto])
                                    @endif
                                    <div class="tf-product-info-quantity">
                                        <label class="form-label w-100">Quantity</label>
                                        <div class="wg-quantity">
                                            <span class="btn-quantity btn-decrease">-</span>
                                            <input id="qty-input" type="text" class="quantity-product" name="qty" required value="1">
                                            <span class="btn-quantity btn-increase">+</span>
                                        </div>
                                    </div>
                                    @if(!empty($productDetailsDto->info['cushion_colors']))
                                        <div id="cover-only-info">
                                            The "Cover Only" option prices the order as cover fabric only (no cushion core).
                                            In-stock fabrics use their stock cover base price, while MTO fabrics charge only
                                            the selected fabric surcharge.
                                        </div>
                                    @endif
                                    @if($productDetailsDto->is_placeholder_cushion && $productId !== '71000MTO')
                                        <div class="box-checkbox fieldset-radio mt-4">
                                            <input type="checkbox"
                                                name="attributes_cover_only"
                                                id="attributes_cover_only"
                                                class="tf-check"
                                                value="yes"
                                                data-charge="{{ $productInfo['cover_only_discount'] }}"
                                            >
                                            <label for="check-agree" class="text_black-2"><b>Cover ONLY</b></label>
                                        </div>
                                    @endif
                                    <div class="tf-product-info-buy-button">
                                        <button id="add-to-cart-btn" 
                                                type="submit"
                                                class="tf-btn btn-fill justify-content-center fw-6 fs-16 flex-grow-1 animate-hover-btn"
                                        >
                                            <span class="text-uppercase">Add to cart</span>
                                        </button>
                                        <a href="javascript:void(0);"
                                            data-product="{{ $productId }}"
                                            class="tf-product-btn-wishlist btn-wishlist hover-tooltip box-icon bg_white wishlist btn-icon-action"
                                        >
                                            @if($productDetailsDto->in_wishlist)
                                                <span class="icon icon-heart-full"></span>
                                                <span class="tooltip">Remove from wishlist</span>
                                            @else
                                                <span class="icon icon-heart"></span>
                                                <span class="tooltip">Add to wishlist</span>
                                            @endif
                                        </a>
                                    </div>
                                    <div class="tf-product-info-extra-link">
                                        @if($productDetailsDto->productModel->imagine_url)
                                            <a href="#interactive_decorator" data-bs-toggle="modal" class="tf-product-extra-icon">
                                                <div class="icon">
                                                    <img src="{{ url('new-design/images/icons/compare.svg') }}" alt="compare colors icon">
                                                </div>
                                                <div class="text fw-6">Compare color</div>
                                            </a>
                                        @endif
                                        <a href="#delivery_return" data-bs-toggle="modal" class="tf-product-extra-icon">
                                            <div class="icon">
                                                <img class="delivery_return-icon"
                                                     src="{{ url('new-design/images/icons/delivery_return.svg') }}" alt="delivery and return icon">
                                            </div>
                                            <div class="text fw-6">Delivery & Return</div>
                                        </a>
                                        <a href="#share_social" data-bs-toggle="modal" class="tf-product-extra-icon">
                                            <div class="icon">
                                                <i class="icon-share"></i>
                                            </div>
                                            <div class="text fw-6">Share</div>
                                        </a>
                                    </div>
                                    <div class="product-support-container wt-pages">
                                        <div class="support-image">
                                            <img src="/new-design/images/icons/phone-agent.webp" alt="Support Representative">
                                        </div>

                                        <div class="support-content">
                                            <h2 class="questions-title">
                                                Questions about this product?
                                            </h2>
                                            <p class="support-subtitle">
                                                Our team is here - no bots, no wait times, no runaround.
                                            </p>
                                            <div class="contact-info">
                                                <span class="phone">
                                                    <a href="tel:{{ $vv_wt_phone }}" aria-label="Call {{ $vv_wt_phoneword }}">{{ $vv_wt_phone }}</a>
                                                </span>
                                                <span class="divider">|</span>
                                                <a href="#ask_question" class="contact-link" id="ask-question">
                                                    Chat with us
                                                </a>
                                                <span class="divider">|</span>
                                                <a href="/new-design/contact_us.php" class="contact-link">
                                                    Contact Us
                                                </a>
                                            </div>
                                        </div>
                                    </div>

                                    @if($productId !== 'GIFTCERT')
                                        <div class="tf-product-info-delivery-return">
                                            <div class="row">
                                                <div class="col-xl-6 col-12">
                                                    <div class="tf-product-delivery">
                                                        <div class="icon">
                                                            <img class="shipping-time-icon"
                                                                 src="{{ url('new-design/images/icons/shipping-time.png') }}" alt="truck delivery icon">
                                                        </div>
                                                        <p>Estimate delivery times:<br><span class="fw-7" id="product_availability">{!! $productInfo['product_page_availability'] !!}</span>.</p>
                                                    </div>
                                                </div>
                                                <div class="col-xl-6 col-12">
                                                    <div class="tf-product-delivery mb-0">
                                                        <div class="icon">
                                                            <i class="icon-return-order"></i>
                                                        </div>
                                                        <p>30 day, Risk-Free Satisfaction Guarantee</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="tf-product-info-trust-seal">
                                        <div class="tf-product-trust-mess">
                                            <i class="icon-safe"></i>
                                            <p class="fw-6">Guarantee Safe <br> Checkout</p>
                                        </div>
                                        <div class="tf-payment">
                                            @include('partials._payment_options')
                                        </div>
                                    </div>
                                @endif
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @include('partials.product_details._tabs', ['productDetailsDto' => $productDetailsDto])
    @if(!empty($productInfo['related_items']))
        <!-- related products -->
        <section class="flat-spacing-1 pt_0 wt-pages">
            <div class="container">
                <div class="flat-title">
                    <span class="title">You may also like</span>
                </div>
                <div class="hover-sw-nav hover-sw-2">
                    <div dir="ltr" class="swiper tf-sw-product-sell wrap-sw-over"
                         data-preview="4"
                         data-tablet="3"
                         data-mobile="2"
                         data-space-lg="30"
                         data-space-md="15"
                         data-pagination="2"
                         data-pagination-md="3"
                         data-pagination-lg="3"
                    >
                        <div class="swiper-wrapper">
                            @foreach($productInfo['related_items'] as $product)
                                <div class="swiper-slide" lazy="true">
                                    @include('partials._product_grid', ['product' => $product])
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="nav-sw nav-next-slider nav-next-product box-icon w_46 round"><span class="icon icon-arrow-left"></span></div>
                    <div class="nav-sw nav-prev-slider nav-prev-product box-icon w_46 round"><span class="icon icon-arrow-right"></span></div>
                    <div class="sw-dots style-2 sw-pagination-product justify-content-center"></div>
                </div>
            </div>
        </section>
        <!-- /related products -->
    @endif
    @if(!empty($productInfo['showcase']))
        <!-- optional products -->
        <section class="flat-spacing-1 pt_0 wt-pages">
            <div class="container">
                <div class="flat-title">
                    <span class="title">Optional products</span>
                </div>
                <div class="hover-sw-nav hover-sw-2">
                    <div dir="ltr" class="swiper tf-sw-product-sell wrap-sw-over"
                         data-preview="4"
                         data-tablet="3"
                         data-mobile="2"
                         data-space-lg="30"
                         data-space-md="15"
                         data-pagination="2"
                         data-pagination-md="3"
                         data-pagination-lg="3"
                    >
                        <div class="swiper-wrapper">
                            @foreach($productInfo['showcase'] as $product)
                                <div class="swiper-slide" lazy="true">
                                    @include('partials._product_grid', ['product' => $product])
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="nav-sw nav-next-slider nav-next-product box-icon w_46 round"><span class="icon icon-arrow-left"></span></div>
                    <div class="nav-sw nav-prev-slider nav-prev-product box-icon w_46 round"><span class="icon icon-arrow-right"></span></div>
                    <div class="sw-dots style-2 sw-pagination-product justify-content-center"></div>
                </div>
            </div>
        </section>
        <!-- /optional products -->
    @endif
@endsection

@if($GLOBALS['session']->admin)
    @section('admin-panel')
        <li class="nav-mb-item">
            <a href="#" class="mb-menu-link" data-bs-dismiss="offcanvas" id="product-admin-info-link">Admin Tab</a>
        </li>
        <li class="nav-mb-item">
            <a href="{{ url('admin/product_edit.php?product_id=' . $productId) }}" target="_blank" class="mb-menu-link">
                Edit Product
            </a>
        </li>
        <li class="nav-mb-item">
            <a href="{{ url('products_item_editor.php?product_id=' . $productId) }}" target="_blank"
               class="mb-menu-link iframe-modal-link" data-bs-dismiss="offcanvas"
            >
                QEdit Product
            </a>
        </li>
        <li class="nav-mb-item">
            <a href="{{ url('admin/product_pics.php?product_id=' . $productId) }}" target="_blank" class="mb-menu-link">
                Image Manager
            </a>
        </li>
        <li class="nav-mb-item">
            <a href="{{ url('admin/price_log.php?product_id=' . $productId) }}" target="_blank" class="mb-menu-link">
                Price Log
            </a>
        </li>
        <li class="nav-mb-item">
            <a href="{{ url('admin/thumbnail_stats.php?product_id=' . $productId) }}" target="_blank" class="mb-menu-link">
                Thumbnail Stats
            </a>
        </li>
        <li class="nav-mb-item">
            <a href="#" class="mb-menu-link" data-bs-dismiss="offcanvas" id="custom-color-link">Custom Color</a>
        </li>
        <li class="nav-mb-item">
            <a href="#" class="mb-menu-link" data-bs-dismiss="offcanvas" id="sales-report-link">Set Sales Report</a>
        </li>
        <li class="nav-mb-item">
            <a href="{{ url('admin/related_items_edit.php?product_id=' . $productId) }}" target="_blank" class="mb-menu-link">
                Edit Related Items
            </a>
        </li>
    @endsection
@endif

@section('modals')
    <!-- modal interactive decorator (compare color) -->
    @include('partials.modals._interactive_decorator', ['imagine_url' => $productDetailsDto->productModel->imagine_url])
    <!-- /modal interactive decorator -->
    <!-- modal delivery_return -->
    @include('partials.modals._delivery_return')
    <!-- /modal delivery_return -->
    <!-- modal share social -->
    @include('partials.modals._share_social')
    <!-- /modal share social -->
    <!-- modal quick_view -->
    @include('partials.modals._quick_view')
    <!-- /modal quick_view -->
    @if($GLOBALS['session']->admin)
        <!-- modal custom_color -->
        @include('partials.admin._custom_color_form')
        <!-- /modal custom_color -->
        <!-- modal sales_report -->
        @include('partials.admin._sales_report_form')
        <!-- /modal sales_report -->
        <!-- modal admin_product -->
        @include('partials.modals._admin_product')
        <!-- /modal admin_product -->
    @endif
@endsection

@push('after-foot-non-admin-js')
    <script type="text/javascript">
        gtag('event', 'page_view', {
            send_to: window.ADWORDS_ACCOUNT_ID,
            ecomm_pagetype: 'product',
            ecomm_prodid: '{{ $productId }}',
            ecomm_totalvalue: {{ $productDetailsDto->info['price'] }},
            ecomm_category: 'Home & Garden'
        });
    </script>

    <!-- Connexity Tag 2 - Register pageview or conversion event via cnxtag -->
    <script>
        cnxtag('event', 'pageview', {'product_ids':['{{ $productId }}']});
    </script>
@endpush

@push('after-foot-js')
    <script type="text/javascript" src="{{ asset('new-design/js/jqueryui.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('new-design/js/nouislider.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('new-design/js/shop.js') }}"></script>
    <script type="text/javascript" src="{{ asset('new-design/js/drift.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('new-design/js/wow.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('new-design/js/product.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/new/bundles/vendor/js.cookie.js') }}"></script>
    <script type="module" src="{{ asset('new-design/js/model-viewer.js') }}"></script>
    <script type="module" src="{{ asset('new-design/js/zoom.js') }}"></script>
    <script>
        $(document).ready(function () {
            ProductQuickViewHandler.init();
            Products.init({!! json_encode(array_values(array_merge(
                [$productDetailsDto],
                isset($productInfo['related_items']) && is_array($productInfo['related_items']) ? $productInfo['related_items'] : [],
                isset($productInfo['showcase']) && is_array($productInfo['showcase']) ? $productInfo['showcase'] : []
            ))) !!});
            const cushionColors = {!! json_encode($productInfo['cushion_colors']) !!};
            const umbrellaFabricColors = {!! json_encode($productInfo['attributes_umbrella_fabric_color']) !!};
            const coverOnlyBasePrices = {!! json_encode($productInfo['cover_only_base_prices'] ?? []) !!};
            ProductDetails.init(cushionColors, umbrellaFabricColors, coverOnlyBasePrices);
        });
    </script>

    <script>
        $('#ask-question').click(function () {
            $('.dimelo-chat-new-message-icon').click();
        });
    </script>
@endpush