@extends('frontend.layouts.main')
@section('title', $seo['title'] ?? '')
@section('keywords', $seo['keywords'] ?? '')
@section('description', $seo['description'] ?? '')
@section('abstract', $seo['abstract'] ?? '')
@section('image', asset($seo['image'] ?? ''))

@section('canonical')
<link rel="canonical" href="{{ $data->slug_full }}" />
@endsection

@section('css')
<link rel="stylesheet" href="{{ asset('frontend/css/style.css') }}?v={{ time() }}" type="text/css" />
<link rel="stylesheet" type="text/css" href="{{ asset('frontend/css/page-product.css') }}?v={{ time() }}">
@endsection

@section('code_schema')
@include('frontend.components.schema.schema-product',['data'=>$data])
@endsection
@section('content')

@include('frontend.components.breadcrumbs', ['caetgory' => $category, 'parents' => $category->parentsRecursiveLimit(3)])
<div class="ctnr">
    <section class="product-detail box-box">
        <div class="row">
            <div class="clm" style="--w-lg:4; --w-md:4; --w-xs:12">
                <div class="product-container">
                     @php
  
                        $mediaImages = collect($media)->where('type', 'image')->values();
                    @endphp

                    @foreach ($mediaImages as $i => $m)
                        <div class="item p-relative"
                            data-src="{{ asset($m['src']) }}"
                            data-index="{{ $i }}">
                            <a data-fancybox="img-detail"
                            href="{{ asset($m['src']) }}"
                            class="img-product-detail wrap-img img-100">
                                <img src="{{ asset($m['src']) }}" alt="Hình ảnh">
                            </a>
                        </div>
                    @endforeach

                    @if(!empty($data->options) && count($data->options) > 0)
                        @foreach ($data->options as $index => $option)
                            @php
                                $realIndex = $mediaImages->count() + $index;
                            @endphp

                            <div class="item p-relative"
                                data-src="{{ asset($option->avatar_type != '' ? $option->avatar_type : $data->avatar_path) }}"
                                data-index="{{ $realIndex }}">
                                <a data-fancybox="img-detail"
                                href="{{ asset($option->avatar_type != '' ? $option->avatar_type : $data->avatar_path) }}"
                                class="img-product-detail wrap-img img-100">
                                    <img src="{{ asset($option->avatar_type != '' ? $option->avatar_type : $data->avatar_path) }}" alt="Hình ảnh">
                                </a>
                            </div>
                        @endforeach
                    @endif


                </div>
               
            </div>
            <div class="clm" style="--w-lg:5; --w-md:5; --w-xs:12">
                <div class="product-content">
                    <h1 class="name-product">{{ $data->name }}</h1>
                    <div class="group-header">
                        <div>
                            @if (!empty($data->masp))
                            <div class="code">Mã SP: {{ $data->masp }}</div>
                            @endif
                            <div class="stars">
                                <div class="rateYo" data-rating="{{ $data->rating ?? '0' }}"></div>
                                <span class="count-rate">{{$data->comments_count ?? '0' }} đánh giá</span>
                            </div>
                        </div>

                        <!-- Check tình trạng ở đây, còn hàng thì class 'in-stock', hết hàng thì class 'out-of-stock' -->
                        @php
                        $stockClass = match($data->stock_status) {
                        'in_stock' => 'in-stock',
                        'out_of_stock' => 'out-of-stock',
                        'preorder' => 'preorder',
                        default => 'unknown',
                        };
                        $stockText = match($data->stock_status) {
                        'in_stock' => 'Còn hàng',
                        'out_of_stock' => 'Hết hàng',
                        'preorder' => 'Đặt trước',
                        default => 'Không xác định',
                        };
                        @endphp
                        <div class="status {{ $stockClass }}">
                            {{ $stockText }}
                        </div>


                    </div>
                   
                    <div class="price-wrap">
                      
                @if($data->price > 0)
                <div class="price-new">
                    <div class="price">
                        Giá bán: <span id="show-price-new">{{ number_format($data->price, 0, ',', '.') }} đ</span>
                    </div>
                    <div class="note">({{ $data->is_vat ? 'Đã' : 'Chưa' }} bao gồm VAT)</div>
                </div>
                @if($data->old_price > 0)
                <div class="price-old">
                    <div class="price">
                        Giá thị trường:
                        <del id="show-price-old">{{ number_format($data->old_price, 0, ',', '.') }} đ</del>
                    </div>
                    @if($data->old_price > 0 && $data->price > 0)
                    <div class="discount">
                        Bạn tiết kiệm:
                        <span id="show-discount">
                            {{ round((($data->old_price - $data->price) / $data->old_price) * 100) }}%
                        </span>
                    </div>
                    @endif
                </div>
                @endif
                @elseif($data->old_price > 0)
                <div class="price-old">
                    <div class="price">
                        Giá thị trường: {{ number_format($data->old_price, 0, ',', '.') }} đ
                    </div>
                </div>
                @else
                <div class="price-new">
                    <div class="price"><span>Liên hệ</span></div>
                </div>
                @endif
            </div>
