@extends('layouts.app')

@section('title', 'Changelog - WoW Rebirth')

@php
    $breadcrumbs = [
        ['title' => 'Главная', 'url' => route('welcome')],
        ['title' => 'Журнал разработки', 'url' => route('changelog.index')],
    ];
@endphp

@section('content')
    @include('pages.changelogs.partials._content')
@endsection

@push('scripts')
<script>
    document.addEventListener('app:loaded', function() {
        $(function() {
            const $list = $('#changelog-list');
            const $contentItems = $('#changelog-content-area .changelog-content-item');

            function showContent(targetId) {
                $contentItems.hide();
                $list.find('a.list-group-item').removeClass('active');

                const $targetContent = $(targetId);
                const $targetLink = $list.find(`a[data-target="${targetId}"]`);

                if ($targetContent.length) {
                    $targetContent.show();
                }
                if ($targetLink.length) {
                    $targetLink.addClass('active');
                }
            }

            // Initial state: show the first item
            if ($list.find('a.list-group-item').length > 0) {
                const firstTargetId = $list.find('a.list-group-item').first().data('target');
                showContent(firstTargetId);
            }

            // Click handler
            $list.on('click', 'a.list-group-item', function(e) {
                e.preventDefault();
                const targetId = $(this).data('target');
                showContent(targetId);
            });
        });
    });
</script>
@endpush