@extends('app')
@php
    $item = $product;
@endphp
@section('content')
<main>
    <section class="card">
        {{-- @include('layouts.header') --}}
        <div class="card__main">
            <div class="container">
                <h1 class="secondary-title">{{$product->name}}</h1>
                <div class="breadcrumbs">
                    <div class="breadcrumbs__inner">
                        <ul class="breadcrumbs__list mobile-overflow">
                            <li class="breadcrumbs__list-item">
                                <a href="{{route('showHomePage')}}">Главная</a>
                            </li>
                            <li class="breadcrumbs__list-item">
                                <a href="{{route('showProductPage')}}">Товары</a>
                            </li>
                            @if($product->category && $product->category->slug)
                                <li class="breadcrumbs__list-item">
                                    <a href="{{ route('showProductCategoryPage', ['category' => $product->category->slug]) }}">{{$product->category->name}}</a>
                                </li>
                            @endif
                            @php
                                $subcategory = $product->subcategory ?? null;
                                $subsubcategory = $product->subsubcategory ?? ($product->sub_subcategory ?? null);
                                $subcatName = null;
                                $subsubcatName = null;

                                if ($subcategory) {
                                    $subcatName = is_object($subcategory) ? $subcategory->name : $subcategory;
                                }
                                if ($subsubcategory) {
                                    $subsubcatName = is_object($subsubcategory) ? $subsubcategory->name : $subsubcategory;
                                }
                            @endphp
                            @if($subcategory && is_object($subcategory) && $subcategory->slug && $product->category && $product->category->slug)
                                <li class="breadcrumbs__list-item">
                                    <a href="{{ route('showProductSubcategoryPage', ['category' => $product->category->slug, 'subcategory' => $subcategory->slug]) }}">{{ $subcatName }}</a>
                                </li>
                            @endif
                            @if($subsubcategory && is_object($subsubcategory) && $subsubcategory->slug && $product->category && $product->category->slug)
                                @php
                                    $subcategorySlug = ($subcategory && is_object($subcategory) && $subcategory->slug) ? $subcategory->slug : null;
                                @endphp
                                @if($subcategorySlug)
                                    <li class="breadcrumbs__list-item">
                                        <a href="{{ route('showProductSubsubcategoryPage', ['category' => $product->category->slug, 'subcategory' => $subcategorySlug, 'sub_subcategory' => $subsubcategory->slug]) }}">{{ $subsubcatName }}</a>
                                    </li>
                                @endif
                            @endif
                        </ul>
                    </div>
                </div>
                <div class="gallery__main-wrapper row">
                    <div class="gallery__main-image">
                        @if($product->images_urls)
                            @php
                                $imageUrls = array_filter(explode(',', $product->images_urls));
                                $imageCount = count($imageUrls);
                            @endphp
                            @foreach($imageUrls as $index => $imageUrl)
                                <div class="gallery__image-slide" >
                                    <a data-fancybox="main-gallery" href="{{ trim($imageUrl) }}">
                                        <img src="{{ trim($imageUrl) }}" alt="gallery">
                                    </a>
                                </div>
                            @endforeach
                        @else
                            @php $imageCount = 1; @endphp
                            <div class="gallery__image-slide">
                                <img src="{{ asset('default-images/default-image.png') }}" alt="Нет изображения">
                            </div>
                        @endif
                        <!-- Десктопные всплывающие кнопки -->
                        <div class="gallery__btn-list" style="display: flex; justify-content: center; gap: 12px; margin-top: 20px;">
                            <button class="btn-outline" id="shareButton">
                                <svg width="24" height="24" viewBox="0 0 23.9834 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12.7031 5.69043C5.66235 6.05713 0 11.9011 0 19.0312L0 24L1.77783 19.8615C3.88037 15.6571 8.05176 12.9689 12.7031 12.7217L12.7031 18.4084L23.9834 9.1875L12.7031 0L12.7031 5.69043Z" fill="#217B00"/>
                                </svg>
                                Поделиться
                            </button>
                            <form action="{{ route('addToShopFavorites') }}" method="POST" style="margin: 0;">
                                @csrf
                                <input type="hidden" name="product_id" value="{{ $product->id }}">
                                <button class="btn-outline" aria-label="Добавить в избранное">
                                    <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#217B00">
                                        <path d="M6 2c-1.105 0-2 .895-2 2v18l8-5 8 5V4c0-1.105-.895-2-2-2H6z"/>
                                    </svg>
                                    Сохранить
                                </button>
                            </form>
                        </div>
                        <!-- Мобильные кнопки -->
                        <div class="gallery__btn-mobile" style="position: static; justify-content: center; gap: 12px; flex-direction: row; margin-top: 20px;">
                            <button class="btn-outline" id="shareButtonMobile" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12.7031 5.69043C5.66235 6.05713 0 11.9011 0 19.0312L0 24L1.77783 19.8615C3.88037 15.6571 8.05176 12.9689 12.7031 12.7217L12.7031 18.4084L23.9834 9.1875L12.7031 0L12.7031 5.69043Z" fill="#217B00"/>
                                </svg>
                            </button>
                            <form id="formfavorites" action="{{ route('addToShopFavorites') }}" method="POST" >
                                @csrf
                                <input type="hidden" name="product_id" value="{{ $product->id }}">
                                <button class="btn-outline" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;">
                                    <svg width="24" height="21" viewBox="0 0 24 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M17.625 0C16.3228 0 15.1287 0.41272 14.0762 1.22668C13.0671 2.00696 12.3955 3.00085 12 3.72351C11.6045 3.00085 10.9329 2.00696 9.92383 1.22668C8.87134 0.41272 7.67725 0 6.375 0C2.74072 0 0 2.97266 0 6.91467C0 11.1735 3.41919 14.0873 8.59546 18.4984C9.47437 19.2474 10.4707 20.0966 11.5063 21.0022C11.6428 21.1217 11.8181 21.1875 12 21.1875C12.1819 21.1875 12.3572 21.1217 12.4937 21.0022C13.5293 20.0964 14.5256 19.2474 15.405 18.4979C20.5808 14.0873 24 11.1735 24 6.91467C24 2.97266 21.2593 0 17.625 0Z" fill="#217B00"/>
                                    </svg>
                                </button>
                            </form>
                        </div>
                        @if(($imageCount ?? 0) > 1)
                        <button class="gallery__btn-back" style="background: transparent;">
                            <svg width="23" height="41" viewBox="0 0 23 41" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <defs/>
                                <path id="Vector"
                                      d="M0 20C0 20.24 0.04 20.49 0.14 20.71C0.23 20.94 0.37 21.15 0.54 21.32L19.29 40.07C20.03 40.8 21.21 40.8 21.95 40.07C22.68 39.34 22.68 38.15 21.95 37.42L4.52 20L21.95 2.57C22.68 1.84 22.68 0.65 21.95 -0.08C21.21 -0.81 20.03 -0.81 19.29 -0.08L0.54 18.67C0.37 18.84 0.23 19.05 0.14 19.28C0.04 19.5 0 19.75 0 20Z"
                                      fill="#333333" fill-opacity="1" fill-rule="nonzero"/>
                            </svg>
                        </button>
                        <button class="gallery__btn-next" style="background: transparent;">
                            <svg width="22" height="41" viewBox="0 0 22 41" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <defs/>
                                <path id="Vector"
                                      d="M22 20C22 20.24 21.95 20.49 21.85 20.71C21.76 20.94 21.62 21.15 21.45 21.32L2.7 40.07C1.96 40.8 0.78 40.8 0.04 40.07C-0.69 39.34 -0.69 38.15 0.04 37.42L17.47 20L0.04 2.57C-0.69 1.84 -0.69 0.65 0.04 -0.08C0.78 -0.81 1.96 -0.81 2.7 -0.08L21.45 18.67C21.62 18.84 21.76 19.05 21.85 19.28C21.95 19.5 22 19.75 22 20Z"
                                      fill="#333333" fill-opacity="1" fill-rule="nonzero"/>
                            </svg>
                        </button>
                        @endif
                    </div>

                    <div class="card__main-info">
                        <div class="card__main-top">
                            {{-- @if($product->universal_sku)
                                <div class="card__universal-sku" style="margin-bottom: 10px; padding: 8px 12px; background: #f0f8ff; border: 1px solid #217B00; border-radius: 6px;">
                                    <span style="font-size: 12px; color: #666; display: block;">Универсальный артикул:</span>
                                    <span style="font-size: 14px; font-weight: 600; color: #217B00;">{{ $product->universal_sku }}</span>
                                </div>
                            @endif --}}
                            @if($product->discount_price && $product->discount_price < $product->price)
                                <p class="card__main-price">
                                    <span style="text-decoration: line-through; color: gray; font-size:26px; font-weight:600; display:block;">{{ number_format((float)($product->price ?? 0), 0, ',', ' ') }} руб.</span>
                                    <span style="color:black; font-weight:600; display:block;">{{ number_format((float)($product->discount_price ?? 0), 0, ',', ' ') }} руб.</span>
                                </p>
                            @else
                                <p class="card__main-price">{{ number_format((float)($product->price ?? 0), 0, ',', ' ') }} руб.</p>
                            @endif
                            <div class="card__main-specifics">

                            </div>
                            <div class="card__main-qul">
                                @if($product->is_zakaz)
                                    <span style="color:#8a8a8a; font-size:14px; font-weight:600;">Под заказ</span>
                                    @if($product->supplier && $product->supplier->city_name)
                                        <span style="color:#8a8a8a; font-size:13px; margin-left:6px;">Город: {{ $product->supplier->city_name }}</span>
                                    @endif
                                @elseif(empty($product->quantity) || $product->quantity == 0)
                                    <span style="color:#8a8a8a; font-size:14px; font-weight:600;">Нет в наличии</span>
                                    @if($product->supplier && $product->supplier->city_name)
                                        <span style="color:#8a8a8a; font-size:13px; margin-left:6px;">Город: {{ $product->supplier->city_name }}</span>
                                    @endif
                                @else
                                    <span style="color:#217B00; font-size:14px; font-weight:600;">В наличии {{ $product->quantity }} шт.</span>
                                    @if($product->city_name)
                                        <span style="color:#888; font-size:13px; margin-left:6px;">Город: {{ $product->city_name }}</span>
                                    @endif
                                @endif
                            </div>
                            <div class="card__main-buttons" style="display:flex; justify-content:space-between; gap:12px; width:100%;">
                                <form action="" method="POST" style="max-width: 100%;width: 100%;">
{{--                                <form action="{{ route('addToCart') }}" method="POST">--}}
                                    @csrf
                                    <input type="hidden" name="product_id" value="{{ $product->id }}">
                                    @php
                                        $versionPhone = optional($product->getLatestVersion())->phone;
                                        $primaryPhone = $product->phone ?: $versionPhone;
                                        $secondaryPhone = $product->phone_dop ?? null;
                                        $hasPhone = !empty($primaryPhone) || !empty($secondaryPhone);
                                        $phone = $primaryPhone ?: ($secondaryPhone ?: 'Нет телефона');
                                        $externalLink = $product->ref_link ?: ($product->product_link ?: ($product->ref ?? '#'));
                                    @endphp
                                    @if($hasPhone)
                                        <button type="button" class="btn-main card__btn-cart" id="showPhoneModalBtn" style="flex:1 1 auto; display: flex;justify-content: center;align-items: center;padding: 20px;width: 100%;">Показать телефон</button>
                                        <div id="phoneModal" class="phone-modal-overlay" style="display: none;">
                                            <div class="phone-modal-content">
                                                <h2 class="phone-modal-title">Телефон продавца</h2>
                                                <span class="phone-modal-close" id="closePhoneModalBtn">&times;</span>
                                                <div class="phone-modal-body">
                                                    <b style="font-size: 2rem;">{{ $phone }}</b>
                                                </div>
                                                <div class="phone-modal-warning">Не переводите предоплату!</div>
                                            </div>
                                        </div>
                                    @else
                                        <a href="{{ $externalLink }}" class="btn-main card__btn-cart" style="flex:1 1 auto; display: flex;justify-content: center;align-items: center;padding: 20px;">Перейти в магазин</a>

                                    @endif
                                </form>
                                <form action="{{ route('addToShopFavorites') }}" method="POST">
                                    @csrf
                                    <input type="hidden" name="product_id" value="{{ $product->id }}">
                                <button class="btn-main card__btn-favourites" style="width:80px">
                                    <svg fill="#000000" width="30" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M3.515,22.875a1,1,0,0,0,1.015-.027L12,18.179l7.47,4.669A1,1,0,0,0,21,22V4a3,3,0,0,0-3-3H6A3,3,0,0,0,3,4V22A1,1,0,0,0,3.515,22.875ZM5,4A1,1,0,0,1,6,3H18a1,1,0,0,1,1,1V20.2l-6.47-4.044a1,1,0,0,0-1.06,0L5,20.2Z"/>
                                    </svg>
                                </button>
                                </form>
                            </div>
                        </div>
                        @php
                        if(!isset($city)){
                            if(session('city')){
                                $city = session('city');
                            }elseif(session('cityGeo')){
                                $city = session('cityGeo');
                            }else{
                                $city = 'Москва';
                            }
                        }
                        if(!isset($slug)){
                            if(session('slug')){
                                $slug = session('slug');
                            }elseif(session('cityGeo')){
                                $slug = session('cityGeo');
                            }elseif($slug = \App\Models\City::where('title',$city)->first()){
                                $slug = $slug->slug;
                            }else{
                                $slug = 'moskva';
                            }
                        }
                        @endphp
						<section class="accordion acc-dis">
						  <div class="accordion__list">

						    <!-- Доставка -->
						    <div class="accordion__item">
						      <div class="accordion__item-trigger">
						        <div class="trigger__text">Доставка по г. {{$city}}</div>
						        <div class="trigger__img"><span class="line1"></span><span class="line2"></span></div>
						      </div>
						      <div class="accordion__item-content">
						        <div class="content__text">
						          Доставку выполняет <b>поставщик</b> в вашем городе. Возможные варианты: курьер, транспортная компания
						          или <b>самовывоз</b> со склада/пункта выдачи.
						          <ul>
						            <li>Сроки и стоимость зависят от адреса и габаритов товара — уточняйте у поставщика перед покупкой.</li>
						            <li>Возможность подъёма/сборки — по договорённости с поставщиком.</li>
						          </ul>
						          <i>Ремонт.рф — информационная площадка и не организует доставку.</i>
						        </div>
						      </div>
						    </div>

						    <!-- Обмен / возврат -->
						    <div class="accordion__item">
						      <div class="accordion__item-trigger">
						        <div class="trigger__text">Обмен/возврат</div>
						        <div class="trigger__img"><span class="line1"></span><span class="line2"></span></div>
						      </div>
						      <div class="accordion__item-content">
						        <div class="content__text">
						          Обмен и возврат осуществляет <b>поставщик</b> в соответствии с Законом РФ «О защите прав потребителей»
						          и собственной гарантийной политикой.
						          <ul>
						            <li>Условия, сроки и адрес возврата — уточняйте у поставщика.</li>
						            <li>Изделия, изготовленные или поставляемые <b>под заказ</b>, как правило, не подлежат возврату,
						              если иное не предусмотрено законом.</li>
						            <li>При получении проверьте комплектность и внешний вид товара.</li>
						          </ul>
						        </div>
						      </div>
						    </div>

						    <!-- Способы оплаты -->
						    <div class="accordion__item">
						      <div class="accordion__item-trigger">
						        <div class="trigger__text">Способы оплаты</div>
						        <div class="trigger__img"><span class="line1"></span><span class="line2"></span></div>
						      </div>
						      <div class="accordion__item-content">
						        <div class="content__text">
						          Оплату принимает <b>поставщик</b>. Доступные варианты могут включать наличный расчёт,
						          безналичный перевод, онлайн-эквайринг или счёт на оплату — конкретный набор зависит от магазина.
						          <br><b>Уточняйте способы оплаты у поставщика</b> до оформления покупки.
						          <br><i>Ремонт.рф не принимает платежи и не выступает продавцом.</i>
						        </div>
						      </div>
						    </div>

						  </div>
						</section>
                        @php
                            $products_other = ($otherSellers ?? collect())->map(function($p) {
                                $imageUrls = $p->images_urls ? array_filter(explode(',', $p->images_urls)) : [];
                                $firstImage = !empty($imageUrls) ? trim($imageUrls[0]) : '/default-images/default-image.png';
                                return [
                                    'id' => $p->id,
                                    'name' => $p->supplier->name ?? 'Поставщик',
                                    'stars' => 'Нет оценок',
                                    'delivery' => 'В ближайшее время',
                                    'seller' => $p->supplier->name ?? 'Поставщик',
                                    'image' => $firstImage,
                                    'price' => $p->discount_price ?: $p->price,
                                    'original_price' => $p->price,
                                    'discount_price' => $p->discount_price,
                                    'url' => route('showCardPage', $p->url),
                                    'quantity' => $p->quantity,
                                    'is_zakaz' => $p->is_zakaz
                                ];
                            })->toArray();
                            $product_view = array_slice($products_other, 0, 3);
                        @endphp
                        @if(!empty($products_other))
                        <div class="other_sellers">
                            <div class="other_sellers_content">
                                <div class="other_sellers_content_title" onclick="other_sellers_modal.style.display = other_sellers_modal.style.display == 'flex' ? 'none' : 'flex' ">
                                    <div class="other_sellers_content_title_img">
                                        <img src="{{$products_other[0]['image']}}" alt="Image">
                                    </div>
                                    <div class="other_sellers_content_title_content">
                                        <div class="other_sellers_content_title_content_title">
                                            У других продавцов
                                        </div>
                                        <div class="other_sellers_content_title_content_title_sub">
                                            {{ ($otherSellersIsFallback ?? false) ? 'Похожие предложения' : 'По такой же цене или дешевле' }}
                                        </div>
                                    </div>
                                    <div class="other_sellers_content_title_arrow">
                                        <div class="other_sellers_content_title_arrow_count">{{count($products_other)}}</div>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none">
                                            <path d="M7.82054 20.7313C8.21107 21.1218 8.84423 21.1218 9.23476 20.7313L15.8792 14.0868C17.0505 12.9155 17.0508 11.0167 15.88 9.84497L9.3097 3.26958C8.91918 2.87905 8.28601 2.87905 7.89549 3.26958C7.50497 3.6601 7.50497 4.29327 7.89549 4.68379L14.4675 11.2558C14.8581 11.6464 14.8581 12.2795 14.4675 12.67L7.82054 19.317C7.43002 19.7076 7.43002 20.3407 7.82054 20.7313Z" fill="#0F0F0F"/>
                                        </svg>
                                    </div>
                                </div>
                                <div class="other_sellers_content_products">
                                    @foreach($product_view as $product_other)
                                        <a href="{{$product_other['url']}}" class="other_sellers_content_product">
                                            <div class="other_sellers_content_product_img">
                                                <img src="{{$product_other['image'] && $product_other['image'] != '' ? $product_other['image'] : '/default-images/default-image.png'}}" alt="Image">
                                            </div>
                                            <div class="other_sellers_content_product_info">
                                                <div class="other_sellers_content_product_info_price">
                                                    @if($product_other['discount_price'])
                                                        <span style="color:black; font-weight:600;">{{ number_format((float)$product_other['discount_price'], 0, '.', ' ') }} руб.</span>
                                                        <span style="text-decoration: line-through; color: gray; font-size:14px; margin-left:6px;">{{ number_format((float)$product_other['original_price'], 0, '.', ' ') }} руб.</span>
                                                    @else
                                                        {{ number_format((float)$product_other['price'], 0, '.', ' ') }} руб.
                                                    @endif
                                                </div>
                                                <div class="other_sellers_content_product_info_review">
                                                    <div class="other_sellers_content_product_info_review_score">
                                                        <svg xmlns="http://www.w3.org/2000/svg" fill="{{$product_other['stars'] && $product_other['stars'] != '' && $product_other['stars'] != 'Нет оценок' ? 'gold' : '#666'}}" width="16" height="16" viewBox="0 0 32 32" version="1.1">
                                                            <title>star</title>
                                                            <path d="M3.488 13.184l6.272 6.112-1.472 8.608 7.712-4.064 7.712 4.064-1.472-8.608 6.272-6.112-8.64-1.248-3.872-7.808-3.872 7.808z"/>
                                                        </svg>
                                                        <div class="other_sellers_content_product_info_review_score_number">{{$product_other['stars'] ?? 'Нет оценок'}}</div>
                                                    </div>
                                                    <div class="other_sellers_content_product_info_review_delivery">{{$product_other['delivery'] ?? 'В ближающее время'}}</div>
                                                </div>
                                                <div class="other_sellers_content_product_info_seller">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none">
                                                        <circle cx="12" cy="8" r="4" fill="#222222"/>
                                                        <path d="M5.33788 17.3206C5.99897 14.5269 8.77173 13 11.6426 13H12.3574C15.2283 13 18.001 14.5269 18.6621 17.3206C18.79 17.8611 18.8917 18.4268 18.9489 19.0016C19.0036 19.5512 18.5523 20 18 20H6C5.44772 20 4.99642 19.5512 5.0511 19.0016C5.1083 18.4268 5.20997 17.8611 5.33788 17.3206Z" fill="#222222"/>
                                                    </svg>
                                                    <div class="other_sellers_content_product_info_seller_name">{{$product_other['name']}}</div>
                                                </div>
                                            </div>
                                        </a>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        @endif
                        <div class="modal__wrapper3" id="other_sellers_modal" style="display: none;">
                            <div class="modal" style="max-width: 550px;min-height: auto;width: 550px">
                                <div class="modal__close3" onclick="other_sellers_modal.style.display = 'none'"><img src="https://dev2.xn--e1aoddhq.xn--p1ai/assets/img/close.svg" alt="cancel" width="20" height="20"></div>
                                <div class="modal__body">
                                    <div class="other_sellers_modal_content">
                                        <div class="other_sellers_modal_content_title">
                                            Другие продавцы
                                        </div>
                                        @if(!($otherSellersIsFallback ?? false))
                                            <form method="GET" action="{{ route('showProductPage') }}" style="margin-bottom:10px; display:flex; gap:8px; align-items:center;">
                                                <input type="hidden" name="supplier_sku" value="{{ $product->supplier_sku }}">
                                                <input type="number" step="0.01" name="min_price" placeholder="Мин. цена" style="flex:1; padding:6px 8px; width: 100%;">
                                                <input type="number" step="0.01" name="max_price" placeholder="Макс. цена" style="flex:1; padding:6px 8px; width: 100%;">
                                                <button type="submit" class="btn-main" style="white-space:nowrap;">Показать все</button>
                                            </form>
                                        @endif
                                        <div class="other_sellers_modal_content_items">
                                            @foreach($products_other as $product_other)
                                                <a href="{{$product_other['url']}}" class="other_sellers_modal_content_item">
                                                    <div class="other_sellers_modal_content_item_img">
                                                        <img src="{{$product_other['image'] && $product_other['image'] != '' ? $product_other['image'] : '/default-images/default-image.png'}}" alt="Image">
                                                    </div>
                                                    <div class="other_sellers_modal_content_item_text">
                                                        <div class="other_sellers_modal_content_item_price">
                                                            @if($product_other['discount_price'])
                                                                <span style="color:black; font-weight:600;">{{ number_format((float)$product_other['discount_price'], 0, '.', ' ') }} руб.</span>
                                                                <span style="text-decoration: line-through; color: gray; font-size:12px; margin-left:4px;">{{ number_format((float)$product_other['original_price'], 0, '.', ' ') }} руб.</span>
                                                            @else
                                                                {{ number_format((float)$product_other['price'], 0, '.', ' ') }} руб.
                                                            @endif
                                                        </div>
                                                        <div class="other_sellers_modal_content_item_sellers">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none">
                                                                <circle cx="12" cy="8" r="4" fill="#222222"/>
                                                                <path d="M5.33788 17.3206C5.99897 14.5269 8.77173 13 11.6426 13H12.3574C15.2283 13 18.001 14.5269 18.6621 17.3206C18.79 17.8611 18.8917 18.4268 18.9489 19.0016C19.0036 19.5512 18.5523 20 18 20H6C5.44772 20 4.99642 19.5512 5.0511 19.0016C5.1083 18.4268 5.20997 17.8611 5.33788 17.3206Z" fill="#222222"/>
                                                            </svg>
                                                            {{$product_other['seller']}}
                                                        </div>
                                                        <div class="other_sellers_modal_content_item_review">
                                                            <svg xmlns="http://www.w3.org/2000/svg" fill="{{$product_other['stars'] && $product_other['stars'] != '' && $product_other['stars'] != 'Нет оценок' ? 'gold' : '#666'}}" width="16" height="16" viewBox="0 0 32 32" version="1.1">
                                                                <title>star</title>
                                                                <path d="M3.488 13.184l6.272 6.112-1.472 8.608 7.712-4.064 7.712 4.064-1.472-8.608 6.272-6.112-8.64-1.248-3.872-7.808-3.872 7.808z"/>
                                                            </svg>
                                                            {{$product_other['stars']}}
                                                        </div>
                                                    </div>
                                                </a>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Смотрите также: комбинированный список --}}
                        @if(($alsoProducts ?? collect())->isNotEmpty())
                            <div class="card__view" style="display: none;">
                                <div class="card__title card__view-title">
                                    <span>Смотрите также</span>
                                </div>
                                <div class="product__list">
                                    @foreach(($alsoProducts ?? collect()) as $p)
                                        @php
                                            $imgList = $p->images_urls ? array_filter(explode(',', $p->images_urls)) : [];
                                            $img = !empty($imgList) ? trim($imgList[0]) : '/default-images/default-image.png';
                                        @endphp
                                        <div class="product__item">
                                            <button type="button" class="btn-fav-mini" data-product-id="{{ $p->id }}" aria-label="Избранное" title="Добавить в избранное"
                                                style="position:absolute;top:5px;right:5px;background:transparent;border:none;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;">
                                                <svg class="fav-icon" width="22" height="22" viewBox="0 0 24 24" fill="#6B7280" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M6 2c-1.105 0-2 .895-2 2v18l8-5 8 5V4c0-1.105-.895-2-2-2H6z"/>
                                                </svg>
                                            </button>
                                            <div class="product__item-img" style="position: relative;">
                                                <a href="{{ route('showCardPage', $p->url) }}" class="product__item-link">
                                                    <img src="{{ $img }}" alt="{{ $p->name }}">
                                                </a>

                                            </div>
                                            <p class="product__item-price">
                                                @if($p->discount_price)
                                                    <span style="text-decoration: line-through; color: #888;">{{ number_format((float)($p->price ?? 0), 0, '.', ' ') }} руб.</span>
                                                    <span style="color: red;">{{ number_format((float)($p->discount_price ?? 0), 0, '.', ' ') }} руб.</span>
                                                @else
                                                    {{ number_format((float)($p->price ?? 0), 0, '.', ' ') }} руб.
                                                @endif
                                            </p>
                                            <a href="{{ route('showCardPage', $p->url) }}" class="product__item-name">{{ $p->name }}</a>
                                            <div class="product__item-qul">
                                                В наличии {{ $p->quantity }} шт.
                                            </div>
                                            <a href="{{ $p->ref_link ?: ($p->product_link ?: ($p->ref ?? '#')) }}" class="btn-main product__btn" style="width:100%;display: flex;justify-content: center;align-items: center">Перейти в магазин</a>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
                <div class="card__tabs">
                    <button class="card__tabs-title">Характеристики</button>
                    <div class="card__specifications">
                        <div class="card__specifications-left">
                            <div class="card__specifications-list">
                                <div class="card__specifications-block">
                                    <div class="card__specifications-title">Параметры</div>
                                    <div class="card__specifications-item">
                                        <p class="card__specifications-name">Название</p>
                                        <p class="card__specifications-link">{{ $product->name }}</p>
                                    </div>
                                    <div class="card__specifications-item">
                                        <p class="card__specifications-name">Артикул системы</p>
                                        <p class="card__specifications-link">{{ $product->sku }}</p>
                                    </div>
                                    {{-- @if($product->universal_sku)
                                        <div class="card__specifications-item">
                                            <p class="card__specifications-name">Универсальный артикул</p>
                                            <p class="card__specifications-link" style="color: #217B00; font-weight: 600;">{{ $product->universal_sku }}</p>
                                        </div>
                                    @endif --}}
                                    <div class="card__specifications-item">
                                        <p class="card__specifications-name">Бренд</p>
                                        <p class="card__specifications-link">{{ $product->brand }}</p>
                                    </div>
                                    <div class="card__specifications-item">
                                        <p class="card__specifications-name">Цена</p>
                                        <p class="card__specifications-link">{{ number_format((float)($product->price ?? 0), 2, '.', ' ') }} руб.</p>
                                    </div>
                                    @if ($product->discount_price)
                                        <div class="card__specifications-item">
                                            <p class="card__specifications-name">Цена со скидкой</p>
                                            <p class="card__specifications-link">{{ number_format((float)($product->discount_price ?? 0), 2, '.', ' ') }} руб.</p>
                                        </div>
                                    @endif
                                    <div class="card__specifications-item">
                                        <p class="card__specifications-name">Количество</p>
                                        <p class="card__specifications-link">{{ $product->quantity }}</p>
                                    </div>
                                    <div class="card__specifications-item">
                                        <p class="card__specifications-name">Категория</p>
                                        <p class="card__specifications-link">{{ $product->category->name }}</p>
                                    </div>
                                </div>

                                <div class="card__specifications-block">
                                    <div class="card__specifications-title">Внешний вид</div>
                                    <div class="card__specifications-item">
                                        <p class="card__specifications-name">Цвет</p>
                                        <p class="card__specifications-link">{{ $product->color }}</p>
                                    </div>
                                    <div class="card__specifications-item">
                                        <p class="card__specifications-name">Материал</p>
                                        <p class="card__specifications-link">{{ $product->material }}</p>
                                    </div>
                                    <div class="card__specifications-item">
                                        <p class="card__specifications-name">Вес</p>
                                        <p class="card__specifications-link">{{ $product->weight }} кг</p>
                                    </div>
                                    <div class="card__specifications-item">
                                        <p class="card__specifications-name">Размеры</p>
                                        <p class="card__specifications-link">{{ $product->length }} x {{ $product->width }} x {{ $product->height }} см</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card__specifications-left">
                            <div class="card__specifications-list">
                                <div class="card__specifications-block">
                                    <div class="card__specifications-title">Описание</div>
                                    <div class="card__specifications-item card__specifications-item2">

                                        {!! $product->description !!}
                                    </div>
                                    {{-- @foreach ($product->attributes as $attribute)
                                        <div class="card__specifications-item">
                                            <p class="card__specifications-name">{{ $attribute->key }}</p>
                                            <p class="card__specifications-link">{{ $attribute->value }}</p>
                                        </div>
                                    @endforeach --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <section class="accordion acc-mobile" style="margin-top:7px">
                    <div class="accordion__list">
                        <div class="accordion__item">
                            <div class="accordion__item-trigger">
                                <div class="trigger__text">Доставка по г. {{$city}}</div>
                                <div class="trigger__img">
                                    <span class="line1"></span>
                                    <span class="line2"></span>
                                </div>
                            </div>
                            <div class="accordion__item-content">
                                <div class="content__text">Какой-то рандомный текст для аккордеона</div>
                            </div>
                        </div>
                        <div class="accordion__item">
                            <div class="accordion__item-trigger">
                                <div class="trigger__text">Обмен/возврат</div>
                                <div class="trigger__img">
                                    <span class="line1"></span>
                                    <span class="line2"></span>
                                </div>
                            </div>
                            <div class="accordion__item-content">
                                <div class="content__text">Если товар не подошел или не оправдал Ваших ожиданий, можно отказаться от него в течение 7 дней дней с момента его получения. Товары, изготовленные или поставляемые под заказ - возврату, обмену не подлежат.</div>
                            </div>
                        </div>
                        <div class="accordion__item">
                            <div class="accordion__item-trigger">
                                <div class="trigger__text">Способы оплаты</div>
                                <div class="trigger__img">
                                    <span class="line1"></span>
                                    <span class="line2"></span>
                                </div>
                            </div>
                            <div class="accordion__item-content">
                                <div class="content__text">Если товар не подошел или не оправдал Ваших ожиданий, можно отказаться от него в течение 7 дней дней с момента его получения. Товары, изготовленные или поставляемые под заказ - возврату, обмену не подлежат.</div>
                            </div>
                        </div>
                    </div>
                </section>

                @php
                    $recentlyViewedProducts = $recentlyViewedProducts ?? collect();
                @endphp

                {{-- Прячем блок "Вы просматривали" на время (сохранен для быстрого возврата) --}}
                <div style="display:none">
                @if($recentlyViewedProducts->isNotEmpty())
                    <div class="card__view">
                        <div class="card__title card__view-title">
                            <span>Вы просматривали</span>
                        </div>
                        <div class="product__list">
                            @foreach($recentlyViewedProducts as $product)
                                <div class="product__item">...</div>
                            @endforeach
                        </div>
                    </div>
                @endif
                </div>

                {{-- Новый блок "Смотрите также" — 4 рандомных из той же категории и Подкатегории2 --}}
                @if(($alsoRandom4 ?? collect())->isNotEmpty())
                    <div class="card__view">
                        <div class="card__title card__view-title">
                            <span>Смотрите также</span>
                        </div>
                        <div class="product__list">
                            @foreach($alsoRandom4 as $p)
                                @php
                                    $imgList = $p->images_urls ? array_filter(explode(',', $p->images_urls)) : [];
                                    $img = !empty($imgList) ? trim($imgList[0]) : '/default-images/default-image.png';
                                @endphp
                                <div class="product__item">
                                    <button type="button" class="btn-fav-mini" data-product-id="{{ $p->id }}" aria-label="Избранное" title="Добавить в избранное"
                                        style="position:absolute;top:5px;right:5px;background:transparent;border:none;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;">
                                        <svg class="fav-icon" width="22" height="22" viewBox="0 0 24 24" fill="#6B7280" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M6 2c-1.105 0-2 .895-2 2v18l8-5 8 5V4c0-1.105-.895-2-2-2H6z"/>
                                        </svg>
                                    </button>
                                    <div class="product__item-img" style="position: relative;">
                                        <a href="{{ route('showCardPage', $p->url) }}" class="product__item-link">
                                            <img src="{{ $img }}" alt="{{ $p->name }}">
                                        </a>
                                    </div>
                                    <p class="product__item-price">
                                        @if($p->discount_price)
                                            <span style="text-decoration: line-through; color: #888;">{{ number_format((float)($p->price ?? 0), 0, '.', ' ') }} руб.</span>
                                            <span style="color: red;">{{ number_format((float)($p->discount_price ?? 0), 0, '.', ' ') }} руб.</span>
                                        @else
                                            {{ number_format((float)($p->price ?? 0), 0, '.', ' ') }} руб.
                                        @endif
                                    </p>
                                    <a href="{{ route('showCardPage', $p->url) }}" class="product__item-name">{{ $p->name }}</a>
                                    <div class="product__item-qul">В наличии {{ $p->quantity }} шт.</div>
                                    <a href="{{ $p->ref_link ?: ($p->product_link ?: ($p->ref ?? '#')) }}" class="btn-main product__btn" style="width:100%;display: flex;justify-content: center;align-items: center">Перейти в магазин</a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </section>
</main>


<!-- Footer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css">


<script>
    // Аккордеон
    function accordion() {
        const items = document.querySelectorAll('.accordion__item-trigger')
        items.forEach(item => {
            item.addEventListener('click', () => {
                const parent = item.parentNode
                if (parent.classList.contains('accordion__item-active')) {
                    parent.classList.remove('accordion__item-active')
                } else {
                    document
                        .querySelectorAll('.accordion__item')
                        .forEach(child => child.classList.remove('accordion__item-active'))
                    parent.classList.add('accordion__item-active')
                }
            })
        })
    }

    accordion()
</script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        var currentSlide = 0;
        var imageCount = {{ $imageCount ?? 1 }};

        function showSlide(index) {
            $('.gallery__image-slide').hide();
            $('.gallery__image-slide').eq(index).show();
        }

        showSlide(currentSlide);

        if (imageCount > 1) {
            $('.gallery__btn-back').click(function() {
                currentSlide = (currentSlide - 1 + imageCount) % imageCount;
                showSlide(currentSlide);
            });

            $('.gallery__btn-next').click(function() {
                currentSlide = (currentSlide + 1) % imageCount;
                showSlide(currentSlide);
            });

            let touchStartX = 0;
            const swipeArea = $('.gallery__main-image');

            swipeArea.on('touchstart', function (e) {
                touchStartX = e.originalEvent.touches[0].clientX;
            });

            swipeArea.on('touchend', function (e) {
                const touchEndX = e.originalEvent.changedTouches[0].clientX;
                const diffX = touchStartX - touchEndX;
                const threshold = 50;
                if (Math.abs(diffX) > threshold) {
                    if (diffX > 0) {
                        currentSlide = (currentSlide + 1) % imageCount;
                    } else {
                        currentSlide = (currentSlide - 1 + imageCount) % imageCount;
                    }
                    showSlide(currentSlide);
                }
            });
        }
    });

    // Модалка для показа телефона
    document.addEventListener('DOMContentLoaded', function () {
        const showBtn = document.getElementById('showPhoneModalBtn');
        const modal = document.getElementById('phoneModal');
        const closeBtn = document.getElementById('closePhoneModalBtn');

        if(showBtn && modal && closeBtn) {
            showBtn.addEventListener('click', function() {
                modal.style.display = 'flex';
                document.body.classList.add('locked');
            });
            closeBtn.addEventListener('click', function() {
                modal.style.display = 'none';
                document.body.classList.remove('locked');
            });
            modal.addEventListener('click', function(e) {
                if(e.target === modal) {
                    modal.style.display = 'none';
                    document.body.classList.remove('locked');
                }
            });
        }
    });
