@extends('frontend.layouts.app')

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

@section('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css" />
<style>
    /* Grid Layout */
    .p_list {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -5px; /* Tighter margin for tight spacing */
    }
    .p_loopitem {
        width: 25%;
        padding: 5px; /* Tighter padding */
        box-sizing: border-box;
    }
    .e_image-8 img {
        width: 100%;
        height: 200px; /* Slightly smaller height to match reference aspect */
        object-fit: cover;
        display: block;
        transition: transform 0.3s ease;
    }
    .e_image-8 img:hover {
        transform: scale(1.03);
    }
    
    /* Title Styling */
    .workshop-page-title {
        text-align: center;
        font-family: "Times New Roman", Times, serif; /* Serif font like reference */
        font-size: 48px;
        font-weight: normal;
        margin: 40px 0;
        text-transform: uppercase;
        letter-spacing: 2px;
    }

    /* Breadcrumb Styling */
    .p_breadcrumb {
        font-size: 14px;
        color: #666;
    }
    .p_breadcrumb a {
        color: #666;
        text-decoration: none;
    }
    .p_breadcrumb .separator {
        margin: 0 5px;
    }

    /* Responsive */
    @media (max-width: 1200px) {
        .p_loopitem { width: 33.33%; }
    }
    @media (max-width: 768px) {
        .p_loopitem { width: 50%; }
    }
    @media (max-width: 480px) {
        .p_loopitem { width: 100%; }
        .workshop-page-title { font-size: 32px; }
    }
</style>
@endsection

@section('content')
<div id="c_grid-1648695767916">
    <!-- Banner Section -->
    <div class="p_gridbox e_comp signal ">
        <div id="content_box-1648695767916-0" class="d_gridCell_0 p_gridCell">
            <div id="c_banner_008_P_040-16553723584040">
                <div class="e_image-19 s_img">
                    <img src="{{ asset('omo-oss-image.thefastimg.com/portal-saas/pg2024110816534240549/cms/image/ddd25800-78cf-459e-9933-cf9bd083dddc.jpg') }}" alt="shuole txile" title="shuole txile" la="la" needthumb="true" style="width: 100%;"/>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container" style="max-width: 1200px; margin: 0 auto; padding: 20px;">
    <!-- Breadcrumb -->
    <div style="margin-bottom: 20px;">
        <ul class="p_breadcrumb">
            <li class="p_breadcrumbItem">
                <a href="{{ url('/') }}">
                    <svg t="1631185047228" class="icon" viewBox="0 0 1029 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1034" width="16" height="16" style="vertical-align: middle;">
                        <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>
                    </svg>
                </a>
                <span class="separator">></span>
                <a href="{{ route('workshop.index') }}">
                    <span>Workshop</span>
                </a>
            </li>
        </ul>
    </div>

    <!-- Title -->
    <h1 class="workshop-page-title">WORKSHOP</h1>

    <!-- Grid -->
    <div class="e_loop-6 s_list">
        <div class="p_list">
            @foreach($workshops as $workshop)
                @if(is_array($workshop->image))
                    @foreach($workshop->image as $img)
                    <div class="cbox-6 p_loopitem">
                        <div class="e_container-7 s_layout">
                            <div class="cbox-7-0 p_item">
                                <div class="e_image-8 s_img fancyImg">
                                    <a href="{{ asset('uploads/' . $img) }}" data-fancybox="gallery" data-caption="{{ $workshop->title }}">
                                        <img src="{{ asset('uploads/' . $img) }}" alt="{{ $workshop->title }}" title="{{ $workshop->title }}" />
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                @else
                    <!-- Fallback if string -->
                    <div class="cbox-6 p_loopitem">
                         <div class="e_container-7 s_layout">
                            <div class="cbox-7-0 p_item">
                                <div class="e_image-8 s_img fancyImg">
                                    <a href="{{ asset('uploads/' . $workshop->image) }}" data-fancybox="gallery" data-caption="{{ $workshop->title }}">
                                        <img src="{{ asset('uploads/' . $workshop->image) }}" alt="{{ $workshop->title }}" title="{{ $workshop->title }}" />
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            @endforeach
        </div>
        <div class="p_page" style="text-align: center; margin-top: 30px;">
            {{ $workshops->links() }}
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
@endsection