@extends('frontend::layouts.master')

@push('styles')
    <style>
        /* Related Articles slider */
        .related-articles-swiper {
            padding: 0 0 0.5rem;
        }

        .related-articles-next,
        .related-articles-prev {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
            color: var(--primary);
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 50%;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            transition: background 0.2s, box-shadow 0.2s;
        }

        .related-articles-next:hover,
        .related-articles-prev:hover {
            background: var(--muted);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
        }

        .related-articles-next::after,
        .related-articles-prev::after {
            font-size: 0.4rem !important;
        }

        .related-articles-next svg,
        .related-articles-prev svg {
            width: 52% !important;
            height: 52% !important;
        }

        @media (min-width: 768px) {

            .related-articles-next::after,
            .related-articles-prev::after {
                font-size: 0.45rem !important;
            }

            .related-articles-next svg,
            .related-articles-prev svg {
                width: 55% !important;
                height: 55% !important;
            }
        }

        .related-articles-next {
            left: auto;
            right: -0.5rem;
        }

        .related-articles-prev {
            right: auto;
            left: -0.5rem;
        }

        .related-articles-pagination {
            display: flex !important;
            justify-content: center;
            flex-wrap: nowrap;
            overflow-x: auto;
            overflow-y: hidden;
            padding: 0.5rem 0.25rem;
            gap: 0.375rem;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }

        .related-articles-pagination::-webkit-scrollbar {
            display: none;
        }

        .related-articles-pagination .swiper-pagination-bullet {
            flex-shrink: 0;
            width: 8px;
            height: 8px;
            min-width: 8px;
            min-height: 8px;
            margin: 0 !important;
            background: var(--muted-foreground);
            opacity: 0.4;
        }

        .related-articles-pagination .swiper-pagination-bullet-active {
            background: var(--primary);
            opacity: 1;
        }

        @media (min-width: 768px) {
            .related-articles-pagination .swiper-pagination-bullet {
                width: 10px;
                height: 10px;
                min-width: 10px;
                min-height: 10px;
            }
        }

        @media (max-width: 767px) {
            .related-articles-next {
                right: 0.25rem;
            }

            .related-articles-prev {
                left: 0.25rem;
            }

            .related-articles-next,
            .related-articles-prev {
                width: 36px;
                height: 36px;
                margin-top: -18px;
            }

            .related-articles-next::after,
            .related-articles-prev::after {
                font-size: 0.35rem !important;
            }

            .related-articles-next svg,
            .related-articles-prev svg {
                width: 48% !important;
                height: 48% !important;
            }
        }
    </style>
@endpush

