$("#simpanBahasa").on("click", function(event) {
    event.preventDefault(); // Mencegah refresh halaman
    // Mengambil token CSRF dari meta tag di halaman
    var csrfToken = $('meta[name="csrf-token"]').attr("content");

    // Mengambil nilai-nilai input dari form
    var pegawais_id = $(".pegawais_id").val();
    var bahasa = $(".bahasa").val();
    var berbicara = $(".berbicara:checked").val();
    var membaca = $(".membaca:checked").val();
    var menulis = $(".menulis:checked").val();
    

    // Kirim data form menggunakan AJAX
    $.ajax({
        url: "{{ route('manajemen.bahasa.store') }}", // Ganti dengan URL tujuan penyimpanan data
        type: "POST", // Atur metode pengiriman sesuai kebutuhan (POST/GET)
        data: {
        _token: csrfToken, // Sertakan token CSRF dalam permintaan
        pegawais_id: pegawais_id,
        bahasa:bahasa,
        berbicara:berbicara,
        membaca:membaca,
        menulis:menulis
        
        },

        success: function(response) {
            //console.log(response);
            $("#myModalbahasa").modal("hide"); // Menutup modal
            var reloadData = response.reloadData;
            console.log(reloadData);
            var tbody= '';
            $.each(reloadData, function(key, value) {
                    var editButton = $("<a>")
                    .addClass("btn btn-sm btn-outline-primary btn-icon")
                    .attr("title", "Edit")
                    .attr("onclick", "edit_bahasa(" + value.id + ")");
                var iconEdit = $("<i>").addClass("ri-edit-fill");

                // Tambahkan ikon edit ke dalam elemen <a>
                editButton.append(iconEdit);
                // Form delete
                var deleteButton = $("<button>")
                    .attr("type", "button")
                    .attr("data-id", value.id)
                    .addClass("btn btn-sm btn-outline-danger btn-icon bahasa-btn")
                    .html("<i class='ri-delete-bin-fill'></i>")
                    .on("click", function() {
                        var id = value.id;

                        // Lakukan request Ajax untuk menghapus data
                        $.ajax({
                            url: "{{ route('manajemen.bahasa.destroy', '') }}/" + id,
                            type: "DELETE",
                            headers: {
                                "X-CSRF-Token": csrfToken
                            },
                            dataType: "json",
                            success: function(response) {
                                // Di sini Anda dapat menangani respons dari server setelah penghapusan berhasil
                                // Misalnya, reload data atau tampilkan notifikasi
                                // Contoh:
                                alert("Data berhasil dihapus");
                                // Kemudian Anda bisa menghapus baris tabel dari DOM jika diinginkan.
                                // Misalnya: $(this).closest('tr').remove();
                            },
                            error: function(xhr, status, error) {
                                // Di sini Anda dapat menangani respons dari server jika terjadi kesalahan
                                // Misalnya, tampilkan pesan error
                                // Contoh:
                                alert("Terjadi kesalahan saat menghapus data");
                            }
                        });
                    });


                tbody+= '<tr>';
                tbody +='<td>'+value.bahasa+'</td>';
                tbody +='<td>'+value.berbicara+'</td>';
                tbody +='<td>'+value.membaca+'</td>';
                tbody +='<td>'+value.menulis+'</td>';
                tbody+='<td><div class="action_group">'+editButton.prop('outerHTML')+' '+deleteButton.prop('outerHTML')+'</div></td>';
                tbody+= '</tr>';
                
            });
            

            // Menampilkan tabel di dalam div target
            $("#reloadDivBahasa tbody").html(tbody);
            success();
        },


        error: function(xhr, status, error) {
            var errors = xhr.responseJSON.errors;
            var errorContainer = $("#errorContainer");
            errorContainer.empty(); // Hapus pesan kesalahan sebelumnya (jika ada)

            // Tampilkan pesan kesalahan pada elemen errorContainer
            $.each(errors, function(key, value) {
                var errorMessages = value.join("<br>");
                var errorMessage = "<strong>" + key + ":</strong> " + errorMessages +"<br>";
                errorContainer.append(errorMessage);
            });
        }
    });
});

