{{-- ============================================================================
     PAGE CONTENT — Soalan Lazim (FAQ)
     Site  : nres  ·  Page slug: faq  ·  Page ID: auto (dicipta oleh apply-faq.php)
     URL   : /nres/faq

     Sumber data: `content_article` (article_subcategory = FAQ, status ACTIVE)
                  + `content_article_translation` (BM/EN)
     Setiap artikel = 1 pasangan Soalan (tajuk) + Jawapan (kandungan HTML).

     Ciri: senarai akordion (<details>), carian segera (JS), CTA hubungi,
           BM/EN ikut sesi, dark mode + responsif.
     Nota: SEMUA logik + markup + CSS ada dalam fail ini (tiada komponen/partial).
     ============================================================================ --}}

@php
    $faqLang = ($lang ?? session('locale', 'ms')) === 'en' ? 'en' : 'ms';
    $faqIsEn = $faqLang === 'en';

    $faqRows = DB::table('content_article as a')
        ->join('content_article_translation as t', 't.article_translation_parent_id', '=', 'a.article_id')
        ->where(function ($q) {
            $q->where('a.article_subcategory', 'FAQ')->orWhere('a.article_category', 'FAQ');
        })
        ->where('a.article_status', 'ACTIVE')
        ->where('t.article_translation_language', $faqLang)
        ->orderBy('a.article_sorting')
        ->orderBy('a.article_id')
        ->select('a.article_id', 'a.article_code', 't.article_translation_title as title', 't.article_translation_content as body')
        ->get();

    $faqItems = [];

    foreach ($faqRows as $faqRow) {
        $faqTitle = trim((string) $faqRow->title);
        $faqBody = (string) $faqRow->body;

        if ($faqTitle === '') {
            continue;
        }

        $faqItems[] = [
            'id' => (int) $faqRow->article_id,
            'code' => (string) $faqRow->article_code,
            'title' => $faqTitle,
            'body' => $faqBody,
            // teks rata untuk carian klien
            'search' => mb_strtolower($faqTitle.' '.trim(preg_replace('/\s+/', ' ', strip_tags($faqBody)))),
        ];
    }

    $faqTotal = count($faqItems);

    $faqLinks = [
        [
            'title' => t('Complaints & Feedback'),
            'desc' => t('faq.complaint_desc'),
            'url' => url(trim(((string) ($siteSlug ?? '')).'/complaints-feedback', '/')),
            'icon' => '<path d="M4 5h16v11H9l-5 4z"/><path d="M8 9h8M8 12h5"/>',
        ],
        [
            'title' => t('Location'),
            'desc' => t('faq.address_desc'),
            'url' => url(trim(((string) ($siteSlug ?? '')).'/location', '/')),
            'icon' => '<path d="M12 21s7-6 7-11a7 7 0 0 0-14 0c0 5 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/>',
        ],
        [
            'title' => t('Officer Directory'),
            'desc' => t('faq.officer_hint'),
            'url' => url(trim(((string) ($siteSlug ?? '')).'/officer-directory', '/')),
            'icon' => '<circle cx="10.5" cy="7.5" r="3.5"/><path d="M4 20.5c0-4 2.9-6.5 6.5-6.5 1.1 0 2.1.2 3 .7"/><circle cx="17" cy="16.5" r="3"/><path d="M19.2 18.7l2.3 2.3"/>',
        ],
    ];
@endphp

<style>
/* =========================================================
   FAQ — INTERACTIVE ACCORDION CARD DESIGN
   Original Blade markup and JavaScript remain unchanged
   ========================================================= */

.faq__container {
    padding: 26px 16px 40px;
}

/* Breadcrumb */
.faq__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 auto 14px;
    max-width: 880px;
    color: var(--bs-secondary-color);
    font-size: .8rem;
}

.faq__breadcrumb a {
    color: var(--teal);
    font-weight: 600;
    text-decoration: none;
    transition: color .2s ease;
}

.faq__breadcrumb a:hover {
    color: var(--green);
    text-decoration: underline;
}

/* Header */
.faq__header {
    margin: 0 auto 22px;
    max-width: 880px;
    text-align: center;
}