@section('content')
    {{-- Breadcrumb & Back --}}
    <section class="bg-[var(--muted)]/30 py-6 border-b border-[var(--border)]">
        <div class="container mx-auto px-4 lg:px-8">
            <div class="flex items-center gap-4">
                <a class="inline-flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-[var(--muted)] transition-colors text-sm font-medium" href="{{ $link_blog['url'] ?? 'javascript:void(0)' }}">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                    </svg>
                    {{ __('frontend::lang.btn.back_to_blog') }}
                </a>
                <span class="text-[var(--muted-foreground)]">/</span>
                <span class="text-sm text-[var(--muted-foreground)] line-clamp-1">{{ $blog['name'] ?? '' }}</span>
            </div>
        </div>
    </section>

    <div class="relative overflow-hidden">
        @include('frontend::components.tsic-ellipse-decoration')

        {{-- Article Hero - Gradient: primary/10 → accent/5 → background --}}
        <section class="py-12 lg:py-20 bg-gradient-to-br from-[var(--primary-10)] via-[var(--accent-5)] to-[var(--background)]">
            <div class="container mx-auto px-4 lg:px-8">
                <div class="max-w-3xl mx-auto">
                    <div class="flex items-center gap-3 mb-6 flex-wrap">
                        @if (!empty($blog['categories'][0]['name']))
                            <span class="px-3 py-1 bg-[var(--primary-10)] text-[var(--primary)] text-xs font-medium rounded-full">
                                {{ $blog['categories'][0]['name'] ?? '' }}
                            </span>
                        @endif
                    </div>

                    <h1 class="text-4xl md:text-5xl font-bold mb-6 text-balance">
                        {{ $blog['name'] ?? '' }}
                    </h1>

                    <div class="flex items-center gap-2 text-sm text-[var(--muted-foreground)]">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                        </svg>
                        <span>{{ str_date($blog['publish_at'], 'M d, Y') }}</span>
                    </div>
                </div>
            </div>
        </section>

        {{-- Article Image / Featured --}}
        <section class="py-8 bg-[var(--background)]">
            <div class="container mx-auto px-4 lg:px-8">
                <div class="max-w-4xl mx-auto">
                    <div class="aspect-video rounded-[2rem] overflow-hidden bg-[var(--muted)] relative">
                        <img class="w-full h-full object-cover" src="{{ $blog['image'] ?? '' }}" alt="{{ $blog['name'] ?? '' }}" onerror="this.style.display='none'; this.nextElementSibling.classList.remove('hidden');">
                    </div>
                </div>
            </div>
        </section>

        {{-- Article Content --}}
        <section class="py-12 bg-[var(--background)] max-w-3xl mx-auto prose prose-lg prose-[var(--foreground)]">
            {!! $blog['detail'] ?? '' !!}
        </section>

    </div>

    {{-- Related Posts --}}
    @if (!empty($blog['related'][0]))
        <section class="relative overflow-hidden py-20 bg-[var(--muted)]/30">
            @include('frontend::components.tsic-ellipse-decoration')
            <div class="container relative z-10 mx-auto px-4 lg:px-8 max-w-5xl">
                <div class="text-center mb-12">
                    <h2 class="text-3xl md:text-4xl font-bold mb-4">{{ __('frontend::lang.page.blog.related_articles') }}</h2>
                    <p class="text-lg text-[var(--muted-foreground)]">{{ __('frontend::lang.page.blog.related_articles_desc') }}</p>
                </div>

                <div class="relative">
                    <div class="swiper related-articles-swiper overflow-hidden rounded-[2rem]">
                        <div class="swiper-wrapper">
                            @foreach ($blog['related'] as $related)
                                <div class="swiper-slide pb-[1.5rem]">
                                    <a class="group flex w-full h-full" href="{{ $related['url'] ?? 'javascript:void(0)' }}">
                                        <div class="flex flex-col w-full h-full overflow-hidden rounded-[2rem] cursor-pointer hover:shadow-lg transition-all hover:-translate-y-1 bg-[var(--card)] border border-[var(--border)] shadow-sm">
                                            <div class="aspect-video overflow-hidden bg-[var(--muted)] relative">
                                                <img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" src="{{ $related['image'] ?? '' }}" alt="{{ $related['name'] ?? '' }}" loading="lazy" onerror="this.style.display='none'; this.nextElementSibling.classList.remove('hidden');">
                                            </div>
                                            <div class="p-6 flex-1">
                                                @if (!empty($related['categories'][0]['name']))
                                                    <span class="inline-block px-2.5 py-0.5 mb-2 text-xs font-medium rounded-full bg-[var(--primary-10)] text-[var(--primary)] w-fit">
                                                        {{ $related['categories'][0]['name'] ?? '' }}
                                                    </span>
                                                @endif
                                                <h3 class="font-bold text-lg mb-2 line-clamp-2 text-balance group-hover:text-[var(--primary)] transition-colors">{{ $related['name'] ?? '' }}</h3>
                                                <p class="text-[var(--muted-foreground)] text-sm leading-relaxed line-clamp-2 text-pretty">{{ $related['desc'] ?? '' }}</p>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="swiper-button-next related-articles-next !w-10 !h-10 md:!w-12 md:!h-12" aria-label="Next"></div>
                    <div class="swiper-button-prev related-articles-prev !w-10 !h-10 md:!w-12 md:!h-12" aria-label="Previous"></div>
                    <div class="related-articles-pagination mt-6 flex justify-center gap-1"></div>
                </div>
            </div>
        </section>
    @endif

    {{-- CTA Section --}}
    @include('frontend::components.cta-section')
@endsection

@push('scripts')
    <script>
        (function() {
            function initRelatedArticlesSwiper() {
                var el = document.querySelector('.related-articles-swiper');
                if (!el || typeof Swiper === 'undefined') return;

                new Swiper('.related-articles-swiper', {
                    slidesPerView: 1,
                    spaceBetween: 24,
                    loop: true,
                    navigation: {
                        nextEl: '.related-articles-next',
                        prevEl: '.related-articles-prev'
                    },
                    pagination: {
                        el: '.related-articles-pagination',
                        clickable: true
                    },
                    breakpoints: {
                        640: {
                            slidesPerView: 2
                        },
                        1024: {
                            slidesPerView: 3
                        }
                    },
                    touchRatio: 1,
                    touchStartPreventDefault: false
                });
            }

            window.addEventListener('load', initRelatedArticlesSwiper);
        })();
    </script>
@endpush