@extends('layouts.app')
@section('title', 'Data Siswa')

@section('content')
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
        <span><i class="bi bi-people-fill text-hijau"></i> Daftar Siswa</span>
        <div class="d-flex gap-2">
            <a href="{{ route('students.import.form') }}" class="btn btn-sm btn-outline-primary"><i class="bi bi-upload"></i> Impor</a>
            <a href="{{ route('students.create') }}" class="btn btn-sm btn-primary"><i class="bi bi-person-plus"></i> Tambah Siswa</a>
        </div>
    </div>
    <div class="card-body">
        <form class="row g-2 mb-3" method="GET">
            <div class="col-md-5"><input type="text" name="q" value="{{ $q }}" class="form-control" placeholder="Cari nama / no induk..."></div>
            <div class="col-md-4">
                <select name="kelas" class="form-select">
                    <option value="">Semua Kelas</option>
                    @foreach($daftarKelas as $k)<option value="{{ $k }}" @selected($kelas==$k)>{{ $k }}</option>@endforeach
                </select>
            </div>
            <div class="col-md-3 d-flex gap-2">
                <button class="btn btn-primary flex-fill"><i class="bi bi-search"></i> Cari</button>
                <a href="{{ route('students.index') }}" class="btn btn-outline-primary"><i class="bi bi-arrow-counterclockwise"></i></a>
            </div>
        </form>

        <div class="table-responsive">
            <table class="table table-hover align-middle">
                <thead><tr><th>No Induk</th><th>Nama</th><th>Kelas</th><th>Status</th><th class="text-end">Tunggakan Awal</th><th>WA Ortu</th><th class="text-end">Aksi</th></tr></thead>
                <tbody>
                @forelse($students as $s)
                    <tr>
                        <td class="fw-semibold">{{ $s->no_induk }}</td>
                        <td>{{ $s->nama }}</td>
                        <td><span class="badge bg-hijau-soft">{{ $s->kelas ?? '-' }}</span></td>
                        <td>{{ $s->status ?? '-' }}</td>
                        <td class="text-end">{{ rp($s->tunggakan_awal) }}</td>
                        <td>{{ $s->wa_ortu ?? '-' }}</td>
                        <td class="text-end text-nowrap">
                            <a href="{{ route('payments.create', ['student_id'=>$s->id]) }}" class="btn btn-sm btn-outline-primary" title="Bayar"><i class="bi bi-cash-coin"></i></a>
                            <a href="{{ route('payments.kartu', $s) }}" class="btn btn-sm btn-outline-primary" title="Kartu"><i class="bi bi-card-heading"></i></a>
                            <a href="{{ route('students.edit', $s) }}" class="btn btn-sm btn-outline-primary" title="Edit"><i class="bi bi-pencil"></i></a>
                            <form action="{{ route('students.destroy', $s) }}" method="POST" class="d-inline" onsubmit="return confirm('Hapus siswa {{ $s->nama }}? Semua transaksi terkait ikut terhapus.')">
                                @csrf @method('DELETE')
                                <button class="btn btn-sm btn-outline-danger" title="Hapus"><i class="bi bi-trash"></i></button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="7" class="text-center text-muted py-4">Belum ada data siswa.</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
        {{ $students->links() }}
    </div>
</div>
@endsection