@extends('manajemen.pegawai.header.content')
@section('tab')
<div class="row">
    <div class="col-lg-4">
        <div class="mb-3">
            <!-- Default Modals -->
            <button type="button" class="btn btn-primary " data-bs-toggle="modal" data-bs-target="#myModalPendidikan" @if ($prods->status_kepegawaian==2)
                disabled
            @endif>Tambah</button>
            <div id="myModalPendidikan" 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 Riwayat Pendidikan</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                      <form id="myFormPendidikan" enctype="multipart/form-data">
                        <input type="hidden" name="pegawais_id" value="{{$prods->id}}">
                        <input type="hidden" id="idpendidikan" name="pendidikan_id">
                        <div class="mb-3">
                            <label>Jenjang Pendidikan</label>
                            <select name="jenjang_id" class="form-select" id="jenjang_id">
                                <option value="">Pilih Jenjang</option>
                                @foreach ($pendidikan as $item)
                                    <option value="{{$item->id}}">{{$item->nama}}</option>
                                @endforeach
                            </select>
                            @error('jenjang_id') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>
              
                        <div class="mb-3">
                            <label>Nama Sekolah</label>
                            <input type="text" class="form-control" id="nama_sekolah" value="{{old('nama_sekolah')}}" name="nama_sekolah">
                            @error('nama_sekolah') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>
              
                        <div class="mb-3">
                            <div class="mb-3">
                                <label>Tahun Lulus</label>
                                <input type="number" name="tahun_lulus" class="form-control" value="{{old('tahun_lulus')}}" id="tahun_lulus" >
                                @error('tahun_lulus') <span class="text-danger">{{ $message }}</span> @enderror
                            </div>
                        </div>
              
                        <div class="mb-3">
                            <label>Jurusan</label>
                            <input type="text" name="jurusan" class="form-control" value="{{old('jurusan')}}" id="jurusan">
                            @error('jurusan') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>
              
                        <div class="mb-3">
                            <label>Gelar</label>
                            <input type="text" name="gelar_id" value="{{old('gelar_id')}}" class="form-control" id="gelar_id">
                            @error('gelar_id') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>
                        <div class="mb-3">
                            <label for="berkas">Berkas Ijazah <span class="text-danger"><i>File .jpeg,.jpg,.png,.pdf max : 2mb</i></span> </label>
                            <input type="file" class="form-control" name="file_ijazah" accept=".jpeg,.jpg,.png,.pdf" class="form-control-file" id="file_ijazah">
                            @error('file_ijazah') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>
                        <div class="mb-3">
                            <label for="berkas">Berkas Transkrip <span class="text-danger"><i>File .jpeg,.jpg,.png,.pdf max : 2mb</i></span> </label>
                            <input type="file" class="form-control" name="file_transkrip" accept=".jpeg,.jpg,.png,.pdf" class="form-control-file" id="file_transkrip">
                            @error('file_transkrip') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>
                      </form>
                      <div id="errorContainerPendidikan" class="mb-3 text-danger errorContainerPendidikan"></div>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                      <button type="button" form="myForm" id="submitForm" class="btn btn-primary savependidikan">Save Changes</button>
                      <button type="button" form="myForm" class="btn btn-primary updatependidikan" style="display: none">Update Changes</button>
                    </div>
                  </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->
        </div>
    </div>
    <!--end col-->
    <div class="col-lg-12">
        <div class="mb-3" id="reloadDivPendidikan">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Jenjang</th>
                        <th>Nama Sekolah</th>
                        <th>Tahun Lulus</th>
                        <th>Jurusan</th>
                        <th>Gelar Pendidikan</th>
                        <th>File Ijazah</th>
                        <th>File Transkrip</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                                                              
                @foreach ($riwayat_pendidikan as $item)
                    <tr>
                        <td>{{$item->jenjang}}</td>
                        <td>{{$item->nama_sekolah}}</td>
                        <td>{{$item->tahun_lulus}}</td>
                        <td>{{$item->jurusan}}</td>
                        <td>{{$item->gelar_id}} </td>
                        <td>
                            @if ($item->file_ijazah!='-')
                                                    <a href="javascript:void(0);" 
                                                        class="btn btn-sm btn-primary waves-effect waves-light open-pdf-modal" 
                                                        data-pdf="{{URL::asset('images/dokumen/pegawai/')}}/{{$item->pathfolder}}/file_pendidikan/{{$item->file_ijazah}}">
                                                        <i class="ri-file-pdf-line"></i>
                                                    </a>
                            {{-- <a href="{{URL::asset('images/dokumen/pegawai/')}}/{{$item->pathfolder}}/file_pendidikan/{{$item->file_ijazah}}" target="_blank" class="btn btn-sm btn-outline-info btn-icon"><i class="ri-file-line"></i></a> --}}
                            @else 
                            <span class="ri-close-fill text-danger"></span>
                            @endif
                        </td>
                        <td>
                            @if ($item->file_transkrip!='-')
                                                    <a href="javascript:void(0);" 
                                                        class="btn btn-sm btn-primary waves-effect waves-light open-pdf-modal" 
                                                        data-pdf="{{URL::asset('images/dokumen/pegawai/')}}/{{$item->pathfolder}}/file_pendidikan/{{$item->file_transkrip}}">
                                                        <i class="ri-file-pdf-line"></i>
                                                    </a>
                            {{-- <a href="{{URL::asset('images/dokumen/pegawai/')}}/{{$item->pathfolder}}/file_pendidikan/{{$item->file_transkrip}}" target="_blank" class="btn btn-sm btn-outline-info btn-icon"><i class="ri-file-line"></i></a> --}}
                            @else 
                            <span class="ri-close-fill text-danger"></span>
                            @endif
                            {{-- <a href="{{URL::asset('images/dokumen/pegawai/')}}/{{$item->pathfolder}}/file_pendidikan/{{$item->file_transkrip}}" target="_blank" class="btn btn-sm btn-outline-info btn-icon"><i class="ri-file-line"></i></a> --}}
                        </td>
                        <td>
                            <div class="action_group">
                                <a href="javascript:void(0)" class="btn btn-sm btn-outline-primary btn-icon" onclick="edit_pendidikan('{{$item->id}}')"  title="Edit"><i class="ri-edit-fill"></i></a>
                                <form method="POST" action="{{ route('manajemen.riwayat-pendidikan.destroy', $item->id) }}" onsubmit="return confirm('Apakah yakin akan menghapus data ini ?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-outline-danger btn-icon pendidikan-btn" data-id="{{$item->id}}"  title="Delete"><i class="ri-delete-bin-fill"></i></button>
                                </form>
                            </div>
                        </td>
                    </tr>
                                    @endforeach
                
                </tbody>
            </table>
        </div>
    </div>
    <!--end col-->
