@extends('layouts.app')

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

            <!-- Tabel Data Guru -->
            <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 Data Guru</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 Data Guru -->
                                <button type="button" class="btn btn-primary" id="btnTambahdataguru">
                                    <i class="ik ik-plus"></i> Tambah Data Guru
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <table id="data_table" class="table table-hover table-striped table-bordered nowrap dataTable">
                                <thead>
                                    <tr>
                                        <th><input type="checkbox" id="selectAll"></th>
                                        <th>No</th>
                                        <th>Nama</th>
                                        <th>Jabatan</th>
                                        <th>Telpon</th>
                                        <th>Username</th>
                                        <th id="statusHeader">Status</th>
                                        <th id="aksiHeader">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($dataGuru as $item)
                                        <tr>
                                            <td><input type="checkbox" class="select-item" value="{{ $item->id }}"></td>
                                            <td>{{ $loop->iteration }}</td>
                                            <td>{{ $item->nama }}</td>
                                            <td>{{ $item->jabatan }}</td>
                                            <td>{{ $item->telpon }}</td>
                                            <td>{{ $item->username }}</td>
                                            <td>
                                                <span class="badge badge-{{ $item->status == 'Y' ? 'success' : 'danger' }}">
                                                    {{ $item->status == 'Y' ? 'Aktif' : 'Tidak Aktif' }}
                                                </span>
                                            </td>
                                            <td>
                                                <a href="#" class="editdataguru" data-id="{{ $item->id }}"
                                                    data-nama="{{ $item->nama }}" data-nip="{{ $item->nip }}"
                                                    data-telpon="{{ $item->telpon }}" data-alamat="{{ $item->alamat }}"
                                                    data-jabatan="{{ $item->jabatan }}"
                                                    data-username="{{ $item->username }}"
                                                    data-status="{{ $item->status }}">
                                                    <i class="ik ik-edit f-18 mr-15 text-green"></i>
                                                </a>
                                                <a href="#" class="aktifdataguru" data-id="{{ $item->id }}"
                                                    data-nip="{{ $item->nip }}" data-alamat="{{ $item->alamat }}">
                                                    <i class="ik ik-check-square f-18 mr-15 text-primary"></i>
                                                </a>


                                                <a href="#" class="tidakaktifdataguru" data-id="{{ $item->id }}"
                                                    data-nip="{{ $item->nip }}" data-alamat="{{ $item->alamat }}">
                                                    <i class="ik ik-x-square f-18 mr-15 text-danger"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal Tambah Data Guru (Input Manual & Import Excel) -->
            <div class="modal fade" id="modalTambahdataguru" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Tambah Data Guru</h5>
                            <button type="button" class="close" data-dismiss="modal">
                                <span>&times;</span>
                            </button>
                        </div>
                        <!-- Nav Tabs -->
                        <ul class="nav nav-tabs" id="tambahGuruTab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="manual-tab" data-toggle="tab" href="#manual" role="tab"
                                    aria-controls="manual" aria-selected="true">Input Manual</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="excel-tab" data-toggle="tab" href="#excel" role="tab"
                                    aria-controls="excel" aria-selected="false">Import Excel</a>
                            </li>
                        </ul>
                        <!-- Tab Contents -->
                        <div class="tab-content">
                            <!-- Tab Input Manual -->
                            <div class="tab-pane fade show active" id="manual" role="tabpanel"
                                aria-labelledby="manual-tab">
                                <form action="{{ route('dataguru.store') }}" method="POST" id="formTambahdataguru">
                                    @csrf
                                    <div class="modal-body">
                                        <!-- Nama Guru -->
                                        <div class="form-group">
                                            <label>Nama</label>
                                            <input type="text" name="nama" class="form-control" required
                                                maxlength="255"
                                                oninvalid="this.setCustomValidity('Nama tidak boleh kosong.')"
                                                oninput="this.setCustomValidity(''); this.value = this.value.replace(/^\s+/,'')">
                                            <span id="namaError" class="text-danger"></span>
                                        </div>

                                        <!-- NIK: hanya angka, tanpa spasi, maksimal 16 karakter -->
                                        <div class="form-group">
                                            <label>NIK</label>
                                            <input type="text" name="nip" id="tambah_nik"
                                                class="form-control numeric-only" required maxlength="16"
                                                oninvalid="this.setCustomValidity('NIK tidak boleh kosong.')"
                                                oninput="this.setCustomValidity(''); this.value = this.value.replace(/[^0-9]/g, '').replace(/^\s+/,'')">
                                            <span id="nikError" class="text-danger"></span>
                                        </div>

                                        <!-- Telpon: hanya angka, tanpa spasi -->
                                        <div class="form-group">
                                            <label>Telpon</label>
                                            <input type="text" name="telpon" id="tambah_telpon"
                                                class="form-control numeric-only" maxlength="20"
                                                oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/^\s+/,'')">
                                            <span id="telponError" class="text-danger"></span>
                                        </div>

                                        <!-- Alamat -->
                                        <div class="form-group">
                                            <label>Alamat</label>
                                            <textarea name="alamat" id="tambah_alamat" class="form-control"
                                                oninput="this.value = this.value.replace(/^\s+/,'')"></textarea>
                                            <span id="alamatError" class="text-danger"></span>
                                        </div>

                                        <!-- Status -->
                                        <div class="form-group">
                                            <label>Jabatan</label>
                                            <select name="jabatan" class="form-control" required>
                                                <option value="Guru">Guru</option>
                                                <option value="Petugas">Petugas</option>
                                            </select>
                                        </div>

                                        <!-- Username -->
                                        <div class="form-group">
                                            <label>Username</label>
                                            <input type="text" name="username" id="tambah_username"
                                                class="form-control" required maxlength="50"
                                                oninvalid="this.setCustomValidity('Username tidak boleh kosong.')"
                                                oninput="this.setCustomValidity(''); this.value = this.value.replace(/^\s+/,'')">
                                            <span id="usernameError" class="text-danger"></span>
                                        </div>

                                        <!-- Password -->
                                        <div class="form-group">
                                            <label>Password</label>
                                            <input type="password" name="password" id="tambah_password"
                                                class="form-control" required minlength="6"
                                                oninvalid="this.setCustomValidity('Password tidak boleh kosong dan minimal 6 karakter.')"
                                                oninput="this.setCustomValidity(''); this.value = this.value.replace(/^\s+/,'')">
                                            <span id="passwordError" class="text-danger"></span>
                                        </div>

                                        <!-- Status -->
                                        <div class="form-group">
                                            <label>Status</label>
                                            <select name="status" class="form-control" required>
                                                <option value="Y">Aktif</option>
                                                <option value="T">Tidak Aktif</option>
                                            </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>

                            <!-- Tab Import Excel -->
                            <div class="tab-pane fade" id="excel" role="tabpanel" aria-labelledby="excel-tab">
                                <form id="formImportExcel" enctype="multipart/form-data"
                                    action="{{ route('dataguru.import') }}" method="POST">
                                    @csrf
                                    <div class="modal-body">
                                        <div class="mb-3">
                                            <a href="{{ route('dataguru.template') }}" class="btn btn-info">
                                                <i class="ik ik-download"></i> Download Template Excel
                                            </a>
                                        </div>
                                        <div class="alert alert-info">
                                            <strong>Catatan:</strong> Unduh template dan isi data sesuai format berikut:
                                            <ul>
                                                <li>Nama (Wajib, maksimal 255 karakter)</li>
                                                <li>NIK (Opsional, maksimal 50 karakter)</li>
                                                <li>Telpon (Opsional, maksimal 20 karakter)</li>
                                                <li>Alamat (Opsional)</li>
                                                <li>Username (Wajib, unik, maksimal 50 karakter)</li>
                                                <li>Password (Wajib, minimal 6 karakter; akan di-hash saat disimpan)</li>
                                                <li>Status (Wajib, isi "Y" untuk aktif atau "T" untuk tidak aktif)</li>
                                            </ul>
                                        </div>
                                        <div class="form-group">
                                            <label>Upload File Excel</label>
                                            <input type="file" name="excel_file" class="form-control-file"
                                                accept=".xls,.xlsx" required>
                                        </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="btnImportExcel">
                                            <i class="ik ik-upload"></i> Import Excel
                                        </button>
                                        <a href="{{ route('dataguru.export') }}" class="btn btn-success">
                                            <i class="ik ik-download"></i> Export Excel
                                        </a>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal Konfirmasi Duplikasi NIK -->
            <div class="modal fade" id="modalKonfirmasi" tabindex="-1" role="dialog"
                aria-labelledby="modalKonfirmasiLabel" 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="modalKonfirmasiLabel">Konfirmasi Duplikasi NIK</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Tutup">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <!-- Pesan konfirmasi akan diisi oleh JS -->
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" id="btnKonfirmasiTidak">Tidak</button>
                            <button type="button" class="btn btn-primary" id="btnKonfirmasiYa">Ya, timpa data</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal Edit Data Guru -->
            <div class="modal fade" id="modalEditdataguru" tabindex="-1" role="dialog"
                aria-labelledby="modalEditdataguruLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <form id="formEditdataguru">
                            @csrf
                            <div class="modal-header">
                                <h5 class="modal-title" id="modalEditdataguruLabel">Edit Data Guru</h5>
                                <button type="button" class="close" data-dismiss="modal">
                                    <span>&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <!-- Field isian yang sama dengan modal tambah -->
                                <div class="form-group">
                                    <label>Nama</label>
                                    <input type="text" name="nama" class="form-control" required>
                                </div>
                                <div class="form-group">
                                    <label>NIK</label>
                                    <input type="text" name="nip" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label>Telpon</label>
                                    <input type="text" name="telpon" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label>Alamat</label>
                                    <textarea name="alamat" class="form-control"></textarea>
                                </div>
                                <div class="form-group">
                                    <label>Jabatan</label>
                                    <select name="jabatan" class="form-control" required>
                                        <option value="Guru">Guru</option>
                                        <option value="Petugas">Petugas</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Username</label>
                                    <input type="text" name="username" class="form-control" required>
                                </div>
                                <div class="form-group">
                                    <label>Password</label>
                                    <input type="password" name="password" class="form-control">
                                    <small class="text-muted">Kosongkan jika tidak ingin mengganti password.</small>
                                </div>
                                <div class="form-group">
                                    <label>Status</label>
                                    <select name="status" class="form-control" required>
                                        <option value="Y">Aktif</option>
                                        <option value="T">Tidak Aktif</option>
                                    </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">Update</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>