.faq__header h1 {
    margin: 0 0 10px;
    color: var(--green);
    font-size: clamp(1.6rem, 3.2vw, 2.25rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.035em;
}

.faq__lead {
    margin: 0 auto;
    max-width: 700px;
    color: var(--bs-secondary-color);
    font-size: .9rem;
    line-height: 1.8;
}

/* Search */
.faq__search {
    display: flex;
    justify-content: center;
    max-width: 880px;
    margin: 0 auto 12px;
}

.faq__search-wrap {
    position: relative;
    width: 100%;
    max-width: 590px;
}

.faq__search input {
    width: 100%;
    min-height: 49px;
    padding: 12px 44px 12px 44px;

    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bs-body-bg);
    color: var(--ink);

    font-family: inherit;
    font-size: .88rem;

    box-shadow: 0 4px 15px color-mix(
        in srgb,
        var(--ink) 4%,
        transparent
    );

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}

.faq__search input:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 4px color-mix(
        in srgb,
        var(--teal) 12%,
        transparent
    );
}

.faq__search svg {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    color: var(--bs-secondary-color);
    pointer-events: none;
}

/* Question count */
.faq__count {
    margin: 0 auto 20px;
    max-width: 880px;
    text-align: center;
    color: var(--bs-secondary-color);
    font-size: .8rem;
}

/* =========================================================
   FAQ LIST
   ========================================================= */

.faq__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 880px;
    margin: 0 auto;
}

/* Individual question card */
.faq__item {
    position: relative;
    overflow: hidden;

    border: 1px solid var(--line);
    border-radius: 16px;

    background: var(--bs-body-bg);

    box-shadow: 0 3px 12px color-mix(
        in srgb,
        var(--ink) 3%,
        transparent
    );

    transition:
        transform .25s ease,
        border-color .25s ease,
        background-color .25s ease,
        box-shadow .25s ease;
}

/* Hover over the whole question container */
.faq__item:hover {
    border-color: color-mix(
        in srgb,
        var(--teal) 38%,
        var(--line)
    );

    background: color-mix(
        in srgb,
        var(--teal) 5%,
        var(--bs-body-bg)
    );

    box-shadow: 0 9px 24px color-mix(
        in srgb,
        var(--teal) 10%,
        transparent
    );

    transform: translateY(-2px);
}

/* Open question card */
.faq__item[open] {
    border-color: color-mix(
        in srgb,
        var(--teal) 45%,
        var(--line)
    );

    background: color-mix(
        in srgb,
        var(--teal) 3%,
        var(--bs-body-bg)
    );

    box-shadow: 0 8px 24px color-mix(
        in srgb,
        var(--teal) 8%,
        transparent
    );
}

/* Question row */
.faq__q {
    display: flex;
    align-items: center;
    gap: 13px;

    min-height: 62px;
    padding: 15px 18px;

    color: var(--ink);
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.6;

    cursor: pointer;
    list-style: none;

    transition: color .25s ease;
}

.faq__q::-webkit-details-marker {
    display: none;
}

.faq__q::marker {
    content: "";
}

/* Keyboard accessibility */
.faq__q:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: -4px;
    border-radius: 12px;
}

/* Question text changes colour on hover */
.faq__item:hover .faq__q,
.faq__item[open] .faq__q {
    color: var(--green);
}

/* Number badge */
.faq__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    margin-top: 0;

    border-radius: 50%;

    background: color-mix(
        in srgb,
        var(--teal) 11%,
        var(--bs-body-bg)
    );

    color: var(--teal);
    font-size: .76rem;
    font-weight: 800;

    transition:
        color .25s ease,
        background-color .25s ease,
        transform .25s ease;
}

/* Number badge changes when hovering or opening */
.faq__item:hover .faq__num,
.faq__item[open] .faq__num {
    color: #ffffff;
    background: var(--teal);
    transform: scale(1.05);
}

/* Replace the visual chevron with a plus sign.
   The original SVG stays in your HTML. */
.faq__chev {
    display: none;
}

/* Plus icon on the right */
.faq__q::after {
    content: "+";

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    margin-left: auto;

    border-radius: 50%;

    color: var(--teal);
    background: color-mix(
        in srgb,
        var(--teal) 9%,
        var(--bs-body-bg)
    );

    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1;

    transition:
        transform .25s ease,
        color .25s ease,
        background-color .25s ease;
}

/* Plus rotates into an X when the answer is open */
.faq__item[open] .faq__q::after {
    color: #ffffff;
    background: var(--teal);
    transform: rotate(45deg);
}

/* =========================================================
   ANSWER CONTENT
   ========================================================= */

.faq__a {
    margin: 0 18px 0 61px;
    padding: 15px 0 19px;

    border-top: 1px solid color-mix(
        in srgb,
        var(--teal) 17%,
        var(--line)
    );

    color: var(--ink);
    font-size: .88rem;
    line-height: 1.9;

    animation: faqAnswerIn .25s ease;
}

