@extends('layouts.admin.app')

@section('content')
<div class="space-y-6">

    {{-- Page Header --}}
    <div class="flex items-center justify-between bg-gradient-to-r from-indigo-600 to-purple-600 rounded-2xl p-8 shadow-lg">
        <div class="text-white">
            <div class="flex items-center gap-3 mb-2">
                <div class="bg-white/20 p-3 rounded-lg backdrop-blur-sm">
                    <i class="bi bi-people-fill text-3xl"></i>
                </div>
                <div>
                    <h2 class="text-3xl font-bold">Data Siswa</h2>
                    <p class="text-indigo-100 mt-1">Kelola data siswa dengan mudah & cepat</p>
                </div>
            </div>
        </div>
        <a href="{{ route('admin.siswa.create') }}" 
           class="px-6 py-3 rounded-xl bg-white text-indigo-600 hover:bg-indigo-50 shadow-lg font-semibold flex items-center gap-2 transition-all duration-300 hover:scale-105">
            <i class="bi bi-plus-circle-fill"></i> 
            <span>Tambah Siswa</span>
        </a>
    </div>

    {{-- Notifikasi Success --}}
    @if(session('success'))
        <div class="bg-gradient-to-r from-green-50 to-emerald-50 border-l-4 border-green-500 text-green-800 px-6 py-4 rounded-xl shadow-md flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="bg-green-500 text-white p-2 rounded-full">
                    <i class="bi bi-check-circle-fill text-xl"></i>
                </div>
                <span class="font-medium">{{ session('success') }}</span>
            </div>
            <button type="button" class="text-green-600 hover:text-green-800 transition" data-bs-dismiss="alert">
                <i class="bi bi-x-lg text-xl"></i>
            </button>
        </div>
    @endif

    {{-- Notifikasi Error --}}
    @if(session('error'))
        <div class="bg-gradient-to-r from-red-50 to-rose-50 border-l-4 border-red-500 text-red-800 px-6 py-4 rounded-xl shadow-md flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="bg-red-500 text-white p-2 rounded-full">
                    <i class="bi bi-exclamation-triangle-fill text-xl"></i>
                </div>
                <span class="font-medium">{{ session('error') }}</span>
            </div>
            <button type="button" class="text-red-600 hover:text-red-800 transition" data-bs-dismiss="alert">
                <i class="bi bi-x-lg text-xl"></i>
            </button>
        </div>
    @endif

    {{-- Import Error Detail --}}
    @if(session('import_error'))
        <div class="bg-gradient-to-r from-red-50 to-rose-50 border-l-4 border-red-500 text-red-800 px-6 py-4 rounded-xl shadow-md">
            <div class="flex items-center gap-3 mb-3">
                <div class="bg-red-500 text-white p-2 rounded-full">
                    <i class="bi bi-exclamation-octagon-fill text-xl"></i>
                </div>
                <span class="font-semibold text-lg">Beberapa data gagal diimport:</span>
            </div>

            <ul class="space-y-2 ps-12">
                @foreach(session('import_error') as $error)
                    <li class="list-disc text-sm">
                        <strong>Baris {{ $error['row'] }}</strong> — 
                        Kolom: <strong>{{ $error['kolom'] }}</strong> :
                        {{ $error['pesan'] }}
                    </li>
                @endforeach
            </ul>

            <button type="button" class="absolute top-4 right-4 text-red-600 hover:text-red-800 transition" data-bs-dismiss="alert">
                <i class="bi bi-x-lg text-xl"></i>
            </button>
        </div>
    @endif

    {{-- Filter & Search --}}
    <div class="bg-white shadow-lg rounded-2xl p-6 border border-gray-100">
        <div class="flex items-center gap-2 mb-4 pb-4 border-b border-gray-200">
            <div class="bg-indigo-100 p-2 rounded-lg">
                <i class="bi bi-funnel text-indigo-600 text-lg"></i>
            </div>
            <h3 class="text-lg font-semibold text-gray-800">Filter & Pencarian</h3>
        </div>

        <div class="grid md:grid-cols-2 gap-4">

        {{-- Filter Kelas --}}
        <form action="{{ route('admin.siswa.index') }}" method="GET" class="flex gap-3">
            <div class="flex-1 relative">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <i class="bi bi-door-closed text-gray-400"></i>
                </div>

                <select name="id_kelas"
                    class="form-select w-full pl-10 pr-4 py-3 rounded-xl border-2 border-gray-200
                        focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all">
                    <option value="">Semua Kelas</option>

                    @foreach($listKelas as $kelas)
                        <option value="{{ $kelas->id_kelas }}"
                            {{ request('id_kelas') == $kelas->id_kelas ? 'selected' : '' }}>
                            {{ $kelas->nama_kelas }}
                        </option>
                    @endforeach
                </select>
            </div>

            <button type="submit"
                class="px-5 py-3 rounded-xl bg-gradient-to-r from-sky-500 to-blue-500
                    hover:from-sky-600 hover:to-blue-600 text-white shadow-md
                    transition-all duration-300 hover:scale-105">
                <i class="bi bi-funnel-fill"></i>
            </button>
        </form>

            {{-- Search --}}
            <form action="{{ route('admin.siswa.index') }}" method="GET" class="flex gap-3">
                <div class="flex-1 relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <i class="bi bi-search text-gray-400"></i>
                    </div>
                    <input type="text" name="search" value="{{ request('search') }}"
                           placeholder="Cari NISN atau Nama Siswa..."
                           class="form-control w-full pl-10 pr-4 py-3 rounded-xl border-2 border-gray-200 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all">
                </div>
                <button type="submit" class="px-5 py-3 rounded-xl bg-gradient-to-r from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 text-white shadow-md transition-all duration-300 hover:scale-105">
                    <i class="bi bi-search"></i>
                </button>
            </form>
        </div>

