@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, #6366f1 0%, #a855f7 50%, #ec4899 100%);">
      <div class="row align-items-center">
        <div class="col-sm-8">
          <h3 class="m-0 fw-bold"><i class="fas fa-layer-group me-2"></i> Kenaikan Kelas Siswa</h3>
          <p class="mb-0 text-white-50 mt-1">Proses perpindahan rombongan belajar dan tingkat kelas siswa secara massal dan 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> Filter Rombel & Tujuan</h5>
        </div>
        <div class="card-body px-4 py-4">
            <!-- Pilihan Kelas Asal -->
            <div class="form-group row align-items-center mb-4">
                <label class="col-sm-2 col-form-label fw-semibold text-secondary">Kelas Asal</label>
                <div class="col-sm-5">
                    <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 Asal --</option>
                            @foreach ($kelas as $item)
                                <option value="{{ $item->id }}">{{ $item->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            <!-- Pilihan Kelas Tujuan & Tombol Aksi -->
            <div class="form-group row align-items-center mb-4 p-4 rounded-4" id="form-tujuan" style="display: none; background: linear-gradient(to right, #f8fafc, #f1f5f9);">
                <label class="col-sm-2 col-form-label fw-semibold text-secondary">Kelas Tujuan</label>
                <div class="col-sm-4 mb-3 mb-sm-0">
                    <div class="input-group">
                        <span class="input-group-text bg-white border-end-0 text-success rounded-start-3"><i class="fas fa-arrow-circle-up"></i></span>
                        <select name="tujuan_kelas_id" id="tujuan_kelas_id" class="form-control select2 border-start-0 rounded-end-3">
                            <option value="">-- Pilih Kelas Tujuan --</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" class="btn text-white fw-bold px-4 py-2 shadow rounded-3 w-100" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%);">
                        <i class="fas fa-paper-plane me-1"></i> Proses Naik Kelas
                    </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>
                        </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();
            $('#form-tujuan').fadeIn();
            if (table) {
                table.ajax.url('{{ route("siswa.naik-kelas") }}?kelas_id=' + kelasId).load();
            } else {
                table = $('#table-siswa').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: '{{ route("siswa.naik-kelas") }}?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'},
                    ]
                });
            }
        } else {
            $('#wrapper-table').hide();
            $('#form-tujuan').hide();
        }
    });

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

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

        if (siswa_ids.length === 0) {
            alert('Pilih minimal satu siswa!');
            return;
        }
        if (!tujuan_kelas_id) {
            alert('Pilih kelas tujuan terlebih dahulu!');
            return;
        }

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