@keyframes faqAnswerIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.faq__a p {
    margin: 0 0 12px;
}

.faq__a ul,
.faq__a ol {
    margin: 0 0 12px;
    padding-left: 20px;
}

.faq__a li {
    margin-bottom: 6px;
}

.faq__a a {
    color: var(--teal);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.faq__a a:hover {
    color: var(--green);
}

.faq__a strong {
    color: var(--ink);
}

.faq__a > *:last-child {
    margin-bottom: 0;
}

/* Empty and no-results messages */
.faq__none {
    max-width: 880px;
    margin: 0 auto;
    padding: 30px 20px;

    border: 1px dashed var(--line);
    border-radius: 16px;

    color: var(--bs-secondary-color);
    background: color-mix(
        in srgb,
        var(--fade) 20%,
        var(--bs-body-bg)
    );

    text-align: center;
    font-size: .88rem;
}

/* =========================================================
   CONTACT CTA
   ========================================================= */

.faq__cta {
    max-width: 880px;
    margin: 26px auto 0;
    padding: 22px;

    border: 1px solid var(--line);
    border-radius: 18px;

    background: color-mix(
        in srgb,
        var(--fade) 40%,
        var(--bs-body-bg)
    );
}

.faq__cta h2 {
    margin: 0 0 5px;
    color: var(--green);
    font-size: 1.05rem;
    font-weight: 800;
}

.faq__cta p {
    margin: 0 0 16px;
    color: var(--bs-secondary-color);
    font-size: .84rem;
    line-height: 1.8;
}

.faq__cta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}

.faq__cta-grid a {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 15px;

    border: 1px solid var(--line);
    border-radius: 13px;

    background: var(--bs-body-bg);
    color: var(--ink);
    text-decoration: none;

    transition:
        border-color .25s ease,
        background-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.faq__cta-grid a:hover {
    border-color: color-mix(
        in srgb,
        var(--teal) 45%,
        var(--line)
    );

    background: color-mix(
        in srgb,
        var(--teal) 5%,
        var(--bs-body-bg)
    );

    box-shadow: 0 6px 18px color-mix(
        in srgb,
        var(--teal) 8%,
        transparent
    );

    color: var(--teal);
    transform: translateY(-2px);
}

.faq__cta-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 40px;
    width: 40px;
    height: 40px;

    border-radius: 12px;

    background: color-mix(
        in srgb,
        var(--teal) 10%,
        var(--bs-body-bg)
    );

    color: var(--teal);

    transition:
        color .25s ease,
        background-color .25s ease;
}

.faq__cta-grid a:hover .faq__cta-ico {
    background: var(--teal);
    color: #ffffff;
}

.faq__cta-ico svg {
    width: 19px;
    height: 19px;
}

.faq__cta-title {
    display: block;
    font-size: .85rem;
    font-weight: 800;
}

.faq__cta-desc {
    display: block;
    margin-top: 4px;
    color: var(--bs-secondary-color);
    font-size: .76rem;
    line-height: 1.65;
}

/* Bottom note */
.faq__note {
    max-width: 880px;
    margin: 18px auto 0;
    padding: 15px 18px;

    border: 1px solid var(--line);
    border-left: 4px solid var(--teal);
    border-radius: 12px;

    background: color-mix(
        in srgb,
        var(--fade) 35%,
        var(--bs-body-bg)
    );

    color: var(--bs-secondary-color);
    font-size: .82rem;
    line-height: 1.8;
}

/* =========================================================
   RESPONSIVE LAYOUT
   ========================================================= */

@media (max-width: 600px) {
    .faq__container {
        padding: 18px 12px 30px;
    }

    .faq__header {
        margin-bottom: 20px;
    }

    .faq__header h1 {
        font-size: 1.65rem;
    }

    .faq__lead {
        font-size: .84rem;
    }

    .faq__list {
        gap: 10px;
    }

    .faq__item {
        border-radius: 14px;
    }

    .faq__q {
        gap: 10px;
        min-height: 58px;
        padding: 13px;
        font-size: .86rem;
    }

    .faq__num {
        flex-basis: 27px;
        width: 27px;
        height: 27px;
        font-size: .72rem;
    }

    .faq__q::after {
        flex-basis: 27px;
        width: 27px;
        height: 27px;
        font-size: 1.25rem;
    }

    .faq__a {
        margin: 0 14px;
        padding: 13px 0 16px;
        font-size: .84rem;
    }

    .faq__cta {
        margin-top: 22px;
        padding: 17px;
    }

    .faq__cta-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .faq__note {
        padding: 13px 14px;
    }
}