</script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const shareButtonMobile = document.getElementById('shareButtonMobile');
        if (shareButtonMobile) {
            shareButtonMobile.addEventListener('click', function () {
                const shareData = {
                    title: '{{ $product->name }}',
                    text: 'Посмотрите этот товар: {{ $product->name }}',
                    url: window.location.href
                };
                if (navigator.share) {
                    navigator.share(shareData)
                        .then(() => console.log('Поделиться успешно'))
                        .catch((error) => console.log('Ошибка при шаринге', error));
                } else {
                    navigator.clipboard.writeText(window.location.href).then(function() {
                        alert('Ссылка скопирована в буфер обмена!');
                    }, function(err) {
                        alert('Не удалось скопировать ссылку');
                    });
                }
            });
        }
        // Десктопная кнопка
        const shareButton = document.getElementById('shareButton');
        if (shareButton) {
            shareButton.addEventListener('click', function () {
                const shareData = {
                    title: '{{ $product->name }}',
                    text: 'Посмотрите этот товар: {{ $product->name }}',
                    url: window.location.href
                };
                if (navigator.share) {
                    navigator.share(shareData)
                        .then(() => console.log('Поделиться успешно'))
                        .catch((error) => console.log('Ошибка при шаринге', error));
                } else {
                    navigator.clipboard.writeText(window.location.href).then(function() {
                        alert('Ссылка скопирована в буфер обмена!');
                    }, function(err) {
                        alert('Не удалось скопировать ссылку');
                    });
                }
            });
        }
    });
