@extends('frontend::layouts.app')

@section('title', 'Activity events - Activities - WBU - World Buddhist University')

@php
$activities = [
    [
        'id' => '1',
        'title' => 'The 12th Meeting of the World Buddhist University Council',
        'date' => '19th - 20th October 2022',
        'tag' => 'Activity events',
        'tag_id' => 'events',
        'image' => '/images/activity/1.jpg',
    ],
    [
        'id' => '2',
        'title' => 'The 11th Meeting of the World Buddhist University Council',
        'date' => '6th November 2018',
        'tag' => 'Activity events',
        'tag_id' => 'events',
        'image' => '/images/activity/2.jpg',
    ],
    [
        'id' => '4',
        'title' => 'The International Conference on Animal Rights, Values and Preservation : Buddhist Ethicd and Altru8stic Practices. Department of Philosophy,Hokkaido Un8versity,Sapporo, Japan ',
        'date' => '26-Sun.29 March 2015',
        'tag' => 'Activity events',
        'tag_id' => 'events',
        'image' => '/images/activity/4.jpg',
    ],
    [
        'id' => '11',
        'title' => 'WBU HELD TRAINING COURSE ON THERAVADA BUDDHIST MEDITATION',
        'date' => 'April 1, 2026',
        'tag' => 'Activity events',
        'tag_id' => 'events',
        'image' => '/images/activity/11.jpg',
    ],
    [
        'id' => '16',
        'title' => 'Vesak Day Cultural Celebration',
        'date' => 'May 15, 2026',
        'tag' => 'Activity events',
        'tag_id' => 'events',
        'image' => '/images/event-vesak.jpg',
    ],
    [
        'id' => '18',
        'title' => 'Compassion in Action: Community Service Program',
        'date' => 'June 1, 2026',
        'tag' => 'Activity events',
        'tag_id' => 'events',
        'image' => '/images/activity-peace.jpg',
    ],
    [
        'id' => '20',
        'title' => 'International Buddhist Film Festival',
        'date' => 'June 20, 2026',
        'tag' => 'Activity events',
        'tag_id' => 'events',
        'image' => '/images/activity-festival.jpg',
    ],
];

$itemsPerPage = 12;
$currentPage = (int) request()->query('page', 1);
$totalPages = max(1, (int) ceil(count($activities) / $itemsPerPage));
$currentPage = max(1, min($currentPage, $totalPages));
$startIndex = ($currentPage - 1) * $itemsPerPage;
$paginatedActivities = array_slice($activities, $startIndex, $itemsPerPage);
@endphp

@section('content')
    <section id="page-title" class="gradient-green">
        <div class="container">
            <div class="page-title">
                <h1>Activity events</h1>
            </div>
            <div class="breadcrumb">
                <ul>
                    <li><a href="{{ route('frontend.index') }}">Home</a></li>
                    <li><a href="{{ url('/activities') }}">Activities</a></li>
                    <li class="active"><a href="#">Activity events</a></li>
                </ul>
            </div>
        </div>
    </section>

    <!-- Activities Section -->
    <section class="py-16 md:py-24 bg-background" style="background: url('{{ asset('assets/frontend/images/bg-dots.jpg') }}') center center; background-size: contain;">
        <div class="mx-auto max-w-7xl px-6 lg:px-8">
            <!-- Activities Grid -->
            <div class="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                @forelse($paginatedActivities as $activity)
                    @include('frontend::components.activity-card', [
                        'id' => $activity['id'],
                        'title' => $activity['title'],
                        'date' => $activity['date'],
                        'tag' => $activity['tag'],
                        'image' => $activity['image'],
                    ])
                @empty
                    <div class="sm:col-span-2 lg:col-span-3 xl:col-span-4">
                        <div class="text-center py-12">
                            <p class="text-muted-foreground">
                                No activity events found.
                            </p>
                        </div>
                    </div>
                @endforelse
            </div>

            <!-- Pagination -->
            @if($totalPages > 1)
                <div class="flex justify-center items-center gap-2 mt-12">
                    @php
                        $prevUrl = url('/activities/activity-events') . '?' . http_build_query([
                            'page' => max(1, $currentPage - 1),
                        ]);
                        $nextUrl = url('/activities/activity-events') . '?' . http_build_query([
                            'page' => min($totalPages, $currentPage + 1),
                        ]);
                    @endphp

                    <!-- Previous -->
                    <a href="{{ $currentPage === 1 ? '#' : $prevUrl }}"
                       class="inline-flex items-center justify-center rounded-md text-sm font-medium px-4 py-2 border border-border bg-background hover:bg-accent hover:text-accent-foreground transition-colors {{ $currentPage === 1 ? 'opacity-50 pointer-events-none' : '' }}">
                        Previous
                    </a>

                    <!-- Page Numbers -->
                    @for($page = 1; $page <= $totalPages; $page++)
                        @php
                            $pageUrl = url('/activities/activity-events') . '?' . http_build_query([
                                'page' => $page,
                            ]);
                        @endphp
                        <a href="{{ $pageUrl }}"
                           class="min-w-[40px] inline-flex items-center justify-center rounded-md text-sm font-medium px-3 py-2 border transition-colors
                                  {{ $currentPage === $page ? 'bg-primary text-primary-foreground border-primary' : 'border-border bg-background text-foreground hover:bg-accent hover:text-accent-foreground' }}">
                            {{ $page }}
                        </a>
                    @endfor

                    <!-- Next -->
                    <a href="{{ $currentPage === $totalPages ? '#' : $nextUrl }}"
                       class="inline-flex items-center justify-center rounded-md text-sm font-medium px-4 py-2 border border-border bg-background hover:bg-accent hover:text-accent-foreground transition-colors {{ $currentPage === $totalPages ? 'opacity-50 pointer-events-none' : '' }}">
                        Next
                    </a>
                </div>
            @endif
        </div>
    </section>
@endsection