@extends('admin.layout.app')
@section('content')
        <!-- Content -->
        <main class="grow pt-5" id="content" role="content">
        @include('admin.user.header')
            <!-- Container -->
            <div class="kt-container-fixed">
                <!-- begin: toolbar -->
                <div class="flex flex-wrap items-center gap-5 justify-between mb-7.5">
                    <h3 class="text-lg text-mono font-semibold">
                        Activity
                    </h3>
                </div>
                <!-- end: toolbar -->
                <div class="flex gap-5 lg:gap-7.5">
                    <div class="kt-card grow" id="activity_2024">
                        <div class="kt-card-header">
                            <h3 class="kt-card-title">
                                Activity
                            </h3>
                            <div class="flex items-center gap-2">
                                <label class="group text-2sm font-medium inline-flex items-center gap-2">
                    <span class="inline-flex items-center gap-2">
                        Auto refresh:
                        <span class="group-has-checked:hidden">Off</span>
                        <span class="hidden group-has-checked:inline">On</span>
                    </span>
                                    <input checked="" class="kt-switch kt-switch-sm" name="check" type="checkbox" value="1"/>
                                </label>
                            </div>
                        </div>

                        <div class="kt-card-content">
                            <div class="flex flex-col">
                                @foreach($activities as $activity)
                                    <div class="flex items-start relative mb-5">
                                        <div class="w-9 start-0 top-9 absolute bottom-0 rtl:-translate-x-1/2 translate-x-1/2 border-s border-s-input"></div>
                                        <div class="flex items-center justify-center shrink-0 rounded-full bg-accent/60 border border-input size-9 text-secondary-foreground">
                                            <i class="ki-filled {{ $activity['icon'] }} text-base"></i>
                                        </div>

                                        <div class="ps-2.5 mb-7 text-base grow">
                                            <div class="flex flex-col">
                                                <div class="text-sm text-foreground">
                                                    {{ $activity['action'] }}
                                                    <a class="text-sm font-medium kt-link" href="{{$activity['link'] ?? ''}}">
                                                        {{ $activity['description'] }}
                                                    </a>
                                                </div>

                                                @if(isset($activity['timestamp']))
                                                    <span class="text-xs text-secondary-foreground">
                                        {{ $activity['timestamp']->diffForHumans() }}
                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    @if($activity['image']) <!-- Check if image exists -->
                                    <div class="flex items-start relative">
                                        <div class="kt-card shadow-none">
                                            <div class="kt-card-content">
                                                <div class="grid gap-4">
                                                    <div class="flex flex-col md:flex-row md:items-center gap-5">
                                                        <div class="flex items-center gap-5 shrink-0">
                                                            <div class="border border-primary/10 rounded-lg max-h-20">
                                                                <div class="flex items-center justify-center border-b border-b-primary/10 bg-primary/10 rounded-t-lg">
                                                        <span class="text-sm text-primary font-medium p-2">
                                                            {{ $activity['timestamp']->format('M') }}
                                                        </span>
                                                                </div>
                                                                <div class="flex items-center justify-center size-12">
                                                        <span class="font-medium text-foreground text-xl tracking-tight">
                                                            {{ $activity['timestamp']->format('d') }}
                                                        </span>
                                                                </div>
                                                            </div>
                                                            <img alt="" class="rounded-lg max-h-20 max-w-full" src="{{ $activity['image'] }}">
                                                        </div>

                                                        <div class="flex flex-col gap-2">
                                                            <a class="text-xs text-primary leading-[14px] hover:text-primary mb-px" href="#">
                                                                {{ $activity['action'] }}
                                                            </a>
                                                            <a class="text-base font-medium hover:text-primary text-mono leading-4" href="{{$activity['link'] ?? ''}}">
                                                                {{ $activity['description'] }}
                                                            </a>
                                                            <p class="text-xs text-foreground leading-[22px]">
                                                                {{ $activity['additional_info'] ?? '' }}
                                                            </p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>

                        <div class="kt-card-footer justify-center">
                            <a class="kt-link kt-link-underlined kt-link-dashed" href="#">All-time Activity</a>
                        </div>
                    </div>

{{--                    <div class="flex flex-col gap-2.5" data-kt-tabs="true">--}}
{{--                        <!-- Tabs for Year -->--}}
{{--                        @foreach([2025, 2024, 2023, 2022, 2021, 2020, 2019, 2018, 2017] as $year)--}}
{{--                            <a class="kt-btn kt-btn-sm bg-transparent shadow-none text-secondary-foreground hover:text-primary kt-tab-active:bg-primary/10 kt-tab-active:text-primary"--}}
{{--                               data-kt-tab-toggle="#activity_{{ $year }}" href="#">--}}
{{--                                {{ $year }}--}}
{{--                            </a>--}}
{{--                        @endforeach--}}
{{--                    </div>--}}
                </div>

            </div>
            <!-- End of Container -->
        </main>
        <!-- End of Content -->

@endsection