@if ($data->options->isNotEmpty())
@php
    $activated = false; // đánh dấu đã active option nào chưa
@endphp

<div class="choose-config">
    <div class="title-box">Tùy chọn cấu hình:</div>
    <div class="option-group">
        @foreach ($data->options as $index=>$option)
            @php
                $price = (float) $option->price;
                $old_price = (float) $option->old_price;
                $isContact = ($price <= 0);

                // chỉ active option đầu tiên KHÔNG bị contact
                $isActive = (!$activated && !$isContact);
                if ($isActive) $activated = true;

                $realIndex = $mediaImages->count() + $index;
            @endphp

            <a class="option-item
                {{ $isActive ? 'active' : '' }}
                {{ $isContact ? 'disabled' : '' }}"
                data-price="{{ number_format($price,0,',','.') }}"
                data-old-price="{{ number_format($old_price,0,',','.') }}"
                data-option-id="{{ $option->id }}"
                data-is-contact="{{ $isContact ? '1' : '0' }}"
                data-image="{{ asset($option->avatar_type) }}"
                data-persen="{{ ($old_price > 0 && $old_price > $price) ? round((($old_price - $price) / $old_price) * 100) : 0 }}%"
                data-index="{{ $realIndex }}"
            >
                <input type="radio" name="cauhinh"
                    {{ $isActive ? 'checked' : '' }}
                    {{ $isContact ? 'disabled' : '' }}
                    value="{{ $option->id }}">

                <span class="custom-radio"></span>

                <div class="option-text">
                    <div class="title">{{ $option->size }}</div>

                    @if ($price > 0)
                        <div class="price">{{ number_format($price, 0, ',', '.') }} đ</div>

                        @if ($old_price > 0 )
                            <div class="price-old">
                                <del>{{ number_format($old_price, 0, ',', '.') }} đ</del>
                                 @if ($old_price > 0 && $old_price > $price)
                                <span class="discount">
                                    -{{ round((($old_price - $price) / $old_price) * 100) }}%
                                </span>
                                @endif
                            </div>
                        @endif
                    @else
                        <div class="price-contact">Liên hệ</div>
                    @endif
                </div>
            </a>
        @endforeach
    </div>
</div>
@endif

@if (!empty($data->description2))
<div class="box-des">
    <div class="title">Mô tả ngắn</div>
    <div class="content-des noi-dung">
        {!! $data->description2 !!}
    </div>
    <button class="toggle-des">Xem thêm</button>
</div>
@elseif($data->content2 != "")
<div class="box-des">
    <div class="title">Khuyến mãi </div>
    <div class="content-des noi-dung khuyenmai">
        {!! $data->content2 !!}
    </div>
    <button class="toggle-des">Xem thêm</button>
</div>
@elseif($gifts)
<div class="box-des">
    <div class="title">{{ $gifts->name }} </div>
    <div class="content-des noi-dung">
        {!! $gifts->description !!}
    </div>
    <button class="toggle-des">Xem thêm</button>
</div>
@endif



