var detail = $("#detail").DataTable({
    processing: true,
    paging: false,
    "info": false,
    "searching": false,
    "autoWidth": true,
    responsive: true,
    columns: [{
            data: "uniq_id",
            class: "text-center",
        },
        {
            data: "created_date",
            class: "text-center",
            orderable: false,
            width: '15%',
            "render": function (data) {
                return tanggal_jam(data);
            }
        }, {
            data: "laporan_detail",
            orderable: false,
        }, {
            data: "laporan_waktukejadian",
            orderable: false,
            "render": function (data) {
                return (data) ? data : '-';
            }
        }, {
            data: "laporan_pelaku",
            orderable: false,
            "render": function (data) {
                return (data) ? data : '-';
            }
        }, {
            data: "laporan_penyebab",
            orderable: false,
            "render": function (data) {
                return (data) ? data : '-';
            }
        }, {
            data: "laporan_modus",
            orderable: false,
            "render": function (data) {
                return (data) ? data : '-';
            }
        }, {
            data: "laporan_kerugian",
            orderable: false,
            "render": function (data) {
                return (data) ? data : '-';
            }
        }, {
            data: "bukti",
            width: '25%',
            "render": function (data, type, row, meta) {
                let t = '';
                try {
                    let v = JSON.parse(data);
                    console.log(v);
                    t += '<ul>';
                    $.each(v, function (index, value) {
                        t += `<li><a target="_blank" href="${TPL_URL}/assets/upload/${row.uniq_id}/${value}">${value}</a></li>`;
                    });
                    t += '</ul>';
                } catch (error) {

                }
                return t;
            }
        }
    ],
});

const detailmodal = $("#detailmodal");

$(document).on('click', '.ceklaporan', function (e) {
    let id = $("#nomor").val();
    $.ajax({
        type: "POST",
        url: BASE_URL + "/?m=cek_laporan&f=cek",
        data: {
            uniq_id: id,
        },
        success: function (response) {
            console.log(response);
            if (response.data === false) {
                toastr.error(`Nomor tiket tidak terdaftar`, 'Gagal!', {
                    "closeButton": true,
                    "showMethod": "slideDown",
                    "hideMethod": "slideUp",
                    timeOut: 2000
                });

            } else {
                detailmodal.find('.modal-title').html((response['data']['status_edit'] <= 2) ? 'Detail : ' + id + ' - <div class="badge badge-pill badge-success">Status : Dalam Proses</div>' : 'Detail : ' + id + ' - <div class="badge badge-pill badge-danger">Status : Pengaduan Selesai</div>');

                try {
                    detail.clear();
                    detail.row.add(response['data']).draw();
                } catch (error) {

                }

                try {
                    if (response['data']['rating'] == 0) {
                        $(".inputrating").addClass('d-none');
                        $(".hasilrating").removeClass('d-none')
                        $(".hasilrating").html(`Anda memilih TIDAK PUAS<hr>${response['data']['alasan']}`);
                    } else if (response['data']['rating'] == 1) {
                        $(".inputrating").addClass('d-none');
                        $(".hasilrating").removeClass('d-none')
                        $(".hasilrating").html(`Anda memilih PUAS<hr>${response['data']['alasan']}`);
                    } else {
                        $(".hasilrating").addClass('d-none');
                        $(".inputrating").removeClass('d-none')
                    }
                } catch (error) {

                }


                let history = new Array();


                try {
                    history = JSON.parse(response['data']['history']);
                } catch (error) {

                }

                try {
                    if (response['data']['status_edit'] == 1 && response['data']['posisi_laporan'] == 0) {
                        $("#kurang_lengkap").removeClass('d-none')
                        $("#kurang_lengkap .card-body").html(`
                            <div class="alert alert-info" role="alert">
                                    Maksimal pengajuan kembali : <strong>${tanggal_jam(response['data']['laporan_deadline'])}</strong>, melewati tanggal tersebut, pengaduan auto close.
                                </div>
                            <div class="alert alert-danger" role="alert">
                                    ${response['data']['ctt']}
                                </div>
                        `);
                    } else {
                        $("#kurang_lengkap").addClass('d-none')
                    }
                } catch (error) {

                }

                try {
                    if (response['data']['status_edit'] == 1 && response['data']['laporan_revisi'] < 3 && response['data']['posisi_laporan'] == 0) {
                        $("#kurang_lengkap .card-body").append(`
                            <a href="${BASE_URL}/?m=pelaporan_kembali&uniq=${response['data']['uniq_id']}"><button class="btn btn-warning text-white" type="button">Kirim Aduan Kembali</button></a>
                        `);
                    }
                } catch (error) {

                }

                if (history != null && history.length != null && history.length > 0) {
                    detailmodal.find("#tindaklanjut .card-body").html(timeline(history, response['data']));
                } else {
                    detailmodal.find("#tindaklanjut .card-body").html('<p class="text-center m-0">Tidak Ada Catatan Tindak Lanjut!</p>')
                }

                $("#rating").addClass('d-none');
                if (response['data']['status_edit'] == 3) {
                    $(".rating input[name='tiket_uuid']").val(response['data']['tiket_uuid']);
                    $(".rating input[name='uniq_id']").val(response['data']['uniq_id']);
                    $("#rating").removeClass('d-none');
                }

                detailmodal.modal('show');
            }

        }
    });
})