$("#editBahasa").on("click", function(event) {
    event.preventDefault(); // Mencegah refresh halaman
    // Mengambil token CSRF dari meta tag di halaman
    var csrfToken = $('meta[name="csrf-token"]').attr("content");

    // Mengambil nilai-nilai input dari form
    var pegawais_id = $(".pegawais_id").val();
    var bahasa = $(".bahasa").val();
    var berbicara = $(".berbicara:checked").val();
    var membaca = $(".membaca:checked").val();
    var menulis = $(".menulis:checked").val();
    var id = $(".id").val();
    

    // Kirim data form menggunakan AJAX
    $.ajax({
        url: "{{ route('manajemen.bahasa.update') }}", // Ganti dengan URL tujuan penyimpanan data
        type: "PUT", // Atur metode pengiriman sesuai kebutuhan (POST/GET)
        data: {
        _token: csrfToken, // Sertakan token CSRF dalam permintaan
        pegawais_id: pegawais_id,
        bahasa:bahasa,
        berbicara:berbicara,
        membaca:membaca,
        menulis:menulis,
        id:id,
        
        },

        success: function(response) {
            //console.log(response);
            $("#myModalbahasa").modal("hide"); // Menutup modal
            var reloadData = response.reloadData;
            console.log(reloadData);
            var tbody= '';
            $.each(reloadData, function(key, value) {
                    var editButton = $("<a>")
                    .addClass("btn btn-sm btn-outline-primary btn-icon")
                    .attr("title", "Edit")
                    .attr("onclick", "edit_bahasa(" + value.id + ")");
                var iconEdit = $("<i>").addClass("ri-edit-fill");

                // Tambahkan ikon edit ke dalam elemen <a>
                editButton.append(iconEdit);
                // Form delete
                var deleteButton = $("<button>")
                    .attr("type", "button")
                    .attr("data-id", value.id)
                    .addClass("btn btn-sm btn-outline-danger btn-icon bahasa-btn")
                    .html("<i class='ri-delete-bin-fill'></i>")
                    .on("click", function() {
                        var id = value.id;

                        // Lakukan request Ajax untuk menghapus data
                        $.ajax({
                            url: "{{ route('manajemen.bahasa.destroy', '') }}/" + id,
                            type: "DELETE",
                            headers: {
                                "X-CSRF-Token": csrfToken
                            },
                            dataType: "json",
                            success: function(response) {
                                // Di sini Anda dapat menangani respons dari server setelah penghapusan berhasil
                                // Misalnya, reload data atau tampilkan notifikasi
                                // Contoh:
                                alert("Data berhasil dihapus");
                                // Kemudian Anda bisa menghapus baris tabel dari DOM jika diinginkan.
                                // Misalnya: $(this).closest('tr').remove();
                            },
                            error: function(xhr, status, error) {
                                // Di sini Anda dapat menangani respons dari server jika terjadi kesalahan
                                // Misalnya, tampilkan pesan error
                                // Contoh:
                                alert("Terjadi kesalahan saat menghapus data");
                            }
                        });
                    });


                tbody+= '<tr>';
                tbody +='<td>'+value.bahasa+'</td>';
                tbody +='<td>'+value.berbicara+'</td>';
                tbody +='<td>'+value.membaca+'</td>';
                tbody +='<td>'+value.menulis+'</td>';
                tbody+='<td><div class="action_group">'+editButton.prop('outerHTML')+' '+deleteButton.prop('outerHTML')+'</div></td>';
                tbody+= '</tr>';
                
            });
            

            // Menampilkan tabel di dalam div target
            $("#reloadDivBahasa tbody").html(tbody);
            success();
        },


        error: function(xhr, status, error) {
            var errors = xhr.responseJSON.errors;
            var errorContainer = $("#errorContainer");
            errorContainer.empty(); // Hapus pesan kesalahan sebelumnya (jika ada)

            // Tampilkan pesan kesalahan pada elemen errorContainer
            $.each(errors, function(key, value) {
                var errorMessages = value.join("<br>");
                var errorMessage = "<strong>" + key + ":</strong> " + errorMessages +"<br>";
                errorContainer.append(errorMessage);
            });
        }
    });
});

