<x-app-layout>
    <div class="mb-12">
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 mb-8">
            <div>
                <h1 class="text-4xl font-black tracking-tight dark:text-white">
                    <span class="bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">
                        Laporan Perolehan Telemarketing
                    </span>
                </h1>
                <p class="text-slate-500 dark:text-slate-400 text-sm mt-2">
                    <i data-lucide="phone" class="w-4 h-4 inline mr-2"></i>
                    Jumlah mahasiswa yang didaftarkan oleh Telemarketing
                </p>
            </div>
        </div>

        <!-- Filter - Filter berdasarkan kampus MAHASISWA -->
        <div class="bg-white dark:bg-[#1a1a2e] rounded-3xl border border-slate-200 dark:border-white/5 shadow-xl overflow-hidden mb-6">
            <div class="p-6 border-b border-slate-100 dark:border-white/5">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 rounded-lg bg-emerald-500/10 text-emerald-500 flex items-center justify-center">
                        <i data-lucide="filter" class="w-4 h-4"></i>
                    </div>
                    <div>
                        <h3 class="font-bold text-gray-900 dark:text-white">Filter Data</h3>
                        <p class="text-xs text-slate-500 dark:text-slate-400">Filter berdasarkan kampus mahasiswa dan tanggal</p>
                    </div>
                </div>
            </div>
            <div class="p-6">
                <form method="GET" class="space-y-4">
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Kampus Mahasiswa</label>
                            <select name="kampus_id" class="w-full px-4 py-2 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-emerald-500 focus:border-transparent">
                                <option value="">Semua Kampus</option>
                                @foreach($kampusList as $kampus)
                                    <option value="{{ $kampus->id }}" {{ request('kampus_id') == $kampus->id ? 'selected' : '' }}>
                                        {{ $kampus->nama }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Tanggal Awal</label>
                            <input type="date" name="tanggal_awal" value="{{ request('tanggal_awal') }}" class="w-full px-4 py-2 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-emerald-500 focus:border-transparent">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Tanggal Akhir</label>
                            <input type="date" name="tanggal_akhir" value="{{ request('tanggal_akhir') }}" class="w-full px-4 py-2 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-emerald-500 focus:border-transparent">
                        </div>
                        <div class="flex items-end gap-2">
                            <button type="submit" class="px-4 py-2 bg-gradient-to-r from-emerald-600 to-teal-700 text-white rounded-xl text-sm font-medium hover:shadow-lg hover:shadow-emerald-500/25 transition-all flex items-center gap-2">
                                <i data-lucide="search" class="w-4 h-4"></i>
                                Filter
                            </button>
                            <a href="{{ route('laporan.perolehan-telemarketing') }}" class="px-4 py-2 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-sm font-medium text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-700 transition-all flex items-center gap-2">
                                <i data-lucide="x" class="w-4 h-4"></i>
                                Reset
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Summary -->
        <div class="bg-gradient-to-r from-emerald-50 to-teal-50 dark:from-emerald-900/20 dark:to-teal-900/20 rounded-2xl border border-emerald-100 dark:border-emerald-800/30 p-6 mb-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-slate-600 dark:text-slate-400 text-sm">Total Perolehan Telemarketing</p>
                    <p class="text-3xl font-bold text-emerald-600 dark:text-emerald-400">{{ number_format($totalPerolehan) }} <span class="text-sm font-normal text-slate-500 dark:text-slate-400">Mahasiswa</span></p>
                </div>
                <div class="w-12 h-12 rounded-full bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center">
                    <i data-lucide="phone" class="w-6 h-6 text-emerald-600 dark:text-emerald-400"></i>
                </div>
            </div>
        </div>

        <!-- Tabel Perolehan -->
        <div class="bg-white dark:bg-[#1a1a2e] rounded-3xl border border-slate-200 dark:border-white/5 shadow-xl overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10">
                            <th class="text-left py-4 px-6 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">No</th>
                            <th class="text-left py-4 px-6 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Nama Telemarketing</th>
                            <th class="text-center py-4 px-6 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Jumlah Mahasiswa</th>
                            <th class="text-center py-4 px-6 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-white/5">
                        @forelse($perolehan as $index => $item)
                            <tr class="hover:bg-slate-50 dark:hover:bg-white/5 transition-colors">
                                <td class="py-4 px-6 text-sm text-slate-600 dark:text-slate-400">{{ $loop->iteration }}</td>
                                <td class="py-4 px-6">
                                    <div class="flex items-center gap-3">
                                        <div class="w-8 h-8 rounded-full bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center">
                                            <i data-lucide="phone" class="w-4 h-4 text-emerald-600 dark:text-emerald-400"></i>
                                        </div>
                                        <span class="font-medium text-gray-900 dark:text-white">{{ $item->user->name ?? '-' }}</span>
                                    </div>
                                </td>
                                <td class="py-4 px-6 text-center">
                                    <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400 font-bold text-sm">
                                        {{ number_format($item->total) }}
                                    </span>
                                </td>
                                <td class="py-4 px-6 text-center">
                                    <a href="{{ route('laporan.perolehan-telemarketing.detail', $item->user_id) }}?{{ http_build_query(request()->query()) }}"
                                        class="inline-flex items-center gap-1 text-emerald-600 dark:text-emerald-400 hover:text-emerald-800 dark:hover:text-emerald-300 text-sm font-medium transition-colors">
                                        <i data-lucide="eye" class="w-4 h-4"></i>
                                        Lihat Detail
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="py-12 px-6 text-center">
                                    <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-slate-100 dark:bg-gray-800 flex items-center justify-center">
                                        <i data-lucide="inbox" class="w-8 h-8 text-slate-400 dark:text-slate-500"></i>
                                    </div>
                                    <h4 class="text-lg font-medium text-gray-900 dark:text-white mb-2">Belum Ada Data</h4>
                                    <p class="text-sm text-slate-500 dark:text-slate-400">Belum ada data perolehan telemarketing</p>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</x-app-layout>
