@extends('layouts.main')

@section('seo')
    <title>{{ $product->item_name . " - " . config('app.name', 'Laravel') ?? config('app.name', 'Laravel') }}</title>
    <meta name="description" content="{{ Str::limit(html_entity_decode(strip_tags($product->long_description)), 150) }}">
    <meta property="og:title" content="{{ $product->item_name . " - " . config('app.name', 'Laravel') }}">
    <meta property="og:description" content="{{ Str::limit(html_entity_decode(strip_tags($product->long_description)), 150) }}">
    @if($product->img_01 != null && Storage::exists($product->img_01))
        <meta property="og:image" content="{{ Storage::url($product->img_01) }}">
    @else
        <meta property="og:image" content="{{ url(asset('/assets/images/default.jpg')) }}">
    @endif
    <meta property="og:url" content="{{ url()->current() }}">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{ $product->item_name . " - " . config('app.name', 'Laravel') }}">
    <meta name="twitter:description" content="{{ Str::limit(html_entity_decode(strip_tags($product->long_description)), 150) }}">
    @if($product->img_01 != null && Storage::exists($product->img_01))
        <meta name="twitter:image" content="{{ Storage::url($product->img_01) }}">
    @else
        <meta property="twitter:image" content="{{ url(asset('/assets/images/default.jpg')) }}">
    @endif

@endsection

