@extends('manajemen.pegawai.header.content')
@section('tab')
<div class="row">
    <div class="col-lg-12">
        <div class="mb-3">
            <button type="button" class="btn btn-primary " data-bs-toggle="modal" data-id="modal-aktivitas" data-bs-target="#myModalAktivitas" @if ($prods->status_kepegawaian==2)
                disabled
            @endif>Tambah</button>
        </div>
    </div>
    <!--end col-->
    <div class="col-lg-12">
        <div class="mb-3">
            <table class="table table-bordered" id="reloadDivAktivitas">
                <thead>
                    <tr>
                        <th>Nama Instansi / Perusahaan</th>
                        <th>Jabatan</th>
                        <th>Tahun</th>
                        {{-- <th><a href="#" class="btn btn-sm btn-primary" onclick="addaktivitas()"><i class="ri-add-circle-line"></i></a></th> --}}
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody class="aktivitas">
                                                              
                @foreach ($aktivitas as $item)
                    <tr>
                        <td><input type="hidden" name="ak[{{$no}}][pegawais_id]" value="{{$item->pegawais_id}}"><input type="hidden" name="ak[{{$no}}][kegiatan]" value="{{$item->kegiatan}}">{{$item->kegiatan}}</td>
                        <td><input type="hidden" name="ak[{{$no}}][jabatan]" value="{{$item->jabatan}}">{{$item->jabatan}}</td>
                        <td><input type="hidden" name="ak[{{$no}}][tahun]" value="{{$item->tahun}}">{{$item->tahun}}</td>
                        <td>
                            <div class="action_group">
                                <a class="btn btn-sm btn-outline-primary btn-icon" onclick="edit_aktivitas('{{$item->id}}')" title="Edit"><i class="ri-edit-fill"></i></a>
                                <form method="POST" action="{{ route('manajemen.aktivitas.destroy', $item->id) }}" onsubmit="return confirm('Apakah yakin akan menghapus data ini ?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="button" data-id="{{$item->id}}" class="btn btn-sm btn-outline-danger btn-icon aktivitas-btn" title="Delete"><i class="ri-delete-bin-fill"></i></button>
                                </form>
                            </div>
                        </td>
                    </tr>
                                    @endforeach
                
                </tbody>
                
            </table>
        
        </div>
        
    </div>
    <!--end col-->
</div>

<div id="myModalAktivitas" class="modal fade" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="myModalLabel">Tambah Aktivitas Sosial</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <form method="POST" action="{{ route('manajemen.aktivitas.store') }}" id="form-aktivitas">
                <input type="hidden" class="form-control pegawais_id" name="pegawais_id" value="{{ $prods->id}}">
                <input type="hidden" class="form-control id" name="id">
                @csrf
                <div class="row mt-2">
                    <div class="col-lg-12">
                        <div class="mb-3">
                            <label>Nama Instansi / Perusahaan <span class="text-danger">*</span> </label>
                            <input type="text" name="kegiatan" class="form-control kegiatan">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="mb-3">
                            <label>Jabatan <span class="text-danger">*</span> </label>
                            <input type="text" name="jabatan" class="form-control jabatan">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="mb-3">
                            <label>Tahun <span class="text-danger">*</span> </label>
                            <input type="number" maxlength="4" name="tahun" class="form-control tahun">
                        </div>
                    </div>
                </div>
            </form>
          <div id="errorContainer" class="mb-3 text-danger"></div>
        </div>
        <div class="modal-footer">
            <div class="col-lg-12">
                <div class="mb-3">
                    <button type="button" id="simpanAktivitas" class="btn btn-sm btn-success full"
                    @if ($prods->status_kepegawaian==2)
                    disabled
                @endif>Simpan</button>
                <button type="button" id="editAktivitas" class="btn btn-sm btn-warning full" style="display: none"
                    @if ($prods->status_kepegawaian==2)
                    disabled
                @endif>Update</button>
                </div>
            </div>
          <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
          {{-- <button type="button" form="myForm" class="btn btn-primary">Save Changes</button> --}}
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
@endsection