$(document).ready(function () {
    setInterval(function () {
        $("#detail").DataTable().responsive.rebuild();
        $("#detail").DataTable().responsive.recalc();
    }, 500);
});

function tanggal_jam(dateString) {
    dateString = dateString.replace("T", " ")
    var allDate = dateString.split(' ');
    var thisDate = allDate[0].split('-');
    var thisTime = allDate[1].split(':');
    var newDate = [thisDate[2], thisDate[1], thisDate[0]].join("-");

    // var suffix = thisTime[0] >= 12 ? "PM":"AM";
    var hour = thisTime[0] > 12 ? thisTime[0] : thisTime[0];
    var hour = hour < 10 ? hour : hour;
    var min = thisTime[1];
    var sec = thisTime[2];
    var newTime = hour + ':' + min + ':' + sec;

    return newDate + ' ' + newTime;
}

function timeline(resp, full) {
    console.log(full);
    let timeline = `<ul class="timeline timeline-left">`;
    $.each(resp, function (index, value) {
        let datetimeline = value.created_date;
        try {
            datetimeline = tanggal_jam(datetimeline);
        } catch (error) {

        }

        try {
            // let nama_user = value.related_user.user_name;
            // if (value.related_user.user_akses == 2) {
            // nama_user = value.related_user.user_info.namalengkap
            // }
            timeline += `<li class="timeline-inverted timeline-item">
                            <div class="timeline-badge"><i class="fas fa-circle text-info"></i> </div>
                            <div class="timeline-panel">
                                <div class="timeline-heading">
                                    <p><small class="text-muted"><i class="far fa-clock"></i> ${datetimeline}</small> </p>
                                </div>
                                <div class="timeline-body">
                                    ${(value.tiket_catatan_revisi) ? value.tiket_catatan_revisi : value.tiket_catatan}`
            if (value.role_disposisi == 4 || value.role_disposisi == 5) {
                try {
                    let v = '';
                    let jml = 0;
                    $.each(value.file, function (index, val) {
                        if (val.tampil == 1) {
                            jml++;
                            if (jml == 1) {
                                v += '<br>File Pendukung : <ul>'
                            }
                            v += `<li><a target="_blank" href="${TPL_URL}/assets/upload_ptpl/${value.id}/${val.nama}">${val.nama} </a></li>`
                        }
                    });
                    if (typeof value.file !== 'undefined' && value.file.length > 0) {
                        if (jml > 0) {
                            v += '</ul>'
                        }
                    }
                    timeline += v;
                } catch (error) {
                    console.log(error);
                }
            }


            // if (value.role_disposisi == 1 && value.role_pemroses == 1 && value.tiket_status == 3) {
            //     timeline += `<hr>
            //                 Alasannya : ${full.kesimpulan_ptl}`
            // }
            timeline += `</div>
                            </div>
                        </li>`;
        } catch (error) {

        }

    });
    timeline += '</ul>';
    return timeline;
}

$('#detailmodal').on('hidden.bs.modal', function (e) {
    $("#nomor").val('');
});

$(document).on('click', '#kirimRating', function (e) {
    e.preventDefault();
    $.ajax({
        type: "post",
        url: BASE_URL + "/?m=cek_laporan&f=rating",
        data: {
            tiket_uuid: $(".rating input[name='tiket_uuid']").val(),
            uniq_id: $(".rating input[name='uniq_id']").val(),
            puas: $('.rating input[name="puas"]:checked').val(),
            alasan: $('.inputrating textarea[name="alasan"]').val()
        },
        success: function (response) {
            Swal.close()
            if (response.success) {
                if ($('.rating input[name="puas"]:checked').val() == 0) {
                    $(".inputrating").addClass('d-none');
                    $(".hasilrating").removeClass('d-none')
                    $(".hasilrating").html(`Anda memilih TIDAK PUAS<hr>${$('.inputrating textarea[name="alasan"]').val()}`);
                } else {
                    $(".inputrating").addClass('d-none');
                    $(".hasilrating").removeClass('d-none')
                    $(".hasilrating").html(`Anda memilih PUAS<hr>${$('.inputrating textarea[name="alasan"]').val()}`);
                }
                Swal.fire({
                    type: 'success',
                    title: "Berhasil",
                    text: "Terima kasih telah melakukan vote!",
                    allowOutsideClick: false
                })
            } else {
                toastr.error(`${response.message}`, 'Gagal!', {
                    "closeButton": true,
                    "showMethod": "slideDown",
                    "hideMethod": "slideUp",
                    timeOut: 2000
                });
            }
        },
        error: function (response) {
            Swal.close()
            toastr.error(`${response.message}`, 'Gagal!', {
                "closeButton": true,
                "showMethod": "slideDown",
                "hideMethod": "slideUp",
                timeOut: 2000
            });
        }
    });
});