@extends('layouts.admin.app')

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

    {{-- Page Header --}}
    <div class="flex items-center justify-between">
        <div>
            <h2 class="text-3xl font-bold text-gray-800 flex items-center gap-2">
                🛡️ Data Wali Kelas
            </h2>
            <p class="text-gray-500">Kelola data wali kelas dengan mudah & cepat.</p>
        </div>
        <a href="{{ route('admin.wali-kelas.create') }}" 
           class="px-4 py-2 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white shadow font-medium flex items-center gap-2">
            <i class="bi bi-plus-lg"></i> Tambah Wali Kelas
        </a>
    </div>

    {{-- Notifikasi --}}
    @if(session('success'))
        <div class="bg-green-100 border border-green-300 text-green-700 px-4 py-3 rounded-xl shadow flex items-center justify-between">
            <div class="flex items-center gap-2">
                <i class="bi bi-check-circle-fill"></i>
                {{ session('success') }}
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    {{-- Filter & Search --}}
    <div class="bg-white shadow rounded-2xl p-6">
        <div class="grid md:grid-cols-2 gap-4">
            {{-- Filter kelas --}}
            <form action="{{ route('admin.wali-kelas.index') }}" method="GET" class="flex gap-2">
                <select name="kelas" class="form-select rounded-xl border-gray-300">
                    <option value="">-- Semua Kelas --</option>
                    @foreach($listKelas as $k)
                        <option value="{{ $k->id_kelas }}" {{ request('kelas') == $k->id_kelas ? 'selected' : '' }}>
                            {{ $k->nama_kelas }}
                        </option>
                    @endforeach
                </select>
                <button type="submit" class="px-4 py-2 rounded-xl bg-sky-500 hover:bg-sky-600 text-white shadow">
                    <i class="bi bi-funnel"></i>
                </button>
            </form>

            {{-- Search --}}
            <form action="{{ route('admin.wali-kelas.index') }}" method="GET" class="flex gap-2">
                <input type="text" name="search" value="{{ request('search') }}"
                       placeholder="Cari nama, NIP, atau Mapel"
                       class="form-control rounded-xl border-gray-300">
                <button type="submit" class="px-4 py-2 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white shadow">
                    <i class="bi bi-search"></i>
                </button>
            </form>
        </div>
    </div>

    {{-- Data Wali Kelas --}}
    <div class="bg-white shadow rounded-2xl overflow-hidden">
        <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-gray-100 text-gray-700 text-center text-sm font-semibold sticky top-0 z-10">
                    <tr>
                        <th class="px-4 py-3">No</th>
                        <th class="px-4 py-3 text-left">Nama Guru</th>
                        <th class="px-4 py-3 text-left">NIP</th>
                        <th class="px-4 py-3 text-left">Mapel</th>
                        <th class="px-4 py-3 text-left">Kelas</th>
                        <th class="px-4 py-3">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($waliKelas as $index => $item)
                    <tr class="border-b last:border-0 hover:bg-gray-50 transition">
                        <td class="px-4 py-3 text-center font-medium text-gray-800">{{ $index+1 }}</td>
                        <td class="px-4 py-3">{{ $item->guru->nama_guru }}</td>
                        <td class="px-4 py-3">{{ $item->guru->nip }}</td>
                        <td class="px-4 py-3">
                            <span class="px-3 py-1 rounded-full text-xs font-semibold bg-gray-200 text-gray-700">
                                {{ $item->guru->mata_pelajaran }}
                            </span>
                        </td>
                        <td class="px-4 py-3">
                            @php
                                $namaKelas = $item->kelas->nama_kelas ?? '-';
                                $kelasColor = str_contains($namaKelas, 'XII') ? 'bg-green-100 text-green-700' :
                                              (str_contains($namaKelas, 'XI') ? 'bg-yellow-100 text-yellow-700' : 'bg-blue-100 text-blue-700');
                            @endphp
                            <span class="px-3 py-1 rounded-full text-xs font-semibold {{ $kelasColor }}">
                                {{ $namaKelas }}
                            </span>
                        </td>
                        <td class="px-4 py-3 text-center">
                            <div class="flex justify-center gap-2">
                                <a href="{{ route('admin.wali-kelas.edit',$item->id) }}" 
                                   class="px-3 py-1.5 rounded-lg bg-yellow-400/90 hover:bg-yellow-500 text-white shadow-sm transition">
                                    <i class="bi bi-pencil"></i>
                                </a>
                                <form action="{{ route('admin.wali-kelas.destroy',$item->id) }}" method="POST"
                                      onsubmit="return confirm('Yakin hapus wali kelas ini?')">
                                    @csrf @method('DELETE')
                                    <button type="submit" 
                                            class="px-3 py-1.5 rounded-lg bg-red-500/90 hover:bg-red-600 text-white shadow-sm transition">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="px-4 py-8 text-center text-gray-500">
                            <i class="bi bi-emoji-frown text-3xl block mb-2"></i>
                            Belum ada data wali kelas.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Tombol Hapus Semua --}}
    <form action="{{ route('wali-kelas.hapusSemua') }}" method="POST"
          onsubmit="return confirm('Yakin hapus semua wali kelas?')" class="mt-4">
        @csrf
        @method('DELETE')
        <button type="submit" class="px-4 py-2 rounded-xl bg-red-600 hover:bg-red-700 text-white shadow">
            <i class="bi bi-trash3"></i> Hapus Semua Data
        </button>
    </form>

    {{-- Import --}}
    <div class="bg-white shadow rounded-2xl p-6">
        <h5 class="font-semibold text-green-700 mb-4 flex items-center gap-2">
            <i class="bi bi-upload"></i> Import Data Wali Kelas
        </h5>
        <form action="{{ route('wali-kelas.import') }}" method="POST" enctype="multipart/form-data" class="grid md:grid-cols-4 gap-4 items-center">
            @csrf
            <div class="md:col-span-3">
                <input type="file" name="file" class="form-control rounded-xl border-gray-300" required>
            </div>
            <div>
                <button type="submit" class="w-full px-4 py-2 rounded-xl bg-green-600 hover:bg-green-700 text-white shadow">
                    <i class="bi bi-cloud-arrow-up"></i> Import
                </button>
            </div>
        </form>
        <p class="text-gray-500 text-sm mt-2">
            Format file: <strong>.xlsx</strong> atau <strong>.csv</strong> — Kolom: Guru, NIP, Mapel, Kelas
        </p>
    </div>

</div>
@endsection