@extends('layouts.admin')

@section('title', 'Data Guru')
@section('page-title', 'Data Guru')
@section('page-actions')
    <div class="flex flex-wrap items-center gap-2">
        <x-button href="{{ route('admin.guru.import-template') }}" variant="ghost">Unduh Template Excel</x-button>
        <x-button href="{{ route('admin.guru.create') }}" variant="secondary">Tambah Guru</x-button>
        <x-button type="button" variant="secondary" id="btnOpenImportGuruModal">Import Excel</x-button>
    </div>
@endsection
@section('admin-content')
<div class="mb-4 flex flex-wrap items-center justify-between gap-3">
    <form method="GET" class="flex gap-2">
        <input type="text" name="search" placeholder="Cari nama / NIG / username..." 
               value="{{ request('search') }}" 
               class="rounded-xl border border-slate-200 px-4 py-2 text-sm w-72">
        <x-button type="submit" variant="secondary">Cari</x-button>
        @if(request('search'))
            <a href="{{ route('admin.guru.index') }}" class="inline-flex items-center rounded-xl border px-4 py-2 text-sm">Reset</a>
        @endif
    </form>
    
</div>
<x-table title="Daftar Guru" subtitle="Kelola data guru dan akun login.">
    <table class="min-w-full divide-y divide-slate-200">
        <thead class="bg-slate-50">
            <tr>
                <th class="px-5 py-3 text-left text-xs font-bold uppercase tracking-wide text-slate-500">NIP</th>
                <th class="px-5 py-3 text-left text-xs font-bold uppercase tracking-wide text-slate-500">Nama</th>
                <th class="px-5 py-3 text-left text-xs font-bold uppercase tracking-wide text-slate-500">Login (NIG)</th>
                <th class="px-5 py-3 text-left text-xs font-bold uppercase tracking-wide text-slate-500">Aksi</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-slate-200">
            @foreach($gurus as $g)
            <tr class="hover:bg-slate-50/70">
                <td class="px-5 py-3 text-sm font-semibold text-slate-900">{{ $g->nip }}</td>
                <td class="px-5 py-3 text-sm text-slate-800">{{ $g->nama_lengkap }}</td>
                <td class="px-5 py-3 text-sm text-slate-600">{{ $g->nig }}</td>
                <td class="px-5 py-3">
                    <a href="{{ route('admin.guru.edit', $g) }}" class="text-sm font-semibold text-ink-700 hover:text-ink-900">Edit</a>
                    <form action="{{ route('admin.guru.destroy', $g) }}" method="POST" class="inline" onsubmit="return confirm('Hapus data?')">
                        @csrf @method('DELETE')
                        <button type="submit" class="ml-3 text-sm font-semibold text-rose-700 hover:text-rose-900">Hapus</button>
                    </form>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</x-table>

<div id="importGuruModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-slate-900/40 p-4">
    <div class="w-full max-w-2xl rounded-2xl border border-slate-200 bg-white p-6 shadow-soft">
        <div class="mb-4 flex items-start justify-between gap-3">
            <div>
                <h3 class="text-lg font-bold text-slate-900">Import Excel Guru</h3>
                <p class="mt-1 text-sm text-slate-600">
                    Header: password, nip, nama_lengkap, jenis_kelamin, alamat, no_hp, email, is_wali_kelas.
                    Status akun otomatis <strong>aktif</strong> (tidak perlu kolom status).
                    Kolom <strong>nip</strong> = NIG guru sekaligus <strong>ID login</strong> (username internal).
                </p>
            </div>
            <button type="button" id="btnCloseImportGuruModal" class="text-slate-500 hover:text-slate-700">&times;</button>
        </div>

        <form method="POST" action="{{ route('admin.guru.upload-excel') }}" enctype="multipart/form-data" id="importGuruForm" class="space-y-4">
            @csrf

            <div>
                <label for="guru_file" class="mb-1 block text-sm font-semibold text-slate-700">File Excel (.xls / .xlsx)</label>
                <input
                    type="file"
                    name="file"
                    id="guru_file"
                    accept=".xls,.xlsx"
                    required
                    class="block w-full rounded-xl border border-slate-300 px-3 py-2 text-sm text-slate-700 file:mr-3 file:rounded-lg file:border-0 file:bg-brand-600 file:px-3 file:py-1.5 file:text-sm file:font-semibold file:text-white hover:file:bg-brand-700"
                >
            </div>

            <div>
                <label class="mb-2 block text-sm font-semibold text-slate-700">Mode Import</label>
                <div class="space-y-3 rounded-xl border border-slate-200 bg-slate-50 p-4">
                    <label class="flex cursor-pointer items-start gap-3">
                        <input type="radio" name="mode" value="replace" checked class="mt-1 h-4 w-4 border-slate-300 text-brand-600 focus:ring-brand-500">
                        <span>
                            <span class="block text-sm font-semibold text-slate-900">Replace (Overwrite)</span>
                            <span class="block text-xs text-slate-600">Baris dengan NIP yang sama memperbarui data guru dan akun login.</span>
                        </span>
                    </label>
                    <label class="flex cursor-pointer items-start gap-3">
                        <input type="radio" name="mode" value="safe" class="mt-1 h-4 w-4 border-slate-300 text-brand-600 focus:ring-brand-500">
                        <span>
                            <span class="block text-sm font-semibold text-slate-900">Safe Import</span>
                            <span class="block text-xs text-slate-600">NIP yang sudah ada di database akan dilewati.</span>
                        </span>
                    </label>
                </div>
            </div>

            <div class="flex items-center justify-end gap-2 pt-2">
                <x-button type="button" variant="ghost" id="btnCancelImportGuru">Batal</x-button>
                <x-button type="submit" variant="secondary" id="btnSubmitImportGuru">
                    <span id="guruSubmitText">Upload Excel</span>
                    <span id="guruLoadingText" class="hidden">Mengupload...</span>
                </x-button>
            </div>
        </form>
    </div>
</div>

<script>
    (() => {
        const modal = document.getElementById('importGuruModal');
        const openBtn = document.getElementById('btnOpenImportGuruModal');
        const closeBtn = document.getElementById('btnCloseImportGuruModal');
        const cancelBtn = document.getElementById('btnCancelImportGuru');
        const form = document.getElementById('importGuruForm');
        const submitBtn = document.getElementById('btnSubmitImportGuru');
        const submitText = document.getElementById('guruSubmitText');
        const loadingText = document.getElementById('guruLoadingText');

        const openModal = () => {
            modal.classList.remove('hidden');
            modal.classList.add('flex');
        };

        const closeModal = () => {
            modal.classList.add('hidden');
            modal.classList.remove('flex');
        };

        openBtn.addEventListener('click', openModal);
        closeBtn.addEventListener('click', closeModal);
        cancelBtn.addEventListener('click', closeModal);

        modal.addEventListener('click', (event) => {
            if (event.target === modal) {
                closeModal();
            }
        });

        form.addEventListener('submit', () => {
            submitBtn.disabled = true;
            submitText.classList.add('hidden');
            loadingText.classList.remove('hidden');
        });
    })();
</script>
@endsection