@extends('frontend::layouts.master')
@section('content')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" />
    <section id="page-title" class="page-title-dark" style="background: linear-gradient(-45deg, #0b0b0b 0%, #e6c36c);">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                    <h2 class="m-b-0 text-white">{{ $content['local']['name'] ?? ($content['name'] ?? '') }}</h2>
                </div>
            </div>

            <!-- Breadcrumb -->
            <nav class="breadcrumb-container">
                <div class="container">
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item text-white">
                            <a href="{{ mwz_route('frontend.index') }}">{{ __('frontend::text.breadcrumb.home') }}</a>
                        </li>
                        <li class="breadcrumb-item text-white">
                            <a href="{{ $product['url'] ?? '#' }}">{{ $product['local']['name'] ?? ($product['name'] ?? '') }}</a>
                        </li>
                        <li class="breadcrumb-item text-white">
                            <a href="{{ $product_category['url'] ?? '#' }}">{{ $product_category['local']['name'] ?? ($product_category['name'] ?? '') }}</a>
                        </li>
                        <li class="breadcrumb-item active text-white">
                            <a>{{ $content['local']['name'] ?? ($content['name'] ?? '') }}</a>
                        </li>
                    </ul>
                </div>
            </nav>

        </div>
    </section>

    <section class="sect-about">
        <div class="container">
            <div class="row">

                <div class="col-xs-12 col-sm-12 col-md-6 col-detail">
                    @if (!empty($content['gallery']))
                        <div class="project-gallery">
                            <!-- Swiper Main -->
                            <div class="swiper gallery-top">
                                <div class="swiper-wrapper">
                                    @foreach ($content['gallery'] as $gallery)
                                        <div class="swiper-slide">
                                            <a href="{{ $gallery['image'] }}" data-glightbox="title: {{ $gallery['name'] ?? '' }}">
                                                <img src="{{ check_file($gallery['image']) }}" alt="{{ $gallery['name'] ?? '' }}">
                                            </a>
                                        </div>
                                    @endforeach
                                </div>
                                <div class="swiper-button-next"></div>
                                <div class="swiper-button-prev"></div>
                            </div>
                            <!-- Swiper Thumbs -->
                            <div class="swiper gallery-thumbs mt-2">
                                <div class="swiper-wrapper">
                                    @foreach ($content['gallery'] as $gallery)
                                        <div class="swiper-slide"><img src="{{ check_file($gallery['image']) }}" alt="{{ $gallery['name'] ?? '' }}">
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        <!-- Thumbnail Navigation Buttons (Outside gallery) -->
                        <div class="thumb-navigation">
                            <div class="swiper-button-prev-thumb"></div>
                            <div class="swiper-button-next-thumb"></div>
                        </div>
                    @endif
                </div>
                <div class="col-xs-12 col-sm-12 col-md-6 col-image">
                    <div class="product-info">
                        <h2 class="product-title">{{ $content['local']['name'] ?? ($content['name'] ?? '') }}</h2>
                        {!! $content['local']['detail'] ?? ($content['detail'] ?? '') !!}
                    </div>
                </div>

            </div>
        </div>
    </section>

    <!-- Swiper CSS/JS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

    <!-- GLightbox CSS/JS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Swiper Thumbnails (with navigation)
            var galleryThumbs = new Swiper('.gallery-thumbs', {
                spaceBetween: 10,
                slidesPerView: 4,
                freeMode: true,
                watchSlidesProgress: true,
                navigation: {
                    nextEl: '.swiper-button-next-thumb',
                    prevEl: '.swiper-button-prev-thumb',
                },
                breakpoints: {
                    // Mobile
                    320: {
                        slidesPerView: 2,
                        spaceBetween: 5
                    },
                    // Tablet
                    768: {
                        slidesPerView: 3,
                        spaceBetween: 8
                    },
                    // Desktop
                    1024: {
                        slidesPerView: 4,
                        spaceBetween: 10
                    }
                }
            });

            // Swiper Main Gallery
            var galleryTop = new Swiper('.gallery-top', {
                spaceBetween: 10,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                thumbs: {
                    swiper: galleryThumbs,
                },
            });

            // GLightbox
            const lightbox = GLightbox({
                selector: 'a[data-glightbox]'
            });
        });
    </script>
@endsection