@extends('layouts.app')

@section('title', __('pages.meta.post-category.title'))
@section('meta_description', __('pages.meta.post-category.description'))
@section('meta_keywords', __('pages.meta.post-category.keywords'))
@section('meta_author', __('pages.meta.author'))

@section('content')
    @php
        $pageData = $postCategoryData ?? [];
        $banner = $pageData['banner'] ?? [];
        $breadcrumb = $pageData['breadcrumb'] ?? [];
        $description = $pageData['description'] ?? [];
        $sortOptions = $pageData['sortOptions'] ?? [];
        $stories = $pageData['stories']['content'] ?? [];
        $pagination = $pageData['pagination'] ?? [];
        $about = $pageData['about'] ?? [];
        $reviews = $pageData['reviews'] ?? [];
        $floatingActions = $pageData['floatingActions'] ?? [];
        $mobileNavData = $pageData['mobileNavData'] ?? [];
        $seeMoreText = __('common.page.see_more');
        $sectionBenefits = $sectionBenefits ?? [];
    @endphp

    <div class="site" id="post-category-page">
        @include('pages.home.shared.header')

        <main class="site-content">
            <section class="section-1-banner section-1__post-category p-0">
                <div class="section-1-section">
                    <img loading="lazy" decoding="async" src="{{ $banner['image'] ?? '' }}" alt="{{ $banner['alt'] ?? '' }}" class="img-fluid w-100 fit-cover">
                </div>
            </section>

            <div class="container pt-50px">
                <div class="breadcrumb mb-0">
                    @foreach ($breadcrumb as $index => $item)
                        @if ($index === 0)
                            <span>{{ $item['text'] ?? '' }}</span>
                        @else
                            <span class="px-2">/</span>
                            @if (!empty($item['link']))
                                <a class="breadcrumb-link color-body text-decoration-none"
                                    href="{{ $item['link'] }}">{{ $item['text'] ?? '' }}</a>
                            @else
                                <span>{{ $item['text'] ?? '' }}</span>
                            @endif
                        @endif
                    @endforeach
                </div>
            </div>

            <section class="section-2__sub-product-1 pt-30px pb-30px">
                <div class="container">
                    <div class="section-2__sub-product-1--content toggle-wrapper">
                        <h1 class="section-title mb-30px">{{ $description['title'] ?? '' }}</h1>
                        <div class="description" id="description">
                            {!! $description['text'] ?? '' !!}
                            <div class="extra-content" id="extraContent">
                                {!! $description['extraContent'] ?? '' !!}
                            </div>
                        </div>
                        <div class="text-end">
                            <button class="see-more-btn btn-primary-color float-right p-0" onclick="toggleContent(this)">
                                {{ $seeMoreText }}
                                <span class="arrow">
                                    <i class="fa-light fa-angle-right"></i>
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
            </section>

            <section class="section-3__post-category">
                <div class="container">
                    <div class="custom-sort">
                        <div class="d-flex justify-content-end align-items-center mb-4">
                            <span class="text-12 show-pc mr-10px">{{ __('common.page.sort_by') }}</span>
                            <div class="custom-sort-dropdown">
                                <button class="sort-dropdown-toggle" id="sortDropdownToggle">
                                    <span id="sortSelectedText">
                                        {{ collect($sortOptions)->firstWhere('active', true)['text'] ?? (collect($sortOptions)->first()['text'] ?? '') }}
                                    </span>
                                    <i class="fas fa-chevron-down"></i>
                                </button>
                                <div class="sort-dropdown-menu" id="sortDropdownMenu">
                                    @foreach ($sortOptions as $option)
                                        <div class="sort-option{{ !empty($option['active']) ? ' active' : '' }}"
                                            data-value="{{ $option['value'] ?? '' }}">
                                            {{ $option['text'] ?? '' }}
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row g-3" id="activityGrid">
                        @foreach ($stories as $story)
                            <div class="col-6 col-md-6 col-xl-4">
                                <a href="{{ $story['link'] ?? '#' }}" class="text-decoration-none text-reset">
                                    <div class="section-6-item">
                                        <img loading="lazy" decoding="async" src="{{ $story['image'] ?? '' }}" class="section-6-img-top w-100 img-fluid fit-cover"
                                            alt="{{ $story['alt'] ?? '' }}">
                                        <div class="section-6-body mt-3">
                                            <h3 class="h6 section-6-title fw-500">{{ $story['title'] ?? '' }}</h3>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    </div>

                    @php
                        $currentPage = (int) ($pagination['currentPage'] ?? 1);
                        $totalPages = (int) ($pagination['totalPages'] ?? 1);
                        $showEllipsis = (bool) ($pagination['showEllipsis'] ?? false);
                        $pages = range(1, max($totalPages, 1));
                    @endphp
                    <nav aria-label="Page navigation" class="mt-5">
                        <ul class="pagination justify-content-end">
                            <li class="page-item{{ $currentPage === 1 ? ' disabled' : '' }}">
                                <a class="page-link" style="padding: 3px 8px;" href="#" data-page="{{ $currentPage - 1 }}">
                                    <i class="fa fa-chevron-left text-10" aria-hidden="true"></i>
                                </a>
                            </li>
                            @foreach ($pages as $pageNumber)
                                @if ($pageNumber === $totalPages && $showEllipsis && $totalPages > 6)
                                    <li class="page-item"><a class="page-link" href="#">...</a></li>
                                @endif
                                <li class="page-item{{ $pageNumber === $currentPage ? ' active' : '' }}">
                                    <a class="page-link" href="#" data-page="{{ $pageNumber }}">{{ $pageNumber }}</a>
                                </li>
                            @endforeach
                            <li class="page-item{{ $currentPage === $totalPages ? ' disabled' : '' }}">
                                <a class="page-link" style="padding: 3px 8px;" href="#" data-page="{{ $currentPage + 1 }}">
                                    <i class="fa fa-chevron-right text-10" aria-hidden="true"></i>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </section>

            <section class="section-7">
                <div class="container">
                    <div class="accordion accordion-flush" id="accordionFlushExample">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="flush-headingOne">
                                <button class="section-title accordion-button collapsed p-0" type="button"
                                    data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false"
                                    aria-controls="flush-collapseOne">
                                    {{ $about['title'] ?? '' }}
                                </button>
                            </h2>
                            <div id="flush-collapseOne" class="accordion-collapse collapse"
                                aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                                <div class="accordion-body">{!! $about['content'] ?? '' !!}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section>
                <div class="container">
                    <div class="breadcrumb mb-30px">
                        @foreach ($breadcrumb as $index => $item)
                            @if ($index === 0)
                                <span>{{ $item['text'] ?? '' }}</span>
                            @else
                                <span class="px-2">/</span>
                                @if (!empty($item['link']))
                                    <a class="breadcrumb-link color-body"
                                        href="{{ $item['link'] }}">{{ $item['text'] ?? '' }}</a>
                                @else
                                    <span>{{ $item['text'] ?? '' }}</span>
                                @endif
                            @endif
                        @endforeach
                    </div>
                    <div class="border-top border-secondary"></div>
                </div>
            </section>

            @include('pages.home.shared.section-benefits', ['sectionBenefitsData' => $sectionBenefits])

            <section class="section-6-product-2">
                <div class="container">
                    @include('pages.home.shared.trustpilot-section', ['trustpilotData' => $reviews])
                </div>
            </section>
        </main>

        @include('pages.home.shared.footer')
        @include('pages.home.shared.popup-booking')

        <div class="floating-actions" id="floatingActions">
            @foreach ($floatingActions as $action)
                @php
                    $width = $action['width'] ?? 25;
                    $height = $action['height'] ?? 25;
                    $actionId = $action['id'] ?? '';
                @endphp
                <a href="{{ $action['href'] ?? '#' }}" class="floating-btn{{ $actionId === 'saveBtn' ? ' save-btn' : '' }}"
                    @if ($actionId !== '') id="{{ $actionId }}" @endif>
                    <img loading="lazy" decoding="async" src="{{ $action['img'] ?? '' }}" width="{{ $width }}" height="{{ $height }}"
                        alt="{{ $action['alt'] ?? '' }}">
                    @if (!empty($action['badge']))
                        <span class="badge">{{ $action['badge'] }}</span>
                    @endif
                    @if (!empty($action['text']))
                        <span class="save-bag">{{ $action['text'] }}</span>
                    @endif
                </a>
            @endforeach
        </div>

        <div class="mobile-bottom-nav" id="mobileBottomNav">
            <div class="nav-container bottom-menu">
                @foreach ($mobileNavData as $item)
                    @php
                        $href = (string) ($item['href'] ?? '#');
                        $isTrends = $href === './trends.html';
                        $isHome = in_array($href, ['/', '/vi', './index.html'], true);
                        $hasTwoStates = !empty($item['imgCurrent']) && !empty($item['imgNotCurrent']);
                    @endphp

                    @if ($isTrends)
                        <a href="{{ $href }}" class="nav-item nav-top-bottom" id="trends">
                            <div class="nav-icon icon-top-bottom-mobile">
                                <img loading="lazy" decoding="async"class="not-current" src="{{ $item['imgNotCurrent'] ?? '' }}" width="50"
                                    height="50" alt="{{ $item['alt'] ?? '' }}">
                                <img loading="lazy" decoding="async"class="current-page" src="{{ $item['imgCurrent'] ?? '' }}" width="50"
                                    height="50" alt="{{ $item['alt'] ?? '' }}">
                            </div>
                            <div class="nav-label">{{ $item['label'] ?? '' }}</div>
                        </a>
                    @elseif ($hasTwoStates)
                        <a href="{{ $href }}" class="nav-item" @if ($isHome) id="home" @endif>
                            <div class="nav-icon">
                                <img loading="lazy" decoding="async"class="current-page" src="{{ $item['imgCurrent'] ?? '' }}" width="25"
                                    height="25" alt="{{ $item['alt'] ?? '' }}">
                                <img loading="lazy" decoding="async"class="not-current" src="{{ $item['imgNotCurrent'] ?? '' }}" width="25"
                                    height="25" alt="{{ $item['alt'] ?? '' }}">
                            </div>
                            <div class="nav-label">{{ $item['label'] ?? '' }}</div>
                        </a>
                    @else
                        <a href="{{ $href }}" class="nav-item">
                            <div class="nav-icon">
                                <img loading="lazy" decoding="async" src="{{ $item['imgNotCurrent'] ?? '' }}" width="25" height="25"
                                    alt="{{ $item['alt'] ?? '' }}">
                            </div>
                            <div class="nav-label">{{ $item['label'] ?? '' }}</div>
                        </a>
                    @endif
                @endforeach
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        window.__HOME_SSR_SHARED__ = true;
        window.__HOME_UI_TEXTS = @json($homeSharedData['ui'] ?? []);
    </script>
    <script src="{{ asset('assets/js/lib/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('assets/js/lib/swiper-bundle.min.js') }}"></script>
    <script src="{{ asset('assets/js/custom-swiper.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.2.1/js/intlTelInput.min.js"></script>
    <script src="{{ asset('assets/js/header-events.js') }}"></script>
    <script src="{{ asset('assets/js/popup-booking.js') }}"></script>
    <script src="{{ asset('assets/js/home.js') }}"></script>
    <script>
        function toggleContent(btn) {
            var wrapper = btn.closest('.toggle-wrapper');
            if (!wrapper) return;

            var extraContent = wrapper.querySelector('.extra-content');
            var arrow = btn.querySelector('.arrow');
            if (!extraContent || !arrow) return;

            var uiTexts = window.__HOME_UI_TEXTS || {};
            var seeMore = uiTexts.seeMore || @json(__('common.page.see_more'));
            var seeLess = uiTexts.seeLess || @json(app()->getLocale() === 'vi' ? 'Thu gọn' : 'See less');
            var isOpen = extraContent.classList.contains('show');

            if (isOpen) {
                extraContent.style.height = extraContent.scrollHeight + 'px';
                requestAnimationFrame(function () {
                    extraContent.style.height = '0px';
                });
                wrapper.classList.remove('show');
                extraContent.classList.remove('show');
                arrow.classList.remove('up');
                btn.childNodes[0].nodeValue = seeMore + ' ';
            } else {
                wrapper.classList.add('show');
                extraContent.classList.add('show');
                extraContent.style.height = extraContent.scrollHeight + 'px';
                arrow.classList.add('up');
                btn.childNodes[0].nodeValue = seeLess + ' ';
            }
        }

        document.addEventListener('DOMContentLoaded', function () {
            var sortDropdownToggle = document.getElementById('sortDropdownToggle');
            var sortDropdownMenu = document.getElementById('sortDropdownMenu');
            var sortSelectedText = document.getElementById('sortSelectedText');
            var activityGrid = document.getElementById('activityGrid');

            function sortActivities(sortType) {
                if (!activityGrid) return;
                var cards = Array.from(activityGrid.children);

                cards.sort(function (a, b) {
                    var priceA = parseFloat((a.querySelector('.price-label')?.textContent || '').replace(/[^\d.]/g, '')) || 0;
                    var priceB = parseFloat((b.querySelector('.price-label')?.textContent || '').replace(/[^\d.]/g, '')) || 0;

                    switch (sortType) {
                        case 'Most Luxury':
                            return priceB - priceA;
                        case 'Regular':
                            return priceA - priceB;
                        default:
                            return 0;
                    }
                });

                cards.forEach(function (card) {
                    activityGrid.appendChild(card);
                });
            }

            if (sortDropdownToggle && sortDropdownMenu && sortSelectedText) {
                sortDropdownToggle.addEventListener('click', function (e) {
                    e.stopPropagation();
                    sortDropdownToggle.classList.toggle('active');
                    sortDropdownMenu.classList.toggle('show');
                });

                sortDropdownMenu.querySelectorAll('.sort-option').forEach(function (option) {
                    option.addEventListener('click', function (e) {
                        var value = e.currentTarget.getAttribute('data-value') || '';
                        sortSelectedText.textContent = e.currentTarget.textContent.trim();

                        sortDropdownMenu.querySelectorAll('.sort-option').forEach(function (opt) {
                            opt.classList.remove('active');
                        });
                        e.currentTarget.classList.add('active');

                        sortDropdownToggle.classList.remove('active');
                        sortDropdownMenu.classList.remove('show');

                        sortActivities(value);
                    });
                });

                document.addEventListener('click', function (e) {
                    if (!sortDropdownToggle.contains(e.target) && !sortDropdownMenu.contains(e.target)) {
                        sortDropdownToggle.classList.remove('active');
                        sortDropdownMenu.classList.remove('show');
                    }
                });
            }

            document.querySelectorAll('.pagination .page-link').forEach(function (link) {
                link.addEventListener('click', function (e) {
                    e.preventDefault();
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                });
            });
        });

        window.toggleContent = toggleContent;
    </script>
@endpush