@extends('simaju.layouts.main')
@section('title', 'Kokurikuler')
@section('page-title', 'Kokurikuler')
@section('page-subtitle', 'Kelola kegiatan kokurikuler sekolah')

@section('content')
<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
    <div class="bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-xl shadow-lg p-6 text-white transform hover:scale-105 transition-all duration-300">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-emerald-100 text-sm font-medium">Total Kokurikuler</p>
                <h3 class="text-3xl font-bold mt-2">{{ $kokurikulers->total() }}</h3>
            </div>
            <div class="bg-white bg-opacity-20 rounded-full p-4">
                <i class="fas fa-book-open text-2xl"></i>
            </div>
        </div>
    </div>

    <div class="bg-gradient-to-br from-green-500 to-green-600 rounded-xl shadow-lg p-6 text-white transform hover:scale-105 transition-all duration-300">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-green-100 text-sm font-medium">Aktif</p>
                <h3 class="text-3xl font-bold mt-2">{{ \App\Models\Kokurikuler::where('status', 'aktif')->count() }}</h3>
            </div>
            <div class="bg-white bg-opacity-20 rounded-full p-4">
                <i class="fas fa-check-circle text-2xl"></i>
            </div>
        </div>
    </div>

    <div class="bg-gradient-to-br from-teal-500 to-teal-600 rounded-xl shadow-lg p-6 text-white transform hover:scale-105 transition-all duration-300">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-teal-100 text-sm font-medium">Pembina</p>
                <h3 class="text-3xl font-bold mt-2">{{ \App\Models\Kokurikuler::distinct('pembina_id')->count('pembina_id') }}</h3>
            </div>
            <div class="bg-white bg-opacity-20 rounded-full p-4">
                <i class="fas fa-chalkboard-teacher text-2xl"></i>
            </div>
        </div>
    </div>

    <div class="bg-gradient-to-br from-cyan-500 to-cyan-600 rounded-xl shadow-lg p-6 text-white transform hover:scale-105 transition-all duration-300">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-cyan-100 text-sm font-medium">Total Peserta</p>
                <h3 class="text-3xl font-bold mt-2">{{ \App\Models\Kokurikuler::withCount('siswas')->get()->sum('siswas_count') }}</h3>
            </div>
            <div class="bg-white bg-opacity-20 rounded-full p-4">
                <i class="fas fa-users text-2xl"></i>
            </div>
        </div>
    </div>
</div>

