@extends('layouts.superadmin')

@section('content')

    <!-- Top Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
        <div>
            <h1 class="text-3xl font-bold text-[#13124E] tracking-tight">Dashboard</h1>
            <p class="text-xs text-gray-400 mt-1">Pantau akses, aktivitas, dan perjalanan magang dalam satu ruang.</p>
        </div>
        <!-- Widget Tanggal -->
        <div class="flex items-center space-x-2.5 bg-white px-3.5 py-1.5 border border-gray-200 rounded-lg text-xs font-medium text-[#13124E] shadow-2xs self-start sm:self-auto">
            <span>{{ \Carbon\Carbon::now()->translatedFormat('d F Y') }}</span>
            <i class="fa-regular fa-calendar text-[#13124E] text-xs"></i>
        </div>
    </div>

    <!-- Hero / Welcome Banner -->
    <div class="bg-[#0e0947] text-white rounded-2xl p-6 sm:p-7 mb-6 shadow-sm relative overflow-hidden">
        <!-- Tag Semester -->
        <div class="flex items-center gap-2 text-[10px] uppercase font-bold text-white tracking-wider mb-2.5">
            <span class="w-1.5 h-1.5 rounded-full bg-white"></span>
            <span>PROGRAM MAGANG &middot; SEMESTER {{ now()->month >= 7 ? 'GANJIL' : 'GENAP' }} {{ now()->format('Y') }}/{{ now()->addYear()->format('Y') }}</span>
        </div>

        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
            <div>
                <h2 class="text-2xl font-bold text-white mb-1.5">
                    Selamat {{ $greeting }}, {{ Auth::user()?->name ?? 'Admin' }}.
                </h2>
                <p class="text-xs text-gray-300">Pantau aktivitas dan perkembangan internship kamu di satu tempat.</p>
            </div>
        </div>
    </div>

    @php
        $pendingApplicationsCount = \App\Models\InternApplication::where('status', \App\Enums\ApplicationStatus::PENDING->value)->count();
    @endphp
    @if ($pendingApplicationsCount > 0)
        <!-- Notifikasi Pendaftaran Calon Intern Menunggu Verifikasi -->
        <div class="mb-6 p-4 rounded-2xl bg-amber-50 border border-amber-200 text-amber-900 flex flex-col sm:flex-row sm:items-center justify-between gap-3 shadow-xs">
            <div class="flex items-center gap-3">
                <div class="w-9 h-9 rounded-xl bg-amber-100 text-amber-700 flex items-center justify-center text-sm font-bold">
                    <i class="fa-solid fa-user-plus"></i>
                </div>
                <div>
                    <h4 class="text-xs font-bold text-amber-900">Ada {{ $pendingApplicationsCount }} Pendaftaran Calon Intern Menunggu Verifikasi</h4>
                    <p class="text-[11px] text-amber-700">Tinjau berkas pendaftaran calon peserta magang untuk menyetujui atau menolak akun.</p>
                </div>
            </div>
            <a href="{{ route('superadmin.pendaftaran_intern', ['status' => 'pending']) }}"
                class="self-start sm:self-auto px-3.5 py-2 rounded-xl bg-amber-600 hover:bg-amber-700 text-white text-xs font-semibold flex items-center gap-1.5 transition shadow-xs">
                <span>Tinjau Sekarang</span>
                <i class="fa-solid fa-arrow-right text-[10px]"></i>
            </a>
        </div>
    @endif

    <!-- Livewire Lazy Loaded Stats Overview -->
    <livewire:dashboard.stats-overview lazy />

    <!-- Recent Activity Section -->
    <div class="bg-white rounded-2xl border border-gray-100 shadow-2xs overflow-hidden mb-6">
        <!-- Title & Subtitle -->
        <div class="p-6 pb-4">
            <h3 class="text-base font-bold text-gray-900">Recent Activity</h3>
            <p class="text-xs text-gray-400 mt-0.5">Jejak aktivitas pengguna di seluruh workspace</p>
        </div>

        <!-- Activity List -->
        <div class="divide-y divide-gray-100 text-xs">
            @forelse ($activities as $activity)
                <div class="px-6 py-4 flex flex-col sm:flex-row sm:items-center justify-between gap-2 hover:bg-gray-50/60 transition">
                    <div>
                        <div class="font-bold text-gray-900 text-sm">
                            {{ $activity->user_name }} <span class="text-gray-500 font-normal text-xs">({{ $activity->role_name }})</span>
                        </div>
                        <div class="text-xs text-gray-400 mt-1">
                            {{ $activity->description }}
                        </div>
                    </div>
                    <div class="text-[11px] text-gray-400 shrink-0">
                        {{ $activity->created_at }}
                    </div>
                </div>
            @empty
                <div class="px-6 py-8 text-center text-gray-400 text-xs">
                    Belum ada aktivitas pengguna yang tercatat.
                </div>
            @endforelse
        </div>
        <!-- Pagination Footer -->
        <div class="px-6 py-4 border-t border-gray-100 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-gray-400">
            <div>
                Menampilkan {{ $activities->firstItem() ?? 0 }}–{{ $activities->lastItem() ?? 0 }} dari {{ $activities->total() }} aktivitas
            </div>

            @if ($activities->hasPages())
                <div class="flex items-center space-x-1.5">
                    @if ($activities->onFirstPage())
                        <span class="p-1 px-2 text-gray-300 cursor-not-allowed">
                            <i class="fa-solid fa-chevron-left text-[10px]"></i>
                        </span>
                    @else
                        <a href="{{ $activities->previousPageUrl() }}" class="p-1 px-2 text-gray-400 hover:text-gray-700 transition">
                            <i class="fa-solid fa-chevron-left text-[10px]"></i>
                        </a>
                    @endif

                    @if ($activities->lastPage() <= 7)
                        @foreach (range(1, $activities->lastPage()) as $page)
                            @if ($page == $activities->currentPage())
                                <span class="w-7 h-7 rounded-lg bg-[#13124E] text-white font-semibold flex items-center justify-center text-xs shadow-xs">
                                    {{ $page }}
                                </span>
                            @else
                                <a href="{{ $activities->url($page) }}" class="w-7 h-7 rounded-lg hover:bg-gray-100 text-gray-600 flex items-center justify-center text-xs transition">
                                    {{ $page }}
                                </a>
                            @endif
                        @endforeach
                    @else
                        @php
                            $currentPage = $activities->currentPage();
                            $lastPage = $activities->lastPage();
                        @endphp

                        {{-- Halaman 1 --}}
                        @if ($currentPage == 1)
                            <span class="w-7 h-7 rounded-lg bg-[#13124E] text-white font-semibold flex items-center justify-center text-xs shadow-xs">1</span>
                        @else
                            <a href="{{ $activities->url(1) }}" class="w-7 h-7 rounded-lg hover:bg-gray-100 text-gray-600 flex items-center justify-center text-xs transition">1</a>
                        @endif

                        @if ($currentPage > 3)
                            <span class="px-1 text-gray-400">...</span>
                        @endif

                        @foreach (range(max(2, $currentPage - 1), min($lastPage - 1, $currentPage + 1)) as $page)
                            @if ($page == $currentPage)
                                <span class="w-7 h-7 rounded-lg bg-[#13124E] text-white font-semibold flex items-center justify-center text-xs shadow-xs">
                                    {{ $page }}
                                </span>
                            @else
                                <a href="{{ $activities->url($page) }}" class="w-7 h-7 rounded-lg hover:bg-gray-100 text-gray-600 flex items-center justify-center text-xs transition">
                                    {{ $page }}
                                </a>
                            @endif
                        @endforeach

                        @if ($currentPage < $lastPage - 2)
                            <span class="px-1 text-gray-400">...</span>
                        @endif

                        {{-- Halaman Terakhir --}}
                        @if ($currentPage == $lastPage)
                            <span class="w-7 h-7 rounded-lg bg-[#13124E] text-white font-semibold flex items-center justify-center text-xs shadow-xs">{{ $lastPage }}</span>
                        @else
                            <a href="{{ $activities->url($lastPage) }}" class="w-7 h-7 rounded-lg hover:bg-gray-100 text-gray-600 flex items-center justify-center text-xs transition">{{ $lastPage }}</a>
                        @endif
                    @endif

                    @if ($activities->hasMorePages())
                        <a href="{{ $activities->nextPageUrl() }}" class="p-1 px-2 text-gray-400 hover:text-gray-700 transition">
                            <i class="fa-solid fa-chevron-right text-[10px]"></i>
                        </a>
                    @else
                        <span class="p-1 px-2 text-gray-300 cursor-not-allowed">
                            <i class="fa-solid fa-chevron-right text-[10px]"></i>
                        </span>
                    @endif
                </div>
            @else
                <div class="flex items-center space-x-1.5">
                    <span class="p-1 text-gray-300 cursor-not-allowed">
                        <i class="fa-solid fa-chevron-left text-[11px]"></i>
                    </span>
                    <span class="w-6 h-6 rounded bg-[#13124E] text-white font-medium flex items-center justify-center text-xs shadow-xs">
                        1
                    </span>
                    <span class="p-1 text-gray-300 cursor-not-allowed">
                        <i class="fa-solid fa-chevron-right text-[11px]"></i>
                    </span>
                </div>
            @endif
        </div>
    </div>
@endsection