@extends('layouts.app')
@section('page-title',  !empty($productInfo['title']) ? strip_tags($productInfo['title']) : strip_tags($productInfo['product_description']))
@section('meta-description', !empty($productInfo['product_description']) ? strip_tags($productInfo['product_description']) : strip_tags($productInfo['title']))
@section('meta-keyword', $productInfo['manufacturer_part_number'], $productInfo['manufacturer_part_number'] . ' ' . $productInfo['brand_name'], $productInfo['brand_name'] . ' ' . $productInfo['manufacturer_part_number'])
@section('head-scripts')
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endsection
@section('body-content')
    <div class="global-loader-wrapper" style="display: none">
        <div class="loader"></div>
    </div>
    <section class="shop-detail-section">
        <div class="auto-container">
            <!-- Upper Box -->
            <div class="upper-box">
                <div class="row clearfix">

                    <!-- Breadcrum Column -->
                    @if (session('success'))
                        <div class="alert alert-success" id="success-alert">
                            {{ session('success') }}
                        </div>
                    @elseif(session('error'))
                        <div class="alert alert-danger" id="error-alert">
                            {{ session('error') }}
                        </div>
                    @endif

                    <div class="breadcrum-column col-md-12">

                        <div class="breadcrumb_content">
                            <ul>
                                {{-- {{ dd($productInfo) }} --}}
                                <li><a href="/">Home</a></li>
                                <li><a href="/category/{{ $productInfo['category']['slug'] }}"
                                        class="prod-desc-font">{{ $productInfo['category']['name'] }}</a></li>
                                <li><a href="/{{ $productInfo['category']['slug'] }}/{{ $productInfo['sub_category']['slug'] }}"
                                        class="prod-desc-font">{{ $productInfo['sub_category']['name'] }}</a></li>
                            </ul>
                        </div>


                    </div>

                    <!-- Gallery Column -->
                    <div class="gallery-column col-xl-6 col-lg-5 col-sm-5">
                        <div class="inner-column">
                            <div class="carousel-outer">
                                <!-- Swiper -->
                                <div class="swiper-container content-carousel">
                                    <div class="swiper-wrapper">
                                                                                @foreach ($images as $image)
                                            <div class="swiper-slide">
                                                <figure class="image">
                                                    <a id="product_images"
                                                        href="{{ config('constants.IMAGES_PATH') . '/' . $image }}"
                                                        class="lightbox-image">
                                                        <img src="{{ config('constants.IMAGES_PATH') . '/' . $image }}"
                                                            onerror="this.onerror=null; this.src='{{ config('constants.IMAGES_PATH') . '/not-available.jpg' }}'"
                                                            alt="{{ !empty($productInfo['manufacturer_part_number']) && !empty($productInfo['brand_name']) ? $productInfo['manufacturer_part_number'] . ' - ' . $productInfo['brand_name'] : '' }}">
                                                    </a>
                                                </figure>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                                <div class="swiper-container thumbs-carousel">
                                    <div class="swiper-wrapper">
                                        @foreach ($images as $image)
                                            <div class="swiper-slide">
                                                <figure class="thumb"><img
                                                        src="{{ config('constants.IMAGES_PATH') . '/' . $image }}"
                                                        onerror="this.onerror=null; this.src='{{ config('constants.IMAGES_PATH') . '/not-available.jpg' }}'"
                                                        alt="product-thumb-image"></figure>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Content Column -->
                    <div class="content-column col-xl-6 col-lg-7 col-sm-7">
                        <div class="inner-column">
                            <div class="categories manufacturer">
                                <div class="d-inline mfr-partNum"> <a
                                        href="{{ route('categories-by-brand', ['slug' => $productInfo['brand']['slug']]) }}">{{ $productInfo['brand_name'] }}</a>
                                </div>
                            </div>
                            @if (!empty($productInfo['title']) || !empty($productInfo['product_description']))
                                <h1>{{ !empty($productInfo['title']) ? strip_tags($productInfo['title']) : strip_tags($productInfo['product_description']) }}
                                </h1>
                            @endif
                            @if (!empty($productInfo['product_description']))
                                <p class="product-shortDescription">{{ substr(strip_tags($productInfo['product_description']), 0, 150) }}...</p>
                            @endif
                            <div class="productExtraBtns clear-fix">
                                @if (!empty($overview))
                                    <div class="info-viewMore clear-fix">
                                        <a href="#informationRefrence">-See More Details</a>
                                    </div>
                                @endif

                            </div>


                            <!-- Price -->
                            @if (!empty($product_price))
                                <div class="price">
                                    <div class="finalPrice d-inline">${{ number_format($product_price['web_price'], 2) }}
                                    </div>
                                    <span>${{ number_format($product_price['list_price'], 2) }}</span>
                                    @if ($product_price['list_price'] > 0 && $product_price['web_price'] > 0)
                                        <i>{{ 100 - round(($product_price['web_price'] / $product_price['list_price']) * 100) }}%</i>
                                    @endif
                                </div>
                            @endif

                            <div class="prodVitalsBox">
                                <div class="categories availability"><span>Availability :</span>
                                    @if (!empty($product_price) && $product_price['stock'] > 0)
                                        <div class="d-inline availability-status">In Stock</div>
                                    @else
                                        <div class="d-inline availability-status" style="color: #da5d0c">Limited Availability
                                        </div>
                                    @endif
                                </div>
                                <div class="categories mfr-details"><span>Mfr. Part# :</span>
                                    <div class="d-inline mfr-partNum"> {{ $productInfo['manufacturer_part_number'] }}
                                    </div>
                                </div>
                            </div>


                            @if ($productInfo['is_license_require'])
                            <p class="licenseRequiredDP" style="color: rgb(255, 51, 0)">{{ config('constants.license_require') }}</p>
                        @endif
                            {{-- <div class="categories manufacturer"><span>Manufacturer :</span>
                            <div class="d-inline mfr-partNum"> {{ $productInfo['brand_name'] }} </div>
                        </div> --}}

                            <!-- Product User Manual -->

                            <div class="productUserManual">

                                <ul class="userManualList no-marker">
                                                                        @foreach ($productManual as $item)
                                        <li class="userManualListItem">
                                            <a href="{{ config('constants.MANUAL_PATH') . '/' . $item['filename'] }}"
                                                class="userGuide">{{ $item['name'] }}</a>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                            @if (!empty($product_price) && !empty($product_price['web_price']))
                                <!-- Quantity Box -->
                                <div class="quantity-box">
                                    <span>Quantity :</span>
                                    <div class="item-quantity">
                                        <input class="qty-spinner" type="text" value="1" name="quantity"
                                            id="quantity">
                                    </div>
                                </div>


                                <input type="hidden" value="{{ $product_price['web_price'] }}" name="product_price">
                            @endif

                            <input type="hidden" value="{{ $productInfo['id'] }}" name="product_id" id="product_id">
                            <!-- Quantity Box wrapper-->
                            <div class="d-flex align-items-center flex-wrap buttons-box_wrapper">
                                @if (!empty($product_price) && !empty($product_price['web_price']))
                                    <!-- Buttons Box -->
                                    <div class="buttons-box">
                                        <a href="javascript:void(0)" class="theme-btn btn-style-one clearfix cartModal">
                                            <span class="btn-wrap">
                                                <span class="text-one">Add to cart</span>
                                                <span class="text-two">Add to cart</span>
                                            </span>
                                        </a>
                                    </div>
                                @endif
                                <!-- Buttons Box -->
                                <div class="buttons-box">
                                    <a href="javascript:void(0)" class="theme-btn btn-style-one clearfix rfqModal">
                                        <span class="btn-wrap">
                                            <span class="text-one">Get a Quote</span>
                                            <span class="text-two">Get a Quote</span>
                                        </span>
                                    </a>
                                </div>

                            </div>

                            <!-- Social Box -->

                            {{-- <div class="outdoor-btns clear-fix">
                                <button class="compare-btn" title="Add to compare"
                                    style="display: inline-block;background-color: white;"><span
                                        class="title-font ml-1">Compare</span><i class="fa fa-refresh"
                                        aria-hidden="true"></i></button>
                                <ul class="social-box" id="informationRefrence">
                                    <li class="share">Share:</li>
                                    <li>
                                        <a href="https://www.facebook.com/" class="fa fa-facebook-f"></a>
                                    </li>
                                    <li>
                                        <a href="https://www.twitter.com/" class="fa fa-twitter"></a>
                                    </li>

                                </ul>
                            </div> --}}






                        </div>
                    </div>
                </div>
            </div>
            <!-- End Upper Box -->

            <!-- Lower Box -->
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="lower-box">
                            <div class="specs_loader">
                                <div class="specs_loaderinner"></div>
                            </div>
                            <!-- Product Info Tabs -->
                            <div class="product-info-tabs">
                                <!-- Product Tabs -->
                                <div class="prod-tabs tabs-box">

                                    <!-- Tab Btns -->
                                    <ul class="tab-btns tab-buttons clearfix" id='specifications_tabs'>

                                    </ul>

                                    <!-- Tabs Container -->
                                    <div class="tabs-content" id="tabs-content">


                                    </div>
                                </div>

                            </div>
                            <!--End Product Info Tabs-->

                        </div>
                    </div>
                </div>
            </div>
            <!-- End Lower Box -->

        </div>
    </section>

    @include('sections.brands')

    @include('product.partials.single-rfq-popup')
    @include('product.partials.single-product-cart-popup')


