@extends('layouts.app')
@section('pageTitle', 'Pusat Informasi')
@section('pageDescription', 'Pengumuman dan pembaruan layanan yang dipublikasikan di Kiostore.')
@section('pageRobots', $announcements->isEmpty() ? 'noindex, follow' : 'index, follow')
@section('content')

{{-- HEADER --}}
<div style="display:flex;align-items:center;gap:12px;margin-bottom:20px">
    <a href="{{ route('home') }}"
       style="width:36px;height:36px;border-radius:10px;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text2);text-decoration:none;flex-shrink:0">
        <i class="fas fa-arrow-left" style="font-size:13px"></i>
    </a>
    <div>
        <h1 style="font-size:16px;font-weight:800;color:var(--text);letter-spacing:-.4px">Pusat Informasi</h1>
        <div style="font-size:11px;color:var(--muted)">Pengumuman & update terbaru</div>
    </div>
</div>

{{-- FILTER BAR --}}
<div style="background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:16px">
    <div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap">
        {{-- Search --}}
        <div style="flex:1;min-width:180px;position:relative">
            <i class="fas fa-search" style="position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--muted)"></i>
            <input id="searchInput" type="text" placeholder="Cari informasi..."
                   oninput="filterAnn()"
                   style="width:100%;padding:8px 10px 8px 30px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);font-size:13px;color:var(--text);outline:none">
        </div>
        {{-- Show per page --}}
        <div style="display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);white-space:nowrap">
            <span>Tampilkan</span>
            <div class="cdd cdd-sm" data-cdd style="width:80px">
                <input type="hidden" id="perPage" value="10">
                <button type="button" class="cdd-trigger" data-cdd-trigger>
                    <span class="cdd-trigger-label" data-cdd-label>10</span>
                    <i class="fa-solid fa-chevron-down"></i>
                </button>
                <div class="cdd-panel" data-cdd-panel>
                    <div class="cdd-opt active" data-value="10"><span>10</span><i class="fa-solid fa-check"></i></div>
                    <div class="cdd-opt" data-value="25"><span>25</span><i class="fa-solid fa-check"></i></div>
                    <div class="cdd-opt" data-value="50"><span>50</span><i class="fa-solid fa-check"></i></div>
                    <div class="cdd-opt" data-value="999"><span>Semua</span><i class="fa-solid fa-check"></i></div>
                </div>
            </div>
            <span>data</span>
        </div>
        {{-- Filter tipe --}}
        <div class="cdd cdd-sm" data-cdd style="width:140px">
            <input type="hidden" id="typeFilter" value="">
            <button type="button" class="cdd-trigger" data-cdd-trigger>
                <span class="cdd-trigger-label" data-cdd-label>Semua Tipe</span>
                <i class="fa-solid fa-chevron-down"></i>
            </button>
            <div class="cdd-panel" data-cdd-panel>
                <div class="cdd-opt active" data-value=""><span>Semua Tipe</span><i class="fa-solid fa-check"></i></div>
                <div class="cdd-opt" data-value="info"><span>INFO</span><i class="fa-solid fa-check"></i></div>
                <div class="cdd-opt" data-value="update"><span>UPDATE</span><i class="fa-solid fa-check"></i></div>
                <div class="cdd-opt" data-value="warning"><span>WARNING</span><i class="fa-solid fa-check"></i></div>
                <div class="cdd-opt" data-value="promo"><span>PROMO</span><i class="fa-solid fa-check"></i></div>
            </div>
        </div>
    </div>
</div>

{{-- LIST --}}
<div id="annList">
@if($announcements->isEmpty())
    <div style="text-align:center;padding:60px 20px;color:var(--muted)">
        <i class="fas fa-bell-slash" style="font-size:36px;margin-bottom:12px;display:block;opacity:.4"></i>
        <div style="font-size:14px">Belum ada informasi.</div>
    </div>
@else
    @foreach($announcements as $ann)
    <div class="ann-item"
         data-title="{{ strtolower($ann->title) }}"
         data-content="{{ strtolower(strip_tags($ann->content)) }}"
         data-type="{{ $ann->type }}"
         style="background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;margin-bottom:12px">

        <div style="padding:14px 16px">
            {{-- Tanggal + Tipe --}}
            <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap">
                <i class="fas fa-calendar-days" style="font-size:11px;color:var(--muted)"></i>
                <span style="font-size:11px;color:var(--muted)">
                    {{ $ann->published_at?->translatedFormat('d F Y (H:i \W\I\B)') ?? $ann->created_at->translatedFormat('d F Y (H:i \W\I\B)') }}
                </span>
                <span style="font-size:10px;color:var(--muted)">|</span>
                <span style="display:inline-block;padding:2px 8px;border-radius:99px;font-size:10px;font-weight:800;letter-spacing:.5px;color:#fff;background:{{ $ann->type_badge_color }}">
                    {{ $ann->type_label }}
                </span>
            </div>

            {{-- Judul --}}
            <div style="font-size:14px;font-weight:700;color:var(--text);margin-bottom:10px;line-height:1.4;display:flex;align-items:flex-start;gap:8px">
                <span>{{ $ann->title }}</span>
            </div>

            {{-- Gambar --}}
            @if($ann->image)
            <img src="{{ asset('storage/'.$ann->image) }}" alt="{{ $ann->title }}"
                 style="width:100%;border-radius:10px;margin-bottom:10px;object-fit:cover;max-height:200px">
            @endif

            {{-- Konten --}}
            <div class="ann-content" style="font-size:13px;color:var(--text2);line-height:1.7">
                {!! $ann->content !!}
            </div>
        </div>
    </div>
    @endforeach
@endif
</div>

