@php
    $bannerImage = !empty($banner?->szBannerImage)
        ? asset('uploads/innerBanner/' . $banner->szBannerImage)
        : asset('uploads/innerBanner/3.jpg');

    $mainClass = !empty($banner?->szBannerImage) ? 'link-page' : 'common-page';

    $rcId = request('rc');
    $rcName = '';

    if (!empty($menu) && $rcId) {
        foreach ($menu as $item) {
            if ($item->id == $rcId) {
                $rcName = $item->szName;
                break;
            }
        }
    }
@endphp

<main class="main {{ $mainClass }}">

    <section class="promo-primary">
        <picture>
            <source srcset="{{ $bannerImage }}" media="(min-width:992px)">
            <img class="img--bg" src="{{ $bannerImage }}" alt="Banner">
        </picture>

        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="align-container">
                        <div class="align-container__item">

                            <div aria-label="breadcrumb">
                                <ul class="breadcrumb d-flex">

                                    <li class="breadcrumb-item">
                                        <a class="text-white hover-yellow" href="{{ url('/') }}">
                                            Home
                                        </a>
                                    </li>

                                    <li class="breadcrumb-item">
                                        <a class="text-white hover-yellow" href="javascript:void(0);">
                                            Regional Centres and HQ
                                        </a>
                                    </li>

                                    <li class="breadcrumb-item">
                                        <a class="text-white hover-yellow" href="{{ url('rc-with-map') }}">
                                            Regional Centres
                                        </a>
                                    </li>

                                    @if ($rcName)
                                        <li class="breadcrumb-item">
                                            <a class="text-white hover-yellow"
                                                href="{{ url('regional-centres?rc=' . $rcId) }}">
                                                {{ $rcName }}
                                            </a>
                                        </li>
                                    @endif

                                    <li class="breadcrumb-item active">
                                        {{ $rcName }} Publication
                                    </li>

                                </ul>
                            </div>

                            <h1 class="promo-primary__title">
                                <span>{{ $rcName }}</span>
                                <span>Publication</span>
                            </h1>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="wrapper">
        <div class="container">
            <ul class="accordion">

                @php
                    $hasData = false;
                @endphp

                @if (!empty($arPublications))

                    @foreach ($arPublications as $publication)
                        @if ($publication->idParent == request('rc'))
                            @php
                                $hasData = true;
                            @endphp

                            <li class="item">
                                <h2 class="accordionTitle">
                                    {{ $publication->szTitle }}
                                    <span class="accIcon"></span>
                                </h2>

                                <div class="text-1">
                                    {!! $publication->szPageContent !!}
                                </div>
                            </li>
                        @endif
                    @endforeach

                @endif

                @if (!$hasData)
                    <div class="col-12">
                        <p class="text-center fw-bold">
                            Data will be updated soon.
                        </p>
                    </div>
                @endif

            </ul>
        </div>
    </section>
    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function() {

                const accordionBtn = document.querySelectorAll('.accordionTitle');
                const allTexts = document.querySelectorAll('.text-1');
                const accIcon = document.querySelectorAll('.accIcon');

                accordionBtn.forEach(function(btn) {
                    btn.addEventListener('click', toggleAccordion);
                });

                function toggleAccordion(e) {

                    const target = e.currentTarget;
                    const targetText = target.nextElementSibling.classList;
                    const targetAccIcon = target.querySelector('.accIcon');

                    if (targetText.contains('show')) {

                        targetText.remove('show');
                        target.classList.remove('accordionTitleActive');
                        targetAccIcon.classList.remove('anime');

                    } else {

                        accordionBtn.forEach(function(btn) {
                            btn.classList.remove('accordionTitleActive');
                        });

                        allTexts.forEach(function(text) {
                            text.classList.remove('show');
                        });

                        accIcon.forEach(function(icon) {
                            icon.classList.remove('anime');
                        });

                        targetText.add('show');
                        target.classList.add('accordionTitleActive');
                        targetAccIcon.classList.add('anime');
                    }
                }

            });
        </script>
    @endpush