@extends('layouts.admin')
@section('title', 'Kelola Siswa')

@section('breadcrumb')
    <div class="al-bc">
        <a href="{{ route('admin.dashboard') }}">Dashboard</a>
        <span class="al-bc-sep">/</span>
        <span class="al-bc-cur">Kelola Siswa</span>
    </div>
@endsection

@section('content')

{{-- Page bar --}}
<div class="al-page-bar">
    <div class="al-page-bar-left">
        <h1>Kelola Siswa</h1>
        <p>Tambah akun siswa satu per satu atau import massal dari Excel/CSV.</p>
    </div>
    <div class="al-page-bar-right">
        <span class="badge badge-abu" style="font-size:13px; padding:5px 12px">{{ $siswa->total() }} siswa</span>
        <a href="{{ route('admin.siswa.template') }}"
           class="btn btn-outline btn-sm" style="display:inline-flex; align-items:center; gap:5px">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                 stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:13px; height:13px">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                <polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
            </svg>
            Template Excel
        </a>
        <button class="btn btn-outline btn-sm" onclick="toggleSiswaPanel('panel-import', this, '📊 Import Excel', '✕ Tutup Import')">
            📊 Import Excel
        </button>
        <button class="btn btn-purple btn-sm" onclick="toggleSiswaPanel('panel-tambah', this, '+ Tambah Siswa', '✕ Tutup')">
            + Tambah Siswa
        </button>
    </div>
</div>

{{-- Laporan import --}}
@if(session('laporan_import') && count(session('laporan_import')))
<div class="al-panel open" style="border-color:#fca5a5; background:#fff7f7; margin-bottom:14px">
    <div class="al-panel-head">
        <span class="al-panel-title" style="color:#b91c1c">⚠️ Baris dilewati saat import</span>
    </div>
    <ul style="padding-left:18px; font-size:13px; color:#6b7280; margin:0">
        @foreach(session('laporan_import') as $baris)
            <li>{{ $baris }}</li>
        @endforeach
    </ul>
</div>
@endif

{{-- Panel Import Excel --}}
<div id="panel-import" class="al-panel">
    <div class="al-panel-head">
        <span class="al-panel-title">📊 Import Siswa dari Excel / CSV</span>
        <button class="al-panel-close" onclick="tutupPanel('panel-import', 'btn-import', '📊 Import Excel')">&times;</button>
    </div>
    <form method="POST" action="{{ route('admin.siswa.import') }}" enctype="multipart/form-data"
          style="display:grid; grid-template-columns:1fr 1fr auto; gap:16px; align-items:start">
        @csrf
        <div>
            <div class="form-group" style="margin-bottom:10px">
                <label>Pilih File <span class="muted">(xlsx atau csv)</span></label>
                <input type="file" name="file" accept=".xlsx,.csv" required>
            </div>
            <p class="muted" style="font-size:12px; margin:0">
                Format kolom: <strong>nama</strong> | <strong>email</strong> | <strong>password</strong> (opsional, default: <code style="background:#f3f4f6; border-radius:3px; padding:0 4px">password123</code>)
            </p>
        </div>

        <div class="form-group" style="margin-bottom:0">
            <label>Gabungkan ke kelas <span class="muted">(opsional)</span></label>
            @if($daftarKelas->isEmpty())
                <p class="muted" style="font-size:13px; padding:8px 0">Belum ada kelas tersedia.</p>
            @else
            <div class="kelas-checkbox-list">
                @foreach($daftarKelas as $k)
                    <label class="kelas-checkbox-item">
                        <input type="checkbox" name="kelas_ids[]" value="{{ $k->id }}">
                        <span class="kelas-checkbox-nama">{{ $k->nama }}</span>
                        @if($k->guru)
                            <span class="kelas-checkbox-guru">{{ $k->guru->name }}</span>
                        @endif
                    </label>
                @endforeach
            </div>
            @endif
        </div>

        <button type="submit" class="btn btn-purple" style="align-self:end; white-space:nowrap">Import Sekarang</button>
    </form>
</div>

{{-- Panel Tambah Manual --}}
<div id="panel-tambah" class="al-panel">
    <div class="al-panel-head">
        <span class="al-panel-title">👤 Tambah Siswa Manual</span>
        <button class="al-panel-close" onclick="tutupPanel('panel-tambah', 'btn-tambah', '+ Tambah Siswa')">&times;</button>
    </div>
    <form method="POST" action="{{ route('admin.siswa.store') }}"
          style="display:grid; grid-template-columns:1fr 1fr 1fr 1fr auto; gap:12px; align-items:end">
        @csrf
        <div class="form-group" style="margin-bottom:0">
            <label>Nama Lengkap</label>
            <input type="text" name="name" value="{{ old('name') }}" placeholder="mis. Andi Pratama" required>
        </div>
        <div class="form-group" style="margin-bottom:0">
            <label>Email</label>
            <input type="email" name="email" value="{{ old('email') }}" placeholder="andi@sekolah.sch.id" required>
        </div>
        <div class="form-group" style="margin-bottom:0">
            <label>Password</label>
            <input type="text" name="password" value="password123" required>
        </div>

        <div class="form-group" style="margin-bottom:0">
            <label>Gabungkan ke kelas <span class="muted">(opsional)</span></label>
            @if($daftarKelas->isEmpty())
                <p class="muted" style="font-size:13px; padding:10px 0">Belum ada kelas.</p>
            @else
            <div class="kelas-checkbox-list" style="max-height:130px">
                @foreach($daftarKelas as $k)
                    <label class="kelas-checkbox-item">
                        <input type="checkbox" name="kelas_ids[]" value="{{ $k->id }}"
                               {{ in_array($k->id, old('kelas_ids', [])) ? 'checked' : '' }}>
                        <span class="kelas-checkbox-nama">{{ $k->nama }}</span>
                        @if($k->guru)
                            <span class="kelas-checkbox-guru">{{ $k->guru->name }}</span>
                        @endif
                    </label>
                @endforeach
            </div>
            @endif
        </div>

        <button type="submit" class="btn btn-purple" style="white-space:nowrap">Tambah</button>
    </form>