@section('content')
<main class="main product-page">
    <div class="container mb-30">
        <div class="row">
            <div class="col-xl-12 col-lg-12 m-auto">
                <div class="product-detail accordion-detail">
                    <div class="row mb-50 mt-30">
                        <div class="col-md-5 col-sm-12 col-xs-12 mb-md-0 mb-sm-5">
                            <div class="detail-gallery">
                                <h1 style="font-size:8px; color:#fff; line-height:8px;">{{ $product->item_name }}</h1>
                                <!-- MAIN SLIDES -->
                                <div class="product-image-slider">
                                    @if($product->img_01 != null && Storage::exists($product->img_01))
                                    <img src="{{ Storage::url($product->img_01) }}" alt="{{$product->item_name}}">
                                    @else
                                    <img src="{{'/uploads/default/default.jpg' }}" alt="{{Str::of('/uploads/default/default.jpg')->basename('.jpg')}}" id="img-product">
                                    @endif
                                    @if($product->img_02 != null && Storage::exists($product->img_02))
                                    <img src="{{ Storage::url($product->img_02) }}" alt="{{$product->item_name}}">
                                    @endif
                                    @if($product->img_03 != null && Storage::exists($product->img_03))
                                    <img src="{{ Storage::url($product->img_03) }}" alt="{{$product->item_name}}">
                                    @endif
                                </div>
                                @if(($product->img_02 != null && Storage::exists($product->img_02)) || ($product->img_03 != null && Storage::exists($product->img_03)))
                                <!-- THUMBNAILS -->
                                <div class="slider-nav-thumbnails">
                                    @if($product->img_01 != null && Storage::exists($product->img_01))
                                    <div><img src="{{ Storage::url($product->img_01) }}" alt="{{$product->item_name}}" /></div>
                                    @else
                                    <div>
                                        <img src="{{'/uploads/default/default.jpg' }}" alt="{{Str::of('/uploads/default/default.jpg')->basename('.jpg')}}">
                                    </div>
                                    @endif
                                    @if($product->img_02 != null && Storage::exists($product->img_02))
                                    <div><img src="{{ Storage::url($product->img_02) }}" alt="{{$product->item_name}}" /></div>
                                    @endif
                                    @if($product->img_03 != null && Storage::exists($product->img_03))
                                    <div><img src="{{ Storage::url($product->img_03) }}" alt="{{$product->item_name}}" /></div>
                                    @endif
                                </div>
                                @endif
                            </div>
                            <!-- End Gallery -->
                        </div>
                        <div class="col-md-7 col-sm-12 col-xs-12">
                            <div class="detail-info mt-30 pr-30 pl-30">
                                <h2 class="title-detail mb-20">{{$product->item_name}}</h2>

                                @if($product->purchasable == false)
                                <div class="clearfix product-price-cover" hidden>
                                    <div class="product-price primary-color float-left">
                                        @if($product->price > 0 && $product->isPrinted == 1 && $product->stock_qty > 0)
                                        <span class="current-price text-brand">{{ __("product.printed") }}: {{priceView($product->price, true)}}</span>
                                        @endif

                                        @if($product->price_ebooks > 0 && $product->isEbook == 1)
                                        <span class="current-price text-brand">{{ __("product.digital") }}: {{priceView($product->price_ebooks, true)}}</span>
                                        @endif
                                    </div>
                                </div>
                                @else
                                <div class="clearfix product-price-cover">
                                    <div class="product-price primary-color float-left">
                                        @if($product->price > 0 && $product->isPrinted == 1 && $product->stock_qty > 0)
                                        <span class="current-price text-brand">{{ __("product.printed") }}: {{priceView($product->price, true)}}</span>
                                        @endif
                                        @if($product->price_ebooks > 0 && $product->isEbook == 1)
                                        <span class="current-price text-brand">{{ __("product.digital") }}: {{priceView($product->price_ebooks, true)}}</span>
                                        @endif
                                    </div>
                                </div>
                                @endif

                                @if(isset($product->short_description))
                                <div class="short-desc mb-30">
                                    <p class="font-lg">{!! $product->short_description!!}</p>
                                </div>
                                @endif


                                <div class="detail-extralink">
                                    <ul>
                                        @if($productDetails['name'])
                                        <li>
                                            <strong class="mr-10">{{ __("product.domain") }}:</strong>
                                            <a href="{{ route('domainPage',[$productDetails['domain_id'],  $productDetails['domain_slug']]) }}">
                                                {{ucFirst($productDetails['name'])}}
                                            </a>
                                        </li>
                                        @endif

                                        <br>

                                        @if($product->isbn_printed != null && $product->isPrinted == 1)
                                        <li>
                                            <strong class="mr-10">{{ __("product.isbn_printed") }}:</strong>
                                            {!! $product->isbn_printed!!}
                                        </li>
                                        @endif

                                        @if($product->isbn_pdf != null && $product->isEbook == 1)
                                        <li>
                                            <strong class="mr-10">{{ __("product.isbn_pdf") }}:</strong>
                                            {!! $product->isbn_pdf!!}
                                        </li>
                                        @endif

                                        <li>
                                            <strong class="mr-10">{!! __('product.status') !!}:</strong>
                                            @if($product->purchasable && $product->stock_qty !== null && $product->isPrinted == 1)
                                            {!! $product->stock_qty > 0 ? $product->stock_qty . ' ' . __('product.stock') : '<span class="in-stock text-brand ml-5">' . __('product.not_in_stock') . '</span>' !!}
                                            @elseif($product->purchasable && $product->isEbook == 1)
                                            <span class="in-stock text-brand ml-5"> {{ __('product.only_digital') }} </span>
                                            @endif
                                        </li>

                                        @if(isset($product->page_number))
                                        <li>
                                            <strong class="mr-10">{{ __("product.pages") }}: </strong>
                                            {!! $product->page_number!!}
                                        </li>
                                        @endif
                                        @if(isset($product->size))
                                        <li>
                                            <strong class="mr-10">{{ __("product.size") }}: </strong>
                                            {!! $product->size!!}
                                        </li>
                                        @endif

                                    </ul>

                                    <br>


                                    <div class="product-extra-link2">
                                        <label for="type">{{ __("product.select_product") }}:</label>

                                        <div id="product-type">
                                            @if($product->stock_qty > 0 && $product->isPrinted == 1)
                                            <div class="product-type-wrapper" onclick="toggleCheckbox('physical')">
                                                <input type="checkbox" id="physical" name="product-type[]" value="physical" onchange="handleCheckboxChange(this)" style="display:none;">
                                                <label for="physical">{{ __("product.printed") }} - {{ priceView($product->price, true) }}</label>
                                            </div>
                                            @endif
                                            @if($product->price_ebooks > 0 && $product->isEbook == 1)
                                            <div class="product-type-wrapper @checked($product->stock_qty <= 0 && $product->purchasable == true)" onclick="toggleCheckbox('ebook')">
                                                <input type="checkbox" id="ebook" name="product-type[]" value="ebook" onchange="handleCheckboxChange(this)" style="display:none;" @checked($product->stock_qty <= 0 && $product->purchasable == true)>
                                                    <label for="ebook">{{ __("product.digital") }} - {{ priceView($product->price_ebooks, true) }}</label>
                                            </div>
                                            @endif
                                        </div>

                                        <div id="physical-book-actions">
                                            @if($product->purchasable == true)
                                            <button id="add-to-cart-btn" onclick="addToCart();" type="button" class="button button-add-to-cart" @disabled($product->stock_qty > 0 && $product->purchasable == true)>
                                                <i class="fi-rs-shopping-cart"></i>{{ __("product.add_to_cart") }}
                                            </button>
                                            @endif
                                        </div>
                                        <br>
                                        <p class="ebook-info-text small">
                                            {{ __("product.ebook_formats_info", ['formats' => 'PDF, EPUB']) }}
                                        </p>


                                        {{-- <div id="ebook-actions">--}}
                                        {{-- <button onclick="addToCart();" type="button" class="button button-add-to-cart">--}}
                                        {{-- <i class="fi-rs-shopping-cart"></i>{{ __("product.add_to_cart") }}--}}
                                        {{-- </button>--}}
                                        {{-- </div>--}}

                                        @if(config('shop.shop_compare') && config('shop.shop_compare'))
                                        @if(config('shop.shop_wishlist'))
                                        @if(isset($customerFavourites))
                                        <a aria-label="Remove from wishlist" class="action-btn hover-up" href="{{route('removewish', [$product->id])}}"><i class="fi-rs-heart"></i></a>
                                        @else
                                        <a aria-label="Add to wishlist" class="action-btn hover-up" href="{{route('addwishlist', [$product->id])}}"><i class="fi-rs-heart"></i></a>
                                        @endif
                                        @endif
                                        @if(config('shop.shop_compare'))
                                        <a aria-label="Compare" class="action-btn hover-up" href="{{route('addToCompare', [$product->slug, $product->id])}}"><i class="fi-rs-shuffle"></i></a>
                                        @endif
                                        @endif
                                    </div>
                                </div>


                            </div>
                        </div>
                    </div>
                    <!-- Detail Info -->
                </div>
            </div>
            <div class="col-xl-12 col-lg-12">
                <div class="product-info">
                    <div class="tab-style3">
                        <ul class="nav nav-tabs text-uppercase">
                        </ul>
                        <div class="tab-content shop_info_tab entry-main-content">
                            <div class="tab-pane fade show active" id="Description">
                                <div class="">
                                    <p>{!! __($product->short_description)!!}</p>
                                    <p>{!! __($product->long_description)!!}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-12 col-lg-12">
                @if(count($correlated) > 0)
                <div class="row mt-30 mb-80">
                    <div class="col-12">
                        <h2 class="section-title style-1 mb-30">{{ __("product.similar_products") }}</h2>
                    </div>
                    <div class="col-12">
                        <div class="row related-products">

                            @foreach($correlated as $c)
                            <div class="col-lg-3 col-md-4 col-12 col-sm-6">
                                <div class="product-cart-wrap">
                                    <div class="product-img-action-wrap">
                                        <div class="product-img">
                                            <a href="{{ route('shop.show',[$c->slug, $c->id]) }}" tabindex="0">
                                                @if($c->img_01 != null && Storage::exists($c->img_01))
                                                <img class="default-img" src="{{ Storage::url($c->img_01) }}" alt="{{Str::of('/storage/'. $c->img_01)->basename('.jpg')}}">
                                                @else
                                                <img class="default-img" src="{{'/uploads/default/default.jpg' }}" alt="{{Str::of('/uploads/default/default.jpg')->basename('.jpg')}}">
                                                @endif
                                            </a>
                                        </div>
                                    </div>
                                    <div class="product-content-wrap">
                                        <h2>
                                            <a href="{{ route('shop.show',[$c->slug, $c->id]) }}" tabindex="0">{{$c->item_name}}</a>
                                        </h2>
                                        <div class="product-price">
                                            @if($c->price > 0)
                                            <span>{{ __("product.printed") }}: {{ priceView($c->price, true) }} </span>
                                            @endif
                                            @if($c->price > 0 && $c->price_ebooks > 0)
                                            <br />
                                            @endif
                                            @if($c->price_ebooks > 0)
                                            <span>{{ __("product.digital") }}: {{ priceView($c->price_ebooks, true) }} </span>
                                            @endif

                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach

                        </div>
                    </div>
                </div>
                @endif
            </div>


        </div>
    </div>
