@extends('simaju.layouts.main')

@section('title', 'Data Siswa')
@section('page-title', 'Data Siswa')

@section('content')
<div class="mb-6 flex flex-wrap items-center justify-between gap-4">
    {{-- Tombol utama --}}
    <div class="flex flex-wrap items-center gap-2">
        <a href="{{ route('simaju.siswa.create') }}"
           class="inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-white hover:bg-blue-600">
            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
            </svg>
            <span>Tambah</span>
        </a>

        {{-- Dropdown Import dibuka dengan klik, bukan hover --}}
        <div class="relative inline-block" id="importDropdownWrapper">
            <button
                type="button"
                id="importDropdownButton"
                aria-expanded="false"
                aria-controls="importDropdownMenu"
                class="inline-flex items-center gap-2 rounded-lg bg-green-600 px-4 py-2 text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2"
            >
                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L4 8m4-4v12"></path>
                </svg>
                <span>Import</span>
                <svg class="h-4 w-4 transition-transform" id="importDropdownChevron" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                </svg>
            </button>

            <div
                id="importDropdownMenu"
                class="absolute right-0 top-full z-50 mt-2 hidden w-60 overflow-hidden rounded-lg border border-gray-200 bg-white shadow-xl"
            >
                <a href="{{ route('simaju.siswa.import') }}"
                   class="flex items-start gap-3 px-4 py-3 text-sm text-gray-700 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none">
                    <svg class="mt-0.5 h-4 w-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                    </svg>
                    <span>Import dari Excel/CSV</span>
                </a>

                <a href="{{ route('simaju.siswa.template') }}"
                   class="flex items-start gap-3 border-t border-gray-100 px-4 py-3 text-sm text-gray-700 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none">
                    <svg class="mt-0.5 h-4 w-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                    </svg>
                    <span>Download Template</span>
                </a>

                <form action="{{ route('simaju.siswa.delete-all') }}" method="POST" class="border-t border-gray-200">
                    @csrf
                    @method('DELETE')
                    <button
                        type="submit"
                        onclick="return confirm('Anda yakin ingin menghapus SEMUA data siswa? Tindakan ini tidak dapat dibatalkan!')"
                        class="flex w-full items-start gap-3 px-4 py-3 text-left text-sm text-red-600 hover:bg-red-50 focus:bg-red-50 focus:outline-none"
                    >
                        <svg class="mt-0.5 h-4 w-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                        </svg>
                        <span>Hapus Semua Data</span>
                    </button>
                </form>
            </div>
        </div>
    </div>

    {{-- Form pencarian --}}
    <form method="GET" action="{{ route('simaju.siswa.index') }}" class="flex flex-wrap items-center gap-2">
        <input
            type="text"
            name="search"
            value="{{ request('search') }}"
            placeholder="Cari nama/NIS..."
            aria-label="Cari siswa berdasarkan nama atau NIS"
            class="rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
        >
        <button type="submit" class="rounded-lg bg-gray-800 px-3 py-2 text-sm text-white hover:bg-gray-900">
            Cari
        </button>
        @if(request('search'))
            <a href="{{ route('simaju.siswa.index') }}" class="rounded-lg px-3 py-2 text-sm text-gray-600 hover:text-gray-800">
                Reset
            </a>
        @endif
    </form>
</div>

{{-- Pesan berhasil --}}
@if(session('success'))
    <div class="mb-4 flex items-center gap-2 rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-green-800" role="status">
        <svg class="h-5 w-5 shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
        </svg>
        <span>{{ session('success') }}</span>
    </div>
@endif

{{-- Pesan peringatan --}}
@if(session('warning'))
    <div class="mb-4 rounded-lg border border-yellow-200 bg-yellow-50 px-4 py-3 text-yellow-800" role="alert">
        {{ session('warning') }}
    </div>
@endif