</script>
<style>
@media (max-width: 767.98px) {
    .gallery__btn-mobile { display: flex !important; }
    .gallery__btn-list { display: none !important; }
    .gallery__main-wrapper{flex-direction:column;}
    .gallery__main-image{order:1;}
    .card__main-info{order:2;width:100%;margin-top:20px;}
    .card__main-buttons{justify-content:space-between !important;gap:10px;}
    .card__btn-cart{flex:1 1 auto;}
    .card__btn-favourites{width:60px;flex:0 0 auto;}
    .btn-outline{
        padding:2px
    }
    .other_sellers_modal_content form {
        display:none !important;
    }
}
@media (min-width: 768px) {
    .gallery__btn-mobile { display: none !important; }
    .gallery__btn-list { display: flex !important; }
}
</style>

<script>
// Переключение избранного в блоках «Смотрите также»
document.addEventListener('DOMContentLoaded', function () {
    const tokenMeta = document.querySelector('meta[name="csrf-token"]');
    const csrf = tokenMeta ? tokenMeta.getAttribute('content') : '';

    function setFavActive(btn, active) {
        const icon = btn.querySelector('.fav-icon');
        if (active) {
            btn.classList.add('fav-active');
            if (icon) icon.setAttribute('fill', '#007d00');
        } else {
            btn.classList.remove('fav-active');
            if (icon) icon.setAttribute('fill', '#6B7280');
        }
    }

    document.body.addEventListener('click', function(e){
        const btn = e.target.closest('.btn-fav-mini');
        if (!btn) return;
        const productId = btn.getAttribute('data-product-id');
        if (!productId) return;

        fetch('{{ route('addToShopFavorites') }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': csrf,
                'X-Requested-With': 'XMLHttpRequest',
            },
            body: new URLSearchParams({ product_id: productId })
        })
        .then(r => r.json().catch(() => ({})))
        .then(() => {
            const nowActive = !btn.classList.contains('fav-active');
            setFavActive(btn, nowActive);
        })
        .catch(() => {
            const nowActive = !btn.classList.contains('fav-active');
            setFavActive(btn, nowActive);
        });
    });
});
</script>
@endsection