@extends('simaju.layouts.main')

@section('title', 'Kartu Perpustakaan')
@section('page-title', 'Kartu Perpustakaan')
@section('page-subtitle', 'Cetak kartu perpustakaan dengan barcode untuk guru dan siswa')

@section('content')
<div class="space-y-6" x-data="{ activeTab: 'siswa', selectedSiswa: [], selectedGuru: [] }">
    
    <!-- Tab Navigation -->
    <div class="bg-white rounded-xl shadow-sm p-1 inline-flex">
        <button @click="activeTab = 'siswa'" 
                :class="activeTab === 'siswa' ? 'bg-primary text-white' : 'text-gray-600 hover:text-gray-800'"
                class="px-6 py-2 rounded-lg font-medium transition-all">
            <i class="fas fa-user-graduate mr-2"></i>Siswa
        </button>
        <button @click="activeTab = 'guru'" 
                :class="activeTab === 'guru' ? 'bg-primary text-white' : 'text-gray-600 hover:text-gray-800'"
                class="px-6 py-2 rounded-lg font-medium transition-all">
            <i class="fas fa-chalkboard-teacher mr-2"></i>Guru
        </button>
    </div>

    <!-- Siswa Tab -->
    <div x-show="activeTab === 'siswa'" x-transition class="bg-white rounded-xl shadow-sm">
        <div class="p-6 border-b border-gray-200">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-lg font-semibold text-gray-800">Kartu Perpustakaan Siswa</h3>
                    <p class="text-sm text-gray-600 mt-1">Barcode menggunakan NIS siswa</p>
                </div>
                <form action="{{ route('perpustakaan.kartu.bulk-print-siswa') }}" method="POST" x-show="selectedSiswa.length > 0" target="_blank">
                    @csrf
                    <template x-for="id in selectedSiswa" :key="id">
                        <input type="hidden" name="siswa_ids[]" :value="id">
                    </template>
                    <button type="submit" class="btn-primary">
                        <i class="fas fa-print mr-2"></i>Cetak <span x-text="selectedSiswa.length"></span> Kartu
                    </button>
                </form>
            </div>
        </div>

        <div class="p-6">
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50 border-b">
                        <tr>
                            <th class="px-4 py-3 text-left">
                                <input type="checkbox" @click="
                                    if($event.target.checked) {
                                        selectedSiswa = [...document.querySelectorAll('.siswa-checkbox')].map(el => parseInt(el.value));
                                    } else {
                                        selectedSiswa = [];
                                    }
                                " class="rounded">
                            </th>
                            <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">NIS</th>
                            <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Nama</th>
                            <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Kelas</th>
                            <th class="px-4 py-3 text-center text-xs font-semibold text-gray-600 uppercase">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @forelse(\App\Models\Siswa::with('kelas')->get() as $siswa)
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-3">
                                <input type="checkbox" class="siswa-checkbox rounded" :value="{{ $siswa->id }}" 
                                       x-model="selectedSiswa">
                            </td>
                            <td class="px-4 py-3 text-sm font-medium text-gray-900">{{ $siswa->nis }}</td>
                            <td class="px-4 py-3 text-sm text-gray-700">{{ $siswa->nama }}</td>
                            <td class="px-4 py-3 text-sm text-gray-700">{{ $siswa->kelas->nama_kelas ?? '-' }}</td>
                            <td class="px-4 py-3 text-center">
                                <a href="{{ route('perpustakaan.kartu.print-siswa', $siswa->id) }}" 
                                   target="_blank"
                                   class="inline-flex items-center px-3 py-1 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 text-sm">
                                    <i class="fas fa-print mr-1"></i>Cetak
                                </a>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="px-4 py-8 text-center text-gray-500">
                                <i class="fas fa-inbox text-4xl text-gray-300 mb-2"></i>
                                <p>Belum ada data siswa</p>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Guru Tab -->
    <div x-show="activeTab === 'guru'" x-transition class="bg-white rounded-xl shadow-sm">
        <div class="p-6 border-b border-gray-200">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-lg font-semibold text-gray-800">Kartu Perpustakaan Guru</h3>
                    <p class="text-sm text-gray-600 mt-1">Barcode menggunakan NIP guru</p>
                </div>
                <form action="{{ route('perpustakaan.kartu.bulk-print-guru') }}" method="POST" x-show="selectedGuru.length > 0" target="_blank">
                    @csrf
                    <template x-for="id in selectedGuru" :key="id">
                        <input type="hidden" name="guru_ids[]" :value="id">
                    </template>
                    <button type="submit" class="btn-primary">
                        <i class="fas fa-print mr-2"></i>Cetak <span x-text="selectedGuru.length"></span> Kartu
                    </button>
                </form>
            </div>
        </div>

        <div class="p-6">
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50 border-b">
                        <tr>
                            <th class="px-4 py-3 text-left">
                                <input type="checkbox" @click="
                                    if($event.target.checked) {
                                        selectedGuru = [...document.querySelectorAll('.guru-checkbox')].map(el => parseInt(el.value));
                                    } else {
                                        selectedGuru = [];
                                    }
                                " class="rounded">
                            </th>
                            <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">NIP</th>
                            <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Nama</th>
                            <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Mata Pelajaran</th>
                            <th class="px-4 py-3 text-center text-xs font-semibold text-gray-600 uppercase">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @forelse(\App\Models\Guru::with('mataPelajarans')->get() as $guru)
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-3">
                                <input type="checkbox" class="guru-checkbox rounded" :value="{{ $guru->id }}" 
                                       x-model="selectedGuru">
                            </td>
                            <td class="px-4 py-3 text-sm font-medium text-gray-900">{{ $guru->nip }}</td>
                            <td class="px-4 py-3 text-sm text-gray-700">{{ $guru->nama }}</td>
                            <td class="px-4 py-3 text-sm text-gray-700">{{ $guru->mataPelajarans->pluck('nama_mapel')->join(', ') ?: '-' }}</td>
                            <td class="px-4 py-3 text-center">
                                <a href="{{ route('perpustakaan.kartu.print-guru', $guru->id) }}" 
                                   target="_blank"
                                   class="inline-flex items-center px-3 py-1 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 text-sm">
                                    <i class="fas fa-print mr-1"></i>Cetak
                                </a>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="px-4 py-8 text-center text-gray-500">
                                <i class="fas fa-inbox text-4xl text-gray-300 mb-2"></i>
                                <p>Belum ada data guru</p>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>

<style>
    .btn-primary {
        @apply inline-flex items-center px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-600 transition-colors font-medium;
    }
</style>
@endsection