{{-- Tabel data siswa --}}
<div class="overflow-x-auto rounded-xl border border-gray-100 bg-white shadow-sm">
    <table class="w-full min-w-[900px]">
        <thead class="bg-gray-50">
            <tr>
                <th scope="col" class="px-6 py-3 text-left text-xs font-semibold uppercase text-gray-600">No</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-semibold uppercase text-gray-600">NIS</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-semibold uppercase text-gray-600">Nama</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-semibold uppercase text-gray-600">JK</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-semibold uppercase text-gray-600">Kelas</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-semibold uppercase text-gray-600">Status</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-semibold uppercase text-gray-600">Password UTBK</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-semibold uppercase text-gray-600">Aksi</th>
            </tr>
        </thead>

        <tbody class="divide-y divide-gray-200">
            @forelse($siswas as $i => $s)
                <tr class="hover:bg-gray-50">
                    <td class="px-6 py-4 text-sm text-gray-500">
                        {{ $siswas->firstItem() + $i }}
                    </td>
                    <td class="px-6 py-4 text-sm font-medium text-gray-900">
                        {{ $s->nis }}
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-900">
                        {{ $s->nama }}
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-500">
                        {{ $s->jk == 'L' ? 'L' : 'P' }}
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-500">
                        {{ $s->kelas?->nama_kelas ?? '-' }}
                    </td>
                    <td class="px-6 py-4">
                        <span class="inline-flex rounded-full px-2 py-1 text-xs font-medium {{ $s->status_badge_class }}">
                            {{ $s->status_label }}
                        </span>
                    </td>
                    <td class="px-6 py-4">
                        @if($s->password)
                            <span class="inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-1 text-xs font-medium text-green-700">
                                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                Sudah dibuat
                            </span>
                        @else
                            <span class="inline-flex items-center gap-1 rounded-full bg-red-100 px-2 py-1 text-xs font-medium text-red-700">
                                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                </svg>
                                Belum dibuat
                            </span>
                        @endif
                    </td>
                    <td class="px-6 py-4">
                        <div class="flex items-center gap-1">
                            <a href="{{ route('simaju.siswa.show', $s->id) }}"
                               class="rounded-lg p-2 text-blue-600 hover:bg-blue-50"
                               title="Lihat" aria-label="Lihat data {{ $s->nama }}">
                                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                                </svg>
                            </a>

                            <a href="{{ route('simaju.siswa.edit', $s->id) }}"
                               class="rounded-lg p-2 text-yellow-600 hover:bg-yellow-50"
                               title="Edit" aria-label="Edit data {{ $s->nama }}">
                                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                                </svg>
                            </a>

                            @if(!$s->password)
                                {{-- Buat password UTBK --}}
                                <form action="{{ route('simaju.siswa.generate-password', $s->id) }}"
                                      method="POST"
                                      class="inline"
                                      onsubmit="return confirm('Buat password UTBK untuk {{ addslashes($s->nama) }}?\n\nPassword awal = NIS: {{ $s->nis }}');">
                                    @csrf
                                    <button type="submit"
                                            class="rounded-lg p-2 text-purple-600 hover:bg-purple-50"
                                            title="Buat Password UTBK" aria-label="Buat password UTBK untuk {{ $s->nama }}">
                                        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-8.47 5.48L11 16H8v3H5v-3.17a3 3 0 01.88-2.12l5.6-5.6A6 6 0 0121 9z"></path>
                                        </svg>
                                    </button>
                                </form>
                            @else
                                {{-- Reset password UTBK --}}
                                <form action="{{ route('simaju.siswa.generate-password', $s->id) }}"
                                      method="POST"
                                      class="inline"
                                      onsubmit="return confirm('PERINGATAN!\n\nPassword UTBK {{ addslashes($s->nama) }} akan di-reset.\n\nPassword baru = NIS: {{ $s->nis }}\n\nLanjutkan reset password?');">
                                    @csrf
                                    <button type="submit"
                                            class="rounded-lg p-2 text-orange-600 hover:bg-orange-50"
                                            title="Reset Password UTBK" aria-label="Reset password UTBK untuk {{ $s->nama }}">
                                        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v6h6M20 20v-6h-6M5.64 15a7 7 0 0011.9 2M18.36 9a7 7 0 00-11.9-2"></path>
                                        </svg>
                                    </button>
                                </form>
                            @endif

                            <form action="{{ route('simaju.siswa.destroy', $s->id) }}" method="POST" class="inline">
                                @csrf
                                @method('DELETE')
                                <button type="submit"
                                        class="rounded-lg p-2 text-red-600 hover:bg-red-50"
                                        title="Hapus" aria-label="Hapus data {{ $s->nama }}"
                                        onclick="return confirm('Yakin hapus {{ addslashes($s->nama) }}?')">
                                    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                                    </svg>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="8" class="px-6 py-12 text-center text-gray-500">
                        <svg class="mx-auto mb-3 h-12 w-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
                        </svg>
                        <p>Tidak ada data siswa</p>
                        <div class="mt-2">
                            <a href="{{ route('simaju.siswa.create') }}" class="text-primary hover:underline">Tambah siswa baru</a>
                            <span>atau</span>
                            <a href="{{ route('simaju.siswa.import') }}" class="text-green-600 hover:underline">import dari Excel</a>
                        </div>
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>

{{-- Paginasi --}}
@if($siswas->hasPages())
    <div class="mt-4 flex flex-wrap items-center justify-between gap-3">
        <div class="text-sm text-gray-500">
            Menampilkan {{ $siswas->firstItem() }} - {{ $siswas->lastItem() }} dari {{ $siswas->total() }} data
        </div>
        {{ $siswas->links() }}
    </div>
@endif

{{-- Kontrol dropdown Import --}}
<script>
(function () {
    function initImportDropdown() {
        const wrapper = document.getElementById('importDropdownWrapper');
        const button = document.getElementById('importDropdownButton');
        const menu = document.getElementById('importDropdownMenu');
        const chevron = document.getElementById('importDropdownChevron');

        if (!wrapper || !button || !menu) return;
        if (button.dataset.dropdownInitialized === 'true') return;
        button.dataset.dropdownInitialized = 'true';

        function closeMenu() {
            menu.classList.add('hidden');
            button.setAttribute('aria-expanded', 'false');
            if (chevron) chevron.classList.remove('rotate-180');
        }

        function toggleMenu() {
            const willOpen = menu.classList.contains('hidden');
            menu.classList.toggle('hidden', !willOpen);
            button.setAttribute('aria-expanded', String(willOpen));
            if (chevron) chevron.classList.toggle('rotate-180', willOpen);
        }

        button.addEventListener('click', function (event) {
            event.preventDefault();
            event.stopPropagation();
            toggleMenu();
        });

        menu.addEventListener('click', function (event) {
            event.stopPropagation();
        });

        document.addEventListener('click', function (event) {
            if (!wrapper.contains(event.target)) closeMenu();
        });

        document.addEventListener('keydown', function (event) {
            if (event.key === 'Escape') closeMenu();
        });
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initImportDropdown);
    } else {
        initImportDropdown();
    }
})();
</script>
@endsection