@extends('layouts.app')
@section('title', 'Kenaikan Kelas')
@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-send bg-blue"></i>
                            <div class="d-inline">
                                <h5>Kenaikan Kelas</h5>
                                <span>Proses Kenaikan Kelas Siswa</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">Kenaikan Kelas</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
            <!-- End Page Header -->

            <!-- Card: Filter & Proses -->
            <div class="card">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card-header d-flex justify-content-between">
                            <div class="row" style="width:70%;">
                                @if (session('role') == 'admin')
                                    <div class="col-sm-4">
                                        <select name="tahun_ajar_id" id="filterTahunAjar" class="form-control">
                                            <option value="">-- Pilih Tahun Ajaran --</option>
                                            @foreach ($tahunAjaranList as $ta)
                                                <option value="{{ $ta->id }}"
                                                    {{ (request()->get('tahun_ajar_id') ?? ($activeTahunAjar ? $activeTahunAjar->id : '')) == $ta->id ? 'selected' : '' }}>
                                                    {{ $ta->tahun }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-sm-3">
                                        <select name="kelas_id" id="filterKelas" class="form-control">
                                            <option value="">-- Pilih Kelas --</option>
                                            @foreach ($kelasList as $kelasItem)
                                                <option value="{{ $kelasItem->id }}"
                                                    {{ request()->get('kelas_id') == $kelasItem->id ? 'selected' : '' }}>
                                                    {{ $kelasItem->nama_kelas }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                @endif

                            </div>

                            <div style="text-align: right">
                                <button type="button" class="btn btn-success m-1" id="btnProses">
                                    <i class="ik ik-send"></i> Proses Kenaikan
                                </button>
                            </div>
                        </div>
                        <div class="custom_cari col-sm-12">
                            <div class="custom-search-container col-sm-4" id="pencarian_custom">
                                <input type="text" id="customSearch" placeholder="Cari..." class="form-control">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End Card Header -->

                <!-- Tabel Data Siswa -->
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="table-responsive">
                                <table id="data_table"
                                    class="table table-hover table-striped table-bordered nowrap dataTable">
                                    <thead>
                                        <tr>
                                            <th>No</th>
                                            <th>No Induk</th>
                                            <th>Nama</th>
                                            <th>
                                                <input type="checkbox" id="checkAllNaik"> Pilih Semua
                                            </th>
                                            <th>
                                                <input type="checkbox" id="checkAllTinggal"> Pilih Semua
                                            </th>
                                            <th>
                                                <input type="checkbox" id="checkAllLulus"> Pilih Semua
                                            </th>
                                            <th>
                                                <input type="checkbox" id="checkAllBerhenti"> Pilih Semua
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($siswa as $item)
                                            <tr id="siswa-row-{{ $item->id }}">
                                                <td>{{ $loop->iteration }}</td>
                                                <td>{{ $item->no_induk }}</td>
                                                <td>{{ $item->nama }}</td>
                                                <td>
                                                    <input type="checkbox" name="status[{{ $item->id }}][naik]"
                                                        class="status-naik">
                                                    Naik Kelas
                                                </td>
                                                <td>
                                                    <input type="checkbox" name="status[{{ $item->id }}][tinggal]"
                                                        class="status-tinggal">
                                                    Tinggal Kelas
                                                </td>
                                                <td>
                                                    <input type="checkbox" name="status[{{ $item->id }}][lulus]"
                                                        class="status-lulus">
                                                    Lulus
                                                </td>
                                                <td>
                                                    <input type="checkbox" name="status[{{ $item->id }}][berhenti]"
                                                        class="status-berhenti">
                                                    Berhenti
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End Tabel -->
            </div>
        </div>
    </div>

    <!-- Modal Konfirmasi -->
    <div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmModalLabel">Konfirmasi</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 memprosesnya?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Tidak</button>
                    <button type="button" class="btn btn-primary" id="btnConfirmYes">Ya</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Message -->
    <div class="modal fade" id="messageModal" tabindex="-1" aria-labelledby="messageModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="messageModalLabel">Pesan</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Tutup">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="modalMessageBody">
                    <!-- Pesan error atau informasi akan muncul di sini -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" id="btnTutupModal"
                        data-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>



@endsection

@section('script')
    <script>
        $(document).ready(function() {
            // Fungsi alert Bootstrap yang sudah kamu punya
            // Fungsi alert Bootstrap (gak pake basa-basi)
            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);
            }

            // Inisialisasi DataTable
            if ($.fn.DataTable.isDataTable('#data_table')) {
                $('#data_table').DataTable().destroy();
            }
            var table = $('#data_table').DataTable({
                paging: false,
                stateSave: true,
                searching: true,
                ordering: false,
                autoWidth: true,
                fixedHeader: true,
                scrollX: false
            });

            $('#customSearch').on('keyup', function() {
                table.search(this.value).draw();
            });

            // Filter Tahun Ajaran & Kelas
            $("#filterTahunAjar, #filterKelas").on("change", function() {
                $("#hiddenTahunAjar").val($(this).val());
                var tahunAjarId = $("#filterTahunAjar").val();
                var kelasId = $("#filterKelas").val();
                var queryString = "?";
                if (tahunAjarId) {
                    queryString += "tahun_ajar_id=" + tahunAjarId;
                }
                if (kelasId) {
                    queryString += (tahunAjarId ? "&" : "") + "kelas_id=" + kelasId;
                }
                window.location.href = window.location.pathname + queryString;
            });

            // Fungsi Checkbox "Pilih Semua"
            $('#checkAllNaik').click(function() {
                $('.status-naik').prop('checked', this.checked);
                $('.status-naik').each(function() {
                    if ($(this).prop('checked')) {
                        $(this).closest('tr').find('input[type="checkbox"]').not(this).prop(
                            'checked', false);
                    }
                });
            });
            $('#checkAllTinggal').click(function() {
                $('.status-tinggal').prop('checked', this.checked);
                $('.status-tinggal').each(function() {
                    if ($(this).prop('checked')) {
                        $(this).closest('tr').find('input[type="checkbox"]').not(this).prop(
                            'checked', false);
                    }
                });
            });
            $('#checkAllLulus').click(function() {
                $('.status-lulus').prop('checked', this.checked);
                $('.status-lulus').each(function() {
                    if ($(this).prop('checked')) {
                        $(this).closest('tr').find('input[type="checkbox"]').not(this).prop(
                            'checked', false);
                    }
                });
            });
            $('#checkAllBerhenti').click(function() {
                $('.status-berhenti').prop('checked', this.checked);
                $('.status-berhenti').each(function() {
                    if ($(this).prop('checked')) {
                        $(this).closest('tr').find('input[type="checkbox"]').not(this).prop(
                            'checked', false);
                    }
                });
            });

            // Pastikan tiap baris cuma satu yang bisa dipilih
            $(document).on('change', '.status-naik, .status-tinggal, .status-lulus, .status-berhenti', function() {
                var $row = $(this).closest('tr');
                $row.find('input[type="checkbox"]').not(this).prop('checked', false);
            });

            // Event handler tombol Proses Kenaikan







            $('#btnProses').click(function() {
                var dataStatus = {};
                // Array untuk menampung siswa yang perlu dicek duplikat (naik/tinggal)
                var duplicateCheckIds = [];

                $('tbody tr').each(function() {
                    var siswaId = $(this).attr('id').replace('siswa-row-', '');
                    var checkedCount = $(this).find('td input[type="checkbox"]:checked').length;
                    console.log('Row siswa ' + siswaId + ' checkedCount:', checkedCount);
                    if (checkedCount > 0) {
                        var status = {
                            naik: $(this).find('.status-naik').is(':checked') ? 1 : 0,
                            tinggal: $(this).find('.status-tinggal').is(':checked') ? 1 : 0,
                            lulus: $(this).find('.status-lulus').is(':checked') ? 1 : 0,
                            berhenti: $(this).find('.status-berhenti').is(':checked') ? 1 : 0
                        };
                        dataStatus[siswaId] = status;
                        // Kalau statusnya naik atau tinggal, tambahkan id siswa ke array duplicateCheckIds
                        if (status.naik == 1 || status.tinggal == 1) {
                            duplicateCheckIds.push(siswaId);
                        }
                    }
                });

                // Kalau tidak ada siswa yang dipilih, tampilkan modal pesan
                if (Object.keys(dataStatus).length === 0) {
                    $('#modalMessageBody').text('Silahkan pilih siswa untuk di proses');
                    var messageModal = new bootstrap.Modal(document.getElementById('messageModal'));
                    messageModal.show();
                    return;
                }

                // Jika ada siswa dengan status naik/tinggal, cek duplikat di tabel temp_kelas
                // Jika ada siswa dengan status naik/tinggal, cek duplikat di tabel temp_kelas
                if (duplicateCheckIds.length > 0) {
                    $.ajax({
                        url: '{{ route('temp_kelas.check') }}',
                        method: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            siswa_ids: duplicateCheckIds,
                            // Tambah ini agar checkTempKelas bisa tahu 
                            // tahun ajaran (lalu dia hitung nextYear)
                            tahun_ajar_id: $("#filterTahunAjar").val()
                        },
                        success: function(checkResponse) {
                            console.log('Duplicate check response:', checkResponse);
                            if (checkResponse.duplicateFound) {
                                var duplicateNames = checkResponse.duplicateNames;
                                var message = "Data duplikat ditemukan untuk siswa:<br>" +
                                    duplicateNames.join("<br>");
                                $('#modalMessageBody').html(message);
                                var messageModal = new bootstrap.Modal(document.getElementById(
                                    'messageModal'));
                                messageModal.show();
                            } else {
                                showConfirmModal(dataStatus);
                            }
                        },
                        error: function(xhr) {
                            console.log('Duplicate check error:', xhr);
                            $('#modalMessageBody').html(
                                'Terjadi kesalahan saat memeriksa data duplikat.');
                            var messageModal = new bootstrap.Modal(document.getElementById(
                                'messageModal'));
                            messageModal.show();
                        }
                    });
                } else {
                    // Jika semua siswa yang dipilih statusnya adalah lulus atau berhenti, langsung tampilkan modal konfirmasi
                    showConfirmModal(dataStatus);
                }

            });

            function showConfirmModal(dataStatus) {
                var confirmModal = new bootstrap.Modal(document.getElementById('confirmModal'));
                confirmModal.show();
                $('#btnConfirmYes').off('click').on('click', function() {
                    confirmModal.hide();
                    $.ajax({
                        url: '{{ route('kenaikan-kelas.proses') }}',
                        method: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            tahun_ajar_id: $("#filterTahunAjar")
                                .val(), // kirim nilai filter tahun ajaran
                            status: dataStatus
                        },
                        success: function(response) {
                            console.log('AJAX Success:', response);
                            $('#modalMessageBody').html(response.message);
                            var messageModal = new bootstrap.Modal(document.getElementById(
                                'messageModal'));
                            messageModal.show();

                        },
                        error: function(xhr) {
                            console.log('AJAX Error:', xhr);
                            $('#modalMessageBody').html(xhr.responseJSON.message);
                            var messageModal = new bootstrap.Modal(document.getElementById(
                                'messageModal'));
                            messageModal.show();
                        }
                    });
                });
            }

            $('#btnTutupModal').click(function() {
                location.reload();
            });


        });
    </script>

    <style>
        .table-responsive {
            overflow-x: auto;
            white-space: nowrap;
            max-width: 100%;
            margin-top: -8px;
            padding: 0 16px;
        }

        #data_table th:nth-child(n+3),
        #data_table td:nth-child(n+3) {
            text-align: left !important;
        }

        #data_table td input {
            margin-right: 6px;
        }

        .dataTables_filter {
            display: none;
        }

        #pencarian_custom {
            margin-left: -10px;
            width: 100%;
            margin-top: 16px;
            margin-bottom: 16px;
        }

        .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;
        }
    </style>
@endsection