/* Accessibility: limit motion when requested */
@media (prefers-reduced-motion: reduce) {
    .faq__item,
    .faq__q,
    .faq__num,
    .faq__q::after,
    .faq__cta-grid a,
    .faq__cta-ico {
        transition: none !important;
        animation: none !important;
    }
}
</style>

<section class="faq">
    <div class="faq__container">

        {{-- ============================ BREADCRUMB ============================ --}}
        <nav class="faq__breadcrumb" aria-label="breadcrumb">
            <a href="{{ url('/') }}">{{ t('Home') }}</a>
            <span>/</span>
            <span>Media</span>
            <span>/</span>
            <span>{{ t('faq.frequently_asked_questions') }}</span>
        </nav>

        {{-- ============================== TAJUK ============================== --}}
        <header class="faq__header">
            <h1>{{ t('faq.frequently_asked_questions') }}</h1>
            <p class="faq__lead">
                {{ t('faq.intro') }}
            </p>
        </header>

        {{-- ============================= CARIAN ============================= --}}
        <div class="faq__search">
            <div class="faq__search-wrap">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg>
                <input id="faqSearch" type="search" autocomplete="off"
                       placeholder="{{ t('faq.type_a_keyword') }}"
                       aria-label="{{ t('faq.search_questions') }}">
            </div>
        </div>

        <p class="faq__count" id="faqCount" data-label-all="{{ t('faq.questions') }}">
            {{ $faqTotal }} {{ t('faq.questions') }}
        </p>

        {{-- ============================= SENARAI ============================= --}}
        @if ($faqTotal > 0)
            <div class="faq__list" id="faqList">
                @foreach ($faqItems as $faqIndex => $faqItem)
                    <details class="faq__item" data-q="{{ $faqItem['search'] }}">
                        <summary class="faq__q">
                            <span class="faq__num">{{ $faqIndex + 1 }}</span>
                            <span>{{ $faqItem['title'] }}</span>
                            <svg class="faq__chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 5l7 7-7 7"/></svg>
                        </summary>

                        <div class="faq__a">
                            {!! $faqItem['body'] !!}
                        </div>
                    </details>
                @endforeach
            </div>

            <p class="faq__none" id="faqNone" hidden>
                {{ t('faq.no_result') }}
            </p>
        @else
            <p class="faq__none">
                {{ t('faq.empty') }}
            </p>
        @endif

        {{-- ========================== MASIH ADA SOALAN ========================== --}}
        <aside class="faq__cta">
            <h2>{{ t('faq.still_have_a_question') }}</h2>
            <p>
                {{ t('faq.channels_intro') }}
            </p>

            <div class="faq__cta-grid">
                @foreach ($faqLinks as $faqLink)
                    <a href="{{ $faqLink['url'] }}">
                        <span class="faq__cta-ico" aria-hidden="true">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">{!! $faqLink['icon'] !!}</svg>
                        </span>
                        <span>
                            <span class="faq__cta-title">{{ $faqLink['title'] }}</span>
                            <span class="faq__cta-desc">{{ $faqLink['desc'] }}</span>
                        </span>
                    </a>
                @endforeach
            </div>
        </aside>

        {{-- =============================== NOTA =============================== --}}
        <p class="faq__note">
            {{ t('faq.note_phone') }}
        </p>
    </div>
</section>

<script>
(function () {
    var input = document.getElementById('faqSearch');
    var list = document.getElementById('faqList');
    var none = document.getElementById('faqNone');
    var count = document.getElementById('faqCount');

    if (!input || !list) {
        return;
    }

    var items = [].slice.call(list.querySelectorAll('.faq__item'));
    var total = items.length;

    input.addEventListener('input', function () {
        var q = (input.value || '').toLowerCase().trim();
        var shown = 0;

        items.forEach(function (el) {
            var hay = (el.getAttribute('data-q') || '').toLowerCase();
            var hit = q === '' || hay.indexOf(q) !== -1;

            el.hidden = !hit;

            if (hit) {
                shown++;

                if (q !== '') {
                    el.open = true;
                }
            } else {
                el.open = false;
            }
        });

        if (none) {
            none.hidden = shown !== 0;
        }

        if (count) {
            count.textContent = q === ''
                ? total + ' ' + (count.getAttribute('data-label-all') || '')
                : shown + ' / ' + total;
        }
    });
})();
</script>