@extends('simaju.layouts.main')
@section('title', 'Data Nilai')
@section('page-title', 'Manajemen Nilai Siswa')

@push('css')
<style>
    .stat-card {
        transition: all 0.3s ease;
    }
    .stat-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px rgba(0,0,0,0.15);
    }
    
    /* Stat Card Colors */
    .stat-card-blue {
        background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
    }
    .stat-card-green {
        background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
    }
    .stat-card-purple {
        background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
    }
    .stat-card-orange {
        background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    }
    .badge-tipe {
        display: inline-flex;
        align-items: center;
        padding: 4px 12px;
        border-radius: 9999px;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
    }
    .badge-uh { background: #dbeafe; color: #1e40af; }
    .badge-uts { background: #fef3c7; color: #92400e; }
    .badge-uas { background: #fee2e2; color: #991b1b; }
    .badge-praktek { background: #d1fae5; color: #065f46; }
    .badge-proyek { background: #e9d5ff; color: #6b21a8; }
    .badge-tugas { background: #fce7f3; color: #9f1239; }
    
    .nilai-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        border-radius: 12px;
        font-size: 20px;
        font-weight: 700;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    .nilai-excellent { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; }
    .nilai-good { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; }
    .nilai-average { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; }
    .nilai-poor { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; }
    
    .filter-card {
        backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.95);
    }
    
    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .animate-slide-in {
        animation: slideIn 0.5s ease-out;
    }
</style>
@endpush

@section('content')
<div class="space-y-6">
    <!-- Statistics Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 animate-slide-in">
        <div class="stat-card stat-card-blue rounded-2xl p-6 shadow-lg">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-black text-sm font-bold mb-2 opacity-90">Total Nilai</p>
                    <h3 class="text-5xl font-extrabold text-black drop-shadow-lg">{{ $nilais->total() }}</h3>
                </div>
                <div class="bg-blue-600 bg-opacity-25 p-4 rounded-2xl backdrop-blur-sm">
                    <i class="fas fa-clipboard-list text-4xl text-black drop-shadow-md"></i>
                </div>
            </div>
        </div>

        <div class="stat-card stat-card-blue rounded-2xl p-6 shadow-lg">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-black text-sm font-bold mb-2 opacity-90">Rata-rata</p>
                    <h3 class="text-5xl font-extrabold text-black drop-shadow-lg">{{ number_format($nilais->avg('nilai') ?? 0, 1) }}</h3>
                </div>
                <div class="bg-blue-600 bg-opacity-25 p-4 rounded-2xl backdrop-blur-sm">
                    <i class="fas fa-chart-line text-4xl text-black drop-shadow-md"></i>
                </div>
            </div>
        </div>

        <div class="stat-card stat-card-blue rounded-2xl p-6 shadow-lg">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-black text-sm font-bold mb-2 opacity-90">Nilai Tertinggi</p>
                    <h3 class="text-5xl font-extrabold text-black drop-shadow-lg">{{ $nilais->max('nilai') ?? 0 }}</h3>
                </div>
                <div class="bg-blue-600 bg-opacity-25 p-4 rounded-2xl backdrop-blur-sm">
                    <i class="fas fa-trophy text-4xl text-black drop-shadow-md"></i>
                </div>
            </div>
        </div>

        <div class="stat-card stat-card-orange rounded-2xl p-6 shadow-lg">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-black text-sm font-bold mb-2 opacity-90">Nilai Terendah</p>
                    <h3 class="text-5xl font-extrabold text-black drop-shadow-lg">{{ $nilais->min('nilai') ?? 0 }}</h3>
                </div>
                <div class="bg-orange-600 bg-opacity-25 p-4 rounded-2xl backdrop-blur-sm">
                    <i class="fas fa-chart-bar text-4xl text-black drop-shadow-md"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter & Action Section -->
    <div class="filter-card rounded-2xl shadow-lg border border-gray-100 p-6">
        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
            <!-- Filters -->
            <div class="flex flex-col sm:flex-row gap-3 flex-1">
                <div class="flex-1">
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-school mr-2 text-blue-500"></i>Filter Kelas
                    </label>
                    <select id="filterKelas" class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition bg-white shadow-sm">
                        <option value="">Semua Kelas</option>
                        @foreach($kelasList as $kelas)
                        <option value="{{ $kelas->id }}" {{ request('kelas_id') == $kelas->id ? 'selected' : '' }}>
                            {{ $kelas->nama_kelas }} {{ $kelas->jurusan ? '- ' . $kelas->jurusan->nama_jurusan : '' }}
                        </option>
                        @endforeach
                    </select>
                </div>

                <div class="flex-1">
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-book mr-2 text-green-500"></i>Filter Mata Pelajaran
                    </label>
                    <select id="filterMapel" class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-green-500 focus:border-green-500 transition bg-white shadow-sm">
                        <option value="">Semua Mata Pelajaran</option>
                        @foreach($mapelList as $mapel)
                        <option value="{{ $mapel->id }}" {{ request('mata_pelajaran_id') == $mapel->id ? 'selected' : '' }}>
                            {{ $mapel->nama_mapel }}
                        </option>
                        @endforeach
                    </select>
                </div>
            </div>

            <!-- Action Button -->
            <div class="flex items-end">
                <a href="{{ route('simaju.nilai.create') }}" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold rounded-xl hover:from-blue-700 hover:to-blue-800 shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-200">
                    <i class="fas fa-plus-circle mr-2"></i>
                    Input Nilai Baru
                </a>
            </div>
        </div>
    </div>

    <!-- Data Table -->
    <div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden">
        <div class="px-6 py-4 bg-gradient-to-r from-gray-50 to-gray-100 border-b border-gray-200">
            <h3 class="text-lg font-bold text-gray-800 flex items-center">
                <i class="fas fa-table mr-3 text-blue-600"></i>
                Daftar Nilai Siswa
            </h3>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="bg-gray-50 border-b border-gray-200">
                        <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">
                            <i class="fas fa-user mr-2 text-blue-500"></i>Siswa
                        </th>
                        <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">
                            <i class="fas fa-book mr-2 text-green-500"></i>Mata Pelajaran
                        </th>
                        <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">
                            <i class="fas fa-tag mr-2 text-purple-500"></i>Tipe
                        </th>
                        <th class="px-6 py-4 text-center text-xs font-bold text-gray-700 uppercase tracking-wider">
                            <i class="fas fa-star mr-2 text-yellow-500"></i>Nilai
                        </th>
                        <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">
                            <i class="fas fa-calendar mr-2 text-orange-500"></i>Info
                        </th>
                        <th class="px-6 py-4 text-center text-xs font-bold text-gray-700 uppercase tracking-wider">
                            <i class="fas fa-cog mr-2 text-gray-500"></i>Aksi
                        </th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @forelse($nilais as $n)
                    <tr class="hover:bg-blue-50 transition-colors duration-150">
                        <td class="px-6 py-4">
                            <div class="flex items-center space-x-3">
                                <div class="flex-shrink-0 h-10 w-10 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full flex items-center justify-center text-white font-bold shadow-md">
                                    {{ substr($n->siswa->nama, 0, 1) }}
                                </div>
                                <div>
                                    <div class="font-semibold text-gray-900">{{ $n->siswa->nama }}</div>
                                    <div class="text-xs text-gray-500 flex items-center">
                                        <i class="fas fa-id-card mr-1"></i>{{ $n->siswa->nis }}
                                    </div>
                                    @if($n->siswa->kelas)
                                    <div class="text-xs text-blue-600 flex items-center mt-1">
                                        <i class="fas fa-school mr-1"></i>{{ $n->siswa->kelas->nama_kelas }}
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex items-center">
                                <div class="h-8 w-8 bg-green-100 rounded-lg flex items-center justify-center mr-3">
                                    <i class="fas fa-book-open text-green-600 text-sm"></i>
                                </div>
                                <span class="font-medium text-gray-900">{{ $n->mataPelajaran->nama_mapel }}</span>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <span class="badge-tipe badge-{{ $n->tipe }}">
                                {{ $n->tipe_label }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-center">
                            <div class="flex justify-center">
                                @php
                                    $nilaiClass = $n->nilai >= 85 ? 'nilai-excellent' : ($n->nilai >= 70 ? 'nilai-good' : ($n->nilai >= 60 ? 'nilai-average' : 'nilai-poor'));
                                @endphp
                                <div class="nilai-badge {{ $nilaiClass }}">
                                    {{ $n->nilai }}
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="text-sm">
                                <div class="flex items-center text-gray-600 mb-1">
                                    <i class="fas fa-calendar-alt mr-2 text-blue-500"></i>
                                    <span class="font-medium">{{ $n->tahun_ajaran }}</span>
                                </div>
                                <div class="flex items-center text-gray-600">
                                    <i class="fas fa-clock mr-2 text-purple-500"></i>
                                    <span class="capitalize">Semester {{ $n->semester }}</span>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex items-center justify-center gap-2">
                                <a href="{{ route('simaju.nilai.edit', $n->id) }}" 
                                   class="inline-flex items-center px-3 py-2 bg-yellow-500 text-white text-sm font-medium rounded-lg hover:bg-yellow-600 transition-all duration-200 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
                                    <i class="fas fa-edit mr-1"></i>Edit
                                </a>
                                <form action="{{ route('simaju.nilai.destroy', $n->id) }}" method="POST" class="inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" 
                                            onclick="return confirm('Apakah Anda yakin ingin menghapus nilai ini?')"
                                            class="inline-flex items-center px-3 py-2 bg-red-500 text-white text-sm font-medium rounded-lg hover:bg-red-600 transition-all duration-200 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
                                        <i class="fas fa-trash mr-1"></i>Hapus
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="px-6 py-16 text-center">
                            <div class="flex flex-col items-center justify-center">
                                <div class="bg-gray-100 rounded-full p-8 mb-4">
                                    <i class="fas fa-inbox text-6xl text-gray-400"></i>
                                </div>
                                <h3 class="text-xl font-semibold text-gray-700 mb-2">Tidak Ada Data Nilai</h3>
                                <p class="text-gray-500 mb-6">Belum ada nilai yang diinput untuk kriteria filter ini</p>
                                <a href="{{ route('simaju.nilai.create') }}" 
                                   class="inline-flex items-center px-6 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors shadow-lg">
                                    <i class="fas fa-plus-circle mr-2"></i>Input Nilai Sekarang
                                </a>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

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

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const filterKelas = document.getElementById('filterKelas');
    const filterMapel = document.getElementById('filterMapel');

    function applyFilters() {
        const kelasId = filterKelas.value;
        const mapelId = filterMapel.value;
        const url = new URL(window.location.href);
        
        if (kelasId) {
            url.searchParams.set('kelas_id', kelasId);
        } else {
            url.searchParams.delete('kelas_id');
        }
        
        if (mapelId) {
            url.searchParams.set('mata_pelajaran_id', mapelId);
        } else {
            url.searchParams.delete('mata_pelajaran_id');
        }
        
        window.location.href = url.toString();
    }

    filterKelas.addEventListener('change', applyFilters);
    filterMapel.addEventListener('change', applyFilters);
});
</script>
@endpush