{{-- Hapus by Kelas --}}
@if(request('id_kelas'))
<div class="mt-5 pt-5 border-t border-gray-200">
    <form action="{{ route('siswa.destroyByKelas') }}" method="POST"
          onsubmit="return confirm(
              'Yakin hapus semua siswa kelas {{ 
                  optional($listKelas->firstWhere('id_kelas', request('id_kelas')))->nama_kelas 
              }}?'
          )">
        @csrf
        @method('DELETE')

        {{-- kirim id_kelas ke controller --}}
        <input type="hidden" name="id_kelas" value="{{ request('id_kelas') }}">

        <button type="submit"
            class="px-5 py-2.5 rounded-xl bg-gradient-to-r from-red-500 to-rose-500
                   hover:from-red-600 hover:to-rose-600 text-white shadow-md
                   flex items-center gap-2 transition-all duration-300 hover:scale-105">
            <i class="bi bi-trash3-fill"></i>
            <span>
                Hapus Semua Siswa Kelas
                {{ optional($listKelas->firstWhere('id_kelas', request('id_kelas')))->nama_kelas }}
            </span>
        </button>
    </form>
</div>
@endif
    </div>

    {{-- Data Siswa --}}
    <div class="bg-white shadow-lg rounded-2xl overflow-hidden border border-gray-100">
        <div class="bg-gradient-to-r from-gray-50 to-gray-100 px-6 py-4 border-b border-gray-200">
            <div class="flex items-center gap-2">
                <div class="bg-indigo-100 p-2 rounded-lg">
                    <i class="bi bi-table text-indigo-600 text-lg"></i>
                </div>
                <h3 class="text-lg font-semibold text-gray-800">Daftar Siswa</h3>
            </div>
        </div>

        <div class="overflow-x-auto max-h-[500px] overflow-y-auto">
            <table class="min-w-full text-sm text-left text-gray-600">
                <thead class="bg-gradient-to-r from-indigo-50 to-purple-50 text-gray-700 text-sm font-semibold sticky top-0 z-10 border-b-2 border-indigo-200">
                    <tr>
                        <th class="px-6 py-4 text-center">
                            <div class="flex items-center justify-center gap-2">
                                <i class="bi bi-hash text-indigo-600"></i>
                                <span>No</span>
                            </div>
                        </th>
                        <th class="px-6 py-4">
                            <div class="flex items-center gap-2">
                                <i class="bi bi-card-text text-indigo-600"></i>
                                <span>NISN</span>
                            </div>
                        </th>
                        <th class="px-6 py-4">
                            <div class="flex items-center gap-2">
                                <i class="bi bi-person-badge text-indigo-600"></i>
                                <span>Nama Siswa</span>
                            </div>
                        </th>
                        <th class="px-6 py-4">
                            <div class="flex items-center gap-2">
                                <i class="bi bi-door-closed text-indigo-600"></i>
                                <span>Kelas</span>
                            </div>
                        </th>
                        <th class="px-6 py-4">
                            <div class="flex items-center gap-2">
                                <i class="bi bi-phone text-indigo-600"></i>
                                <span>No Ortu</span>
                            </div>
                        </th>
                        <th class="px-6 py-4 text-center">
                            <div class="flex items-center justify-center gap-2">
                                <i class="bi bi-gear text-indigo-600"></i>
                                <span>Aksi</span>
                            </div>
                        </th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse ($siswa as $index => $item)
                    <tr class="hover:bg-indigo-50/50 transition-colors duration-200">
                        <td class="px-6 py-4 text-center">
                            <div class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-indigo-100 text-indigo-700 font-bold text-sm">
                                {{ $index + 1 }}
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <span class="font-mono text-gray-600">{{ $item->nisn }}</span>
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-400 to-purple-500 flex items-center justify-center text-white font-bold">
                                    {{ strtoupper(substr($item->nama_siswa, 0, 1)) }}
                                </div>
                                <span class="font-medium text-gray-800">{{ $item->nama_siswa }}</span>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            @if($item->kelas)
                                <span class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-xs font-semibold
                                    {{ str_contains($item->kelas->nama_kelas, 'XII') ? 'bg-gradient-to-r from-green-100 to-emerald-100 text-green-700 border border-green-200' :
                                       (str_contains($item->kelas->nama_kelas, 'XI') ? 'bg-gradient-to-r from-yellow-100 to-amber-100 text-yellow-700 border border-yellow-200' : 'bg-gradient-to-r from-blue-100 to-sky-100 text-blue-700 border border-blue-200') }}">
                                    <i class="bi bi-bookmark-fill"></i>
                                    {{ $item->kelas->nama_kelas }}
                                </span>
                            @else
                                <span class="text-gray-400 italic">Belum ada kelas</span>
                            @endif
                        </td>
                        <td class="px-6 py-4">
                            @if($item->no_ortu)
                                <div class="flex items-center gap-2">
                                    <div class="bg-green-100 p-1.5 rounded-lg">
                                        <i class="bi bi-phone-fill text-green-600 text-xs"></i>
                                    </div>
                                    <span class="text-gray-700 font-medium">{{ $item->no_ortu }}</span>
                                </div>
                            @else
                                <div class="flex items-center gap-2">
                                    <div class="bg-gray-100 p-1.5 rounded-lg">
                                        <i class="bi bi-phone-x text-gray-400 text-xs"></i>
                                    </div>
                                    <span class="text-gray-400 italic">Tidak ada</span>
                                </div>
                            @endif
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex justify-center gap-2">
                                <a href="{{ route('admin.siswa.edit', $item) }}" 
                                   class="inline-flex items-center gap-1 px-4 py-2 rounded-lg bg-gradient-to-r from-amber-400 to-yellow-500 hover:from-amber-500 hover:to-yellow-600 text-white shadow-md transition-all duration-300 hover:scale-105 font-medium text-sm">
                                    <i class="bi bi-pencil-square"></i>
                                    <span>Edit</span>
                                </a>
                                <form action="{{ route('admin.siswa.destroy', $item) }}" method="POST"
                                      onsubmit="return confirm('Yakin mau hapus siswa ini?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" 
                                            class="inline-flex items-center gap-1 px-4 py-2 rounded-lg bg-gradient-to-r from-red-500 to-rose-600 hover:from-red-600 hover:to-rose-700 text-white shadow-md transition-all duration-300 hover:scale-105 font-medium text-sm">
                                        <i class="bi bi-trash3-fill"></i>
                                        <span>Hapus</span>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="px-6 py-16 text-center">
                            <div class="flex flex-col items-center gap-3">
                                <div class="w-20 h-20 rounded-full bg-gray-100 flex items-center justify-center">
                                    <i class="bi bi-inbox text-4xl text-gray-400"></i>
                                </div>
                                <div>
                                    <p class="text-gray-600 font-medium text-lg">Belum ada data siswa</p>
                                    <p class="text-gray-400 text-sm mt-1">Silakan tambahkan data siswa terlebih dahulu</p>
                                </div>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Action Buttons --}}
    <div class="grid md:grid-cols-2 gap-6">
        
        {{-- Tombol Hapus Semua --}}
        <div class="bg-gradient-to-br from-red-50 to-rose-50 shadow-lg rounded-2xl p-6 border border-red-100">
            <div class="flex items-center gap-3 mb-4">
                <div class="bg-red-100 p-3 rounded-lg">
                    <i class="bi bi-exclamation-triangle-fill text-red-600 text-xl"></i>
                </div>
                <div>
                    <h5 class="font-semibold text-red-800">Zona Berbahaya</h5>
                    <p class="text-red-600 text-sm">Tindakan ini tidak dapat dibatalkan</p>
                </div>
            </div>
            <form action="{{ route('siswa.hapusSemua') }}" method="POST"
                  onsubmit="return confirm('⚠️ Yakin hapus semua data siswa beserta kehadiran?')">
                @csrf
                @method('DELETE')
                <button type="submit" class="w-full px-5 py-3 rounded-xl bg-gradient-to-r from-red-600 to-rose-600 hover:from-red-700 hover:to-rose-700 text-white shadow-md font-semibold flex items-center justify-center gap-2 transition-all duration-300 hover:scale-105">
                    <i class="bi bi-trash3-fill"></i>
                    <span>Hapus Semua Data Siswa</span>
                </button>
            </form>
        </div>

        {{-- Import --}}
        <div class="bg-gradient-to-br from-green-50 to-emerald-50 shadow-lg rounded-2xl p-6 border border-green-100">
            <div class="flex items-center gap-3 mb-4">
                <div class="bg-green-100 p-3 rounded-lg">
                    <i class="bi bi-cloud-upload-fill text-green-600 text-xl"></i>
                </div>
                <div>
                    <h5 class="font-semibold text-green-800">Import Data Siswa</h5>
                    <p class="text-green-600 text-sm">Unggah file Excel atau CSV</p>
                </div>
            </div>
            
            <form action="{{ route('admin.siswa.import') }}" method="POST" enctype="multipart/form-data" class="space-y-4">
                @csrf
                <div class="relative">
                    <input type="file" name="file" 
                           class="form-control w-full px-4 py-3 rounded-xl border-2 border-green-200 focus:border-green-500 focus:ring-2 focus:ring-green-200 transition-all file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-green-100 file:text-green-700 file:font-semibold hover:file:bg-green-200" 
                           required>
                </div>
                
                <button type="submit" class="w-full px-5 py-3 rounded-xl bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white shadow-md font-semibold flex items-center justify-center gap-2 transition-all duration-300 hover:scale-105">
                    <i class="bi bi-file-earmark-arrow-up-fill"></i>
                    <span>Import Data</span>
                </button>
                {{-- Download Template --}}
                <a href="{{ route('admin.siswa.template') }}"
                class="w-full inline-flex items-center justify-center gap-2 px-5 py-3 rounded-xl
                        bg-white border-2 border-green-300 text-green-700 font-semibold
                        hover:bg-green-100 hover:border-green-400
                        transition-all duration-300 hover:scale-105 shadow-sm">
                    <i class="bi bi-download"></i>
                    <span>Download Template Excel</span>
                </a>
                
                <div class="bg-white rounded-lg p-3 border border-green-200">
                    <p class="text-gray-600 text-xs flex items-start gap-2">
                        <i class="bi bi-info-circle-fill text-green-600 mt-0.5"></i>
                        <span>
                            Format file: <strong>.xlsx</strong> atau <strong>.csv</strong><br>
                            Kolom: <strong>NISN</strong>, <strong>Nama Siswa</strong>, <strong>ID Kelas</strong>, <strong>No Ortu</strong>
                        </span>
                    </p>
                </div>
            </form>
        </div>

    </div>

</div>

<style>
    /* Custom scrollbar for table */
    .overflow-y-auto::-webkit-scrollbar {
        width: 8px;
    }
    
    .overflow-y-auto::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 10px;
    }
    
    .overflow-y-auto::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 10px;
    }
    
    .overflow-y-auto::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

    /* Smooth animations */
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .bg-white {
        animation: fadeIn 0.3s ease-out;
    }
</style>
@endsection