@extends('layouts.app')

@section('title', 'Kelas Aktif')
@section('content')
    <div id="alert-container" class="alert-container"></div>

    <div class="main-content">
        <div class="container-fluid">
            <!-- Page Header -->
            <div class="page-header">
                <div class="row align-items-end">
                    <div class="col-lg-8">
                        <div class="page-header-title">
                            <i class="ik ik-book bg-blue"></i>
                            <div class="d-inline">
                                <h5>Kelas Aktif</h5>
                                <span>Manajemen Kelas Aktif</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <nav class="breadcrumb-container" aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">
                                    <a href="{{ route('dashboard') }}"><i class="ik ik-home"></i></a>
                                </li>
                                <li class="breadcrumb-item active" aria-current="page">Kelas Aktif</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>

            <!-- Tabel Kelas Aktif -->
            <div class="row" style="margin-bottom: 16px">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <div>
                                <select id="filterTahunAjar" class="form-control">
                                    <option value="">-- Pilih Tahun Ajaran --</option>
                                    @foreach ($tahunAjaranList as $ta)
                                        <option value="{{ $ta->id }}"
                                            {{ (request()->get('tahun_ajar_id')
                                                ? request()->get('tahun_ajar_id')
                                                : ($activeTahunAjar
                                                    ? $activeTahunAjar->id
                                                    : '')) == $ta->id
                                                ? 'selected'
                                                : '' }}>
                                            {{ $ta->tahun }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <!-- Tombol Hapus Terpilih (disembunyikan secara default) -->
                                <button type="button" class="btn btn-danger" id="deleteSelectedBtn" style="display: none;">
                                    <i class="ik ik-trash-2"></i> Hapus Terpilih
                                </button>
                                <!-- Tombol Tambah Kelas Aktif -->
                                <button type="button" class="btn btn-primary" id="btnTambahKelasAktif">
                                    <i class="ik ik-plus"></i> Tambah Kelas Aktif
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <table id="data_table" class="table table-hover table-striped table-bordered nowrap dataTable">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Kelas</th>
                                        <th>Wali Kelas</th>
                                        <th>Lihat Kelas</th>
                                        <th id="aksiHeader">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($kelasAktif as $item)
                                        <tr data-id="{{ $item->id }}" data-kelas_id="{{ $item->kelas_id }}"
                                            data-wali_kelas_id="{{ $item->wali_kelas_id }}"
                                            data-tahun_ajar_id="{{ $item->tahunAjaran->id }}">
                                            <td>{{ $loop->iteration }}</td>
                                            <td class="td-kelas">{{ $item->kelas->nama_kelas }}</td>
                                            <td class="td-wali">{{ $item->dataGuru->nama }}</td>
                                            <td class="td-lihat">
                                                <button type="button" class="btn btn-info btn-sm lihatKelas"
                                                    data-kelas-id="{{ $item->kelas->id }}">Lihat Kelas</button>
                                            </td>
                                            <td class="td-aksi">
                                                <a href="#" class="editKelasAktif">
                                                    <i class="ik ik-edit f-18 mr-15 text-green"></i>
                                                </a>
                                                <a href="#" class="deleteKelasAktif" data-id="{{ $item->id }}"
                                                    style="display: none">
                                                    <i class="ik ik-trash-2 f-18 mr-15 text-red"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>

                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal Tambah Kelas Aktif -->
            <div class="modal fade" id="modalTambahKelasAktif" tabindex="-1" role="dialog"
                aria-labelledby="modalTambahKelasAktifLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <form action="{{ route('kelasaktif.store') }}" method="POST" id="formTambahKelasAktif">
                            @csrf
                            <div class="modal-header">
                                <h5 class="modal-title" id="modalTambahKelasAktifLabel">Tambah Kelas Aktif</h5>
                                <button type="button" class="close" data-dismiss="modal">
                                    <span>&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <!-- Tahun Ajar (read-only) -->
                                <div class="form-group">
                                    <label>Tahun Ajar</label>
                                    @if ($activeTahunAjar)
                                        <input type="text" class="form-control" value="{{ $activeTahunAjar->tahun }}"
                                            disabled>
                                        <input type="hidden" name="tahun_ajar_id" value="{{ $activeTahunAjar->id }}">
                                    @else
                                        <input type="text" class="form-control" value="Tidak ada tahun ajar aktif"
                                            disabled>
                                    @endif
                                </div>
                                <!-- Pilih Kelas -->
                                <div class="form-group">
                                    <label>Kelas</label>
                                    <select name="kelas_id" class="form-control" required>
                                        <option value="">-- Pilih Kelas --</option>
                                        @foreach ($availableKelas as $k)
                                            <option value="{{ $k->id }}">{{ $k->nama_kelas }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <!-- Pilih Wali Kelas -->
                                <div class="form-group">
                                    <label>Wali Kelas</label>
                                    <select name="wali_kelas_id" class="form-control" required>
                                        <option value="">-- Pilih Wali Kelas --</option>
                                        @foreach ($availableWaliKelas as $wk)
                                            <option value="{{ $wk->id }}">{{ $wk->nama }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                                <button type="submit" class="btn btn-primary">Simpan</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Modal Konfirmasi Hapus -->
            <div class="modal fade" id="deleteConfirmModal" tabindex="-1" role="dialog"
                aria-labelledby="deleteConfirmModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="deleteConfirmModalLabel">Konfirmasi Hapus</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Tutup">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            Apakah Anda yakin ingin menghapus data ini?
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                            <button type="button" id="confirmDeleteBtn" class="btn btn-danger">Hapus</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- Modal Tambah Siswa -->
    <div class="modal fade" id="modalTambahSiswa" tabindex="-1" role="dialog" aria-labelledby="modalTambahSiswaLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <!-- Header Modal -->
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTambahSiswaLabel">Tambah Siswa</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Tutup">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <!-- Body Modal -->
                <div class="modal-body">
                    <!-- Baris atas: Custom search dan tombol tambah -->
                    <div class="row mb-3 align-items-center">
                        <div class="col-md-8">
                            <input type="text" id="customSearchTambahSiswa" placeholder="Cari..."
                                class="form-control">
                        </div>
                        <div class="col-md-4 text-right">
                            <button type="button" class="btn btn-primary" id="btnTambahBaru">
                                <i class="ik ik-plus"></i> Tambah
                            </button>
                        </div>
                    </div>
                    <!-- Tabel siswa: header sesuai permintaan -->
                    <table id="tabelTambahSiswa" class="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th><input type="checkbox" id="checkAll"></th>
                                <th>No</th>
                                <th>Nama</th>
                                <th>Jenis Kelamin</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Baris data akan diinject via JS -->
                        </tbody>
                    </table>
                </div>
                <!-- Footer Modal -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Full-Screen Modal (untuk daftar siswa di suatu kelas) -->
    <div class="full-screen-container" id="fullScreenModal">
        <div class="full-screen-header">
            <!-- Baris pertama: Nama kelas & tombol tutup -->
            <div class="row align-items-center">
                <div class="col-sm-8">
                    <h1 class="mb-0">Kelas: <span id="namaKelas">Tidak Tersedia</span></h1>
                </div>
                <div class="col-sm-4 text-right">
                    <button type="button" class="btn btn-secondary" id="closeFullScreenModal">
                        <i class="ik ik-x"></i> Tutup
                    </button>
                </div>
            </div>

            <!-- Baris kedua: Info tahun ajaran -->
            <div class="row mt-2">
                <div class="col-sm-12">
                    <p class="mb-0">
                        Daftar Siswa (Tahun Ajaran
                        {{ $tahunAjar ? $tahunAjar->tahun : 'Tidak ada tahun ajar' }})
                    </p>
                </div>
            </div>

            <!-- Baris ketiga: Tombol tambah siswa & custom search -->
            <div class="row mt-3 align-items-center">
                <div class="col-sm-10">
                    <button type="button" class="btn btn-primary" id="tambahSiswa">
                        Tambah Siswa
                    </button>
                </div>
                <div class="col-sm-2 text-right">
                    <div class="custom-search-container">
                        <input type="text" id="customSearch" placeholder="Cari..." class="form-control">
                    </div>
                </div>
            </div>
        </div>

        <div class="full-screen-content">
            <table id="modalTabelSiswa" class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>No Induk</th>
                        <th>Nama</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody id="siswaTbody">
                    <tr>
                        <td colspan="5" class="text-center">Belum ada data siswa.</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>


    <!-- ===== MODAL KONFLIK (BARU) ===== -->
    <!-- Modal untuk menampilkan daftar conflict (siswa sudah ada) agar user bisa pilih override/skip -->
    <div class="modal fade" id="modalConflict" tabindex="-1" role="dialog" aria-labelledby="modalConflictLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Konflik Siswa</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Tutup">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Ada beberapa siswa yang sudah terdaftar di kelas ini. Silakan pilih apa yang akan dilakukan:</p>
                    <table class="table table-sm table-bordered">
                        <thead>
                            <tr>
                                <th>Nama Siswa</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody id="conflictTbody">
                            <!-- Diinject via JS -->
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" id="btnProsesConflict">Proses</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        // Fungsi menampilkan alert Bootstrap
        function showBootstrapAlert(message) {
            var alertHtml = '<div class="alert alert-warning alert-dismissible fade show custom-alert" role="alert">' +
                '<strong>Perhatian!</strong> ' + message +
                '<button type="button" class="close" data-dismiss="alert" aria-label="Close">' +
                '<span aria-hidden="true">&times;</span></button></div>';
            $('#alert-container').append(alertHtml);
            setTimeout(function() {
                $('.custom-alert').fadeOut(500, function() {
                    $(this).remove();
                });
            }, 3000);
        }

        // Filter tahun ajaran
        $('#filterTahunAjar').on('change', function() {
            var tahunAjarId = $(this).val();
            window.location.href = "{{ route('kelasaktif.index') }}" + "?tahun_ajar_id=" + tahunAjarId;
        });

        var globalAvailableKelas = @json($availableKelas);
        var globalAvailableWaliKelas = @json($availableWaliKelas);
        var editingRowId = null;
        var activeKelasAktifId = null;

        // Ready
        $(document).ready(function() {
            // DataTable #data_table
            if ($.fn.DataTable.isDataTable('#data_table')) {
                $('#data_table').DataTable().destroy();
            }
            var table = $('#data_table').DataTable({
                destroy: true,
                dom: "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
                language: {
                    lengthMenu: "Tampilkan _MENU_ entri",
                    search: "Cari:",
                    info: "Menampilkan _START_ hingga _END_ dari _TOTAL_ entri",
                    infoEmpty: "Menampilkan 0 hingga 0 dari 0 entri",
                    infoFiltered: "(disaring dari _MAX_ total entri)",
                    paginate: {
                        first: "Pertama",
                        last: "Terakhir",
                        next: "Selanjutnya",
                        previous: "Sebelumnya"
                    },
                    zeroRecords: "Tidak ditemukan data yang sesuai"
                },
                paging: true,
                searching: true,
                ordering: true,
                columnDefs: [{
                    orderable: false,
                    targets: [0, 4]
                }],
                drawCallback: function(settings) {
                    var api = this.api();
                    api.column(0, {
                            page: 'current'
                        })
                        .nodes()
                        .each(function(cell, i) {
                            cell.innerHTML = i + 1;
                        });
                }
            });
            $('#data_table_filter input').addClass('form-control form-control-sm');
            $('#data_table_length select').addClass('form-control form-control-sm');

            // ------------------ TAMBAH KELAS AKTIF ------------------
            $('#btnTambahKelasAktif').on('click', function(e) {
                if (editingRowId !== null) {
                    showBootstrapAlert('Selesaikan edit yang sedang aktif terlebih dahulu.');
                    return false;
                }
                // Cek tahun ajar aktif
                $.ajax({
                    url: '{{ route('kelasaktif.cekTahunAjarAktif') }}',
                    method: 'GET',
                    success: function(response) {
                        if (!response.active) {
                            showBootstrapAlert(response.message);
                        } else {
                            $('#modalTambahKelasAktif').modal('show');
                        }
                    },
                    error: function() {
                        showBootstrapAlert(
                        'Terjadi kesalahan saat memeriksa tahun ajar aktif.');
                    }
                });
            });

            // Submit form tambah Kelas Aktif
            $('#formTambahKelasAktif').on('submit', function(e) {
                e.preventDefault();
                var form = this;
                var kelasId = $(form).find('select[name="kelas_id"]').val();
                var waliKelasId = $(form).find('select[name="wali_kelas_id"]').val();
                var tahunAjarId = $(form).find('input[name="tahun_ajar_id"]').val();

                // Step 1: cek data Kelas
                $.ajax({
                    url: "{{ route('kelasaktif.checkKelas') }}",
                    method: "GET",
                    data: {
                        kelas_id: kelasId,
                        tahun_ajar_id: tahunAjarId
                    },
                    dataType: "json",
                    success: function(resp) {
                        if (resp.exists) {
                            alert(resp.message);
                        } else {
                            // Step 2: cek data Wali Kelas
                            $.ajax({
                                url: "{{ route('kelasaktif.checkWaliKelas') }}",
                                method: "GET",
                                data: {
                                    wali_kelas_id: waliKelasId,
                                    tahun_ajar_id: tahunAjarId
                                },
                                dataType: "json",
                                success: function(resp2) {
                                    if (resp2.exists) {
                                        alert(resp2.message);
                                    } else {
                                        form.submit();
                                    }
                                },
                                error: function() {
                                    alert(
                                        'Terjadi kesalahan saat memeriksa Wali Kelas.');
                                }
                            });
                        }
                    },
                    error: function() {
                        alert('Terjadi kesalahan saat memeriksa Kelas.');
                    }
                });
            });

            // ------------------ KONFIRMASI HAPUS ------------------
            $('#confirmDeleteBtn').on('click', function() {
                var id = $('#deleteConfirmModal').data('id');
                $.ajax({
                    url: '/kelasaktif/' + id,
                    method: 'DELETE',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            alert('Data berhasil dihapus.');
                            location.reload();
                        } else {
                            alert(response.message || 'Gagal menghapus data.');
                        }
                    },
                    error: function() {
                        alert('Terjadi kesalahan server.');
                    }
                });
            });

            $(document).on('click', '.deleteKelasAktif', function(e) {
                if (editingRowId !== null) {
                    showBootstrapAlert('Selesaikan edit yang sedang aktif terlebih dahulu.');
                    return false;
                }
                var id = $(this).data('id');
                $('#deleteConfirmModal').data('id', id).modal('show');
                e.preventDefault();
            });

            // ------------------ EDIT INLINE KELAS AKTIF -----------
            $(document).on('click', '.editKelasAktif', function(e) {
                e.preventDefault();
                if (editingRowId !== null) {
                    showBootstrapAlert('Selesaikan edit yang sedang aktif terlebih dahulu.');
                    return false;
                }
                var row = $(this).closest('tr');
                var id = row.data('id');
                editingRowId = id;

                row.data('originalKelas', row.find('.td-kelas').html());
                row.data('originalWali', row.find('.td-wali').html());
                row.data('originalAksi', row.find('.td-aksi').html());

                var currentKelasId = row.data('kelas_id');
                var currentWaliId = row.data('wali_kelas_id');
                var currentKelasText = row.find('.td-kelas').text().trim();
                var currentWaliText = row.find('.td-wali').text().trim();

                // Build dropdown Kelas
                var kelasOptions = '<option value="">-- Pilih Kelas --</option>';
                var foundKelas = false;
                globalAvailableKelas.forEach(function(item) {
                    kelasOptions += '<option value="' + item.id + '"' +
                        (item.id == currentKelasId ? ' selected' : '') +
                        '>' + item.nama_kelas + '</option>';
                    if (item.id == currentKelasId) {
                        foundKelas = true;
                    }
                });
                if (!foundKelas && currentKelasId) {
                    kelasOptions += '<option value="' + currentKelasId + '" selected>' + currentKelasText +
                        '</option>';
                }

                // Build dropdown Wali
                var waliOptions = '<option value="">-- Pilih Wali Kelas --</option>';
                var foundWali = false;
                globalAvailableWaliKelas.forEach(function(item) {
                    waliOptions += '<option value="' + item.id + '"' +
                        (item.id == currentWaliId ? ' selected' : '') +
                        '>' + item.nama + '</option>';
                    if (item.id == currentWaliId) {
                        foundWali = true;
                    }
                });
                if (!foundWali && currentWaliId) {
                    waliOptions += '<option value="' + currentWaliId + '" selected>' + currentWaliText +
                        '</option>';
                }

                row.find('.td-kelas').html('<select class="form-control inlineKelas">' + kelasOptions +
                    '</select>');
                row.find('.td-wali').html('<select class="form-control inlineWali">' + waliOptions +
                    '</select>');

                row.find('.td-aksi').html(
                    '<a href="#" class="saveKelas" data-id="' + id +
                    '"><i class="ik ik-check text-success" style="font-size:18px;"></i></a>' +
                    '<a href="#" class="cancelKelas"><i class="ik ik-x text-danger" style="font-size:18px;margin-left:12px;"></i></a>'
                );
            });

            $(document).on('click', '.saveKelas', function(e) {
                e.preventDefault();
                var row = $(this).closest('tr');
                var id = $(this).data('id');
                var kelasId = row.find('select.inlineKelas').val();
                var waliKelasId = row.find('select.inlineWali').val();
                var tahunAjarId = row.data('tahun_ajar_id');

                $.ajax({
                    url: '/kelasaktif/' + id,
                    method: 'PUT',
                    data: {
                        kelas_id: kelasId,
                        wali_kelas_id: waliKelasId,
                        tahun_ajar_id: tahunAjarId,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            location.reload();
                        } else {
                            alert('Gagal mengupdate data.');
                        }
                    },
                    error: function() {
                        alert('Terjadi kesalahan server.');
                    }
                });
            });

            $(document).on('click', '.cancelKelas', function(e) {
                e.preventDefault();
                var row = $(this).closest('tr');
                row.find('.td-kelas').html(row.data('originalKelas'));
                row.find('.td-wali').html(row.data('originalWali'));
                row.find('.td-aksi').html(row.data('originalAksi'));
                editingRowId = null;
            });

            // ------------------ LIHAT KELAS (Modal Full Screen) -----------
            $(document).on('click', '.lihatKelas', function(e) {
                e.preventDefault();
                var row = $(this).closest('tr');
                activeKelasAktifId = row.data('id');
                var kelasId = $(this).data('kelas-id');
                var namaKelas = row.find('.td-kelas').text().trim();
                var tahunAjarId = $('#filterTahunAjar').val();

                $('#namaKelas').text(namaKelas);

                var modal = $('#fullScreenModal');
                modal.show().removeClass('slide-out').addClass('slide-in');

                // Ambil data siswa
                $.ajax({
                    url: '/getSiswaKelas',
                    method: 'GET',
                    data: {
                        kelas_id: kelasId,
                        tahun_ajar_id: tahunAjarId
                    },
                    dataType: 'json',
                    success: function(response) {
                        var tbody = $('#siswaTbody');
                        tbody.empty();
                        if (response.length > 0) {
                            $.each(response, function(i, siswa) {
                                tbody.append(
                                    '<tr>' +
                                    '<td>' + (i + 1) + '</td>' +
                                    '<td>' + siswa.no_induk + '</td>' +
                                    '<td>' + siswa.nama + '</td>' +
                                    '<td><span class="badge badge-' +
                                    (siswa.status === "Aktif" ? "success" :
                                        "danger") +
                                    '">' + siswa.status + '</span></td>' +
                                    
                                    '</tr>'
                                );
                            });
                        } else {
                            tbody.append(
                                '<tr><td colspan="5" class="text-center">Belum ada data siswa.</td></tr>'
                            );
                        }

                        // Inisialisasi DataTable
                        var tableElement = $('#modalTabelSiswa');
                        if ($.fn.DataTable.isDataTable(tableElement)) {
                            tableElement.DataTable().destroy();
                        }
                        var dtInstance = tableElement.DataTable({
                            paging: false,
                            searching: true,
                            ordering: true
                        });

                        $('#customSearch').off('keyup').on('keyup', function() {
                            dtInstance.search(this.value).draw();
                        });
                    },
                    error: function() {
                        alert('Gagal mengambil data siswa.');
                    }
                });
            });

            $('#closeFullScreenModal').on('click', function(e) {
                e.preventDefault();
                var modal = $('#fullScreenModal');
                if ($.fn.DataTable.isDataTable('#modalTabelSiswa')) {
                    try {
                        var dt = $('#modalTabelSiswa').DataTable();
                        dt.clear();
                        dt.destroy();
                    } catch (err) {
                        console.log("DataTable destroy error:", err);
                    }
                }
                $('#siswaTbody').empty();
                modal.removeClass('slide-in').addClass('slide-out');
                setTimeout(function() {
                    modal.hide();
                }, 500);
            });

            // ------------------ TAMBAH SISWA (TEMP_KELAS) ------------------
            $(document).on('click', '#tambahSiswa', function(e) {
                e.preventDefault();
                var fullKelas = $('#namaKelas').text().trim();
                var baseKelas = fullKelas.split(" ")[0];
                var selectedTahunAjaran = $('#filterTahunAjar')
                    .find('option:selected').text().trim();

                $('#modalTambahSiswa').modal('show');

                $.ajax({
                    url: '/getTempKelas',
                    method: 'GET',
                    data: {
                        kelas: baseKelas,
                        tahun_ajaran: selectedTahunAjaran
                    },
                    dataType: 'json',
                    success: function(response) {
                        var tbody = $('#tabelTambahSiswa tbody');
                        tbody.empty();
                        if (response.length > 0) {
                            $.each(response, function(i, siswa) {
                                tbody.append(
                                    '<tr>' +
                                    '<td><input type="checkbox" class="checkItem" data-id="' +
                                    siswa.id + '"></td>' +
                                    '<td>' + (i + 1) + '</td>' +
                                    '<td>' + siswa.nama + '</td>' +
                                    '<td>' + (siswa.jenis_kelamin ? siswa
                                        .jenis_kelamin : '-') + '</td>' +
                                    '</tr>'
                                );
                            });
                        } else {
                            tbody.append(
                                '<tr><td colspan="4" class="text-center">Belum ada data siswa.</td></tr>'
                            );
                        }
                        if ($.fn.DataTable.isDataTable('#tabelTambahSiswa')) {
                            $('#tabelTambahSiswa').DataTable().destroy();
                        }
                        setTimeout(function() {
                            var dt = $('#tabelTambahSiswa').DataTable({
                                paging: false,
                                searching: true,
                                ordering: true
                            });
                            $('#customSearchTambahSiswa').off('keyup').on('keyup',
                                function() {
                                    dt.search(this.value).draw();
                                });
                        }, 100);
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.log('Error details:', jqXHR.responseText, textStatus,
                            errorThrown);
                        alert('Gagal mengambil data dari temp_kelas.');
                    }
                });
            });

            $(document).on('change', '#checkAll', function() {
                var isChecked = $(this).is(':checked');
                $('.checkItem').prop('checked', isChecked);
            });

            // ------------------ PROSES TAMBAH SISWA: Cek Conflict -----------
            $(document).on('click', '#btnTambahBaru', function(e) {
                e.preventDefault();
                var selectedTempIds = [];
                $('.checkItem:checked').each(function() {
                    selectedTempIds.push($(this).data('id'));
                });
                if (selectedTempIds.length === 0) {
                    alert('Pilih minimal 1 siswa untuk dipindahkan.');
                    return;
                }
                if (!activeKelasAktifId) {
                    alert('Kelas aktif tidak diketahui.');
                    return;
                }

                // >>>> Tambahan: kita ambil TAHUN AJARAN (string) langsung dari dropdown:
                var selectedTahunAjaran = $('#filterTahunAjar option:selected').text().trim();

                // Langkah 1: cek conflict
                $.ajax({
                    url: '{{ route('kelasaktif.checkConflict') }}',
                    method: 'POST',
                    data: {
                        active_kelas_aktif_id: activeKelasAktifId, // tetap ikut dikirim, kalau dibutuhkan
                        tahun_ajaran: selectedTahunAjaran, // <--- FIX: tambahkan agar di-check via YEAR
                        temp_ids: selectedTempIds,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(res) {
                        if (res.success && !res.conflictFound) {
                            // Tidak ada conflict => langsung panggil insert
                            let noConflictDecisions = [];
                            // semua data => 'insert'
                            selectedTempIds.forEach(function(tid) {
                                noConflictDecisions.push({
                                    temp_id: tid,
                                    action: 'insert'
                                });
                            });
                            doInsertSiswaKelas(selectedTempIds, noConflictDecisions);
                        } else if (res.success && res.conflictFound) {
                            // Ada conflict => tampilkan modalConflict
                            buildConflictModal(res.conflicts, selectedTempIds);
                        } else {
                            alert(res.message || 'Terjadi kesalahan saat cek conflict.');
                        }
                    },
                    error: function() {
                        alert('Terjadi kesalahan server saat cek conflict.');
                    }
                });
            });

            // Fungsi membangun tampilan modalConflict
            function buildConflictModal(conflicts, allTempIds) {
                // clear body
                $('#conflictTbody').empty();

                // buat set agar mudah cek temp_id mana yang conflict
                let conflictSet = new Set();
                conflicts.forEach(c => conflictSet.add(c.temp_id));

                // Tampilkan data conflict, user pilih override/skip
                conflicts.forEach(function(item) {
                    let rowHtml = '<tr data-tempid="' + item.temp_id + '">' +
                        '<td>' + item.nama_siswa + '</td>' +
                        '<td>' +
                        '<select class="form-control conflictAction">' +
                        '<option value="skip">Jangan Timpa (Skip)</option>' +
                        '<option value="override">Timpa (Override)</option>' +
                        '</select>' +
                        '</td>' +
                        '</tr>';
                    $('#conflictTbody').append(rowHtml);
                });

                // Tampilkan modal
                $('#modalConflict').modal('show');
                $('#modalTambahKelasAktif').modal('hide');

                // Ketika user klik "Proses"
                $('#btnProsesConflict').off('click').on('click', function() {
                    let decisions = [];
                    // isi decisions untuk conflict
                    $('#conflictTbody tr').each(function() {
                        let tid = $(this).data('tempid');
                        let action = $(this).find('.conflictAction').val();
                        decisions.push({
                            temp_id: tid,
                            action: action
                        });
                    });
                    // sisanya (non-conflict)
                    allTempIds.forEach(function(tid) {
                        if (!conflictSet.has(tid)) {
                            decisions.push({
                                temp_id: tid,
                                action: 'insert'
                            });
                        }
                    });
                    // panggil doInsertSiswaKelas
                    doInsertSiswaKelas(allTempIds, decisions);
                    // tutup modal conflict
                    $('#modalConflict').modal('hide');
                });
            }

            // Fungsi lanjutan untuk benar-benar insertSiswaKelas
            function doInsertSiswaKelas(tempIds, decisions) {
                $.ajax({
                    url: '{{ route('kelasaktif.insertSiswaKelas') }}',
                    method: 'POST',
                    data: {
                        active_kelas_aktif_id: activeKelasAktifId,
                        temp_ids: tempIds,
                        decisions: decisions,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(res) {
                        if (res.success) {
                            alert('Data siswa berhasil dipindahkan.');
                            $('#modalTambahSiswa').modal('hide');
                            // Refresh data di full screen modal
                            $('#closeFullScreenModal').trigger('click');
                        } else {
                            alert(res.message || 'Gagal memindahkan data.');
                        }
                    },
                    error: function(xhr, status, err) {
                        console.log(xhr.responseText, status, err);
                        alert('Terjadi kesalahan server (insertSiswaKelas).');
                    }
                });
            }

        });
    </script>

    <style>
        /* Pastikan CSS ini setelah load Bootstrap */
        #modalTambahSiswa,
        #modalTambahKelasAktif,
        #modalConflict {
            z-index: 1100 !important;
        }

        .modal-backdrop {
            z-index: 1090 !important;
        }

        div.dataTables_wrapper div.dataTables_paginate {
            margin-top: 12px;
            margin-bottom: 8px;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button {
            background-color: #fdfdfd !important;
            color: #212529 !important;
            border: 1px solid #e9e9e9 !important;
            border-radius: 0.25rem;
            padding: 0.375rem 0.75rem;
            margin-top: 15px;
            padding-bottom: 10px;
            cursor: pointer;
            transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background-color: #e2e6ea !important;
            border-color: #dae0e5 !important;
            color: #212529 !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background-color: #e2e6ea !important;
            border-color: #dae0e5 !important;
            color: #212529 !important;
        }

        .alert-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1050;
            max-width: 350px;
        }

        .custom-alert {
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
            font-size: 14px;
            padding: 10px 15px;
        }

        .full-screen-container {
            padding: 12px 24px;
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #fff;
            z-index: 1050;
            overflow-y: auto;
            transform: translateY(100%);
        }

        .full-screen-container.slide-in {
            display: block;
            animation: slideInUp 0.5s forwards;
        }

        .full-screen-container.slide-out {
            animation: slideOutDown 0.5s forwards;
        }

        @keyframes slideInUp {
            from {
                transform: translateY(100%);
            }

            to {
                transform: translateY(0);
            }
        }

        @keyframes slideOutDown {
            from {
                transform: translateY(0);
            }

            to {
                transform: translateY(100%);
            }
        }

        /* Hide default DataTables search */
        .dataTables_filter {
            display: none;
        }
    </style>
@endsection