@extends('Master.master')
@section('content')
<style>
    label.error {
    color: red;
    display: block;
    font-size: 13px;
    width: 100%;
    margin-left:5px;
    }
    input.error {
    border: 1px solid red;
    color: red;
    }
    textarea.error {
    border: 1px solid red;
    color: red;
    }
</style>
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Jafung</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{route('dashboard')}}">Dashboard</a></li>
                    <li class="breadcrumb-item active">Data Pegawai</li>
                    <li class="breadcrumb-item active">Jafung</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">
                    @if (auth()->user()->role == 'super' || auth()->user()->role == 'pembina')
                    <div class="card-header">
                        <h3 class="card-title"><button type="button" class="btn btn-primary" data-toggle="modal" id="tambah_pegawai" data-target="#employee_modal">Tambah Data Pegawai</button></h3>
                    </div>
                    @endif
                    <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">NIP</th>
                                    <th class="text-center">Nama</th>
                                    <th class="text-center">Email</th>
                                    <th class="text-center">No HP</th>
                                    <th class="text-center">Role</th>
                                    @if (auth()->user()->role == 'super')
                                    <th class="text-center col-2">Aksi</th>
                                    @elseif (auth()->user()->role == 'pembina')
                                    <th class="text-center">Aksi</th>
                                    @endif
                                </tr>
                            </thead>
                            @php $no = 1; @endphp
                            <tbody>
                                @foreach($ListEmployee as $le)
                                <tr>
                                    <td class="text-center">{{$no++}}</td>
                                    <td>{{$le->nip}}</td>
                                    <td>{{$le->name}}</td>
                                    <td>{{$le->email}}</td>
                                    <td>{{$le->phone}}</td>
                                    @if ($le->role == 'user')
                                    <td>Jafung</td>
                                    @elseif ($le->role == 'admin')
                                    <td>Tim Penilai</td>
                                    @elseif ($le->role == 'super')
                                    <td>PIC</td>
                                    @elseif ($le->role == 'pembina')
                                    <td>Pembina Jafung</td>
                                    @endif
                                    @if (auth()->user()->role == 'super' || auth()->user()->role == 'pembina')
                                    <td>
                                        <div class="row">
                                            <div class="col-4">
                                                <button type="button" id="edit_employee" class="btn btn-block bg-gradient-info" data-toggle="modal" data-target="#modal-edit-data-pegawai" data-id="{{ $le->id }}"><i class="fas fa-address-card"></i></button>
                                            </div>
                                            <div class="col-4">
                                                <button type="button" id="edit_password_employee" class="btn btn-block bg-gradient-warning" data-toggle="modal" data-target="#modal-edit-password-pegawai" data-id="{{ $le->id }}"><i class="fas fa-key"></i></button>
                                            </div>
                                            <div class="col-4">
                                                <a href="" class="button delete-confirm" data-id="{{$le->id}}"><button type="button" class="btn btn-block bg-gradient-danger"><i class="fas fa-trash"></i></button></a>
                                            </div>
                                        </div>
                                    </td>
                                    @endif
                                </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')
            }
        });

        $(function() {
            $('#unit_sub2').change(function() {
                var val = this.value;
                if (val == 1) { 
                    other.style.display = 'block';
                    document.getElementById("kld_input").value = "";
                } else { 
                    other.style.display = 'none';
                    document.getElementById("kld_input").value = "";
                }
            });
        });

        $("#store-employee").validate({
            rules: {
                nip : {
                required: true,
                minlength:18,
                maxlength:18
                },
            action: "required"
            },
            messages: {
                nip: {
                    required: 'NIP tidak boleh kosong &nbsp;<i class="fas fa-exclamation-circle"></i>',
                    minlength: 'NIP harus terdiri dari 18 digit &nbsp;<i class="fas fa-exclamation-circle"></i>',
                    maxlength: 'NIP harus terdiri dari 18 digit &nbsp;<i class="fas fa-exclamation-circle"></i>'
                },
            },
            submitHandler: function (form) {
                let formData = new FormData();
                var nip = document.getElementById("nip").value;
                var role = document.getElementById("role").value;

                formData.append('nip', nip);
                formData.append('role', role);

                
                Swal.fire({
                title: 'Mengirim Data',
                html: 'Tunggu hingga proses kirim selesai.',
                didOpen: () => {
                    Swal.showLoading()
                }
                })
                $.ajax({
                    url: '/simpan-pegawai',
                    type: "POST",
                    enctype: 'multipart/form-data',
                    contentType: false,
                    processData: false,
                    data: formData,
                    dataType: 'json',
                    success: function(data) {
                        if(data == 0) {
                            Swal.fire({
                                title: '<strong>Mohon Maaf</strong>',
                                text: 'NIP sudah digunakan.',
                                icon: 'info',
                                confirmButtonColor: '#3085d6',
                                confirmButtonText: 'OK'
                            })
                            .then((result) => {
                                if (result.isConfirmed) {
                                    $('#store-employee').trigger('reset');
                                }
                                Swal.close($('#store-employee').trigger('reset'));
                            })
                        }else {
                            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));
                            })
                        }
                    },
                });
            }
        });
    
        //Modal Hapus
        $('.delete-confirm').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-pegawai/' + 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));
                            })
                        }
                    });
                }
            })
        });

        //edit status permohonan
        $('body').on('click', '#edit_employee', function(event) {
            event.preventDefault();

            let formData = new FormData();
            var id = $(this).data('id');

            $.get('/edit-employee/' + id , function(data) {
                $('#edit_employee_modal').modal('show');
                $('#id').val(data.data.id);
                $('#nip2').val(data.data.nip);
                $('#name2').val(data.data.name);
                $('#email2').val(data.data.email);
                $('#phone2').val(data.data.phone);
                $('#place2').val(data.data.place);       
                $('#birthday2').val(data.data.birthday);
                $('#gender2').val(data.data.gender);
                $('#no_karpeg2').val(data.data.no_karpeg);
                $('#study2').val(data.data.study);
                $('#position2').val(data.data.position);
                $('#golongan2').val(data.data.golongan);
                $('#tgl_golongan2').val(data.data.tgl_golongan);
                $('#masa_lama_tahun2').val(data.data.masa_lama_tahun);
                $('#masa_lama_bulan2').val(data.data.masa_lama_bulan);
                $('#unit_sub2').val(data.data.unit_sub);
                $('#unit_pusat2').val(data.data.unit_pusat);
                $('#unit_kld2').val(data.data.unit_kld);

                var data_unit_sub2 = data.data.unit_sub;
                if (data_unit_sub2 == 1) { 
                    other.style.display = 'block';
                } else { 
                    other.style.display = 'none';
                }
            })
        });

        $('body').on('click', '#submit2', function(event) {
            event.preventDefault()
            let formData = new FormData();
            var id = $("#id").val();
            var nip2 = document.getElementById("nip2").value;
            var name2 = document.getElementById("name2").value;
            var email2 = document.getElementById("email2").value;
            var phone2 = document.getElementById("phone2").value;
            var place2 = document.getElementById("place2").value;
            var birthday2 = document.getElementById("birthday2").value;
            var gender2 = document.getElementById("gender2").value;
            var no_karpeg2 = document.getElementById("no_karpeg2").value;
            var study2 = document.getElementById("study2").value;
            var position2 = document.getElementById("position2").value;
            var golongan2 = document.getElementById("golongan2").value;
            var tgl_golongan2 = document.getElementById("tgl_golongan2").value;
            var masa_lama_tahun2 = document.getElementById("masa_lama_tahun2").value;
            var masa_lama_bulan2 = document.getElementById("masa_lama_bulan2").value;
            var unit_sub2 = document.getElementById("unit_sub2").value;
            var unit_pusat2 = document.getElementById("unit_pusat2").value;
            var unit_kld2 = document.getElementById("unit_kld2").value;

            formData.append('id', id);
            formData.append('nip', nip2);
            formData.append('name', name2);
            formData.append('email', email2);
            formData.append('phone', phone2);
            formData.append('place', place2);
            formData.append('birthday', birthday2);
            formData.append('gender', gender2);
            formData.append('no_karpeg', no_karpeg2);
            formData.append('study', study2);
            formData.append('position', position2);
            formData.append('golongan', golongan2);
            formData.append('tgl_golongan', tgl_golongan2);
            formData.append('masa_lama_tahun', masa_lama_tahun2);
            formData.append('masa_lama_bulan', masa_lama_bulan2);
            formData.append('unit_sub', unit_sub2);
            formData.append('unit_pusat', unit_pusat2);
            formData.append('unit_kld', unit_kld2);

            Swal.fire({
            title: 'Mengirim Data',
            html: 'Tunggu hingga proses kirim selesai.',
            didOpen: () => {
                Swal.showLoading()
            }
            })
            $.ajax({
                url: '/simpan-edit-pegawai/' + id,
                type: "POST",
                enctype: 'multipart/form-data',
                contentType: false,
                processData: false,
                data: formData,
                dataType: 'json',
                success: function(data) {
                    $('#update-store-employee').trigger("reset");
                    $('#modal-edit-data-pegawai').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));
                    })
                }
            });
        });

        //edit status permohonan
        $('body').on('click', '#edit_password_employee', function(event) {
            event.preventDefault()
            let formData = new FormData();
            var id = $(this).data("id");

            $.get('/edit-password-employee/' + id , function(data) {
                $('#modal-edit-password-pegawai').modal('show');
                $('#id_pw').val(data.data.id);
                $('#nip_pw').val(data.data.nip);
                $('#password_pw').val(data.data.nip);
            })
            
        });

        $('body').on('click', '#submit3', function(event) {
            event.preventDefault();
            let formData = new FormData();

            var id = document.getElementById("id_pw").value;
            var nip = document.getElementById("nip_pw").value;
            var password = document.getElementById("password_pw").value;
            
            formData.append('id', id);
            formData.append('nip', nip);
            formData.append('password', password);

            Swal.fire({
            title: 'Mengirim Data',
            html: 'Tunggu hingga proses kirim selesai.',
            didOpen: () => {
                Swal.showLoading()
            }
            })
            $.ajax({
                url: '/simpan-edit-password-pegawai/' + id,
                type: "POST",
                enctype: 'multipart/form-data',
                contentType: false,
                processData: false,
                data: formData,
                dataType: 'json',
                success: function(data) {
                    $('#update-store-employee').trigger("reset");
                    $('#modal-edit-data-pegawai').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_list_employee_user')
@include('Form_Modal.edit_list_employee')
@include('Form_Modal.edit_data_pegawai')
@endsection