@extends('frontend.layouts.app')

@section('title', 'Product center-SHAOXING SHUOLE TEXTILE CO.,LTD')

@section('styles')
<link type="text/css" rel="stylesheet" href="{{ asset('assets/frontend/css/Product_2_786de61ceb7df66029de6ddfab216532.min4f7b.css') }}?instance=new2022112912190770833&amp;viewType=p&amp;v=1731136289000&amp;siteType=oper">
<style>
    .custom-product-pagination {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 14px;
        margin: 36px 0 10px;
        padding-right: 26px;
    }

    .custom-product-pagination .custom-page-btn {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: #ffffff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #222222;
        border: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
        transition: all 0.25s ease;
        text-decoration: none;
    }

    .custom-product-pagination .custom-page-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
        color: #000000;
    }

    .custom-product-pagination .custom-page-btn.disabled {
        opacity: 0.38;
        pointer-events: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .custom-product-pagination .custom-page-btn svg {
        width: 24px;
        height: 24px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    @media (max-width: 767px) {
        .custom-product-pagination {
            justify-content: center;
            gap: 12px;
            margin-top: 26px;
            padding-right: 0;
        }

        .custom-product-pagination .custom-page-btn {
            width: 46px;
            height: 46px;
        }

        .custom-product-pagination .custom-page-btn svg {
            width: 20px;
            height: 20px;
        }
    }
</style>
@endsection

@section('content')
<div id="c_banner_008_P_040-16667477151350">
    <div class="e_container-3 s_layout">
        <div class="cbox-3-0 p_item">
            <div class="e_container-4 s_layout">
                <div class="cbox-4-0 p_item">
                    <p class="e_text-9 s_title">Products</p>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="c_static_001-16667492664140">
    <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-1669359944100">
    <div class="p_gridbox e_comp">
        <div id="content_box-1669359944100-0" class="d_gridCell_0 p_gridCell">
            <!-- Sidebar/Category List - Keeping static for now or can be partially dynamic if needed -->
            <div id="c_static_001-1669360053357">
                <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-{{ $fabric->id }}', 'icon-{{ $fabric->id }}')">
                                            <span style="font-weight: bold;">{{ strtoupper($fabric->name) }}</span>
                                            <span id="icon-{{ $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-{{ $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-1669359944100-1" class="d_gridCell_1 p_gridCell">
            <div id="c_product_list_041-1666770684981">
                <div class="e_loop-1 s_list" needjs="true">
                    <div>
                        <div>
                            <div class="p_list">
                                @forelse($products as $product)
                                <div class="cbox-1 p_loopitem">
                                    <div class="e_container-2 s_layout">
                                        <div class="cbox-2-0 p_item">
                                            <div class="e_container-7 s_layout">
                                                <div class="cbox-7-0 p_item">
                                                    <div class="e_image-3 s_img">
                                                        <a href="{{ route('products.show', $product->id) }}" target="_self">
                                                            <img src="{{ $product->image_url }}" alt="{{ $product->name }}" title="{{ $product->name }}" la="la"/>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                            <hr class="e_line-4 s_line" />
                                            <hr class="e_line-9 s_line" />
                                            <p class="e_text-5 s_title">
                                                <a href="{{ route('products.show', $product->id) }}" target="_self">
                                                    {{ $product->name }}
                                                </a>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                @empty
                                <div class="col-12">
                                    <p class="text-center">No products found.</p>
                                </div>
                                @endforelse
                            </div>
                            @if ($products->hasPages())
                            <div class="custom-product-pagination">
                                @if ($products->onFirstPage())
                                    <span class="custom-page-btn disabled" aria-disabled="true" aria-label="Previous page">
                                        <svg viewBox="0 0 24 24" aria-hidden="true">
                                            <path d="M15 18l-6-6 6-6" />
                                        </svg>
                                    </span>
                                @else
                                    <a class="custom-page-btn" href="{{ $products->previousPageUrl() }}" rel="prev" aria-label="Previous page">
                                        <svg viewBox="0 0 24 24" aria-hidden="true">
                                            <path d="M15 18l-6-6 6-6" />
                                        </svg>
                                    </a>
                                @endif

                                @if ($products->hasMorePages())
                                    <a class="custom-page-btn" href="{{ $products->nextPageUrl() }}" rel="next" aria-label="Next page">
                                        <svg viewBox="0 0 24 24" aria-hidden="true">
                                            <path d="M9 6l6 6-6 6" />
                                        </svg>
                                    </a>
                                @else
                                    <span class="custom-page-btn disabled" aria-disabled="true" aria-label="Next page">
                                        <svg viewBox="0 0 24 24" aria-hidden="true">
                                            <path d="M9 6l6 6-6 6" />
                                        </svg>
                                    </span>
                                @endif
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection