@extends('frontend::layouts.master')
@section('content')
    <section class="about-hero-banner">
        <img src="{{ asset('assets/frontend/images/about/sub-banner.jpg') }}" class="w-100">
    </section>

    {{-- Page Title --}}
    <section id="page-title" class="page-title-dark">
        <div class="container">
            <nav class="breadcrumb-container">
                <div class="container">
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="{{ route('frontend.index') }}">Home</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{{ route('frontend.portfolio') }}">ตัวอย่างผลงาน</a>
                        </li>
                        <li class="breadcrumb-item active">
                            <a href="#">{{ $portfolio['title'] }}</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </section>

    {{-- Portfolio Detail --}}
    <section class="section sect-product-detail sect-portfolio-detail">
        <div class="container">
            <div class="product-detail-grid">
                <div class="product-detail-grid__media">
                    <div class="product-detail-grid__image">
                        <img src="{{ $portfolio['image'] }}" alt="{{ $portfolio['title'] }}"
                            onerror="this.classList.add('is-broken'); this.removeAttribute('src');">
                    </div>
                </div>
                <div class="product-detail-grid__info">
                    <p class="portfolio-detail__category">{{ $portfolio['category'] }}</p>
                    <h1 class="product-detail-grid__title">{{ $portfolio['title'] }}</h1>
                    <p class="product-detail-grid__lead">{{ $portfolio['desc'] }}</p>

                    <div class="product-detail-grid__description article-detail__content">
                        {!! $portfolio['detail'] !!}
                    </div>

                    <div class="product-detail-grid__actions">
                        <a href="/contact" class="product-grid-card__btn">สอบถามงานนี้</a>
                        <a href="/portfolio" class="product-detail-grid__back">
                            <i class="icon-chevron-left"></i> กลับไปหน้า Portfolio
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @if (! empty($portfolio['gallery']))
        <section class="section sect-portfolio-gallery">
            <div class="container">
                <h2 class="portfolio-gallery__head">แกลเลอรีภาพ</h2>
                <div class="portfolio-gallery__grid" data-lightbox-gallery>
                    @foreach ($portfolio['gallery'] as $idx => $gimg)
                        <a href="{{ $gimg }}" class="portfolio-gallery__item"
                            data-lightbox-trigger
                            data-index="{{ $idx }}"
                            aria-label="เปิดรูปขยาย">
                            <img src="{{ $gimg }}" alt="{{ $portfolio['title'] }}"
                                onerror="this.classList.add('is-broken'); this.removeAttribute('src');">
                        </a>
                    @endforeach
                </div>
            </div>
        </section>

        {{-- Lightbox overlay --}}
        <div class="lightbox" id="portfolioLightbox" role="dialog" aria-modal="true" aria-hidden="true">
            <button class="lightbox__close" type="button" aria-label="ปิด">
                <i class="icon-x"></i>
            </button>
            <button class="lightbox__nav lightbox__nav--prev" type="button" aria-label="รูปก่อนหน้า">
                <i class="icon-chevron-left"></i>
            </button>
            <button class="lightbox__nav lightbox__nav--next" type="button" aria-label="รูปถัดไป">
                <i class="icon-chevron-right"></i>
            </button>
            <figure class="lightbox__stage">
                <img src="" alt="" class="lightbox__image">
                <figcaption class="lightbox__caption"></figcaption>
            </figure>
        </div>

        <script>
            (function () {
                var gallery = document.querySelector('[data-lightbox-gallery]');
                var lightbox = document.getElementById('portfolioLightbox');
                if (!gallery || !lightbox) return;

                var triggers = gallery.querySelectorAll('[data-lightbox-trigger]');
                var imgEl = lightbox.querySelector('.lightbox__image');
                var captionEl = lightbox.querySelector('.lightbox__caption');
                var btnClose = lightbox.querySelector('.lightbox__close');
                var btnPrev = lightbox.querySelector('.lightbox__nav--prev');
                var btnNext = lightbox.querySelector('.lightbox__nav--next');

                var items = Array.prototype.map.call(triggers, function (a) {
                    return {
                        src: a.getAttribute('href'),
                        alt: a.querySelector('img') ? a.querySelector('img').getAttribute('alt') : ''
                    };
                });
                var currentIndex = 0;

                function show(i) {
                    if (i < 0) i = items.length - 1;
                    if (i >= items.length) i = 0;
                    currentIndex = i;
                    imgEl.src = items[i].src;
                    imgEl.alt = items[i].alt;
                    captionEl.textContent = items[i].alt + ' (' + (i + 1) + '/' + items.length + ')';
                }

                function open(i) {
                    show(i);
                    lightbox.classList.add('is-open');
                    lightbox.setAttribute('aria-hidden', 'false');
                    document.body.style.overflow = 'hidden';
                }

                function close() {
                    lightbox.classList.remove('is-open');
                    lightbox.setAttribute('aria-hidden', 'true');
                    document.body.style.overflow = '';
                    imgEl.src = '';
                }

                triggers.forEach(function (a, i) {
                    a.addEventListener('click', function (e) {
                        e.preventDefault();
                        open(i);
                    });
                });

                btnClose.addEventListener('click', close);
                btnPrev.addEventListener('click', function (e) { e.stopPropagation(); show(currentIndex - 1); });
                btnNext.addEventListener('click', function (e) { e.stopPropagation(); show(currentIndex + 1); });

                lightbox.addEventListener('click', function (e) {
                    if (e.target === lightbox || e.target.classList.contains('lightbox__stage')) {
                        close();
                    }
                });

                document.addEventListener('keydown', function (e) {
                    if (!lightbox.classList.contains('is-open')) return;
                    if (e.key === 'Escape') close();
                    else if (e.key === 'ArrowLeft') show(currentIndex - 1);
                    else if (e.key === 'ArrowRight') show(currentIndex + 1);
                });
            })();
        </script>
    @endif

    @if (! empty($relatedPortfolio))
        <section class="section sect-products-list sect-portfolio-related">
            <div class="container">
                <div class="products-list-head">
                    <h2 class="products-list-head__title">ผลงานอื่นๆ ที่น่าสนใจ</h2>
                </div>
                <div class="products-grid">
                    @foreach ($relatedPortfolio as $rel)
                        @include('frontend::partials.portfolio-card', ['item' => $rel, 'showDetailBtn' => true])
                    @endforeach
                </div>
            </div>
        </section>
    @endif
@endsection