@extends('layouts.main')

@section('content')
<!-- Header Banner dengan Gradient Warna Modern -->
<div class="content-header py-4">
  <div class="container-fluid">
    <div class="p-4 rounded-4 shadow-sm text-white" style="background: linear-gradient(135deg, #0284c7 0%, #2563eb 50%, #7c3aed 100%);">
      <div class="row align-items-center">
        <div class="col-sm-8">
          <h3 class="m-0 fw-bold"><i class="fas fa-graduation-cap me-2"></i> Kelulusan Siswa (Kelas Akhir)</h3>
          <p class="mb-0 text-white-50 mt-1">Proses penetapan kelulusan dan penonaktifan akun massal untuk siswa kelas tingkat akhir secara terstruktur.</p>
        </div>
      </div>
    </div>
  </div>
</div>

<section class="content pb-4">
  <div class="container-fluid">
    <!-- Card Utama -->
    <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
        <div class="card-header bg-white py-3 border-0">
            <h5 class="card-title fw-bold text-primary mb-0"><i class="fas fa-filter me-2 text-indigo"></i> Pilih Rombel / Kelas</h5>
        </div>
        <div class="card-body px-4 py-4">
            <!-- Pilihan Kelas & Tombol Proses -->
            <div class="form-group row align-items-center mb-4">
                <label class="col-sm-2 col-form-label fw-semibold text-secondary">Pilih Kelas</label>
                <div class="col-sm-4 mb-3 mb-sm-0">
                    <div class="input-group">
                        <span class="input-group-text bg-light border-end-0 text-primary rounded-start-3"><i class="fas fa-school"></i></span>
                        <select name="kelas_id" id="kelas_id" class="form-control select2 border-start-0 rounded-end-3">
                            <option value="">-- Pilih Kelas --</option>
                            @foreach ($kelas as $item)
                                <option value="{{ $item->id }}">{{ $item->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-sm-4">
                    <button type="button" id="btn-proses-lulus" class="btn text-white fw-bold px-4 py-2 shadow rounded-3 w-100" style="background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); display: none;">
                        <i class="fas fa-user-check me-1"></i> Proses Luluskan Siswa
                    </button>
                </div>
            </div>

            <!-- Tabel Data Siswa -->
            <div class="table-responsive mt-3" id="wrapper-table" style="display: none;">
                <table class="table table-hover align-middle mb-0 border" id="table-siswa">
                    <thead class="text-white text-uppercase fs-7" style="background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);">
                        <tr>
                            <th class="text-center py-3" width="5%">
                                <input type="checkbox" id="select-all" class="form-check-input cursor-pointer">
                            </th>
                            <th class="py-3" width="5%">No.</th>
                            <th class="py-3">Nama Siswa</th>
                            <th class="py-3">Kelas</th>
                            <th class="py-3">NIS/NISN</th>
                            <th class="py-3">Status Akun</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
  </div>
</section>
@endsection

@section('js')
<script>
    let table;
    $('#kelas_id').on('change', function() {
        let kelasId = $(this).val();
        if (kelasId) {
            $('#wrapper-table').fadeIn();
            $('#btn-proses-lulus').fadeIn();
            if (table) {
                table.ajax.url('{{ route("siswa.lulus") }}?kelas_id=' + kelasId).load();
            } else {
                table = $('#table-siswa').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: '{{ route("siswa.lulus") }}?kelas_id=' + kelasId,
                    columns: [
                        {data: 'pilih', name: 'pilih', orderable: false, searchable: false, className: 'text-center'},
                        {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
                        {data: 'name', name: 'name'},
                        {data: 'kelas.name', name: 'kelas.name'},
                        {data: 'nis-nisn', name: 'nis-nisn'},
                        {data: 'user.is_aktif', name: 'user.is_aktif'},
                    ]
                });
            }
        } else {
            $('#wrapper-table').hide();
            $('#btn-proses-lulus').hide();
        }
    });

    // Centang Semua
    $(document).on('click', '#select-all', function() {
        $('#table-siswa tbody input[type="checkbox"]').prop('checked', this.checked);
    });

    // Proses Tombol Kelulusan
    $('#btn-proses-lulus').on('click', function() {
        let siswa_ids = [];
        $('#table-siswa tbody input[type="checkbox"]:checked').each(function() {
            siswa_ids.push($(this).val());
        });

        if (siswa_ids.length === 0) {
            alert('Pilih minimal satu siswa!');
            return;
        }

        if (confirm('Yakin ingin meluluskan siswa yang dipilih? Akun siswa akan dinonaktifkan.')) {
            $.ajax({
                url: '{{ route("siswa.proses-lulus") }}',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    siswa_id: siswa_ids
                },
                success: function(response) {
                    alert(response.success);
                    table.ajax.reload();
                    $('#select-all').prop('checked', false);
                },
                error: function(xhr) {
                    alert('Terjadi kesalahan saat memproses kelulusan!');
                }
            });
        }
    });
</script>
@endsection