</main>
@endsection

@section('extraJs')
<script>
    function handleCheckboxChange(checkbox) {
        var checkboxes = document.querySelectorAll('#product-type input[type="checkbox"]');
        var addToCartBtn = document.getElementById('add-to-cart-btn');
        var selected = false;

        checkboxes.forEach(function(item) {
            var wrapper = item.closest('.product-type-wrapper');
            if (item !== checkbox) {
                item.checked = false;
                wrapper.classList.remove('checked');
            } else if (checkbox.checked) {
                wrapper.classList.add('checked');
                selected = true;
            } else {
                wrapper.classList.remove('checked');
            }
        });

        // Enable or disable the Add to Cart button based on selection
        addToCartBtn.disabled = !selected;
    }

    function toggleCheckbox(id) {
        var checkbox = document.getElementById(id);
        checkbox.checked = !checkbox.checked;
        handleCheckboxChange(checkbox);
    }

    function addToCart() {
        var selectedCheckbox = document.querySelector('#product-type input[type="checkbox"]:checked');

        if (selectedCheckbox) {
            var selectedType = selectedCheckbox.value;

            var url = '{{ route("addcart", ["id" => $product->id]) }}' + '?type=' + encodeURIComponent(selectedType);

            location.href = url;
        }
    }

    function handleProductTypeChange() {
        var productType = document.getElementById('product-type').value;

        if (productType === 'physical') {
            document.getElementById('physical-book-actions').style.display = 'block';
            document.getElementById('ebook-actions').style.display = 'none';
        } else if (productType === 'ebook') {
            document.getElementById('physical-book-actions').style.display = 'none';
            document.getElementById('ebook-actions').style.display = 'block';
        }
    }
</script>
<style>
    .product-extra-link2 a {}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
@endsection