@extends('Master.master')
@section('content')
<!-- Content Header (Page header) -->
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-5">
                <h1>Kegiatan Jafung Penata Laksana SDA</h1>
            </div>
            <div class="col-sm-7">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{route ('dashboard')}}">Dashboard</a></li>
                    <li class="breadcrumb-item active">Data Kegiatan Tugas Jabatan Fungsional</li>
                    <li class="breadcrumb-item active">Kegiatan Jafung Penata Laksana SDA</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title"><button class="btn btn-primary" data-toggle="modal" data-target="#tambah-bk-terampil">Tambah Uraian Kegiatan / Tugas</button></h3>
                    </div>
                    <div class="card-body">
                        <table id="example1" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th class="text-center">No</th>
                                    <th class="text-center">Tipe</th>
                                    <th class="text-center">Tipe Unsur</th>
                                    <th class="text-center">Uraian Kegiatan / Tugas</th>
                                    <th class="text-center">Hasil Kerja / Output</th>
                                    <th class="text-center">Kode</th>
                                    <th class="text-center">Angka Kredit</th>
                                    <th class="text-center">Pelaksana Kegiatan</th>
                                    <th class="text-center">Aksi</th>
                                </tr>
                            </thead>
                            @php $no = 1; @endphp
                            <tbody>
                                @foreach($ButirKegiatanPengelola as $bp)
                                <tr>
                                    <td class="text-center">{{$no++}}</td>
                                    <td>{{$bp->tipe}}</td>
                                    <td>{{$bp->tipe_unsur}}</td>
                                    <td>{{$bp->butir_kegiatan}}</td>
                                    <td>{{$bp->satuan_hasil}}</td>
                                    <td>{{$bp->id}}</td>
                                    <td class="text-center">{{$bp->angka_kredit}}</td>
                                    <td>
                                        @if ($bp->pelaksana == 0)
                                        Semua Jenjang
                                        @elseif ($bp->pelaksana == 1)
                                        Pemula
                                        @elseif ($bp->pelaksana == 2)
                                        Terampil
                                        @elseif ($bp->pelaksana == 3)
                                        Mahir
                                        @elseif ($bp->pelaksana == 4)
                                        Penyelia
                                        @endif
                                    </td>
                                    <td class="col-2">
                                        <div class="row">
                                            <div class="col-6">
                                            <button type="button" class="btn btn-block bg-gradient-warning" id="edit-butir-kegiatan-terampil" data-toggle="modal" data-target='#edit-bk-terampil' data-id="{{$bp->id}}"><i class="fas fa-edit"></i></button>
                                            </div>
                                            <div class="col-6">
                                                <button type="button" class="btn btn-block bg-gradient-danger delete-bk-terampil" data-id="{{$bp->id}}"><i class="fas fa-trash"></i></button>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script>
    $(document).ready(function() {

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        
        //Modal Hapus
        $('.delete-bk-terampil').on('click', function(event) {
            event.preventDefault();
            var id = $(this).data('id');
            Swal.fire({
                title: 'Apakah anda yakin?',
                text: "Anda tidak akan dapat mengembalikan ini!",
                icon: 'warning',
                showCancelButton: true,
                cancelButtonText: 'Tidak',
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, hapus data!'
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                    title: 'Menghapus Data',
                    html: 'Tunggu hingga proses hapus selesai.',
                    didOpen: () => {
                        Swal.showLoading()
                    }
                    })
                    $.ajax({
                        url: '/hapus-butir-kegiatan-terampil/' + id,
                        type: "POST",
                        dataType: 'json',
                        data: {
                            id: id,
                        },
                        success: function(data) {
                            Swal.fire({
                                title: 'Terhapus',
                                text: 'Data Berhasil dihapus.',
                                icon: 'success',
                                confirmButtonColor: '#3085d6',
                                confirmButtonText: 'OK'
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    window.location.reload(true);
                                }
                                Swal.close(window.location.reload(true));
                            })
                        }
                    });
                }
            })
        });

        $("#butir_kegiatan_pengelola_terampil").validate({
            rules: {
                butir_kegiatan : {
                required: true
                },
                satuan_hasil : {
                required: true
                },
                pelaksana : {
                required: true
                },
                angka_kredit : {
                required: true
                },
                tipe : {
                required: true
                },
                tipe_unsur : {
                required: true
                }
            },
            messages: {
                butir_kegiatan: {
                    required: 'Uraian Kegiatan / Tugas tidak boleh kosong &nbsp;<i class="fas fa-exclamation-circle"></i>'
                },
                satuan_hasil: {
                    required: 'Hasil Kerja / Output tidak boleh kosong &nbsp;<i class="fas fa-exclamation-circle"></i>'
                },
                pelaksana: {
                    required: 'Pelaksana tidak boleh kosong &nbsp;<i class="fas fa-exclamation-circle"></i>'
                },
                angka_kredit: {
                    required: 'Angka Kredit tidak boleh kosong &nbsp;<i class="fas fa-exclamation-circle"></i>'
                },
                tipe: {
                    required: 'Tipe tidak boleh kosong &nbsp;<i class="fas fa-exclamation-circle"></i>'
                },
                tipe_unsur: {
                    required: 'Tipe Unsur tidak boleh kosong &nbsp;<i class="fas fa-exclamation-circle"></i>'
                }
            },
            submitHandler: function (form) {
                let formData = new FormData();

                var nomor = document.getElementById("nomor").value;
                var butir_kegiatan = document.getElementById("butir_kegiatan").value;
                var satuan_hasil = document.getElementById("satuan_hasil").value;
                var pelaksana = document.getElementById("pelaksana").value;
                var angka_kredit = document.getElementById("angka_kredit").value;
                var tipe = document.getElementById("tipe").value;
                var tipe_unsur = document.getElementById("tipe_unsur").value;

                formData.append('nomor', nomor);
                formData.append('butir_kegiatan', butir_kegiatan);
                formData.append('satuan_hasil', satuan_hasil);
                formData.append('pelaksana', pelaksana);
                formData.append('angka_kredit', angka_kredit);
                formData.append('tipe', tipe);
                formData.append('tipe_unsur', tipe_unsur);
                
                Swal.fire({
                title: 'Mengirim Data',
                html: 'Tunggu hingga proses kirim selesai.',
                didOpen: () => {
                    Swal.showLoading()
                }
                })
                $.ajax({
                    url: '/simpan-butir-kegiatan-terampil',
                    type: "POST",
                    enctype: 'multipart/form-data',
                    contentType: false,
                    processData: false,
                    data: formData,
                    dataType: 'json',
                    success: function(data) {
                        $('#tambah-bk-terampil').trigger("reset");
                        $('#tambah-bk-terampil').modal('hide');
                        Swal.fire({
                            title: 'Tersimpan',
                            text: 'Data Berhasil disimpan.',
                            icon: 'success',
                            confirmButtonColor: '#3085d6',
                            confirmButtonText: 'OK'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                window.location.reload(true);
                            }
                            Swal.close(window.location.reload(true));
                        })
                    }
                });
            }
        });

        $('body').on('click', '#edit-butir-kegiatan-terampil', function(event) {
            event.preventDefault();
            let formData = new FormData();
            var id = $(this).data('id');
           
            $.get('/edit-butir-kegiatan-terampil/' + id , function(data) {
                $('#edit-bk-terampil').modal('show');
                $('#id').val(data.data.id);
                $('#edit_nomor').val(data.data.nomor);
                $('#edit_butir_kegiatan').val(data.data.butir_kegiatan);
                $('#edit_satuan_hasil').val(data.data.satuan_hasil);
                $('#edit_pelaksana').val(data.data.pelaksana);
                $('#edit_angka_kredit').val(data.data.angka_kredit);
                $('#edit_tipe').val(data.data.tipe);
                $('#edit_tipe_unsur').val(data.data.tipe_unsur);
            })

            $("#edit_butir_kegiatan_terampil").validate({
            rules: {
                butir_kegiatan : {
                required: true
                },
                satuan_hasil : {
                required: true
                },
                pelaksana : {
                required: true
                },
                angka_kredit : {
                required: true
                },
                tipe : {
                required: true
                },
                tipe_unsur : {
                required: true
                }
            },
            messages: {
                butir_kegiatan: {
                    required: 'Uraian Kegiatan / Tugas tidak boleh kosong &nbsp;<i class="fas fa-exclamation-circle"></i>'
                },
                satuan_hasil: {
                    required: 'Hasil Kerja / Output tidak boleh kosong &nbsp;<i class="fas fa-exclamation-circle"></i>'
                },
                pelaksana: {
                    required: 'Pelaksana tidak boleh kosong &nbsp;<i class="fas fa-exclamation-circle"></i>'
                },
                angka_kredit: {
                    required: 'Angka Kredit tidak boleh kosong &nbsp;<i class="fas fa-exclamation-circle"></i>'
                },
                tipe: {
                    required: 'Tipe tidak boleh kosong &nbsp;<i class="fas fa-exclamation-circle"></i>'
                },
                tipe_unsur: {
                    required: 'Tipe Unsur tidak boleh kosong &nbsp;<i class="fas fa-exclamation-circle"></i>'
                }
            },
            submitHandler: function (form) {
                let formData = new FormData();

                var nomor = document.getElementById("edit_nomor").value;
                var butir_kegiatan = document.getElementById("edit_butir_kegiatan").value;
                var satuan_hasil = document.getElementById("edit_satuan_hasil").value;
                var pelaksana = document.getElementById("edit_pelaksana").value;
                var angka_kredit = document.getElementById("edit_angka_kredit").value;
                var tipe = document.getElementById("edit_tipe").value;
                var tipe_unsur = document.getElementById("edit_tipe_unsur").value;

                formData.append('nomor', nomor);
                formData.append('butir_kegiatan', butir_kegiatan);
                formData.append('satuan_hasil', satuan_hasil);
                formData.append('pelaksana', pelaksana);
                formData.append('angka_kredit', angka_kredit);
                formData.append('tipe', tipe);
                formData.append('tipe_unsur', tipe_unsur);
                
                Swal.fire({
                title: 'Mengirim Data',
                html: 'Tunggu hingga proses kirim selesai.',
                didOpen: () => {
                    Swal.showLoading()
                }
                })
                $.ajax({
                    url: '/simpan-edit-butir-kegiatan-terampil/' + id,
                    type: "POST",
                    enctype: 'multipart/form-data',
                    contentType: false,
                    processData: false,
                    data: formData,
                    dataType: 'json',
                    success: function(data) {
                        $('#edit-bk-terampil').trigger("reset");
                        $('#edit-bk-terampil').modal('hide');
                        Swal.fire({
                            title: 'Tersimpan',
                            text: 'Data Berhasil disimpan.',
                            icon: 'success',
                            confirmButtonColor: '#3085d6',
                            confirmButtonText: 'OK'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                window.location.reload(true);
                            }
                            Swal.close(window.location.reload(true));
                        })
                    }
                });
            }
            });
        });
    });
</script>
@include('Form_Modal.create_butir_kegiatan_terampil')
@include('Form_Modal.edit_butir_kegiatan_terampil')
@endsection