function edit_bahasa(id){
    //alert(id);
    $("#myModalbahasa").modal("show"); // open modal
    
    $.ajax({
        url: "{{ route('manajemen.bahasa.show', '') }}/" + id, // Ganti dengan URL tujuan penyimpanan data
        type: "POST", // Atur metode pengiriman sesuai kebutuhan (POST/GET)
        data: {
            _token: csrfToken, // Sertakan token CSRF dalam permintaan
            id:id
        },
        success: function(response) {
            //$("#form-aktivitas").empty();
            var Obj = JSON.parse(response);
            $(".bahasa").val(Obj.bahasa);
            
            // Mengecek setiap elemen input radio dengan class "berbicara"
            $(".berbicara").each(function() {
                // Mendapatkan nilai value dari input radio saat ini
                var value = $(this).val();
                
                // Memeriksa apakah nilai value sama dengan targetValue
                if (value === Obj.berbicara.toString()) {
                    // Jika sama, maka set elemen input radio ini menjadi checked
                    $(this).prop("checked", true);
                }
            });

            $(".membaca").each(function() {
                // Mendapatkan nilai value dari input radio saat ini
                var value = $(this).val();
                
                // Memeriksa apakah nilai value sama dengan targetValue
                if (value === Obj.membaca.toString()) {
                    // Jika sama, maka set elemen input radio ini menjadi checked
                    $(this).prop("checked", true);
                }
            });
            
            $(".menulis").each(function() {
                // Mendapatkan nilai value dari input radio saat ini
                var value = $(this).val();
                
                // Memeriksa apakah nilai value sama dengan targetValue
                if (value === Obj.menulis.toString()) {
                    // Jika sama, maka set elemen input radio ini menjadi checked
                    $(this).prop("checked", true);
                }
            });
            
            $(".id").val(Obj.id);
            $("#form-bahasa").attr("action", "{{ route('manajemen.bahasa.update', '') }}");
            $("#form-bahasa").attr("method", "PUT");
            $("#simpanBahasa").hide();
            $("#editBahasa").show();
        }

    });
}

$(document).on("click", ".bahasa-btn[data-id]", function() {
    var id = $(this).data("id");
    var confirmDelete = confirm("Apakah Anda yakin ingin menghapus data ini?");
    if (confirmDelete) {
        $.ajax({
            url: "{{ route('manajemen.bahasa.destroy', '') }}/" + id,
            type: "DELETE",
            headers: {
                "X-CSRF-Token": csrfToken
            },
            dataType: "json",
            success: function(response) {
                //console.log(response);
                $("#myModalbahasa").modal("hide"); // Menutup modal
                var reloadData = response.reloadData;
                console.log(reloadData);
                var tbody= '';
                $.each(reloadData, function(key, value) {
                        var editButton = $("<a>")
                        .addClass("btn btn-sm btn-outline-primary btn-icon bahasa-btn")
                        .attr("title", "Edit")
                        .attr("onclick", "edit_bahasa(" + value.id + ")");
                    var iconEdit = $("<i>").addClass("ri-edit-fill");
    
                    // Tambahkan ikon edit ke dalam elemen <a>
                    editButton.append(iconEdit);
                    // Form delete
                    var deleteButton = $("<button>")
                        .attr("type", "button")
                        .attr("data-id", value.id)
                        .addClass("btn btn-sm btn-outline-danger btn-icon bahasa-btn")
                        .html("<i class='ri-delete-bin-fill'></i>")
                        .on("click", function() {
                            var id = value.id;
    
                            // Lakukan request Ajax untuk menghapus data
                            $.ajax({
                                url: "{{ route('manajemen.bahasa.destroy', '') }}/" + id,
                                type: "DELETE",
                                headers: {
                                    "X-CSRF-Token": csrfToken
                                },
                                dataType: "json",
                                success: function(response) {
                                    // Di sini Anda dapat menangani respons dari server setelah penghapusan berhasil
                                    // Misalnya, reload data atau tampilkan notifikasi
                                    // Contoh:
                                    alert("Data berhasil dihapus");
                                    // Kemudian Anda bisa menghapus baris tabel dari DOM jika diinginkan.
                                    // Misalnya: $(this).closest('tr').remove();
                                },
                                error: function(xhr, status, error) {
                                    // Di sini Anda dapat menangani respons dari server jika terjadi kesalahan
                                    // Misalnya, tampilkan pesan error
                                    // Contoh:
                                    alert("Terjadi kesalahan saat menghapus data");
                                }
                            });
                        });
    
    
                    tbody+= '<tr>';
                    tbody +='<td>'+value.bahasa+'</td>';
                    tbody +='<td>'+value.berbicara+'</td>';
                    tbody +='<td>'+value.membaca+'</td>';
                    tbody +='<td>'+value.menulis+'</td>';
                    tbody+='<td><div class="action_group">'+editButton.prop('outerHTML')+' '+deleteButton.prop('outerHTML')+'</div></td>';
                    tbody+= '</tr>';
                    
                });
                
    
                // Menampilkan tabel di dalam div target
                $("#reloadDivBahasa tbody").html(tbody);
                success();
            },
            error: function(xhr, status, error) {
                // Di sini Anda dapat menangani respons dari server jika terjadi kesalahan
                // Misalnya, tampilkan pesan error
                // Contoh:
                alert("Terjadi kesalahan saat menghapus data");
            }
        });
    }
});