<div class="button-add-group">
    @if($data->price > 0)
    <button class="buy-now add-cart-ajax" data-id="{{ $data->id }}" data-type="buy-now">
        MUA NGAY
        <span class="sub">(Nhận tại cửa hàng)</span>
    </button>

    <button class="add-cart add-cart-ajax" data-id="{{ $data->id }}">
        <svg width="28" height="26" viewBox="0 0 28 26" fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <path d="M8.71386 25.2131C9.24639 25.2131 9.67809 24.7814 9.67809 24.2488C9.67809 23.7163 9.24639 23.2846 8.71386 23.2846C8.18133 23.2846 7.74963 23.7163 7.74963 24.2488C7.74963 24.7814 8.18133 25.2131 8.71386 25.2131Z"
                stroke="#FFF"></path>
            <path d="M22.2131 25.2131C22.7456 25.2131 23.1773 24.7814 23.1773 24.2488C23.1773 23.7163 22.7456 23.2846 22.2131 23.2846C21.6805 23.2846 21.2488 23.7163 21.2488 24.2488C21.2488 24.7814 21.6805 25.2131 22.2131 25.2131Z"
                stroke="#FFF"></path>
            <path d="M1 4H4.85692L7.7496 20.3919H23.1773" stroke="#FFF"></path>
            <path d="M7.74963 16.535H22.782L24.9906 7.4694H5.82117"
                stroke="#FFF"></path>
            <circle cx="21" cy="7" r="7" fill="#FFF"></circle>
            <line x1="17" y1="6.75" x2="26" y2="6.75" stroke="#000" stroke-width="0.5"></line>
            <line x1="21.25" y1="2.5" x2="21.25" y2="11.5" stroke="#000" stroke-width="0.5"></line>
        </svg>
        <span class="sub">Thêm vào giỏ hàng</span>
    </button>


    @else
    <button class="contact-now btn-open-modal" data-target="#modal-contact">
        Liên hệ ngay
    </button>
    @endif
</div>
@if(isset($data->content2) && $data->content2 !="" && $data->description2 != "")
<div class="box-des gift">
    <div class="title">
        <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
            <g id="SVGRepo_iconCarrier">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M3 16.3168L3 13.4642C3.37228 13.6792 3.78288 13.8362 4.21973 13.9231C4.61143 14.001 5.02655 14.0005 5.37106 14L5.417 14C9.80567 13.9965 14.1944 13.9965 18.5831 14L18.629 14C18.9735 14.0005 19.3886 14.001 19.7803 13.9231C20.2171 13.8362 20.6277 13.6792 21 13.4642L21 16.3168C21 17.1582 21.0001 17.8832 20.9179 18.4637C20.8297 19.0859 20.631 19.6823 20.1213 20.166C19.6117 20.6497 18.9833 20.8384 18.3278 20.922C17.7161 21.0001 16.9523 21 16.0658 21H7.93417C7.04768 21 6.28387 21.0001 5.67221 20.922C5.0167 20.8384 4.38835 20.6497 3.87868 20.166C3.36902 19.6823 3.17028 19.0859 3.08215 18.4637C2.99991 17.8832 2.99995 17.1582 3 16.3168ZM13 17C13 16.4477 12.5523 16 12 16C11.4477 16 11 16.4477 11 17V18C11 18.5523 11.4477 19 12 19C12.5523 19 13 18.5523 13 18V17Z" fill="currentColor"></path>
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.71099 2.87475C4.81028 3.77546 4.64197 4.98504 5.0038 6.00293C4.7912 6.008 4.59628 6.02163 4.41479 6.05773C3.22473 6.29444 2.29445 7.22471 2.05773 8.41476C1.99948 8.70761 1.99974 9.03544 2.00004 9.41613L2.00009 9.5L2.00004 9.58387C1.99974 9.96456 1.99948 10.2924 2.05773 10.5852C2.29445 11.7753 3.22473 12.7056 4.41479 12.9423C4.70765 13.0005 5.03548 13.0003 5.41617 13C9.80538 12.9965 14.1946 12.9965 18.5838 13C18.9645 13.0003 19.2924 13.0005 19.5852 12.9423C20.7753 12.7056 21.7056 11.7753 21.9423 10.5852C22.0005 10.2924 22.0003 9.9646 22 9.58393L21.9999 9.5L22 9.4161C22.0003 9.03544 22.0005 8.70759 21.9423 8.41476C21.7056 7.22471 20.7753 6.29445 19.5852 6.05773C19.4037 6.02163 19.2088 6.008 18.9961 6.00293C19.3579 4.98504 19.1896 3.77546 18.2889 2.87475C17.0258 1.61166 14.9413 1.72259 13.8232 3.12018L12 5.39921L10.1767 3.12018C9.05866 1.72259 6.97408 1.61166 5.71099 2.87475ZM12 7C11.4477 7 11 7.44772 11 8V10C11 10.5523 11.4477 11 12 11C12.5523 11 13 10.5523 13 10V8C13 7.44772 12.5523 7 12 7ZM7.82839 6C6.9434 6 6.49105 4.92312 7.1252 4.28897C7.54788 3.86629 8.24376 3.90552 8.61499 4.36957L9.91933 6H7.82839ZM16.1715 6C17.0565 6 17.5089 4.92312 16.8747 4.28897C16.452 3.86629 15.7562 3.90552 15.3849 4.36957L14.0806 6H16.1715Z" fill="currentColor"></path>
            </g>
        </svg>
        Khuyến mãi
    </div>

    <div class="noi-dung">
        {!! $data->content2 !!}
    </div>
