@extends('front.layouts.app')

@php
    use Illuminate\Support\Facades\Storage;
@endphp

@section('main')
    @include('front.sections.content-hero')

    <section class="asymmetric-right --boxed ">
        <div>
            <article class="events no-bg list-holder from-left">
                <div class="events" id="eventList">
                    @if($events->isEmpty())
                        <div>{{ $uiLabels['msg_no_event'] ?? 'Etkinlik bulunamadı.' }}</div>
                    @endif
                    @php
                        \Carbon\Carbon::setLocale('tr');
                        $eventsBase = app()->getLocale() === 'en' ? 'events' : 'etkinlikler';
                    @endphp
                    @foreach($events as $event)
                        <div class="event-item from-bottom"
                             data-category="{{ $event->category_id }}"
                             data-tags="{{ implode(',', $event->tags ?? []) }}">
                            <div class="event-image">
                                @php
                                    $fallbacks = [
                                        'img/event-1.png', 'img/event-2.png', 'img/event-3.png',
                                        'img/event-4.png', 'img/event-5.png', 'img/event-6.png', 'img/event-7.png',
                                    ];
                                    $randomImage = $fallbacks[array_rand($fallbacks)];
                                @endphp

                                @if($event->thumbnail && Storage::disk('public')->exists($event->thumbnail))
                                    <img src="{{ asset('storage/' . $event->thumbnail) }}"
                                         alt="{{ $event->title }}" style="max-width:160px;float:left;margin-right:20px;">
                                @else
                                    <img src="{{ asset($randomImage) }}"
                                         alt="{{ $event->title }}" style="max-width:160px;float:left;margin-right:20px;">
                                @endif
                            </div>
                            <div class="event-content">
                                <a href="{{ url($eventsBase) }}/{{ $event->slug }}">
                                    <h1 class="title">{{ $event->title }}</h1>
                                    <p class="date">
                                        {{ $event->date
                                            ? \Carbon\Carbon::parse($event->date)->translatedFormat('d F Y')
                                            : $event->created_at->translatedFormat('d F Y')
                                        }}
                                    </p>
                                    <p class="description">{{ $event->description }}</p>
                                </a>
                                <div class="tags">
                                    @if($event->tags)
                                        @foreach($event->tags as $tag)
                                            <span class="tag">{{ trim($tag) }}</span>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </article>

            <article class="filters from-right">
                <h1>{{ $uiLabels['categories'] ?? 'Kategoriler' }}</h1>
                <div class="category-list">
                    <ul id="categoryList">
                        <li>
                            <a href="#" data-category="" class="category-link active">
                                <h3>Tümü</h3>
                            </a>
                        </li>
                        @foreach($categories as $cat)
                            <li>
                                <a href="#" data-category="{{ $cat->id }}" class="category-link">
                                    <h3>{{ $cat->name }}</h3>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
                <hr/>
                <h1>{{ $uiLabels['tags'] ?? 'Etiketler' }}</h1>
                <div class="tag-list">
                    @foreach($allTags as $tag)
                        <label class="tag-label">
                            <input type="checkbox" class="tag-filter" value="{{ $tag }}">
                            {{ $tag }}
                        </label>
                    @endforeach
                </div>
            </article>
        </div>
    </section>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            let selectedCategory = '';
            const categoryLinks = document.querySelectorAll('.category-link');
            const tagFilters = Array.from(document.querySelectorAll('.tag-filter'));
            const eventItems = Array.from(document.querySelectorAll('.event-item'));

            function filterEvents() {
                const selectedTags = tagFilters.filter(cb => cb.checked).map(cb => cb.value);

                let shown = 0;
                eventItems.forEach(event => {
                    const eventCategory = event.getAttribute('data-category');
                    const eventTags = (event.getAttribute('data-tags') || '').split(',').map(t => t.trim()).filter(Boolean);

                    let matchCategory = !selectedCategory || eventCategory === selectedCategory;
                    let matchTags = selectedTags.length === 0 || selectedTags.every(tag => eventTags.includes(tag));

                    if (matchCategory && matchTags) {
                        event.style.display = '';
                        shown++;
                    } else {
                        event.style.display = 'none';
                    }
                });

                // "No events" message
                if (shown === 0) {
                    if (!document.getElementById('noEventsMsg')) {
                        const msg = document.createElement('div');
                        msg.id = 'noEventsMsg';
                        msg.innerText = @js($uiLabels['msg_no_event'] ?? 'Etkinlik bulunamadı.');
                        msg.style.margin = '2em 0';
                        document.getElementById('eventList').appendChild(msg);
                    }
                } else {
                    const msg = document.getElementById('noEventsMsg');
                    if (msg) msg.remove();
                }
            }

            categoryLinks.forEach(link => {
                link.addEventListener('click', function (e) {
                    e.preventDefault();
                    // Remove active class from all links, add to this
                    categoryLinks.forEach(l => l.classList.remove('active'));
                    this.classList.add('active');
                    selectedCategory = this.dataset.category || '';
                    filterEvents();
                });
            });
            tagFilters.forEach(cb => cb.addEventListener('change', filterEvents));
        });

        document.addEventListener('DOMContentLoaded', () => {
            const tagFilters = document.querySelectorAll('.tag-filter');

            tagFilters.forEach(checkbox => {
                if (checkbox.checked) {
                    checkbox.closest('.tag-label').classList.add('selected');
                }

                checkbox.addEventListener('change', function() {
                    const label = this.closest('.tag-label');
                    if (this.checked) {
                        label.classList.add('selected');
                    } else {
                        label.classList.remove('selected');
                    }
                });
            });
        });
    </script>

@endsection