@extends('layouts.admin')

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

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>Data Siswa</h2>
    <div class="d-flex gap-2">
        @can('view-any students')
        <a href="{{ route('students.export') }}" class="btn btn-success">Export Excel</a>
        @endcan
        @can('create students')
        <button type="button" class="btn btn-info text-white" data-bs-toggle="modal" data-bs-target="#importModal">Import Excel</button>
        <a href="{{ route('students.create') }}" class="btn btn-primary">+ Tambah Siswa</a>
        @endcan
    </div>
</div>

<x-alert />

<div class="card">
    <div class="card-body">
        <form method="GET" class="row g-2 mb-3">
            <div class="col-md-4">
                <div class="input-group">
                    <input type="text" name="search" class="form-control" placeholder="Cari NIS, nama, jurusan, kelas..." value="{{ request('search') }}">
                    <button type="submit" class="btn btn-primary"><i class="bi bi-search"></i> Cari</button>
                </div>
            </div>
        </form>
        <div class="table-responsive table-mobile-cards">
        <table class="table table-bordered table-hover">
            <thead class="table-light">
                <tr>
                    <th>#</th>
                    <th>NIS</th>
                    <th>Nama</th>
                    <th>Jurusan</th>
                    <th>Kelas</th>
                    <th>Gender</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($students as $student)
                <tr>
                    <td data-label="No">{{ $students->firstItem() + $loop->index }}</td>
                    <td data-label="NIS">{{ $student->nis }}</td>
                    <td data-label="Nama">{{ $student->user->name }}</td>
                    <td data-label="Jurusan"><span class="badge bg-info">{{ $student->department->code }}</span></td>
                    <td data-label="Kelas">{{ $student->schoolClass->name ?? '-' }}</td>
                    <td data-label="Gender">{{ $student->gender ?? '-' }}</td>
                    <td data-label="Aksi">
                        @can('update students')
                        <a href="{{ route('students.edit', $student) }}" class="btn btn-sm btn-warning">Edit</a>
                        @endcan
                        @can('delete students')
                        <form method="POST" action="{{ route('students.destroy', $student) }}" class="d-inline" onsubmit="return confirm('Hapus siswa ini? PERINGATAN: seluruh histori PKL (absensi, jurnal, bimbingan, nilai) juga akan terhapus permanen.')">
                            @csrf @method('DELETE')
                            <button type="submit" class="btn btn-sm btn-danger">Hapus</button>
                        </form>
                        @endcan
                    </td>
                </tr>
                @empty
                <tr>
                    <td data-label="" colspan="7" class="text-center text-muted">Belum ada data siswa.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
        </div>
        <div class="mt-3">
            {{ $students->links() }}
        </div>
    </div>
</div>
<div class="modal fade" id="importModal" tabindex="-1">
    <div class="modal-dialog">
        <form method="POST" action="{{ route('students.import') }}" enctype="multipart/form-data" class="modal-content" id="importForm">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Import Siswa</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label for="file" class="form-label">File Excel</label>
                    <input type="file" name="file" id="file" class="form-control" accept=".xlsx,.xls,.csv" required>
                </div>
                <div class="alert alert-info small py-2 mb-2">
                    <div class="fw-semibold mb-1">Format kolom (urutan):</div>
                    <div>Nama, NIS, Jenis Kelamin, Jurusan, Kelas, Telepon, Alamat</div>
                    <div class="text-muted mt-1">Jenis Kelamin: <code>Laki-laki</code>/<code>L</code> atau <code>Perempuan</code>/<code>P</code>. Jurusan: kode atau nama (mis. <code>RPL</code>).</div>
                </div>
                <a href="{{ route('students.template') }}" class="btn btn-outline-info btn-sm"><i class="bi bi-file-earmark-arrow-down"></i> Download Template</a>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="submit" class="btn btn-primary">Import</button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
(function () {
    document.addEventListener('DOMContentLoaded', function () {
        const form = document.getElementById('importForm');
        if (!form || typeof window.base64Files !== 'function') return;

        form.addEventListener('submit', async function (e) {
            e.preventDefault();
            await window.base64Files(this, [
                { inputName: 'file', b64Name: 'file_b64', nameName: 'file_name' },
            ]);
            this.submit();
        });
    });
})();
</script>
@endpush

@endsection