<!-- Main Card -->
<div class="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
    <!-- Header with Gradient -->
    <div class="bg-gradient-to-r from-emerald-600 to-teal-600 p-6">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div class="text-white">
                <h2 class="text-2xl font-heading font-bold flex items-center gap-3">
                    <div class="bg-white bg-opacity-20 rounded-lg p-2">
                        <i class="fas fa-book-open text-xl"></i>
                    </div>
                    Daftar Kokurikuler
                </h2>
                <p class="text-emerald-100 text-sm mt-2">Manajemen kegiatan kokurikuler dan monitoring peserta</p>
            </div>
            <a href="{{ route('simaju.kokurikuler.create') }}" class="inline-flex items-center gap-2 px-6 py-3 bg-white text-emerald-600 rounded-xl hover:bg-emerald-50 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1 font-medium">
                <i class="fas fa-plus-circle"></i>
                <span>Tambah Kokurikuler</span>
            </a>
        </div>

        <!-- Filters -->
        <form method="GET" class="mt-6 grid grid-cols-1 md:grid-cols-4 gap-3">
            <div class="relative">
                <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                    <i class="fas fa-search text-gray-400"></i>
                </div>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari kokurikuler..." class="w-full pl-12 pr-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-emerald-400 focus:border-transparent bg-white shadow-sm">
            </div>
            
            <div class="relative">
                <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                    <i class="fas fa-tag text-gray-400"></i>
                </div>
                <select name="jenis" class="w-full pl-12 pr-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-emerald-400 focus:border-transparent bg-white shadow-sm appearance-none">
                    <option value="">Semua Jenis</option>
                    <option value="wajib" {{ request('jenis') == 'wajib' ? 'selected' : '' }}>Wajib</option>
                    <option value="pilihan" {{ request('jenis') == 'pilihan' ? 'selected' : '' }}>Pilihan</option>
                </select>
            </div>

            <div class="relative">
                <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                    <i class="fas fa-clipboard-check text-gray-400"></i>
                </div>
                <select name="status" class="w-full pl-12 pr-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-emerald-400 focus:border-transparent bg-white shadow-sm appearance-none">
                    <option value="">Semua Status</option>
                    <option value="aktif" {{ request('status') == 'aktif' ? 'selected' : '' }}>Aktif</option>
                    <option value="nonaktif" {{ request('status') == 'nonaktif' ? 'selected' : '' }}>Non-Aktif</option>
                </select>
            </div>

            <button type="submit" class="px-6 py-3 bg-white text-emerald-600 rounded-xl hover:bg-emerald-50 transition-all duration-300 shadow-sm hover:shadow-md font-medium">
                <i class="fas fa-search mr-2"></i>Cari
            </button>
        </form>
    </div>

    <!-- Table -->
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead class="bg-gradient-to-r from-gray-50 to-gray-100 border-b-2 border-gray-200">
                <tr>
                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Nama</th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Jenis</th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Pembina</th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Jadwal</th>
                    <th class="px-6 py-4 text-center text-xs font-bold text-gray-700 uppercase tracking-wider">Peserta</th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Status</th>
                    <th class="px-6 py-4 text-center text-xs font-bold text-gray-700 uppercase tracking-wider">Aksi</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-100">
                @forelse($kokurikulers as $kokur)
                <tr class="hover:bg-gradient-to-r hover:from-emerald-50 hover:to-transparent transition-all duration-200 group">
                    <td class="px-6 py-4">
                        <div class="flex items-center gap-3">
                            <div class="w-12 h-12 bg-gradient-to-br from-emerald-500 to-teal-500 rounded-xl flex items-center justify-center text-white shadow-lg group-hover:scale-110 transition-transform">
                                <i class="fas fa-book-open text-lg"></i>
                            </div>
                            <div>
                                <p class="text-sm font-bold text-gray-900">{{ $kokur->nama }}</p>
                                @if($kokur->tempat)
                                <p class="text-xs text-gray-500 flex items-center gap-1 mt-1">
                                    <i class="fas fa-map-marker-alt text-xs"></i>
                                    {{ $kokur->tempat }}
                                </p>
                                @endif
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        @php
                            $jenisColors = [
                                'wajib' => 'bg-red-100 text-red-800',
                                'pilihan' => 'bg-blue-100 text-blue-800',
                            ];
                            $colorClass = $jenisColors[$kokur->jenis] ?? 'bg-gray-100 text-gray-800';
                        @endphp
                        <span class="inline-flex items-center gap-1 px-3 py-1 text-xs font-semibold rounded-full {{ $colorClass }}">
                            <i class="fas fa-tag text-xs"></i>
                            {{ ucfirst($kokur->jenis) }}
                        </span>
                    </td>
                    <td class="px-6 py-4">
                        @if($kokur->pembina)
                        <div class="flex items-center gap-2">
                            <div class="w-8 h-8 bg-gradient-to-br from-emerald-500 to-teal-500 rounded-full flex items-center justify-center text-white text-xs font-bold">
                                {{ substr($kokur->pembina->nama, 0, 1) }}
                            </div>
                            <div>
                                <p class="text-sm font-semibold text-gray-900">{{ $kokur->pembina->nama }}</p>
                                @if($kokur->pembina->nip)
                                <p class="text-xs text-gray-500">{{ $kokur->pembina->nip }}</p>
                                @endif
                            </div>
                        </div>
                        @else
                        <span class="text-sm text-gray-400">-</span>
                        @endif
                    </td>
                    <td class="px-6 py-4">
                        @if($kokur->hari)
                        <div class="flex items-center gap-2">
                            <div class="bg-green-100 text-green-700 px-2 py-1 rounded-lg">
                                <i class="fas fa-calendar-day text-xs"></i>
                            </div>
                            <div>
                                <p class="text-sm font-semibold text-gray-900">{{ $kokur->hari }}</p>
                                @if($kokur->jam_mulai && $kokur->jam_selesai)
                                <p class="text-xs text-gray-500">{{ substr($kokur->jam_mulai, 0, 5) }} - {{ substr($kokur->jam_selesai, 0, 5) }}</p>
                                @endif
                            </div>
                        </div>
                        @else
                        <span class="text-sm text-gray-400">-</span>
                        @endif
                    </td>
                    <td class="px-6 py-4 text-center">
                        <div class="inline-flex items-center justify-center w-12 h-12 bg-gradient-to-br from-teal-500 to-cyan-500 text-white rounded-xl font-bold text-lg shadow-md">
                            {{ $kokur->siswas_count ?? 0 }}
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        @if($kokur->status == 'aktif')
                        <span class="inline-flex items-center gap-2 px-3 py-1.5 text-xs font-bold rounded-lg text-white bg-gradient-to-r from-green-500 to-green-600 shadow-md">
                            <i class="fas fa-check-circle"></i>
                            Aktif
                        </span>
                        @else
                        <span class="inline-flex items-center gap-2 px-3 py-1.5 text-xs font-bold rounded-lg text-white bg-gradient-to-r from-gray-500 to-gray-600 shadow-md">
                            <i class="fas fa-times-circle"></i>
                            Non-Aktif
                        </span>
                        @endif
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-center">
                        <div class="flex items-center justify-center gap-2">
                            <a href="{{ route('simaju.kokurikuler.show', $kokur) }}" class="inline-flex items-center justify-center w-9 h-9 bg-gradient-to-br from-emerald-500 to-teal-500 text-white rounded-lg hover:shadow-lg transition-all transform hover:scale-110" title="Detail">
                                <i class="fas fa-eye text-sm"></i>
                            </a>
                            <a href="{{ route('simaju.kokurikuler.edit', $kokur) }}" class="inline-flex items-center justify-center w-9 h-9 bg-gradient-to-br from-amber-500 to-amber-600 text-white rounded-lg hover:shadow-lg transition-all transform hover:scale-110" title="Edit">
                                <i class="fas fa-edit text-sm"></i>
                            </a>
                            <form action="{{ route('simaju.kokurikuler.destroy', $kokur) }}" method="POST" class="inline" onsubmit="return confirm('Yakin ingin menghapus kokurikuler ini?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="inline-flex items-center justify-center w-9 h-9 bg-gradient-to-br from-red-500 to-red-600 text-white rounded-lg hover:shadow-lg transition-all transform hover:scale-110" title="Hapus">
                                    <i class="fas fa-trash text-sm"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" class="px-6 py-16 text-center">
                        <div class="flex flex-col items-center justify-center">
                            <div class="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mb-4">
                                <i class="fas fa-book-open text-4xl text-gray-400"></i>
                            </div>
                            <h3 class="text-lg font-semibold text-gray-900 mb-2">Belum Ada Kokurikuler</h3>
                            <p class="text-gray-500 mb-6">Mulai tambahkan kokurikuler untuk sekolah Anda</p>
                            <a href="{{ route('simaju.kokurikuler.create') }}" class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-emerald-600 to-teal-600 text-white rounded-xl hover:from-emerald-700 hover:to-teal-700 transition-all shadow-lg transform hover:-translate-y-1 font-medium">
                                <i class="fas fa-plus-circle"></i>
                                <span>Tambah Kokurikuler</span>
                            </a>
                        </div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    @if($kokurikulers->hasPages())
    <div class="bg-gray-50 px-6 py-4 border-t border-gray-200">
        {{ $kokurikulers->links() }}
    </div>
    @endif
</div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

.font-heading {
    font-family: 'Inter', sans-serif;
}
</style>
@endsection