</div>
@endif


</div>
</div>
<div class="clm" style="--w-lg:3; --w-md:3; --w-xs:12">
    <div class="product-detail-right">

        @if (isset($salesPolicy) && !empty($salesPolicy))
        <div class="block">
            <div class="title">{{ $salesPolicy->name }}</div>
            <ul>
                <li>
                    <img src="{{ asset($salesPolicy->icon_path) }}" alt="{{ asset($salesPolicy->icon_path) }}">
                    {!! $salesPolicy->description !!}
                </li>

                <li>
                    <img src="{{ asset($salesPolicy->icon_path2) }}" alt="{{ asset($salesPolicy->icon_path2) }}">
                    {!! $salesPolicy->content !!}
                </li>

                <li>
                    <img src="{{ asset($salesPolicy->icon_path3) }}" alt="{{ asset($salesPolicy->icon_path3) }}">
                    {!! $salesPolicy->content2 !!}
                </li>

                <li>
                    <img src="{{ asset($salesPolicy->icon_path4) }}" alt="{{ asset($salesPolicy->icon_path4) }}">
                    {!! $salesPolicy->content3 !!}
                </li>
            </ul>
        </div>
        @endif
      

       

  
    <div class="call-to-buy">
        <div class="sub-title">
            Để lại số điện thoại
        </div>
        <div class="title-text">Tư vấn ngay</div>
        <form action="{{ route('contact.storeAjax') }}" class="form-call form-contact-product" id="form-contact">
            <input type="hidden" value="{{ $data->name }}" name="name_product" id="product_id">
            <input type="text" placeholder="Nhập số điện thoại" name="phone">
            <button type="submit">Gửi ngay</button>
        </form>
       
    </div>

</div>
</div>
</div>
@php
    $hasPhukien = !empty($data->phukien);
    $hasParameter = !empty($data->description3);

    $colLg = ($hasPhukien && $hasParameter) ? 6 : 12;
@endphp
<div class="row">

    @if ($hasPhukien)
        <div class="clm" style="--w-lg:{{ $colLg }}; --w-md:12; --w-xs:12">
            <div class="product-content-detail" id="product-content-detail">
                <h2 class="title">Mô tả {{ $data->name }}</h2>
                <div class="noi-dung content-limit">
                    {!! $data->phukien !!}
                </div>
                <button class="btn-xem-them" style="display:none;">Xem thêm</button>
            </div>
        </div>
    @endif


    @if ($hasParameter)
        <div class="clm" style="--w-lg:{{ $colLg }}; --w-md:12; --w-xs:12">
            <div class="product-content under">
                <div class="parameter product-content-detail" id="parameter">
                    <h2>Thông số {{ $data->name }}</h2>
                    <div class="noi-dung content-limit">
                        {!! $data->description3 !!}
                    </div>
                    <button class="btn-xem-them" style="display:none;">Xem thêm</button>
                </div>
            </div>
        </div>
    @endif

</div>

</section>

@if ($postRelatedProducts->isNotEmpty())
<section class="box-box">
    <h2 class="title-section-product">
        Bài viết về {{$data->name}}
    </h2>
    <div class="news-related-product">
        <div class="row">
            @foreach($postRelatedProducts as $postRelatedProduct)
            <div class="clm" style="--w-md:6; --w-xs:12">
                <div class="item-news">
                    <div class="row">
                        <div class="clm" style="--w-xs:3">
                            <a href="{{ $postRelatedProduct->slug_full }}" title="{{ $postRelatedProduct->name }}" class="wrap-img img-100">
                                <img src="{{ $postRelatedProduct->avatar_path }}" alt="{{ $postRelatedProduct->name }}">
                            </a>
                        </div>
                        <div class="clm" style="--w-xs:9">
                            <div class="content">
                                <h3>
                                    <a href="{{ $postRelatedProduct->slug_full }}" title="{{ $postRelatedProduct->name }}" class="title">
                                        {{ $postRelatedProduct->name }}
                                    </a>
                                </h3>
                                <div class="des">
                                    {!! $postRelatedProduct->description !!}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