</div>
@endsection
@section('script')
    @include('modal-pdf')
@endsection
@section('jscontent')
   <script>
    // edit pendidikan
    var options='';
            const myModalPendidikan = new bootstrap.Modal(document.getElementById('myModalPendidikan'), options)
            
            function edit_pendidikan(id){
                //alert(id);
                //$("#myModal").modal("show"); // open modal
                // Kemudian panggil show() untuk menampilkan modal
                myModalPendidikan.show();
                
                $.ajax({
                    url: "{{ route('staff.riwayat-pendidikan.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);
                        console.log(Obj);
                        $("#jenjang_id").val(Obj.jenjang_id);
                        $("#nama_sekolah").val(Obj.nama_sekolah)
                        $("#jurusan").val(Obj.jurusan);
                        $("#pegawais_id").val(Obj.pegawais_id);;
                        $("#tahun_lulus").val(Obj.tahun_lulus);
                        $("#gelar_id").val(Obj.gelar_id);
                        // $("#pendidikan").val(Obj.pendidikan_id);
                        // $("#no_kontak").val(Obj.no_kontak);
                        // $("#kontak_darurat").val(Obj.kontak_darurat);
                        
                        
                        $("#idpendidikan").val(Obj.id);
                        $("#myFormPendidikan").attr("action", "{{ route('staff.riwayat-pendidikan.update', '') }}");
                        $("#myFormPendidikan").attr("method", "PUT");
                        $(".savependidikan").hide();
                        $(".updatependidikan").show();
                    }

                });
            }

            $(".updatependidikan").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 id = $("#idpendidikan").val();
                var jenjang_id = $("#jenjang_id").val();
                var nama_sekolah = $("#nama_sekolah").val();
                var jurusan = $("#jurusan").val();
                var tahun_lulus = $("#tahun_lulus").val();
                var gelar_id = $("#gelar_id").val();
                var idpendidikan = $("#idpendidikan").val();
                var jurusan = $("#jurusan").val();
               
                var fileInput = document.getElementById('file_ijazah');
                var file_ijazah = fileInput.files[0];

                var fileInputT = document.getElementById('file_transkrip');
                var file_transkrip = fileInputT.files[0];

                // Buat objek FormData
                var formData = new FormData();
                formData.append('_token', csrfToken); // Sertakan token CSRF dalam permintaan
                formData.append('id', id);
                formData.append('jenjang_id', jenjang_id);
                formData.append('nama_sekolah', nama_sekolah);
                formData.append('tahun_lulus', tahun_lulus);
                formData.append('jurusan', jurusan);
                formData.append('gelar_id', gelar_id);
                formData.append('idpendidikan', idpendidikan);
                formData.append('file_ijazah', file_ijazah);
                formData.append('file_transkrip', file_transkrip);
                    // Kirim data form menggunakan AJAX
                $.ajax({
                    url: "{{ route('staff.riwayat-pendidikan.update') }}", // 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,
                    // jenjang_id:jenjang_id,
                    // nama_sekolah:nama_sekolah,
                    // tahun_lulus:tahun_lulus,
                    // jurusan:jurusan,
                    // gelar_id:gelar_id,
                    // idpendidikan:idpendidikan,
                    // jurusan:jurusan,
                    // },
                    data: formData,
                    processData: false, // Jangan proses data, biarkan dalam bentuk FormData
                    contentType: false, // Jangan set header contentType

                    success: function(response) {
                        console.log(response);
                        // $("#myModal").modal("hide"); // Menutup modal
                        myModalPendidikan.hide();
                        // var reloadData = response.reloadData;
                        // console.log(reloadData);
                        // location.reload();
                        // 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_pendidikan(" + 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 riwayatpendidikan-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.riwayat-pendidikan.destroy', '') }}/" + id,
                        //                 type: "DELETE",
                        //                 headers: {
                        //                     "X-CSRF-Token": csrfToken
                        //                 },
                        //                 dataType: "json",
                        //                 success: function(response) {
                                            
                        //                     alert("Data berhasil dihapus");
                                            
                        //                 },
                        //                 error: function(xhr, status, error) {
                                           
                        //                     alert("Terjadi kesalahan saat menghapus data");
                        //                 }
                        //             });
                        //         });


                        //     tbody+= '<tr>';
                        //     tbody +='<td>'+value.jenjang.singkatan+'</td>';
                        //     tbody +='<td>'+value.nama_sekolah+'</td>';
                        //     tbody +='<td>'+value.tahun_lulus+'</td>';
                        //     tbody +='<td>'+value.jurusan+'</td>';
                        //     tbody +='<td>'+value.gelar_id+'</td>';
                        //     tbody +='<td> <a href="{{URL::asset('images/dokumen/pegawai/')}}/'+value.pegawais.pathfolder+'/file_pendidikan/'+value.file_ijazah+'" target="_blank" class="btn btn-sm btn-outline-info btn-icon"><i class="ri-file-line"></i></a></td>';
                        //     tbody +='<td> <a href="{{URL::asset('images/dokumen/pegawai/')}}/'+value.pegawais.pathfolder+'/file_pendidikan/'+value.file_transkrip+'" target="_blank" class="btn btn-sm btn-outline-info btn-icon"><i class="ri-file-line"></i></a></td>';
                        //     tbody+='<td><div class="action_group">'+editButton.prop('outerHTML')+' '+deleteButton.prop('outerHTML')+'</div></td>';
                        //     tbody+= '</tr>';
                            
                        // });
                        
                        

                        // // Menampilkan tabel di dalam div target
                        // $("#reloadDivPendidikan tbody").html(tbody);
                        // reset_form_keluarga();
                        // success();        
                        location.reload();                
                    },
                    
                    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);
                        });
                    }
                });
            });

            $(document).on("click", ".riwayatpendidikan-btn[data-id]", function() {
                var id = $(this).data("id");
                var confirmDelete = confirm("Apakah Anda yakin ingin menghapus data ini?");
                if (confirmDelete) {
                    $.ajax({
                        url: "{{ route('staff.riwayat-pendidikan.destroy', '') }}/" + id,
                        type: "DELETE",
                        headers: {
                            "X-CSRF-Token": csrfToken
                        },
                        dataType: "json",
                        success: function(response) {
                        console.log(response);
                        //$("#myModal").modal("hide"); // Menutup modal
                        myModalPendidikan.hide();
                        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_pendidikan(" + 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 riwayatpendidikan-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.riwayat-pendidikan.destroy', '') }}/" + id,
                                        type: "DELETE",
                                        headers: {
                                            "X-CSRF-Token": csrfToken
                                        },
                                        dataType: "json",
                                        success: function(response) {
                                            
                                            alert("Data berhasil dihapus");
                                            
                                        },
                                        error: function(xhr, status, error) {
                                           
                                            alert("Terjadi kesalahan saat menghapus data");
                                        }
                                    });
                                });


                            tbody+= '<tr>';
                            tbody +='<td>'+value.jenjang.singkatan+'</td>';
                            tbody +='<td>'+value.nama_sekolah+'</td>';
                            tbody +='<td>'+value.tahun_lulus+'</td>';
                            tbody +='<td>'+value.jurusan+'</td>';
                            tbody +='<td>'+value.gelar_id+'</td>';
                            tbody +='<td>'+value.file_ijazah+'</td>';
                            tbody +='<td>'+value.file_transkrip+'</td>';
                            tbody+='<td><div class="action_group">'+editButton.prop('outerHTML')+' '+deleteButton.prop('outerHTML')+'</div></td>';
                            tbody+= '</tr>';
                            
                        });
                        
                        

                        // Menampilkan tabel di dalam div target
                        $("#reloadDivPendidikan tbody").html(tbody);
                        reset_form_keluarga();
                        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");
                        }
                    });
                }
            });
            // end edit pendidikan


            $("#submitForm").click(function () {
                var formData = new FormData($("#myFormPendidikan")[0]);
                formData.append('_token', csrfToken); // Menambahkan token CSRF ke FormData

                $.ajax({
                    url: "{{ route('manajemen.riwayat-pendidikan.create') }}", // Ganti dengan URL yang sesuai
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (response) {
                        // Tangani respons dari server
                        $("#myModalPendidikan").modal("hide"); // Menutup modal
                        $("#myFormPendidikan")[0].reset(); 
                        $("errorContainerPendidikan").empty();
                        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_keluarga(" + 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 pendidikan-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.riwayat-pendidikan.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");
                                            }
                                        });
                                    });
                                var ijazah = $("<a>")
                                    .attr("href", "{{ URL::asset('images/dokumen/pegawai/') }}/" + value.pegawais.pathfolder + "/file_pendidikan/" + value.file_ijazah)
                                    .attr("target", "_blank")
                                    .addClass("btn btn-sm btn-outline-info btn-icon")
                                    .append($("<i>").addClass("ri-file-line"));

                                var tranksrip = $("<a>")
                                    .attr("href", "{{ URL::asset('images/dokumen/pegawai/') }}/" + value.pegawais.pathfolder + "/file_pendidikan/" + value.file_transkrip)
                                    .attr("target", "_blank")
                                    .addClass("btn btn-sm btn-outline-info btn-icon")
                                    .append($("<i>").addClass("ri-file-line"));


                                tbody+= '<tr>';
                                tbody +='<td>'+value.jenjang.singkatan+'</td>';
                                tbody +='<td>'+value.nama_sekolah+'</td>';
                                tbody +='<td>'+value.tahun_lulus+'</td>';
                                tbody +='<td>'+value.jurusan+'</td>';
                                tbody +='<td>'+value.gelar_id+'</td>';
                                // tbody += '<td>';
                                // if (value.pendidikan !== null) {
                                // tbody += value.pendidikan;
                                // }
                                tbody += '</td>';
                                // tbody+='<td><div class="action_group">'+ijazah.prop('outerHTML')+' '+deleteButton.prop('outerHTML')+'</div></td>';
                                tbody+='<td><div class="action_group">'+ijazah.prop('outerHTML')+'</div></td>';
                                tbody+='<td><div class="action_group">'+tranksrip.prop('outerHTML')+'</div></td>';
                                tbody+='<td><div class="action_group">'+deleteButton.prop('outerHTML')+'</div></td>';
                                tbody+= '</tr>';
                                
                            });
                            
                            

                            // Menampilkan tabel di dalam div target
                            $("#reloadDivPendidikan tbody").html(tbody);

                        success();
                        // setTimeout(function() {
                        //     location.reload();
                        // }, 2000);
                    },
                        error: function(xhr, status, error) {
                            console.log(xhr);
                            var errors = xhr.responseJSON.errors;
                            var errorContainer = $(".errorContainerPendidikan");
                            errorContainer.empty(); // Hapus pesan kesalahan sebelumnya (jika ada)

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