@php
$variant_image_ids = [];
if (request()->variant != null) {
    $variant_image_ids = $product->variants->where('id', request()->variant)->first()->images->map(function ($item) {
        return $item->image->id;
    })
    ->toArray();
}
@endphp
@extends(get_view('index'))
@section('title'){{ $product->content->name . ' - ' ?? '' }}@endsection
@section('header')
<link rel="stylesheet" href="{{ asset('templates/default/css/lightbox/lightbox.min.css') }}">
@endsection
@section('content')
<main class="main-wrapper">
    <div class="axil-single-product-area bg-color-white">
        <div class="single-product-thumb axil-section-gapcommon single-product-modern">
            <div class="container">
                <div class="row row--20">
                    <div class="col-lg-6 mb--40 position-relative">
                        <button class="btn btn-sm axil-btn rounded-pill p-3 @if (is_favorite_product($product)) btn-danger @else btn-outline-primary @endif position-absolute end-0 px-4" style="width:50px;height:50px" data-product-id="{{ $product->id }}" onclick="add_favorite_product(this)"><i class="fa fa-heart me-0" style="color: inherit"></i></button>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="product-large-thumbnail-4 single-product-thumbnail product-large-thumbnail axil-product thumbnail-badge zoom-gallery">
                                    @foreach ($product->all_images as $key => $value)
                                    <div class="thumbnail @if (request()->variant != null && !in_array($value->id, $variant_image_ids)) d-none @endif" data-variant-image data-variant-image-id="{{ $value->id }}">
                                        <img src="{{ Common::get_product_original_image($product->id, $value->name) }}" alt="{{ $product->content->name ?? '' }}">
                                        <div class="product-quick-view position-view">
                                            <a href="{{ Common::get_product_large_image($product->id, $value->name) }}" class="popup-zoom">
                                                <i class="far fa-search-plus"></i>
                                            </a>
                                        </div>
                                    </div>
                                    @endforeach

                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="small-thumb-wrapper product-small-thumb-4 slick-layout-wrapper--10 axil-slick-arrow arrow-both-side">
                                    @foreach ($product->all_images as $key => $value)
                                    <div class="small-thumb-img @if (request()->variant != null && !in_array($value->id, $variant_image_ids)) d-none @endif" data-variant-image data-variant-image-id="{{ $value->id }}">
                                        <img src="{{ Common::get_product_small_image($product->id, $value->name) }}" alt="{{ $product->content->name ?? '' }}">
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 mb--40">
                        <div class="single-product-content">
                            <div class="inner">
                                <h1 data-variant-title class="product-title"">{{ $product->content->name ?? '' }}</h1>
                                    <span data-variant-price class=" price-amount">
                                    @if (request()->variant != null)
                                    @php
                                    $symbol = $product->currency->symbol ?? '';
                                    @endphp
                                    {{ $symbol . $product->variants->where('id', request()->variant)->first()->price ?? '' }}
                                    @elseif ($product->variants->count() > 0)
                                    {{ $product->variants->first()->price ?? '' }}
                                    @else
                                    {{ $product->get_price(false) ?? '' }}
                                    @endif
                                    </span>
                                    <div class="product-rating">

                                        <div class="star-rating">
                                            @php
                                            $reviewaverage = $product->rate;
                                            @endphp
                                            <!-- can be .5 .3 -->
                                            @foreach (range(1, 5) as $i)
                                            @if ($reviewaverage > 0)
                                            @if ($reviewaverage > 0.5)
                                            <i class="fas fa-star"></i>
                                            @elseif ($reviewaverage <= 0.5 && $reviewaverage> 0)
                                                <i class="fas fa-star-half-alt"></i>
                                                @endif
                                                @else
                                                <i class="far fa-star"></i>
                                                @endif
                                                @php
                                                $reviewaverage--;
                                                @endphp
                                                @endforeach
                                        </div>
                                        <div class="review-number">{{ $product->review_count }} {{ __('Yorum') }}</div>
                                        {{-- <div class="total-answerd">2 answered questions</div> --}}
                                    </div>
                                    <div class="description mb-2">
                                        @if ($product->content->description != null)
                                        {!! $product->content->description !!}
                                        @endif
                                    </div>

                                    <!-- variants -->
                                    <div class="mb-5 d-flex flex-wrap justify-content-start flex-row gap-2">
                                        @foreach ($product->variants as $variant)
                                        <button data-type="variant" style="min-height: 50px" type="button" data-product-id="{{ $product->id }}" data-variant-id="{{ $variant->id }}" class="axil-btn p-2 px-5 btn btn-sm mb-2 me-2 w-auto
                                             btn-outline-primary" @if (request()->variant == $variant->id) data-variant-selected @endif>
                                            <img src="{{ Common::get_product_medium_image($product->id, $variant->first_image->image->name ?? '') }}" alt="" class="mb-2 rounded" style="height: 70px">

                                            @foreach ($variant->options as $variant_option)
                                            <div>

                                                {{ $variant_option->option_value->content->name ?? '' }}
                                                {{ $variant_option->option->content->name ?? '' }}
                                            </div>
                                            @endforeach
                                        </button>
                                        @endforeach
                                    </div>
                                    <!-- #variants -->

                                    {{-- <div class="product-variations-wrapper">

                                        <!-- Start Product Variation  -->
                                        <div class="product-variation product-size-variation">
                                            <h6 class="title">Size:</h6>
                                            <ul class="range-variant">
                                                <li class="active">xs</li>
                                                <li>s</li>
                                                <li>m</li>
                                                <li>l</li>
                                                <li>xl</li>
                                            </ul>
                                        </div>
                                        <!-- End Product Variation  -->
                                        <!-- Start Product Variation  -->
                                        <div class="product-variation">
                                            <h6 class="title">Colors:</h6>
                                            <div class="color-variant-wrapper">
                                                <ul class="color-variant mt--0">
                                                    <li class="color-extra-01 active"><span><span
                                                                class="color"></span></span>
                                                    </li>
                                                    <li class="color-extra-02"><span><span class="color"></span></span>
                                                    </li>
                                                    <li class="color-extra-03"><span><span class="color"></span></span>
                                                    </li>
                                                    <li class="color-extra-04"><span><span class="color"></span></span>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <!-- End Product Variation  -->
                                        <div class="product-variation quantity-variant-wrapper">
                                            <h6 class="title">Quantity</h6>
                                            <div class="pro-qty"><span class="dec qtybtn">-</span><input type="text"
                                                    value="1"><span class="inc qtybtn">+</span></div>
                                        </div>

                                    </div> --}}

                                    <!-- count -->
                                    <div class="mb-5 d-flex flex-wrap justify-content-start flex-row gap-2">
                                        <button class="btn btn-sm mb-2 me-2 w-auto border-0" type="button" onclick="decrease_count(this)" data-count-button>
                                            <i class="fas fa-minus bg-primary p-4 text-primary rounded-circle bg-opacity-10"></i>
                                        </button>
                                        <div class="d-flex flex-column justify-content-center align-items-center">
                                        <input type="number" class="border-0 text-center" name="count" style="width: 90px;height:25px" value="1" min="1" id="cart_add_product_quantity">
                                        <span class="ms-2">{{ __('Adet') }}</span>
                                        </div>
                                        <button class="btn btn-sm mb-2 ms-2 w-auto border-0"
                                         type="button" onclick="increase_count(this)" data-count-button>
                                            <i class="fas fa-plus bg-primary p-4 text-primary rounded-circle bg-opacity-10"></i>
                                        </button>
                                    </div>

                                    <!-- Start Product Action Wrapper  -->
                                    <div class="product-action-wrapper">
                                        <!-- Start Product Action  -->
                                        <ul class="product-action d-flex-center mb--0 w-100">
                                            <li class="add-to-cart"><button type="button" data-product-id="{{ $product->id }}" data-variant-id="{{ request()->variant ?? '' }}" onclick="cart_add_quickly(this)" data-cart-button class="axil-btn btn-bg-secondary"><i class="far fa-shopping-bag"></i>
                                                    {{ __('Hemen Al') }}</button></li>
                                            <li class="add-to-cart"><button type="button" onclick="cart_add(this)" data-product-id="{{ $product->id }}" data-cart-button data-variant-id="{{ request()->variant ?? '' }}" class="axil-btn btn-bg-primary"><i class="far fa-shopping-cart"></i>
                                                    {{ __('Sepete Ekle') }}</button></li>
                                        </ul>
                                        <!-- End Product Action  -->

                                        <div class="mt-3 d-flex justify-content-start">
                                            <div data-bs-toggle="modal" data-bs-target="#shareModal" class="btn fs-4 d-block cursor-pointer text-secondary">
                                                <i class="fas fa-share-alt me-2"></i>
                                                {{ __('Bu Ürünü Paylaş') }}
                                            </div>
                                        </div>


                                        <div class="modal" tabindex="-1" id="shareModal">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title">{{ __('Ürünü Paylaş') }}</h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <div class="container d-flex justify-content-center">

                                                            <div id="share"></div>

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





                                    </div>
                                    <!-- End Product Action Wrapper  -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End .single-product-thumb -->
        <div class="woocommerce-tabs wc-tabs-wrapper bg-lighter wc-tab-style-two">
            <div class="container">
                <div class="section-title-wrapper section-title-border">
                    <h2 class="title">{{ __('Ürün Açıklaması') }} 💥</h2>
                </div>
                <div class="tabs-wrap">
                    <ul class="nav tabs" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <a class="active" id="description-tab" data-bs-toggle="tab" href="#description" role="tab" aria-controls="description" aria-selected="true">{{ __('Özellikler') }}</a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a id="reviews-tab" data-bs-toggle="tab" href="#reviews" role="tab" aria-controls="reviews" aria-selected="false" tabindex="-1">{{ 'Değerlendirmeler' }}</a>
                        </li>
                    </ul>
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="description" role="tabpanel" aria-labelledby="description-tab">
                            <div class="product-desc-wrapper">
                                <div class="single-desc">

                                    @if ($product->content->description != null)
                                    {!! $product->content->description !!}
                                    @else
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="bg-white py-3">
                                                <p>{{ __('Satıcı ürün hakkında ekstra açıklama girmemiş.') }}</p>
                                            </div>
                                        </div>
                                    </div>
                                    @endif
                                </div>
                                <!-- End .row -->
                            </div>
                            <!-- End .product-desc-wrapper -->
                        </div>
                        <div class="tab-pane fade" id="reviews" role="tabpanel" aria-labelledby="reviews-tab">
                            <div class="reviews-wrapper">
                                <div class="row">
                                    <div class="col-12 mb--40">
                                        <div class="axil-comment-area pro-desc-commnet-area">
                                            <h5 class="title">{{ __('Ürün için yorumlar') }}</h5>
                                            <ul class="comment-list">
                                                @forelse($product_reviews as $product_review)
                                                <!-- Start Single Comment  -->
                                                <li class="comment">
                                                    <div class="comment-body">
                                                        <div class="single-comment">
                                                            {{-- <div class="comment-img">
                                                                    <img src="{{ get_asset('assets/images/blog/author-image-4.png') }}"
                                                            alt="Author Images">
                                                        </div> --}}
                                                        <div class="comment-inner">
                                                            <h6 class="commenter">
                                                                <a class="hover-flip-item-wrapper" href="#">
                                                                    <span class="hover-flip-item">
                                                                        <span data-text="{{ $product_review->user->fullname(true) ?? '' }}">
                                                                            {{ $product_review->user->fullname(true) ?? '' }}
                                                                        </span>
                                                                    </span>
                                                                </a>
                                                                <span class="commenter-rating ratiing-four-star">
                                                                    <a href="#"><i class="fas fa-star"></i></a>
                                                                    <a href="#"><i class="fas fa-star"></i></a>
                                                                    <a href="#"><i class="fas fa-star"></i></a>
                                                                    <a href="#"><i class="fas fa-star"></i></a>
                                                                    <a href="#"><i class="fas fa-star empty-rating"></i></a>
                                                                </span>
                                                            </h6>
                                                            <div class="comment-text">
                                                                <p>{{ $product_review->comment ?? '' }}</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                        </div>
                                        </li>
                                        <!-- End Single Comment  -->
                                        @empty
                                        {{ __('Henüz yorum yapılmamış.') }}
                                        @endforelse
                                        </ul>
                                    </div>
                                    <!-- End .axil-commnet-area -->
                                </div>
                                <!-- End .col -->
                                {{-- <div class="col-lg-6 mb--40">
                                            <!-- Start Comment Respond  -->
                                            <div class="comment-respond pro-des-commend-respond mt--0">
                                                <h5 class="title mb--30">Add a Review</h5>
                                                <p>Your email address will not be published. Required fields are marked
                                                    *</p>
                                                <div class="rating-wrapper d-flex-center mb--40">
                                                    Your Rating <span class="require">*</span>
                                                    <div class="reating-inner ml--20">
                                                        <a href="#"><i class="fal fa-star"></i></a>
                                                        <a href="#"><i class="fal fa-star"></i></a>
                                                        <a href="#"><i class="fal fa-star"></i></a>
                                                        <a href="#"><i class="fal fa-star"></i></a>
                                                        <a href="#"><i class="fal fa-star"></i></a>
                                                    </div>
                                                </div>

                                                <form action="#">
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <div class="form-group">
                                                                <label>Other Notes (optional)</label>
                                                                <textarea name="message" placeholder="Your Comment"></textarea>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-6 col-12">
                                                            <div class="form-group">
                                                                <label>Name <span class="require">*</span></label>
                                                                <input id="name" type="text">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-6 col-12">
                                                            <div class="form-group">
                                                                <label>Email <span class="require">*</span> </label>
                                                                <input id="email" type="email">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-12">
                                                            <div class="form-submit">
                                                                <button type="submit" id="submit"
                                                                    class="axil-btn btn-bg-primary w-auto">Submit
                                                                    Comment</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                            <!-- End Comment Respond  -->
                                        </div> --}}
                                <!-- End .col -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="single-product-features">
                <div class="row">
                    <div class="col-lg-4">
                        <div class="single-features">
                            <div class="icon">
                                <i class="far fa-hand-holding-box"></i>
                            </div>
                            <div class="content">
                                <h6 class="title">{{ __('Kolay İade') }}</h6>
                                <p>{{ __('Ürünü dilediğiniz zaman hiçbir ödeme yapmadan iade edebilirsiniz.') }}
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="single-features">
                            <div class="icon quality">
                                <i class="fal fa-badge-check"></i>
                            </div>
                            <div class="content">
                                <h6 class="title">{{ __('Kaliteli Hizmet') }}</h6>
                                <p>{{ __('Sizlere kaliteli hizmet sunmak için çalışıyoruz.') }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="single-features">
                            <div class="icon original">
                                <i class="fal fa-box"></i>
                            </div>
                            <div class="content">
                                <h6 class="title">{{ __('Orjinal Ürün') }}</h6>
                                <p>{{ __('Sizlere orjinal ürünler sunuyoruz.') }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- woocommerce-tabs -->
    <!-- Start Expolre Product Area  -->
    <div class="axil-new-arrivals-product-area fullwidth-container flash-sale-area section-gap-80-35">
        <div class="container ml--xxl-0">
            <div class="section-title-border slider-section-title">
                <h2 class="title">{{ __('Bunları da beğenebilirsiniz') }} 💥</h2>
            </div>
            <div class="recently-viwed-activation slick-layout-wrapper--15 axil-slick-angle angle-top-slide">
                @foreach (get_similar_products($product) as $similar_product)
                <div class="slick-single-layout">
                    <div class="axil-product product-style-eight">
                        <div class="thumbnail">
                            <a href="{{ route('product.detail.old', ['permalink' => $similar_product->content->permalink]) }}">
                                <img data-sal="zoom-out" data-sal-delay="100" data-sal-duration="800" class="main-img" src="{{ Common::get_product_small_image($similar_product->id, $similar_product->first_image->name ?? '') }}" alt="Product Images">
                            </a>
                        </div>
                        <div class="product-content">
                            <div class="inner">
                                <h5 class="title"><a href="{{ route('product.detail.old', ['permalink' => $similar_product->content->permalink]) }}">
                                        {{ $similar_product->content->name ?? '' }}</a></h5>
                                <div class="product-rating">
                                    <span class="icon">
                                        @php
                                        $reviewaverage = $similar_product->rate;
                                        @endphp
                                        @foreach (range(1, 5) as $i)
                                        @if ($reviewaverage > 0)
                                        @if ($reviewaverage > 0.5)
                                        <i class="fas fa-star"></i>
                                        @elseif ($reviewaverage <= 0.5 && $reviewaverage> 0)
                                            <i class="fas fa-star-half-alt"></i>
                                            @endif
                                            @else
                                            <i class="far fa-star"></i>
                                            @endif
                                            @php
                                            $reviewaverage--;
                                            @endphp
                                            @endforeach
                                    </span>
                                    <span class="rating-number">{{ $similar_product->review_count }}</span>
                                </div>
                                <div class="product-price-variant">
                                    <span class="price current-price">{{ $similar_product->get_price(false) ?? '' }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>

    <div class="sale-banner-area">
        <div class="container">
            @foreach (Site::get_slider_place(4) as $key => $value)
            <div class="sale-banner-thumb">
                <a href="shop.html">
                    <div class="w-100 my-5 rounded" style="height: 300px;background-image:url('{{ Common::get_slider_image($value->slider->id, $value->slider->image ?? '') }}'); background-size: cover;background-position: center;background-repeat: no-repeat;" alt="Sale Banner Images"></div>
                </a>
            </div>
            @endforeach
        </div>
    </div>

    <div>

    </div>

    </div>

</main>
@endsection
@section('footer')
<style>
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
</style>
<style>
    [data-type="variant"] {
        transition: all 0.3s ease-in-out;
    }

    [data-variant-selected],
    [data-variant-selected]:hover,
    [data-variant-selected]:focus {
        border: 1px solid var(--bs-primary) !important;
        color: var(--bs-primary) !important;
        background-color: transparent !important;
    }



    [data-type="variant"]:not([data-variant-selected]),
    [data-type="variant"][data-variant-id]:not([data-variant-selected]):hover,
    [data-type="variant"][data-variant-id]:not([data-variant-selected]):focus {
        border: 1px solid var(--bs-secondary) !important;
        color: var(--bs-secondary) !important;
        opacity: 0.5;
        background-color: transparent !important;
    }
</style>
<script>
    $("#share").jsSocials({
        showLabel: !1,
        showCount: !1,
        shares: [{
            share: "twitter",
            logo: "fab fa-twitter"
        }, {
            share: "facebook",
            logo: "fab fa-facebook-f"
        }, {
            share: "linkedin",
            logo: "fab fa-linkedin-in"
        }, {
            share: "pinterest",
            logo: "fab fa-pinterest-p"
        }, {
            share: "stumbleupon",
            logo: "fab fa-stumbleupon"
        }, {
            share: "whatsapp",
            logo: "fab fa-whatsapp"
        }]
    });
</script>
<script>
    window.addEventListener('variantChange', function(e) {});
</script>
@endsection