@extends('frontend.layouts.app')

@section('title', $product->name . ' - SHAOXING SHUOLE TEXTILE CO.,LTD')

@section('styles')
<link type="text/css" rel="stylesheet" href="{{ asset('assets/frontend/css/Productd_bdc6283e3dc1c4a7f8996132247c5fad.min4f7b.css') }}?instance=new2022112912190770833&amp;viewType=p&amp;v=1731136289000&amp;siteType=oper">
@endsection

@section('content')
<div id="c_grid-116273709439191">
    {{-- Navigation is already in layout, but this specific ID wrapping might be needed for some CSS/JS --}}
</div>

<div id="c_grid-16449216371110">
    <div class="p_gridbox e_comp signal ">
        <div id="content_box-16449216371110-0" class="d_gridCell_0 p_gridCell">
            
            <div id="c_banner_008_P_040-16693478514330">
                 <div class="e_container-3 s_layout">
                    <div class="cbox-3-0 p_item"></div>
                </div>
            </div>

            <div id="c_static_001-16693479074170">
                <div class="e_container-1 s_layout">
                    <div class="cbox-1-0 p_item">
                        <div class="e_container-14 s_layout">
                            <div class="cbox-14-0 p_item">
                                <div class="e_breadcrumb-16 s_list" needjs="true">
                                    <ul class="p_breadcrumb">
                                        <li class="p_breadcrumbItem">
                                            <a href="{{ url('/') }}">
                                                 <span class="text-secondary p_icon">
                                                    <svg t="1631185047228" class="icon" viewBox="0 0 1029 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1034" width="200" height="200"><path d="M44.799492 528.986943a42.836848 42.836848 0 0 1-31.231646-13.567846 42.725916 42.725916 0 0 1 2.133309-60.329983L491.685094 11.446142a42.68325 42.68325 0 0 1 58.538003 0.34133l465.658723 443.642972c17.066473 16.21315 17.749132 43.26351 1.45065 60.329983s-43.26351 17.749132-60.329983 1.45065L520.442102 101.301124 73.897829 517.552406c-8.27724 7.679913-18.687788 11.434537-29.098337 11.434537z" p-id="1035"></path><path d="M752.716803 1024H282.876794c-111.188073 0-201.640381-86.697684-201.640381-193.27781V434.524014c0-23.551733 19.11445-42.666183 42.666183-42.666183s42.666183 19.11445 42.666183 42.666183v396.283509c0 59.476659 52.138076 107.945443 116.308015 107.945443h469.925341c64.084607 0 116.308015-48.383452 116.308015-107.945443V434.524014c0-23.551733 19.11445-42.666183 42.666183-42.666183s42.666183 19.11445 42.666183 42.666183v396.283509c-0.085332 106.494793-90.537641 193.192477-201.725713 193.192477z" p-id="1036"></path><path d="M657.400549 1017.173411H383.142324c-23.551733 0-42.666183-19.11445-42.666183-42.666183V625.839179c0-23.551733 19.11445-42.666183 42.666183-42.666183h274.258225c23.551733 0 42.666183 19.11445 42.666184 42.666183v348.668049c0 23.551733-19.11445 42.666183-42.666184 42.666183z m-231.592041-85.332367h188.925858V668.505362H425.808508v263.335682z" p-id="1037"></path></svg>
                                                </span>
                                                <span class="text-secondary p_title">HOME</span>
                                            </a>
                                             / 
                                            <a href="{{ route('products.index') }}">
                                                <span class="text-secondary p_title">PRODUCTS</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="c_grid-16693613259450">
                <div class="p_gridbox e_comp">
                    <div id="content_box-16693613259450-0" class="d_gridCell_0 p_gridCell">
                        <!-- Sidebar categories (Dynamic) -->
                        <div id="c_static_001-16754123030230">
                            <div class="e_container-1 s_layout">
                                <div class="cbox-1-0 p_item">
                                    <div class="e_container-4 s_layout">
                                        <div class="cbox-4-0 p_item"><p class="e_text-7 s_title">PRODUCTS</p></div>
                                    </div>
                                    <div class="e_categoryB-9" needjs="true">
                                        <div class="p_c_tree">
                                            <ul class="p_c_content deep-1">
                                                @foreach($fabrics as $fabric)
                                                <li class="p_c_item">
                                                    <div class="p_c_title1 js_editor_click deep" style="cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding-right: 10px;" onclick="toggleFabric('fabric-show-{{ $fabric->id }}', 'icon-show-{{ $fabric->id }}')">
                                                        <span style="font-weight: bold;">{{ strtoupper($fabric->name) }}</span>
                                                        <span id="icon-show-{{ $fabric->id }}" style="transition: transform 0.3s;">
                                                            <svg viewBox="0 0 1024 1024" width="12" height="12"><path d="M738.133333 512L285.866667 964.266667V59.733333z" fill="#333"></path></svg>
                                                        </span>
                                                    </div>
                                                    <ul id="fabric-show-{{ $fabric->id }}" style="display: none; background-color: #f9f9f9;">
                                                        @foreach($fabric->categories as $category)
                                                        <li class="p_c_item">
                                                            <p class="p_c_title1 js_editor_click deep" style="padding-left: 20px;">
                                                                <a href="{{ route('products.index', ['category_id' => $category->id]) }}">
                                                                    <span>{{ strtoupper($category->name) }}</span>
                                                                </a>
                                                            </p>
                                                        </li>
                                                        @endforeach
                                                    </ul>
                                                </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <script>
                            function toggleFabric(id, iconId) {
                                var el = document.getElementById(id);
                                var icon = document.getElementById(iconId);
                                if (el.style.display === 'none') {
                                    el.style.display = 'block';
                                    icon.style.transform = 'rotate(90deg)';
                                } else {
                                    el.style.display = 'none';
                                    icon.style.transform = 'rotate(0deg)';
                                }
                            }
                        </script>
                    </div>
                    
                    <div id="content_box-16693613259450-1" class="d_gridCell_1 p_gridCell">
                        <div id="c_product_detail_084-1666771298287">
                            <div class="e_container-1 s_layout">
                                <div class="cbox-1-0 p_item">
                                    <div class="e_magnifier-2 s_list" needjs="true">
                                        <div class="magnifier" id="magnifierWrapper">
                                            <div class="magnifier-container">
                                                <div class="images-cover"></div>
                                                <div class="image-bigger"><div class="add-icon">+</div></div>
                                                <div class="move-view"></div>
                                            </div>
                                            <div class="magnifier-assembly">
                                                <div class="magnifier-line js-magnifier-line">
                                                    @php
                                                        $imgList = [];
                                                        foreach($product->image_urls as $url) {
                                                            $imgList[] = ['url' => $url, 'name' => $product->name];
                                                        }
                                                        $jsonImgList = json_encode($imgList);
                                                    @endphp
                                                    <ul class="clearfix animation03 thumbnail_box" data-imglist='{{ $jsonImgList }}'>
                                                        @foreach($product->image_urls as $index => $url)
                                                        <li class="static-img {{ $index === 0 ? 'active' : '' }}" onclick="changeMainImage('{{ $url }}', this)">
                                                            <div class="small-img" data-url="{{ $url }}">
                                                                <img src="{{ $url }}" alt="{{ $product->name }}" title="{{ $product->name }}" la="la"/>
                                                            </div>
                                                        </li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="magnifier-view"></div>
                                        </div>
                                    </div>
                                </div>
                                <script>
                                    function changeMainImage(url, element) {
                                        // Update main image in magnifier (simple implementation, might need adjustment based on existing JS)
                                        // Finding the main image element. The existing structure isn't fully clear on where the main IMG tag is, 
                                        // usually inside .images-cover or generated by JS.
                                        // However, looking at the layout, .small-img seems to be the thumbnail.
                                        
                                        // If there is an existing JS library handling 'magnifier', updating data-imglist might be enough,
                                        // or we might need to trigger it. 
                                        
                                        // Let's assume standard behavior: update a main img tag if we can find it, 
                                        // or rely on the class 'active' if the JS listens to it.
                                        
                                        document.querySelectorAll('.thumbnail_box li').forEach(li => li.classList.remove('active'));
                                        element.classList.add('active');
                                        
                                        // Attempt to update main view if simple IMG tag exists, otherwise fallback to existing JS behavior
                                        var mainImg = document.querySelector('.magnifier-container img');
                                        if(mainImg) mainImg.src = url;
                                        
                                        // Also update background image of magnifier lens if applicable
                                        var lens = document.querySelector('.magnifier-view');
                                        if(lens) lens.style.backgroundImage = 'url(' + url + ')';

                                         // Update .images-cover which seems to be the container
                                        var cover = document.querySelector('.images-cover');
                                        if(cover) {
                                            cover.innerHTML = '<img src="'+url+'" style="width:100%; height:100%; object-fit:contain;">';
                                        }
                                    }
                                    
                                    // Init first image
                                    document.addEventListener("DOMContentLoaded", function() {
                                        var firstUrl = "{{ $product->image_url }}";
                                        var cover = document.querySelector('.images-cover');
                                        if(cover && !cover.querySelector('img')) {
                                             cover.innerHTML = '<img src="'+firstUrl+'" style="width:100%; height:100%; object-fit:contain;">';
                                        }
                                    });
                                </script>
                                <div class="cbox-1-1 p_item">
                                    <div class="e_container-3 s_layout">
                                        <div class="cbox-3-0 p_item">
                                            <h1 class="e_h1-4 s_subtitle">{{ $product->name }}</h1>
                                            <hr class="e_line-6 s_line" />
                                            <div class="e_container-76 s_layout">
                                                <div class="cbox-76-0 p_item">
                                                    <div class="e_container-79 s_layout">
                                                        <div class="cbox-79-1 p_item"><p class="e_text-80 s_body">Category:</p></div>
                                                        <div class="cbox-79-1 p_item"><p class="e_text-80 s_body">Key Word:</p></div>
                                                    </div>
                                                </div>
                                                <div class="cbox-76-1 p_item">
                                                    <div class="e_loop_sub-77 s_list">
                                                        <div class="cbox-77 p_loopItem"><p class="e_text-78 s_body">{{ $product->category->name ?? 'N/A' }}</p></div>
                                                        @if($product->specifications && is_array($product->specifications)) <!-- Handle array case primarily -->
                                                            <div class="cbox-77 p_loopItem"><p class="e_text-78 s_body">{{ implode(', ', $product->specifications) }}</p></div>
                                                        @elseif($product->specifications)
                                                            <div class="cbox-77 p_loopItem"><p class="e_text-78 s_body">{{ $product->specifications }}</p></div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="e_container-94 s_layout">
                                         <div class="cbox-94-0 p_item">
                                            <a class="e_button-96 s_button1 btn btn-primary" href="{{ route('contact') }}" target="_self">
                                                <span>Consult</span> 
                                            </a>
                                        </div>
                                        <div class="cbox-94-1 p_item">
                                            <a class="e_button-95 s_button1 btn btn-primary" href="javascript:history.back(-1);" target="_self">
                                                <span>Return</span> 
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                         <div class="e_container-74 s_layout">
                            <div class="cbox-74-0 p_item">
                                <div class="e_container-30 s_layout">
                                    <div class="cbox-30-0 p_item">
                                        <p class="e_text-31 s_title" style="background-color: #000; color: #fff; padding: 10px 20px; display: inline-block; font-size: 40px; margin-bottom: 0;">Product description</p>
                                    </div>
                                </div>
                                <hr class="e_line-75 s_line" style="margin-top: 0; border-top: 2px solid #000;" />
                                <div class="e_richText-73 s_title clearfix">
                                    <div class="reset_style js-reset_style js-adapMobile " style="font-size: 50px; line-height: 1.5;">
                                        {!! $product->description !!}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div id="c_grid-16449216374715">
                 <div class="p_gridbox e_comp signal">
                    <div id="content_box-16449216374715-0" class="d_gridCell_0 p_gridCell">
                        <div id="c_product_list_007-16456661911570">
                            <div class="e_container-56 s_layout">
                                <div class="cbox-56-0 p_item">
                                    <div class="e_container-57 s_layout">
                                        <div class="cbox-57-0 p_item"><p class="e_text-59 s_title">Related products</p></div>
                                    </div>
                                    <hr class="e_line-58 s_line" />
                                </div>
                            </div>
                        </div>
                        <div id="c_product_list_021-16503533556650">
                            <div class="e_loop-6 s_list" needjs="true">
                                <div class="p_list">
                                    @php
                                        $relatedProducts = \App\Models\Product::where('category_id', $product->category_id)
                                            ->where('id', '!=', $product->id)
                                            ->inRandomOrder()
                                            ->limit(4)
                                            ->get();
                                    @endphp
                                    @foreach($relatedProducts as $related)
                                    <div class="cbox-6 p_loopitem">
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

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