@if (isset($videos) && count($videos) > 0)
<section class="box-box">
    <h2 class="title-section-product">
        Video về {{$data->name}}
    </h2>
    <div class="video-slider">
        @foreach($videos as $video)
        <div class="video-wrap">
            <iframe src="https://www.youtube.com/embed/{{ youtubeId($video) }}" width="100%" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
        </div>
        @endforeach
    </div>
</section>
@endif


<section class="review-wrap box-box" id="review-wrap">
    <h2 class="section-title">Đánh giá của khách hàng </h2>

    <div class="rating-summary">
        <div class="rating-score">
            <div class="score-wrap">
                <span class="score-number">{{ $data->rating }}</span>
                <span class="score-total">/ 5</span>
            </div>
            <div class="stars-display">
                <div class="rateYo" data-rating="{{ $data->rating }}"></div>
            </div>
            <div class="rating-count">{{ $data->comments_count }} lượt đánh giá</div>
            <button class="btn-write-review btn-open-modal" data-target="#modal-review">Viết đánh giá</button>
        </div>

        <div class="rating-bars">

            @foreach ([5,4,3,2,1] as $star)
            <div class="rating-bar-item">
                <div class="rating-label">
                    <span>{{ $star }}</span>
                    <span class="star-icon">
                        <svg viewBox="0 0 24 24" width="24" height="24">
                            <polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 
                                12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26" fill="#ffcc00"></polygon>
                        </svg>
                    </span>
                </div>

                <div class="bar-container">
                    <div class="bar-fill" style="width: {{ $data->ratingBars[$star] }}%;"></div>
                </div>

                <div class="rating-number">
                    {{ $data->{'star_'.$star.'_count'} }}
                </div>
            </div>
            @endforeach

        </div>

    </div>

    <div class="reviews-header">
        <h3 class="review-title">{{ $data->comments_count }} Bình luận</h3>
        <div class="filter-buttons">
            <button class="filter-btn active" data-star="all">Tất cả</button>
            <button class="filter-btn" data-star="5">
                5
                <svg viewBox="0 0 24 24" width="18" height="18">
                    <polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 
                                12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26" fill="#ffcc00"></polygon>
                </svg>
            </button>
            <button class="filter-btn" data-star="4">
                4
                <svg viewBox="0 0 24 24" width="18" height="18">
                    <polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 
                                12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26" fill="#ffcc00"></polygon>
                </svg>
            </button>
            <button class="filter-btn" data-star="3">
                3
                <svg viewBox="0 0 24 24" width="18" height="18">
                    <polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 
                                12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26" fill="#ffcc00"></polygon>
                </svg>
            </button>
            <button class="filter-btn" data-star="2">
                2
                <svg viewBox="0 0 24 24" width="18" height="18">
                    <polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 
                                12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26" fill="#ffcc00"></polygon>
                </svg>
            </button>
            <button class="filter-btn" data-star="1">
                1
                <svg viewBox="0 0 24 24" width="18" height="18">
                    <polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 
                                12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26" fill="#ffcc00"></polygon>
                </svg>
            </button>
        </div>
    </div>

    @if ($data->comments->isNotEmpty())
    <div id="reviews-list">
        @foreach($data->comments as $comment)
        @include('frontend.components.comments.item', ['comment' => $comment])
        @endforeach
    </div>
    <div id="loading" style="display:none; text-align:center; margin:10px;">
        Đang tải...
    </div>
    @endif
</section>

@if ($data->faqs->isNotEmpty())
<section class="faq box-box">
    <h2 class="title-section-product">
        Câu hỏi thường gặp {{ $data->name }}
    </h2>

    <div class="accordion">
        @foreach ($data->faqs as $faq)
        <div class="accordion-item">
            <div class="accordion-title">
                {{ $faq->question }}
            </div>
            <div class="accordion-content">
                <div class="content noi-dung">
                    {!! $faq->answer !!}
                </div>
            </div>
        </div>
        @endforeach
    </div>
</section>
@endif