@section('jscontent')
   <script>
    function edit_aktivitas(id){
        //alert(id);
        $("#myModalAktivitas").modal("show"); // open modal
        
        $.ajax({
            url: "{{ route('manajemen.aktivitas.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);
                $(".kegiatan").val(Obj.kegiatan);
                $(".jabatan").val(Obj.jabatan);
                $(".tahun").val(Obj.tahun);
                $(".id").val(Obj.id);
                $("#form-aktivitas").attr("action", "{{ route('manajemen.aktivitas.update', '') }}");
                $("#form-aktivitas").attr("method", "PUT");
                $("#simpanAktivitas").hide();
                $("#editAktivitas").show();
            }

        });
    }


    $("#simpanAktivitas").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 kegiatan = $(".kegiatan").val();
                var jabatan = $(".jabatan").val();
                var tahun = $(".tahun").val();
                

                // Kirim data form menggunakan AJAX
                $.ajax({
                    url: "{{ route('manajemen.aktivitas.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,
                    kegiatan:kegiatan,
                    jabatan:jabatan,
                    tahun:tahun
                    
                    },

                    success: function(response) {
                        //console.log(response);
                        $("#myModalAktivitas").modal("hide"); // Menutup modal
                        var reloadData = response.reloadData;
                        console.log(reloadData);
                        var tbody= '';
                        $.each(reloadData, function(key, value) {
                            // Buat elemen <a> baru untuk tombol edit
                                var editButton = $("<a>")
                                .addClass("btn btn-sm btn-outline-primary btn-icon")
                                .attr("title", "Edit")
                                .attr("onclick", "edit_aktivitas(" + value.id + ")");

                            // Buat elemen <i> untuk ikon edit
                            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 aktivitas-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.aktivitas.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.kegiatan+'</td>';
                            tbody +='<td>'+value.jabatan+'</td>';
                            tbody +='<td>'+value.tahun+'</td>';
                            tbody+='<td><div class="action_group">'+editButton.prop('outerHTML')+' '+deleteButton.prop('outerHTML')+'</div></td>';
                            tbody+= '</tr>';
                            
                        });
                        

                        // Menampilkan tabel di dalam div target
                        $("#reloadDivAktivitas 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);
                        });
                    }
                });
            });

            $("#editAktivitas").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 kegiatan = $(".kegiatan").val();
                var jabatan = $(".jabatan").val();
                var tahun = $(".tahun").val();
                 var id = $(".id").val();
                

                // Kirim data form menggunakan AJAX
                $.ajax({
                    url: "{{ route('manajemen.aktivitas.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,
                    kegiatan:kegiatan,
                    jabatan:jabatan,
                    tahun:tahun,
                    id:id,
                    
                    },

                    success: function(response) {
                        //console.log(response);
                        $("#myModalAktivitas").modal("hide"); // Menutup modal
                        var reloadData = response.reloadData;
                        console.log(reloadData);
                        var tbody= '';
                        $.each(reloadData, function(key, value) {
                            // Buat elemen <a> baru untuk tombol edit
                            var editButton = $("<a>")
                                .addClass("btn btn-sm btn-outline-primary btn-icon")
                                .attr("title", "Edit")
                                .attr("onclick", "edit_aktivitas(" + value.id + ")");

                            // Buat elemen <i> untuk ikon edit
                            var iconEdit = $("<i>").addClass("ri-edit-fill");

                            // Tambahkan ikon edit ke dalam elemen <a>
                            editButton.append(iconEdit);

                            var deleteButton = $("<button>")
                                .attr("type", "button")
                                .attr("data-id", value.id)
                                .addClass("btn btn-sm btn-outline-danger btn-icon aktivitas-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.aktivitas.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.kegiatan+'</td>';
                            tbody +='<td>'+value.jabatan+'</td>';
                            tbody +='<td>'+value.tahun+'</td>';
                            tbody+='<td><div class="action_group">'+editButton.prop('outerHTML')+' '+deleteButton.prop('outerHTML')+'</div></td>';
                            tbody+= '</tr>';
                            
                        });
                        

                        // Menampilkan tabel di dalam div target
                        $("#reloadDivAktivitas 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);
                        });
                    }
                });
            });

            // Event onClick untuk tombol delete aktivitas
            $(document).on("click", ".aktivitas-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.aktivitas.destroy', '') }}/" + id,
                        type: "DELETE",
                        headers: {
                            "X-CSRF-Token": csrfToken
                        },
                        dataType: "json",
                        success: function(response) {
                            //console.log(response);
                            $("#myModalAktivitas").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_aktivitas(" + value.id + ")");

                                // Buat elemen <i> untuk ikon edit
                                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 aktivitas-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.aktivitas.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.kegiatan+'</td>';
                                tbody +='<td>'+value.jabatan+'</td>';
                                tbody +='<td>'+value.tahun+'</td>';
                                tbody+='<td><div class="action_group">'+editButton.prop('outerHTML')+' '+deleteButton.prop('outerHTML')+'</div></td>';
                                tbody+= '</tr>';

                            });
                            

                            // Menampilkan tabel di dalam div target
                            $("#reloadDivAktivitas 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");
                        }
                    });
                }
            });
   </script>
@endsection