{{-- Info hasil filter --}}
<div id="filterInfo" style="font-size:12px;color:var(--muted);text-align:center;margin-top:8px;display:none"></div>

{{-- Empty state filter --}}
<div id="emptyFilter" style="display:none;text-align:center;padding:40px 20px;color:var(--muted)">
    <i class="fas fa-magnifying-glass" style="font-size:28px;margin-bottom:10px;display:block;opacity:.4"></i>
    <div style="font-size:13px">Tidak ada hasil untuk pencarian ini.</div>
</div>

<style>
.ann-content a          { color:var(--primary-d);text-decoration:underline }
.ann-content ul,
.ann-content ol         { padding-left:18px;margin:6px 0 }
.ann-content li         { margin-bottom:4px }
.ann-content h2         { font-size:14px;font-weight:700;margin:8px 0 4px }
.ann-content h3         { font-size:13px;font-weight:700;margin:6px 0 4px }
.ann-content blockquote { border-left:3px solid var(--primary);padding:6px 12px;margin:8px 0;background:var(--primary-l);border-radius:0 8px 8px 0;color:var(--text2) }
.ann-content strong     { font-weight:700 }

/* ── Custom dropdown (pengganti native <select>) ─────────────── */
.cdd{position:relative}
.cdd-trigger{
    width:100%;display:flex;align-items:center;justify-content:space-between;gap:6px;
    padding:7px 10px;border:1px solid var(--border);border-radius:var(--r);
    font-size:13px;font-family:inherit;color:var(--text);background:var(--bg);
    cursor:pointer;text-align:left;transition:border-color .14s;
}
.cdd-trigger:focus,.cdd-trigger.open{border-color:var(--accent,var(--primary));outline:none}
.cdd-trigger-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cdd-trigger i{flex-shrink:0;color:var(--muted);font-size:10px;transition:transform .15s}
.cdd-trigger.open i{transform:rotate(180deg)}
.cdd-panel{
    position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;
    background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg,10px);
    box-shadow:0 12px 32px rgba(0,0,0,.3);max-height:220px;overflow-y:auto;
    display:none;min-width:120px;
}
.cdd-panel.open{display:block}
.cdd-opt{
    padding:9px 12px;font-size:13px;color:var(--text);cursor:pointer;
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    border-bottom:1px solid var(--border);white-space:nowrap;
}
.cdd-opt:last-child{border-bottom:none}
.cdd-opt:hover,.cdd-opt.active{background:var(--bg)}
.cdd-opt.active{color:var(--primary-d,var(--accent));font-weight:600}
.cdd-opt i{font-size:10px;color:var(--primary-d,var(--accent));visibility:hidden}
.cdd-opt.active i{visibility:visible}
</style>

<script>
var allItems = document.querySelectorAll('.ann-item');
var page = 1;

// ── Custom dropdown (pengganti native <select>) ──────────────────
document.querySelectorAll('[data-cdd]').forEach(function (cdd) {
    const trigger = cdd.querySelector('[data-cdd-trigger]');
    const panel   = cdd.querySelector('[data-cdd-panel]');
    const label   = cdd.querySelector('[data-cdd-label]');
    const hidden  = cdd.querySelector('input[type="hidden"]');

    function closePanel() {
        panel.classList.remove('open');
        trigger.classList.remove('open');
    }
    function openPanel() {
        document.querySelectorAll('.cdd-panel.open').forEach(function (p) {
            if (p !== panel) p.classList.remove('open');
        });
        document.querySelectorAll('.cdd-trigger.open').forEach(function (t) {
            if (t !== trigger) t.classList.remove('open');
        });
        panel.classList.add('open');
        trigger.classList.add('open');
    }

    trigger.addEventListener('click', function (e) {
        e.stopPropagation();
        panel.classList.contains('open') ? closePanel() : openPanel();
    });

    panel.querySelectorAll('.cdd-opt').forEach(function (opt) {
        opt.addEventListener('click', function () {
            hidden.value = opt.dataset.value || '';
            label.textContent = opt.querySelector('span').textContent;

            panel.querySelectorAll('.cdd-opt').forEach(function (o) { o.classList.remove('active'); });
            opt.classList.add('active');

            closePanel();
            filterAnn();
        });
    });
});

document.addEventListener('click', function () {
    document.querySelectorAll('.cdd-panel.open').forEach(function (p) { p.classList.remove('open'); });
    document.querySelectorAll('.cdd-trigger.open').forEach(function (t) { t.classList.remove('open'); });
});

function filterAnn() {
    var q      = document.getElementById('searchInput').value.toLowerCase().trim();
    var type   = document.getElementById('typeFilter').value;
    var limit  = parseInt(document.getElementById('perPage').value);
    var shown  = 0;
    var total  = 0;

    allItems.forEach(function(el) {
        var titleMatch   = el.dataset.title.includes(q);
        var contentMatch = el.dataset.content.includes(q);
        var typeMatch    = !type || el.dataset.type === type;
        var match        = (titleMatch || contentMatch) && typeMatch;

        if (match) {
            total++;
            if (shown < limit) {
                el.style.display = '';
                shown++;
            } else {
                el.style.display = 'none';
            }
        } else {
            el.style.display = 'none';
        }
    });

    var info = document.getElementById('filterInfo');
    var empty = document.getElementById('emptyFilter');

    if (total === 0) {
        empty.style.display = 'block';
        info.style.display  = 'none';
    } else {
        empty.style.display = 'none';
        info.style.display  = 'block';
        info.textContent    = 'Menampilkan ' + Math.min(shown, total) + ' dari ' + total + ' informasi';
    }
}

// Jalankan awal
filterAnn();
</script>

@endsection