</div>

{{-- Tabel Siswa --}}
<div class="al-card">
    <div class="al-card-body">
        <div class="al-search-row">
            <form method="GET" style="display:flex; gap:8px">
                <input type="text" name="q" placeholder="Cari nama atau email…" value="{{ $cari }}" style="width:280px">
                <button type="submit" class="btn btn-outline btn-sm">Cari</button>
                @if($cari)
                    <a href="{{ route('admin.siswa.index') }}" class="btn btn-sm" style="background:#f3f4f6; color:#374151; border:1px solid #e5e7eb">✕ Reset</a>
                @endif
            </form>
        </div>

        @if($siswa->isEmpty())
            <div style="text-align:center; padding:40px 0; color:#9ca3af; font-size:14px">
                {{ $cari ? 'Tidak ada siswa yang cocok dengan pencarian "' . $cari . '".' : 'Belum ada siswa terdaftar.' }}
            </div>
        @else
        <table style="width:100%; border-collapse:collapse; font-size:13.5px">
            <thead>
                <tr>
                    <th style="text-align:left; padding:8px 12px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; color:#9ca3af; border-bottom:2px solid #e5e7eb; background:#f9fafb">Nama</th>
                    <th style="text-align:left; padding:8px 12px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; color:#9ca3af; border-bottom:2px solid #e5e7eb; background:#f9fafb">Email</th>
                    <th style="text-align:center; padding:8px 12px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; color:#9ca3af; border-bottom:2px solid #e5e7eb; background:#f9fafb">Kelas Diikuti</th>
                    <th style="text-align:left; padding:8px 12px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; color:#9ca3af; border-bottom:2px solid #e5e7eb; background:#f9fafb">Terdaftar</th>
                    <th style="border-bottom:2px solid #e5e7eb; background:#f9fafb; width:60px"></th>
                </tr>
            </thead>
            <tbody>
            @foreach($siswa as $s)
                <tr>
                    <td style="padding:10px 12px; border-bottom:1px solid #f3f4f6">
                        <div style="display:flex; align-items:center; gap:9px">
                            <div style="width:30px; height:30px; border-radius:50%; background:#f3e8ff; color:#7c3aed; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0">
                                {{ strtoupper(substr($s->name, 0, 1)) }}
                            </div>
                            <span style="font-weight:600; color:#111827">{{ $s->name }}</span>
                        </div>
                    </td>
                    <td style="padding:10px 12px; border-bottom:1px solid #f3f4f6; color:#6b7280">{{ $s->email }}</td>
                    <td style="padding:10px 12px; border-bottom:1px solid #f3f4f6; text-align:center">
                        <span class="badge {{ $s->kelas_diikuti_count > 0 ? 'badge-hijau' : 'badge-abu' }}" style="font-size:12px">
                            {{ $s->kelas_diikuti_count }} kelas
                        </span>
                    </td>
                    <td style="padding:10px 12px; border-bottom:1px solid #f3f4f6; color:#9ca3af; font-size:12.5px">
                        {{ $s->created_at->format('d M Y') }}
                    </td>
                    <td style="padding:10px 12px; border-bottom:1px solid #f3f4f6">
                        <div class="al-action-btns">
                            <form method="POST" action="{{ route('admin.siswa.destroy', $s) }}"
                                  onsubmit="return confirm('Hapus akun {{ addslashes($s->name) }}?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="al-icon-btn al-icon-btn--danger" title="Hapus">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>
                                        <path d="M10 11v6"/><path d="M14 11v6"/>
                                        <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/>
                                    </svg>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
        <div style="margin-top:14px">{{ $siswa->links() }}</div>
        @endif
    </div>
</div>

@endsection

@section('scripts')
<script>
const panelBtnMap = {};

function toggleSiswaPanel(panelId, btn, labelDefault, labelOpen) {
    // Tutup panel lain dulu
    ['panel-import', 'panel-tambah'].forEach(id => {
        if (id !== panelId) {
            const p = document.getElementById(id);
            if (p && p.classList.contains('open')) {
                p.classList.remove('open');
                if (panelBtnMap[id]) panelBtnMap[id].el.textContent = panelBtnMap[id].default;
            }
        }
    });

    const panel  = document.getElementById(panelId);
    const isOpen = panel.classList.toggle('open');
    panelBtnMap[panelId] = { el: btn, default: labelDefault };
    btn.textContent = isOpen ? labelOpen : labelDefault;
}

function tutupPanel(panelId, btnId, labelDefault) {
    document.getElementById(panelId)?.classList.remove('open');
    const btn = document.getElementById(btnId);
    if (btn) btn.textContent = labelDefault;
}

// Buka panel tambah jika ada error validasi dari form tambah
@if($errors->any())
document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('panel-tambah')?.classList.add('open');
});
@endif
</script>
@endsection