@endsection

@section('scripts-only')

    <script>
        const product_id = "{{ $productInfo['id'] }}";
        const route_images = "{{ route('product-images', ['id' => $productInfo['id']]) }}";
        const is_overview = "{{ $productInfo['is_overview'] }}";
        const is_technical_specification = "{{ $productInfo['is_technical_specification'] }}";
        const route_overview_specifications =
            "{{ route('product-overview-specifications', ['id' => $productInfo['id']]) }}";
        const route_technical_specifications =
            "{{ route('product-technical-specifications', ['id' => $productInfo['id']]) }}";
        const product_description = "{{ strip_tags($productInfo['product_description']) }}";
        const image_path = "{{ config('constants.IMAGES_PATH') }}";

        setTimeout(function() {
            document.getElementById('success-alert')?.remove();
            document.getElementById('error-alert')?.remove();
        }, 5000);

    </script>
    @include('product.partials.product-schema')
    <script src="{{ asset('js/magnific-popup.min.js?v=') . config('constants.VERSION') }}"></script>
    <script src="{{ asset('js/swiper.min.js?v=') . config('constants.VERSION') }}"></script>
    <script src="{{ asset('js/detail-page.js?v=') . config('constants.VERSION') }}"></script>
    <script src="{{ asset('js/rfq-modal.js?v=') . config('constants.VERSION') }}"></script>
    <script src="{{ asset('js/cart-modal.js?v=') . config('constants.VERSION') }}"></script>
@endsection