@endsection

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

        

        $(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, // Tetap aktifkan sorting di kolom lain
                columnDefs: [{
                        orderable: false,
                        targets: [0, 1, 6, 7]
                    } // Indeks kolom "Status" (Hitungan dimulai dari 0)
                ],
                drawCallback: function(settings) {
                    var api = this.api();
                    api.column(1, {
                        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 = '';
            var deleteId = null;
            var deleteIds = {};

            window.originalAksiHeader = $('#aksiHeader').html();
            window.originalStatusHeader = $('#statusHeader').html();

            // ... (kode inisialisasi DataTable, event listener lainnya, dll)

            $(document).on('keydown', function(e) {
                if (e.key === "Escape") {
                    // Uncheck semua checkbox
                    $('.select-item').prop('checked', false);
                    $('#selectAll').prop('checked', false);
                    // Kembalikan header ke tampilan semula
                    $('#aksiHeader').html(window.originalAksiHeader);
                    $('#statusHeader').html(window.originalStatusHeader);
                }
            });



            // Fungsi untuk mengizinkan hanya digit (0-9)
            function allowOnlyDigits(e) {
                // Jika key yang ditekan adalah control key (misalnya: Backspace, Tab, dll), izinkan.
                if (e.key.length > 1) return;
                if (!/^\d$/.test(e.key)) {
                    e.preventDefault();
                    alert("Hanya angka yang diperbolehkan untuk NIK dan Telpon.");
                }
            }

            // Event listener untuk input NIK (menggunakan id "tambah_nik")
            document.getElementById('tambah_nik').addEventListener('keypress', function(e) {
                // Cegah spasi jika belum ada karakter (awal input)
                if (this.value.length === 0 && e.key === ' ') {
                    e.preventDefault();
                    alert("NIK tidak boleh diawali dengan spasi.");
                    return;
                }
                // Izinkan hanya digit
                allowOnlyDigits(e);
            });

            // Event listener untuk input Telpon (menggunakan id "tambah_telpon")
            document.getElementById('tambah_telpon').addEventListener('keypress', function(e) {
                if (this.value.length === 0 && e.key === ' ') {
                    e.preventDefault();
                    alert("Telpon tidak boleh diawali dengan spasi.");
                    return;
                }
                allowOnlyDigits(e);
            });

            // Jika ingin mencegah paste nilai yang tidak valid, perbaiki juga selector-nya:
            document.getElementById('tambah_nik').addEventListener('paste', function(e) {
                e.preventDefault();
                alert("Tidak diperbolehkan paste nilai yang mengandung huruf atau spasi.");
            });
            document.getElementById('tambah_telpon').addEventListener('paste', function(e) {
                e.preventDefault();
                alert("Tidak diperbolehkan paste nilai yang mengandung huruf atau spasi.");
            });


            function updateBulkHeader() {
                var checkedCount = $('.select-item:checked').length;
                if (checkedCount > 0) {
                    $('#aksiHeader').html(
                        '<button type="button" id="bulkSave" class="btn btn-primary btn-sm"><i class="ik ik-check"></i> Simpan</button> ' +
                        '<button type="button" id="bulkCancel" class="btn btn-secondary btn-sm"><i class="ik ik-x"></i> Batal</button>'
                    );
                    $('#statusHeader').html(
                        '<select id="bulkStatus" class="form-control form-control-sm" style="width:100px;">' +
                        '<option value="Y">Aktif</option>' +
                        '<option value="T">Tidak Aktif</option>' +
                        '</select>'
                    );
                    $('#aksiHeader').css('pointer-events', 'auto');
                } else {
                    $('#aksiHeader').html(originalAksiHeader);
                    $('#aksiHeader').css('pointer-events', 'auto');
                    $('#statusHeader').html(window.originalStatusHeader);
                }
            }

            $('#selectAll, .select-item').on('change', function() {
                if ($(this).attr('id') === 'selectAll') {
                    $('.select-item').prop('checked', $(this).prop('checked'));
                }
                updateBulkHeader();
            });

            // Handler tombol bulkSave untuk update status secara massal
            $(document).on('click', '#bulkSave', function() {
                var selectedIds = [];
                $('.select-item:checked').each(function() {
                    selectedIds.push($(this).val());
                });
                var newStatus = $('#bulkStatus').val();

                if (selectedIds.length === 0) {
                    alert('Pilih minimal satu data.');
                    return;
                }

                $.ajax({
                    url: '/dataguru/update-status',
                    method: 'POST',
                    data: {
                        ids: selectedIds,
                        status: newStatus,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            alert('Status berhasil diperbarui!');
                            location.reload();
                        } else {
                            alert(response.message || 'Gagal mengupdate status.');
                        }
                    },
                    error: function() {
                        alert('Terjadi kesalahan server.');
                    }
                });
            });

            $(document).on('click', '#bulkCancel', function() {
                $('.select-item').prop('checked', false);
                $('#selectAll').prop('checked', false);
                $('#statusHeader').html(originalStatusHeader);
                $('#aksiHeader').html(originalAksiHeader);
            });
            // --- End Bulk Update Control ---

            // Tampilkan modal tambah jika cek tahun ajaran dan kelas berhasil
            $('#btnTambahdataguru').on('click', function(e) {
                e.preventDefault();
                $.ajax({
                    url: '{{ route('dataguru.cekTahunAjarAktif') }}',
                    method: 'GET',
                    success: function(response) {
                        if (!response.active) {
                            showBootstrapAlert(response.message);
                        } else {
                            $.ajax({
                                url: '{{ route('dataguru.cekKelas') }}',
                                method: 'GET',
                                success: function(response2) {
                                    if (!response2.exist) {
                                        showBootstrapAlert(response2.message);
                                    } else {
                                        $('#modalTambahdataguru').modal('show');
                                    }
                                },
                                error: function() {
                                    showBootstrapAlert(
                                        'Terjadi kesalahan saat memeriksa data kelas.'
                                    );
                                }
                            });
                        }
                    },
                    error: function() {
                        showBootstrapAlert(
                            'Terjadi kesalahan saat memeriksa tahun ajaran aktif.');
                    }
                });
            });

            // Cek duplikasi username dan NIK saat form tambah disubmit
            $('#formTambahdataguru').on('submit', function(e) {
                e.preventDefault();
                var form = this;
                var username = $(form).find('input[name="username"]').val().trim();
                // Cek validasi HTML5
                if (!this.checkValidity()) {
                    this.reportValidity();
                    return false;
                }

                // Tambahan manual check untuk password
                var password = $('#tambah_password').val().trim();
                if (password.length < 6) {
                    alert('Password minimal 6 karakter!');
                    return false;
                }


                $.ajax({
                    url: '{{ route('dataguru.checkUsername') }}',
                    method: 'GET',
                    data: {
                        username: username
                    },
                    dataType: 'json',
                    success: function(responseUsername) {
                        if (responseUsername.exists) {
                            alert("Username sudah ada, pakai username yg lain");
                            return;
                        } else {
                            var nip = $(form).find('input[name="nip"]').val().trim();
                            $.ajax({
                                url: '{{ route('dataguru.check-nik') }}',
                                method: 'GET',
                                data: {
                                    nip: nip
                                },
                                dataType: 'json',
                                success: function(responseNik) {
                                    if (responseNik.exists) {
                                        $('#modalKonfirmasi').find('.modal-body')
                                            .html(responseNik.message +
                                                ' Apakah mau menimpanya?');
                                        $('#modalKonfirmasi').data('existingGuruId',
                                            responseNik.guru.id);
                                        $('#modalTambahdataguru').modal('hide');
                                        $('#modalKonfirmasi').modal('show');
                                    } else {
                                        form.submit();
                                    }
                                },
                                error: function() {
                                    showBootstrapAlert(
                                        'Terjadi kesalahan saat memeriksa duplikasi NIK.'
                                    );
                                }
                            });
                        }
                    },
                    error: function() {
                        showBootstrapAlert(
                            'Terjadi kesalahan saat memeriksa duplikasi username.');
                    }
                });
            });

            // Handler tombol konfirmasi "Ya, timpa data" dengan pengecekan konteks update vs import
            // Handler tombol konfirmasi "Ya, timpa data"
            $('#btnKonfirmasiYa').off('click').on('click', function() {
                var existingGuruId = $('#modalKonfirmasi').data('existingGuruId');
                if (existingGuruId) {
                    // Update data guru (duplikasi NIK pada form tambah)
                    var formData = $('#formTambahdataguru').serialize();
                    $.ajax({
                        url: '{{ route('dataguru.update', ':id') }}'.replace(':id',
                            existingGuruId),
                        method: 'PUT',
                        data: formData,
                        success: function(response) {
                            // Tutup modal konfirmasi langsung
                            $('#modalKonfirmasi').modal('hide');
                            // Tampilkan pesan sukses
                            alert(
                                "Data berhasil diupdate."
                            ); // Bisa pakai alert atau showBootstrapAlert
                            // Reload halaman langsung tanpa delay
                            location.reload();
                        },
                        error: function(error) {
                            console.log(error.responseText);
                            alert('Terjadi kesalahan saat mengupdate data.');
                        }
                    });
                } else {
                    // Jika tidak ada konteks update, asumsikan konteks import Excel
                    $('#modalKonfirmasi').modal('hide');
                    sendImportRequest(true);
                }
            });



            // Jika user pilih "Tidak", tutup modal konfirmasi dan lakukan import dengan skip
            $('#btnKonfirmasiTidak').on('click', function() {
                $('#modalKonfirmasi').modal('hide');
                sendImportRequest(false, true);
            });

            function toggleButtonVisibility() {}
            $('#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();
            });


            // Edit status guru inline (aktif)
            $('#data_table').on('click', '.aktifdataguru', function(e) {
                e.preventDefault();
                e.stopPropagation();
                var row = $(this).closest('tr');
                var id = $(this).data('id');
                var nama = row.find('td').eq(2).text().trim();
                var jabatan = row.find('td').eq(3).text().trim(); // tambahkan baris ini
                var nip = $(this).data('nip');
                var telpon = row.find('td').eq(4).text().trim();
                var username = row.find('td').eq(5).text().trim();
                var alamat = $(this).data('alamat') || '';

                if (confirm("Apakah anda mau mengaktifkan " + nama + " ?")) {
                    var updateData = {
                        nama: nama,
                        jabatan: jabatan, // kirim field jabatan
                        nip: nip,
                        telpon: telpon,
                        username: username,
                        status: 'Y',
                        _token: '{{ csrf_token() }}'
                    };
                    if (alamat !== '') {
                        updateData['alamat'] = alamat;
                    }

                    $.ajax({
                        url: '/dataguru/' + id,
                        method: 'PUT',
                        data: updateData,
                        success: function(response) {
                            if (response.success) {
                                alert("Status " + nama + " berhasil diperbarui!");
                                location.reload();
                            } else {
                                alert(response.message || "Gagal mengupdate status.");
                            }
                        },
                        error: function() {
                            alert("Terjadi kesalahan server.");
                        }
                    });
                }
            });



            // Edit status guru inline (aktif)
            $('#data_table').on('click', '.tidakaktifdataguru', function(e) {
                e.preventDefault();
                e.stopPropagation();
                var row = $(this).closest('tr');
                var id = $(this).data('id');
                var nama = row.find('td').eq(2).text().trim();
                var jabatan = row.find('td').eq(3).text().trim(); // ambil jabatan
                var nip = $(this).data('nip');
                var telpon = row.find('td').eq(4).text().trim();
                var username = row.find('td').eq(5).text().trim();
                var alamat = $(this).data('alamat') || '';

                if (confirm("Apakah anda mau menonaktifkan " + nama + " ?")) {
                    var updateData = {
                        nama: nama,
                        jabatan: jabatan, // kirim field jabatan
                        nip: nip,
                        telpon: telpon,
                        username: username,
                        status: 'T',
                        _token: '{{ csrf_token() }}'
                    };
                    if (alamat !== '') {
                        updateData['alamat'] = alamat;
                    }

                    $.ajax({
                        url: '/dataguru/' + id,
                        method: 'PUT',
                        data: updateData,
                        success: function(response) {
                            if (response.success) {
                                alert("Status " + nama + " berhasil diperbarui!");
                                location.reload();
                            } else {
                                alert(response.message || "Gagal mengupdate status.");
                            }
                        },
                        error: function() {
                            alert("Terjadi kesalahan server.");
                        }
                    });
                }
            });


            // Handler modal edit
            // Ketika klik tombol edit, tampilkan modal dengan data yang sudah ada
            $('#data_table').on('click', '.editdataguru', function(e) {
                e.preventDefault();
                editGuruId = $(this).data('id');
                var modal = $('#modalEditdataguru');
                modal.find('input[name="nama"]').val($(this).data('nama'));
                modal.find('input[name="nip"]').val($(this).data('nip'));
                modal.find('input[name="telpon"]').val($(this).data('telpon'));
                modal.find('textarea[name="alamat"]').val($(this).data('alamat'));
                modal.find('select[name="jabatan"]').val($(this).data('jabatan'));
                modal.find('input[name="username"]').val($(this).data('username'));
                modal.find('select[name="status"]').val($(this).data('status'));
                modal.find('input[name="password"]').val('');
                modal.modal('show');
            });

            // Submit form edit dengan pengecekan username terlebih dahulu
            $('#formEditdataguru').on('submit', function(e) {
                e.preventDefault();
                var form = $(this);
                var username = form.find('input[name="username"]').val().trim();

                $.ajax({
                    url: '{{ route('dataguru.checkUsername') }}',
                    method: 'GET',
                    data: {
                        username: username,
                        exclude_id: editGuruId // Agar tidak dianggap duplikat dengan dirinya sendiri
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (response.exists) {
                            alert("Username sudah ada, pakai username yang lain.");
                        } else {
                            // Jika username tidak ada di database, lakukan update
                            $.ajax({
                                url: '/dataguru/' + editGuruId,
                                method: 'PUT',
                                data: form.serialize(),
                                success: function(response) {
                                    if (response.success) {
                                        alert('Data berhasil diperbarui.');
                                        $('#modalEditdataguru').modal('hide');
                                        location.reload();
                                    } else {
                                        alert('Gagal mengupdate data.');
                                    }
                                },
                                error: function() {
                                    alert('Terjadi kesalahan server.');
                                }
                            });
                        }
                    },
                    error: function() {
                        alert('Terjadi kesalahan saat memeriksa username.');
                    }
                });
            });



            // Handler import Excel via AJAX
            $('#formImportExcel').on('submit', function(e) {
                e.preventDefault();
                let formData = new FormData(this);
                formData.append('override_duplicates', 'false');
                formData.append('skip_confirmed', 'false');

                $.ajax({
                    url: $(this).attr('action'),
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: 'json',
                    success: function(response) {
                        if (!response.success && response.duplicates) {
                            let htmlDuplicates = '<ul>';
                            response.duplicates.forEach(function(item) {
                                htmlDuplicates +=
                                    `<li>NIK: ${item.nip}, Nama: ${item.nama}</li>`;
                            });
                            htmlDuplicates += '</ul>';
                            $('#modalKonfirmasi .modal-body').html(
                                '<p><strong>Ditemukan data duplikat:</strong></p>' +
                                htmlDuplicates +
                                '<p>Apakah Anda ingin menimpa (update) data tersebut?</p>'
                            );
                            $('#modalTambahdataguru').modal('hide');
                            // Pastikan tidak ada data existingGuruId agar handler konfirmasi masuk ke konteks import
                            $('#modalKonfirmasi').removeData('existingGuruId');
                            $('#modalKonfirmasi').modal('show');
                        } else if (response.success) {
                            alert(response.message);
                            window.location.reload();
                        } else {
                            alert(response.message || 'Terjadi kesalahan.');
                        }
                    },
                    error: function(xhr) {
                        console.log(xhr.responseText);
                        alert('Terjadi kesalahan server.');
                    }
                });
                return false;
            });

            // Fungsi untuk import Excel (dipanggil jika tombol konfirmasi "Ya" tidak ada konteks update)
            function sendImportRequest(isOverride, isSkip = false) {
                let formData = new FormData($('#formImportExcel')[0]);
                formData.append('override_duplicates', isOverride ? 'true' : 'false');
                formData.append('skip_confirmed', isSkip ? 'true' : 'false');

                $.ajax({
                    url: $('#formImportExcel').attr('action'),
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: 'json',
                    success: function(resp) {
                        if (resp.success) {
                            alert(resp.message);
                            window.location.reload();
                        } else if (resp.duplicates) {
                            let htmlDuplicates = '<ul>';
                            resp.duplicates.forEach(function(item) {
                                htmlDuplicates +=
                                    `<li>NIK: ${item.nip}, Nama: ${item.nama}</li>`;
                            });
                            htmlDuplicates += '</ul>';
                            $('#modalKonfirmasi .modal-body').html(
                                '<p><strong>Ditemukan data duplikat:</strong></p>' +
                                htmlDuplicates +
                                '<p>Apakah Anda ingin menimpa (update) data tersebut?</p>'
                            );
                            $('#modalKonfirmasi').modal('show');
                        } else {
                            alert(resp.message || 'Terjadi kesalahan.');
                        }
                    },
                    error: function(xhr) {
                        console.log(xhr.responseText);
                        alert('Terjadi kesalahan server.');
                    }
                });
            }
        });
    </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(2),
        #data_table td:nth-child(2) {
            width: 40px !important;
        }

        #data_table th:nth-child(7),
        #data_table td:nth-child(7) {
            width: 80px !important;
        }

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