<section class="product-related box-box">

            <h2 class="title-section-product">
                Sản phẩm liên quan
    </h2>


    <div class="product-related-slider slick-has-nav">
        @foreach($relatedProducts as $item)
        <div class="item">
            @include('frontend.components.products.item1', ['item' => $item])
        </div>
        @endforeach
    </div>

    {{--
            <div class="subtitle-product">
                Tham khảo các dòng sản phẩm bán chạy
            </div>
        --}}

    {{--
            <div class="filter-category">
                @foreach ($relatedCategories as $relatedCategorie)
                <a href="{{ $relatedCategorie->slug_full }}" title="{{ $relatedCategorie->name }}" class="item">
    {{ $relatedCategorie->name }}
    </a>
    @endforeach
    </div>


    {{-- 
        <div class="tab-wrapper">
            @php
            $tabs = [];

            if (!empty($relatedProducts) && $relatedProducts->isNotEmpty()) {
            $tabs[] = ['id' => 'tab-product-related', 'label' => 'Sản phẩm liên quan'];
            }

            if (!empty($relatedProductsBrand) && $relatedProductsBrand->isNotEmpty()) {
            $tabs[] = ['id' => 'tab-product-brand', 'label' => 'Sản phẩm cùng hãng'];
            }

            if (!empty($similarProducts) && $similarProducts->isNotEmpty()) {
            $tabs[] = ['id' => 'tab-price', 'label' => 'Sản phẩm cùng khoảng giá'];
            }

            if (!empty($sanPhamDiKem) && $sanPhamDiKem->isNotEmpty()) {
            $tabs[] = ['id' => 'tab-product-else', 'label' => 'Sản phẩm đi kèm'];
            }
            @endphp

            
            @if(!empty($tabs))
            <ul class="tab-buttons">
                @foreach ($tabs as $index => $tab)
                <li>
                    <button data-tab="{{ $tab['id'] }}"
                        class="{{ $index === 0 ? 'active' : '' }}">
                        {{ $tab['label'] }}
                    </button>
                </li>
                @endforeach
            </ul>

            <div class="tab-content">
                @foreach ($tabs as $index => $tab)
                <div id="{{ $tab['id'] }}" class="tab-pane {{ $index === 0 ? 'active' : '' }}">

                    <!-- Sản phẩm liên quan  -->
                    @if($tab['id'] === 'tab-product-related')
                    <div class="product-related-slider slick-has-nav">
                        @foreach($relatedProducts as $item)
                        <div class="item">
                            @include('frontend.components.products.item1', ['item' => $item])
                        </div>
                        @endforeach
                    </div>
                    @endif

                    <!-- Sản phẩm cùng hãng  -->
                    @if($tab['id'] === 'tab-product-brand')
                    <div class="product-related-slider slick-has-nav">
                        @foreach($relatedProductsBrand as $item)
                        <div class="item">
                            @include('frontend.components.products.item1', ['item' => $item])
                        </div>
                        @endforeach
                    </div>
                    @endif

                    <!-- Khoảng giá  -->
                    @if($tab['id'] === 'tab-price')
                    <div class="product-related-slider slick-has-nav">
                        @foreach($similarProducts as $similarProduct)
                        <div class="item">
                            @include('frontend.components.products.item1', ['item' => $similarProduct])
                        </div>
                        @endforeach
                    </div>
                    @endif

                <!-- Sản phẩm đi kèm  -->
                    @if($tab['id'] === 'tab-product-else')
                    <div class="product-related-slider slick-has-nav">
                        @foreach($sanPhamDiKem as $s)
                        <div class="item">
                            @include('frontend.components.products.item1', ['item' => $s])
                        </div>
                        @endforeach
                    </div>
                    @endif

                </div>
                @endforeach
            </div>
            @endif
        </div>
     --}}

</section>


</div>

<div class="modal-overlayyy" id="modal-review">
    <div class="modal-content">
        <div class="modal-header">
            <h2>Đánh giá của bạn</h2>
            <button type="button" class="close-btn-modal">
                <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                    <g id="SVGRepo_iconCarrier">
                        <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M19.207 6.207a1 1 0 0 0-1.414-1.414L12 10.586 6.207 4.793a1 1 0 0 0-1.414 1.414L10.586 12l-5.793 5.793a1 1 0 1 0 1.414 1.414L12 13.414l5.793 5.793a1 1 0 0 0 1.414-1.414L13.414 12l5.793-5.793z"
                            fill="#000000"></path>
                    </g>
                </svg>
            </button>
        </div>
        <form action="{{ route("comments.store") }}" id="form-comment">
            <input type="hidden" value="0" name="rating" id="rating">
            <input type="hidden" value="{{ $data->id }}" name="product_id" id="product_id">
            <div class="write-rate">
                <span>Đánh giá sản phẩm: *</span>
                <div class="stars" data-rating="0">
                    <ul>
                        <li data-value="1"><svg viewBox="0 0 24 24" width="24" height="24">
                                <polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26" fill="#ccc"></polygon>
                            </svg></li>
                        <li data-value="2"><svg viewBox="0 0 24 24" width="24" height="24">
                                <polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26" fill="#ccc"></polygon>
                            </svg></li>
                        <li data-value="3"><svg viewBox="0 0 24 24" width="24" height="24">
                                <polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26" fill="#ccc"></polygon>
                            </svg></li>
                        <li data-value="4"><svg viewBox="0 0 24 24" width="24" height="24">
                                <polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26" fill="#ccc"></polygon>
                            </svg></li>
                        <li data-value="5"><svg viewBox="0 0 24 24" width="24" height="24">
                                <polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26" fill="#ccc"></polygon>
                            </svg></li>
                    </ul>
                </div>
            </div>
            <div class="row">
                <div class="clm" style="--w-lg:6; --w-md:6; --w-xs:12">
                    <div class="form-group">
                        <input type="text" name="name" placeholder="Nhập họ và tên (*)">
                    </div>
                </div>
                <div class="clm" style="--w-lg:6; --w-md:6; --w-xs:12">
                    <div class="form-group">
                        <input type="number" name="phone" placeholder="Số điện thoại (*)">
                    </div>
                </div>
            </div>

            <div class="form-group">
                <textarea placeholder="Nội dung đánh giá (*)" name="content" cols="20" rows="3"></textarea>
            </div>

            <div class="form-group">
                <div class="upload-section">
                    <div class="upload-grid">
                        <div class="upload-item" onclick="document.getElementById('file1').click()">
                            <div class="upload-number">1</div>
                            <div class="upload-icon">
                                <img src="{{ asset('frontend/images/image-blank.svg') }}" alt="">
                            </div>
                            <input type="file" id="file1" name="files[]" accept="image/*,video/*" onchange="handleFileSelect(event, 0)">
                        </div>

                        <div class="upload-item" onclick="document.getElementById('file2').click()">
                            <div class="upload-number">2</div>
                            <div class="upload-icon">
                                <img src="{{ asset('frontend/images/image-blank.svg') }}" alt="">
                            </div>
                            <input type="file" id="file2" name="files[]" accept="image/*,video/*" onchange="handleFileSelect(event, 1)">
                        </div>

                        <div class="upload-item" onclick="document.getElementById('file3').click()">
                            <div class="upload-number">3</div>
                            <div class="upload-icon">
                                <img src="{{ asset('frontend/images/image-blank.svg') }}" alt="">
                            </div>
                            <input type="file" id="file3" name="files[]" accept="image/*,video/*" onchange="handleFileSelect(event, 2)">
                        </div>

                        <div class="upload-item" onclick="document.getElementById('file4').click()">
                            <div class="upload-number">4</div>
                            <div class="upload-icon">
                                <img src="{{ asset('frontend/images/image-blank.svg') }}" alt="">
                            </div>
                            <input type="file" id="file4" name="files[]" accept="image/*,video/*" onchange="handleFileSelect(event, 3)">
                        </div>

                        <div class="upload-item" onclick="document.getElementById('file5').click()">
                            <div class="upload-number">5</div>
                            <div class="upload-icon">
                                <img src="{{ asset('frontend/images/image-blank.svg') }}" alt="">
                            </div>
                            <input type="file" id="file5" name="files[]" accept="image/*,video/*" onchange="handleFileSelect(event, 4)">
                        </div>

                        <div class="upload-item" onclick="document.getElementById('file6').click()">
                            <div class="upload-number">6</div>
                            <div class="upload-icon">
                                <img src="{{ asset('frontend/images/image-blank.svg') }}" alt="">
                            </div>
                            <input type="file" id="file6" name="files[]" accept="image/*,video/*" onchange="handleFileSelect(event, 5)">
                        </div>

                        <div class="upload-item" onclick="document.getElementById('file7').click()">
                            <div class="upload-number">7</div>
                            <div class="upload-icon">
                                <img src="{{ asset('frontend/images/image-blank.svg') }}" alt="">
                            </div>
                            <input type="file" id="file7" name="files[]" accept="image/*,video/*" onchange="handleFileSelect(event, 6)">
                        </div>

                        <div class="upload-item" onclick="document.getElementById('file8').click()">
                            <div class="upload-number">8</div>
                            <div class="upload-icon">
                                <img src="{{ asset('frontend/images/image-blank.svg') }}" alt="">
                            </div>
                            <input type="file" id="file8" name="files[]" accept="image/*,video/*" onchange="handleFileSelect(event, 7)">
                        </div>

                        <div class="upload-item" onclick="document.getElementById('file9').click()">
                            <div class="upload-number">9</div>
                            <div class="upload-icon">
                                <img src="{{ asset('frontend/images/image-blank.svg') }}" alt="">
                            </div>
                            <input type="file" id="file9" name="files[]" accept="image/*,video/*" onchange="handleFileSelect(event, 8)">
                        </div>

                        <div class="upload-item" onclick="document.getElementById('file10').click()">
                            <div class="upload-number">10</div>
                            <div class="upload-icon">
                                <img src="{{ asset('frontend/images/image-blank.svg') }}" alt="">
                            </div>
                            <input type="file" id="file10" name="files[]" accept="image/*,video/*" onchange="handleFileSelect(event, 9)">
                        </div>
                    </div>
                    <div class="upload-note">Bạn có thể tải lên tối đa 10 files (hình/video).</div>
                </div>
            </div>

            <button type="submit" class="submit">Gửi đánh giá</button>
        </form>
    </div>
</div>

@if (!empty($videos))
<div class="modal-overlayyy" id="modal-videos">
    <div class="modal-content">
        <button type="button" class="close-btn-modal">
            <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                <g id="SVGRepo_iconCarrier">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M19.207 6.207a1 1 0 0 0-1.414-1.414L12 10.586 6.207 4.793a1 1 0 0 0-1.414 1.414L10.586 12l-5.793 5.793a1 1 0 1 0 1.414 1.414L12 13.414l5.793 5.793a1 1 0 0 0 1.414-1.414L13.414 12l5.793-5.793z"
                        fill="#000000"></path>
                </g>
            </svg>
        </button>

        @php
        $url_first = $videos[0] ?? '';

        preg_match(
        '/(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]+)/',
        $url_first,
        $matches_1
        );

        $videoId_first = $matches_1[1] ?? '';
        @endphp

        <div class="video-wrap">
            <iframe src="https://www.youtube.com/embed/{{ $videoId_first }}" width="100%" height="400" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
        </div>

        <div class="video-thumb-slider">
            @foreach($videos as $video)
            @php
            $url = $video;

            preg_match(
            '/(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]+)/',
            $url,
            $matches
            );

            $videoId = $matches[1] ?? '';
            @endphp

            <div class="item active" onclick="openVideo('{{ $videoId }}', this)">
                <img src="https://img.youtube.com/vi/{{ $videoId }}/hqdefault.jpg" alt="">
            </div>

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

<div class="modal-overlayyy" id="modal-contact">
    <div class="modal-content">
        <div class="modal-header">
            <h2>Liên hệ ngay</h2>
            <button type="button" class="close-btn-modal">
                <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                    <g id="SVGRepo_iconCarrier">
                        <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M19.207 6.207a1 1 0 0 0-1.414-1.414L12 10.586 6.207 4.793a1 1 0 0 0-1.414 1.414L10.586 12l-5.793 5.793a1 1 0 1 0 1.414 1.414L12 13.414l5.793 5.793a1 1 0 0 0 1.414-1.414L13.414 12l5.793-5.793z"
                            fill="#000000"></path>
                    </g>
                </svg>
            </button>
        </div>

        <form action="{{ route('contact.storeAjax') }}" class="form-contact-product">
            <input type="hidden" value="{{ $data->name }}" name="name_product" id="product_id">
            <div class="row">
                <div class="clm" style="--w-lg:6; --w-md:6; --w-xs:12">
                    <div class="form-group">
                        <input type="text" name="name" placeholder="Nhập họ và tên (*)">
                    </div>
                </div>
                <div class="clm" style="--w-lg:6; --w-md:6; --w-xs:12">
                    <div class="form-group">
                        <input type="number" name="phone" placeholder="Số điện thoại (*)">
                    </div>
                </div>
            </div>

            <div class="form-group">
                <input type="text" name="email" placeholder="Email của bạn">
            </div>

            <div class="form-group">
                <textarea placeholder="Nội dung liên hệ" name="content" cols="20" rows="3"></textarea>
            </div>

            <button class="submit" type="submit">Gửi ngay</button>
        </form>
    </div>
</div>


@endsection

@section('js')
<script>
    var productId = "{{ $data->id }}";
</script>
<script src="{{ asset('frontend/js/product-detail.js') }}?v={{ time() }}"></script>
@endsection