@extends('layouts.app')

@section('title', '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-users bg-blue"></i>
                            <div class="d-inline">
                                <h5>Kelas</h5>
                                <span>Manajemen Data Kelas</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</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>

            <!-- Tabel Kelas -->
            <div class="row" style="margin-bottom: 16px">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between">
                            <h3>Daftar Kelas</h3>
                            <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 tanpa data-toggle dan data-target -->
                                <button type="button" class="btn btn-primary" id="btnTambahKelas">
                                    <i class="ik ik-plus"></i> Tambah Kelas
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <table id="data_table" class="table table-hover table-striped table-bordered nowrap dataTable">
                                <thead>
                                    <tr>
                                        
                                        <th>Id Kelas</th>
                                        <th>Nama Kelas</th>
                                        <th>Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($kelas as $item)
                                        <tr>
                                            <td>{{ $item->id }}</td>
                                            <td>{{ $item->nama_kelas }}</td>
                                            <td>
                                                <a href="#" class="editKelas" data-id="{{ $item->id }}" data-nama="{{ $item->nama_kelas }}">
                                                    <i class="ik ik-edit f-16 mr-15 text-green"></i>
                                                </a>
                                                <a href="#" class="hapusKelas" data-id="{{ $item->id }}" style="display: none;">
                                                    <i class="ik ik-trash-2 f-16 text-red"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal Tambah Kelas -->
            <div class="modal fade" id="modalTambahKelas" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Tambah Kelas</h5>
                            <button type="button" class="close" data-dismiss="modal">
                                <span>&times;</span>
                            </button>
                        </div>
                        <!-- FORM TAMBAH KELAS -->
                        <form action="{{ route('kelas.store') }}" method="POST" id="formTambahKelas">
                            @csrf
                            <div class="modal-body">
                                <div class="form-group">
                                    <label>Nama Kelas</label>
                                    <input type="text" name="nama_kelas" id="nama_kelas" class="form-control" required
                                        oninvalid="this.setCustomValidity('Kelas tidak boleh kosong.')"
                                        oninput="this.value = this.value.replace(/^\s+/, '').replace(/\s{2,}/g, ' ').toUpperCase(); this.setCustomValidity('');"
                                        style="text-transform:uppercase">
                                    <span id="namaKelasError" class="text-danger"></span>
                                </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" id="btnSimpanKelas">Simpan</button>
                            </div>
                        </form>
                        <!-- END FORM TAMBAH KELAS -->
                    </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>
@endsection

@section('script')
    <script>
        // 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);
        }

        $(document).ready(function() {
            // Inisialisasi DataTable
            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,
                // 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');

            var currentlyEditing = null;
            var deleteMode = ''; // 'single' atau 'mass'
            var deleteId = null;
            var deleteIds = [];

            // Fokus input saat modal tambah muncul
            $('#modalTambahKelas').on('shown.bs.modal', function() {
                $('#nama_kelas').trigger('focus');
            });

            // Ketika tombol tambah kelas diklik, cek dulu tahun ajaran aktif
            $('#btnTambahKelas').on('click', function(e) {
                e.preventDefault();
                $.ajax({
                    url: '{{ route('kelas.cekTahunAjarAktif') }}',
                    method: 'GET',
                    success: function(activeResponse) {
                        if (activeResponse.active) {
                            // Tahun ajaran aktif? Langsung tampil modal!
                            $('#modalTambahKelas').modal('show');
                        } else {
                            // Kalo gak ada, kasih alert langsung. No modal, no drama.
                            showBootstrapAlert(activeResponse.message);
                        }
                    },
                    error: function() {
                        showBootstrapAlert(
                            'Terjadi kesalahan saat memeriksa tahun ajaran aktif.');
                    }
                });
            });

            // Validasi form tambah kelas sebelum submit
            $('#formTambahKelas').on('submit', function(e) {
                e.preventDefault();
                var form = this;
                var namaKelas = $(form).find('input[name="nama_kelas"]').val().trim();

                $.ajax({
                    url: '{{ route('kelas.cekTahunAjarAktif') }}',
                    method: 'GET',
                    success: function(activeResponse) {
                        if (!activeResponse.active) {
                            showBootstrapAlert(activeResponse.message);
                        } else {
                            // Cek keunikan kelas
                            $.ajax({
                                url: '{{ route('kelas.check-unique') }}',
                                method: 'GET',
                                data: {
                                    nama_kelas: namaKelas
                                },
                                success: function(response) {
                                    if (response.exists) {
                                        showBootstrapAlert(
                                            'Kelas sudah ada, silahkan input kelas lain.'
                                            );
                                    } else {
                                        // Lepas handler submit dan submit form
                                        $('#formTambahKelas').off('submit');
                                        form.submit();
                                    }
                                },
                                error: function() {
                                    showBootstrapAlert(
                                        'Terjadi kesalahan saat memeriksa keunikan kelas.'
                                        );
                                }
                            });
                        }
                    },
                    error: function() {
                        showBootstrapAlert(
                            'Terjadi kesalahan saat memeriksa tahun ajaran aktif.');
                    }
                });
            });

            // Toggle tombol delete vs tambah (santuy tapi fungsional)
            function toggleButtonVisibility() {
                if ($('.select-item:checked').length > 0) {
                    $('#btnTambahKelas').hide();
                    $('#deleteSelectedBtn').show();
                } else {
                    $('#deleteSelectedBtn').hide();
                    $('#btnTambahKelas').show();
                }
            }

            $('#selectAll').on('click', function() {
                var isChecked = $(this).prop('checked');
                $('.select-item').prop('checked', isChecked);
                toggleButtonVisibility();
            });

            $('#data_table').on('click', '.select-item', function() {
                if (!$(this).prop('checked')) {
                    $('#selectAll').prop('checked', false);
                }
                toggleButtonVisibility();
            });

            // Inline Edit Kelas
            $('#data_table').on('click', '.editKelas', function(e) {
                e.preventDefault();
                e.stopPropagation();

                if ($('.select-item:checked').length > 0) {
                    showBootstrapAlert('Batalkan centang semua baris terlebih dahulu untuk mengedit data.');
                    return;
                }

                var row = $(this).closest('tr');
                if (currentlyEditing && currentlyEditing[0] !== row[0]) {
                    showBootstrapAlert('Selesaikan pengeditan baris yang sedang aktif terlebih dahulu.');
                    return;
                }
                row.addClass('editing');
                currentlyEditing = row;
                var originalData = {
                    nama: row.find('td').eq(1).text().trim(),
                    aksi: row.find('td').eq(2).html()
                };
                row.data('original', originalData);

                var id = $(this).data('id');
                var namaKelas = $(this).data('nama');

                row.find('td').eq(1).html(
                    '<input type="text" class="form-control input-nama" value="' + namaKelas + '" ' +
                    'oninvalid="this.setCustomValidity(\'Kelas tidak boleh kosong.\')" ' +
                    'oninput="this.value = this.value.replace(/^\s+/, \'\').replace(/\s{2,}/g, \' \').toUpperCase(); this.setCustomValidity(\'\');" ' +
                    'style="text-transform:uppercase" autofocus>'
                );
                row.find('.input-nama').trigger('focus');

                var aksiHtml = '<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>';
                row.find('td').eq(2).html(aksiHtml);
            });

            // Simpan hasil edit kelas
            $('#data_table').on('click', '.saveKelas', function(e) {
                e.preventDefault();
                e.stopPropagation();
                var row = $(this).closest('tr');
                var id = $(this).data('id');
                var newNama = row.find('.input-nama').val();
                $.ajax({
                    url: '/kelas/' + id,
                    method: 'PUT',
                    data: {
                        nama_kelas: newNama,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            location.reload();
                        } else {
                            showBootstrapAlert('Gagal memperbarui data.');
                        }
                    },
                    error: function() {
                        showBootstrapAlert('Terjadi kesalahan saat memperbarui data.');
                    }
                });
            });

            // Batalkan edit kelas
            $('#data_table').on('click', '.cancelKelas', function(e) {
                e.preventDefault();
                e.stopPropagation();
                var row = $(this).closest('tr');
                var originalData = row.data('original');
                row.find('td').eq(1).text(originalData.nama);
                row.find('td').eq(2).html(originalData.aksi);
                row.removeClass('editing');
                currentlyEditing = null;
            });

            // Hapus Data - Single
            $('#data_table').on('click', '.hapusKelas', function(e) {
                e.preventDefault();
                e.stopPropagation();

                if ($('.select-item:checked').length > 0) {
                    showBootstrapAlert(
                    'Batalkan centang semua baris terlebih dahulu untuk menghapus data.');
                    return;
                }
                if (currentlyEditing) {
                    showBootstrapAlert('Selesaikan pengeditan baris yang sedang aktif terlebih dahulu.');
                    return;
                }
                deleteMode = 'single';
                deleteId = $(this).data('id');
                $('#deleteConfirmModal').modal('show');
            });

            // Hapus Data - Massal
            $('#deleteSelectedBtn').on('click', function(e) {
                e.preventDefault();
                if (currentlyEditing) {
                    showBootstrapAlert('Selesaikan pengeditan baris yang sedang aktif terlebih dahulu.');
                    return;
                }
                deleteMode = 'mass';
                deleteIds = [];
                $('.select-item:checked').each(function() {
                    deleteIds.push($(this).val());
                });
                if (deleteIds.length === 0) {
                    showBootstrapAlert('Pilih minimal satu data untuk dihapus.');
                    return;
                }
                $('#deleteConfirmModal').modal('show');
            });


            // Tombol konfirmasi hapus (single dan massal)
            $('#confirmDeleteBtn').on('click', function() {
                if (deleteMode === 'single' && deleteId) {
                    $.ajax({
                        url: '/kelas/' + deleteId,
                        type: 'DELETE',
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if (response.success) {
                                var row = $('#data_table').find('a.hapusKelas[data-id="' +
                                    deleteId + '"]').closest('tr');
                                row.fadeOut(400, "swing", function() {
                                    table.row(row).remove().draw(false);
                                    $('#selectAll').prop('checked', false);
                                    toggleButtonVisibility();
                                });
                            } else {
                                showBootstrapAlert('Gagal menghapus data.');
                            }
                        },
                        error: function() {
                            showBootstrapAlert('Terjadi kesalahan saat menghapus data.');
                        }
                    });
                } else if (deleteMode === 'mass' && deleteIds.length > 0) {
                    $.ajax({
                        url: '/kelas/hapus-massal',
                        type: 'POST',
                        data: {
                            ids: deleteIds,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if (response.success) {
                                $('.select-item:checked').each(function() {
                                    var row = $(this).closest('tr');
                                    row.fadeOut(400, "swing", function() {
                                        table.row(row).remove().draw(false);
                                    });
                                });
                                $('#selectAll').prop('checked', false);
                                $('.select-item').prop('checked', false);
                                toggleButtonVisibility();
                            } else {
                                showBootstrapAlert('Gagal menghapus data.');
                            }
                        },
                        error: function() {
                            showBootstrapAlert('Terjadi kesalahan saat menghapus data.');
                        }
                    });
                }
                $('#deleteConfirmModal').modal('hide');
            });

            // Event Listener: Tekan tombol ESC untuk cancel edit dan uncheck semua checkbox
            $(document).on('keydown', function(e) {
                if (e.key === 'Escape' || e.keyCode === 27) {
                    if (currentlyEditing) {
                        currentlyEditing.find('.cancelKelas').trigger('click');
                    }
                    $('.select-item').prop('checked', false);
                    $('#selectAll').prop('checked', false);
                    toggleButtonVisibility();
                }
            });
        });
    </script>

    <style>
        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;
        }

        #data_table th:first-child,
        #data_table td:first-child {
            width: 80px !important;
            text-align: center !important;
            padding: 5px !important;
        }

        #data_table th:nth-child(1),
        #data_table td:nth-child(1) {
            text-align: center !important;
            width: 120px !important;
        }

        #data_table th:last-child,
        #data_table td:last-child {
            width: 140px !important;
            text-align: center !important;
        }
    </style>
@endsection