@extends('layouts.dashboardAdmin')

@section('content')

<!-- Tambahkan ini di bagian atas jika belum pakai Heroicons -->
<script src="https://unpkg.com/heroicons@2.0.13/24/outline/index.js"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<script>
    lucide.createIcons();
</script>
<div class="container mx-auto px-6 py-6">
    <div class="flex flex-wrap justify-center gap-4 mb-6">
        
        <!-- Total Laporan -->
        <div class="bg-gradient-to-r from-blue-600 to-blue-400 p-6 rounded-xl shadow-md w-64 text-center">
            <div class="flex justify-center mb-2">
                <i data-lucide="file-text" class="w-8 h-8 text-white"></i>
            </div>
            <h2 class="text-lg font-semibold text-white">Total Laporan</h2>
            <p class="text-3xl font-bold text-white mt-2">{{ $totalLaporan }}</p>
        </div>

        <!-- Lokasi Dikunjungi -->
        <div class="bg-gradient-to-r from-green-600 to-green-400 p-6 rounded-xl shadow-md w-64 text-center">
            <div class="flex justify-center mb-2">
                <i data-lucide="map-pin" class="w-8 h-8 text-white"></i>
            </div>
            <h2 class="text-lg font-semibold text-white">Total Lokasi Dikunjungi</h2>
            <p class="text-3xl font-bold text-white mt-2">{{ $totalLokasi }}</p>
        </div>

        <!-- Total Pendamping -->
        <div class="bg-gradient-to-r from-indigo-600 to-indigo-400 p-6 rounded-xl shadow-md w-64 text-center">
            <div class="flex justify-center mb-2">
                <i data-lucide="users" class="w-8 h-8 text-white"></i>
            </div>
            <h2 class="text-lg font-semibold text-white">Total Pendamping</h2>
            <p class="text-3xl font-bold text-white mt-2">{{ $totalPendamping }}</p>
        </div>
    </div>
</div>

    <form action="{{ route('admin.laporan.grafik') }}" method="GET" class="mb-6">
        <div class="flex items-center space-x-2">
          <!-- Filter Pendamping -->
        <div class="flex items-center space-x-2">
            <label for="pendamping" class="font-semibold text-gray-800">Pendamping</label>
           <select name="pendamping" id="pendamping" class="p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
    <option value="">Semua Pendamping</option>
    @foreach ($users as $pendamping)
        <option value="{{ $pendamping->id }}" {{ $pendamping->id == $pendampingId ? 'selected' : '' }}>{{ $pendamping->name }}</option>
    @endforeach
</select>

        </div>

            <!-- Filter Bulan -->
            <div class="flex items-center space-x-2">
                <label for="bulan" class="font-semibold text-gray-800">Bulan</label>
                <select name="bulan" id="bulan" class="p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="">Semua Bulan</option>
                    @foreach ($bulanList as $key => $namaBulan)
                        <option value="{{ $key }}" {{ $key == $bulan ? 'selected' : '' }}>{{ $namaBulan }}</option>
                    @endforeach
                </select>
            </div>
    
            <!-- Filter Tahun -->
            <div class="flex items-center space-x-2">
                <label for="tahun" class="font-semibold text-gray-800">Tahun</label>
                <select name="tahun" id="tahun" class="p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    @foreach ($semuaTahun as $thn)
                        <option value="{{ $thn }}" {{ $thn == $tahun ? 'selected' : '' }}>{{ $thn }}</option>
                    @endforeach
                </select>
            </div>
    
            <!-- Tombol Filter -->
            <div>
                <button type="submit" class="bg-blue-900 text-white px-5 py-2 rounded-full hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    Cari
                </button>
            </div>
        </div>
    </form>
    
    
    

    <!-- Tabel Laporan -->
    <div class="overflow-x-auto rounded-xl shadow-lg">
        <table class="min-w-full bg-white rounded-xl overflow-hidden">
            <thead class="bg-blue-900 text-white uppercase text-sm tracking-wider">
                <tr>
                    <th class="py-4 px-6 text-left">Nama Pendamping</th>
                    <th class="py-4 px-6 text-left">Lokasi</th>
                    <th class="py-4 px-6 text-left">Bulan</th>
                    <th class="py-4 px-6 text-left">Jumlah Laporan</th>
                </tr>
            </thead>
            <tbody class="text-blue-900 text-sm divide-y divide-gray-200">
                @foreach ($laporan as $item)
                <tr class="hover:bg-blue-50 transition duration-150">
                    <td class="py-4 px-6 font-medium">{{ $item->nama_pendamping }}</td>
                    <td class="py-4 px-6">{{ $item->lokasi }}</td>
                    <td class="py-4 px-6">{{ $item->bulan }}</td>
                    <td class="py-4 px-6">{{ $item->jumlah_laporan }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection