$(document).ready(function () {
    if ($("#laporan_detail").length > 0) {
        tinymce.init({
            selector: "textarea#laporan_detail",
            theme: "modern",
            height: 50,
            plugins: [
                "link image",
                "fullscreen media nonbreaking",
            ],
            toolbar: false,
            menubar: false,
            branding: false,
            statusbar: false,
        });
    }
});

$(".kirimlaporan").click(function (e) {
    e.preventDefault();
    console.log("klik");
    tinymce.triggerSave(true, true);
    var data = new FormData($("#form")[0]);
    $.ajax({
        xhr: function () {
            Swal.fire({
                title: `<h3 class='text-center fas fa-spinner fa-pulse'></h3>`,
                html: `<h2> Proses Upload : <span class="percent">0%</span></h2>
                <div class="progress">
                                            <div class="progress-bar progress-bar-striped progress-bar-animated bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
                                        </div>`,
                showConfirmButton: false,
                allowOutsideClick: false
            })
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener(
                "progress",
                function (evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = evt.loaded / evt.total;
                        percentComplete = parseInt(percentComplete * 100);
                        $(".bar").attr('style', `width:${percentComplete}%`);
                        $(".percent").html(`${percentComplete}%`);
                        if (percentComplete === 100) {}
                    }
                },
                false
            );
            return xhr;
        },
        type: "post",
        url: BASE_URL + "/?m=pelaporan&f=update",
        data: data,
        processData: false,
        contentType: false,
        success: function (response) {
            Swal.close()
            if (response.success) {
                Swal.fire({

                })
                Swal.fire({
                    title: `Nomor Tiket Pengaduan`,
                    html: `<h1 style="border:1px solid #000; padding:20px;">${response.uniq_id}</h1>
                        <p class="text-center mt-0 mb-2">Nomor Tiket Laporan</p>
                        <div class="alert alert-danger" role="alert">
                                    <strong>Note - </strong> Harap di catat atau disimpan sebagai sarana atau media untuk melacak progress laporan saudara! jika hilang saudara harus membuat laporan ulang.
                                </div>
                                
                         <div class="alert alert-info" role="alert">
                                    Setelah laporan telah selesai, saudara akan diminta melakukan vote untuk menilai layanan kami, Jika selama 7 hari setelah laporan selesai, tidak ada penilaian dari saudara, maka kami anggap, saudara puas dan senang dengan layanan kami, terima kasih.
                                </div>`,
                    allowOutsideClick: false,
                    showCancelButton: false,
                    confirmButtonColor: '#3085d6',
                    confirmButtonText: 'Oke!'
                }).then((result) => {
                    console.log("sini");
                    Swal.fire({
                        title: `Apakah benar sudah anda catat?`,
                        html: `<h1 style="border:1px solid #000; padding:20px;">${response.uniq_id}</h1>
                        <p class="text-center mt-0 mb-2">Nomor Tiket Laporan</p>
                        <div class="alert alert-danger" role="alert">
                                    <strong>Note - </strong> Ini peringatan ulang, agar saudara mencatat nomor tiket yang saudara adukan.
                                </div>
                                
                        <div class="alert alert-info" role="alert">
                                    Setelah laporan telah selesai, saudara akan diminta melakukan vote untuk menilai layanan kami, Jika selama 7 hari setelah laporan selesai, tidak ada penilaian dari saudara, maka kami anggap, saudara puas dan senang dengan layanan kami, terima kasih.
                                </div>`,
                        allowOutsideClick: false,
                        showCancelButton: false,
                        confirmButtonColor: '#3085d6',
                        confirmButtonText: 'Oke'
                    }).then((result) => {
                        console.log("lesini");
                        Swal.fire({
                            html: `<img class="w-50" src="${BASE_URL}/views/assets/img_char/1619842265574.png"></img>
                            <h1 class="m-0">Terima kasih!</h1>
                            <p>Terima Kasih Telah Melakukan Pengaduan</p>`,
                            allowOutsideClick: false,
                            showConfirmButton: false,
                            timer: 5000
                        })
                        setTimeout(function () {
                            location.href = BASE_URL + "/?m=landing"
                        }, 5200);
                    })
                })
            } else {
                notifikasi_gagal(response.message);
            }
        },
        error: function (response) {
            Swal.close()
            notifikasi_gagal(response.message);
        }
    });
});

$(document).on('click', '.hapus', function (e) {
    e.preventDefault();
    let bukti = $(this).data('bukti');
    let urut = $(this).data('urutan');
    $(`.${bukti}.${urut}`).remove();
});

function tambah_video() {
    let t = `
                    <div class = "custom-file videoinput ${urutan} mb-4" >
                        <div class="row">
                            <div class = "col-10 p-0">
                                <input type="file" name="bukti_video[]" class="form-control-file">
                            </div>
                            <div class="col-2 pr-0"> 
                                <button data-bukti="videoinput" data-urutan="${urutan}" class="hapus btn btn-sm btn-block btn-danger" type="button"><i class="fas fa-minus"></i></button>
                            </div>
                        </div>
                    </div>`;
    return t;
}

function tambah_foto() {
    let t = `
    <div class = "custom-file fotoinput ${urutan} mb-4" >
                        <div class="row">
                            <div class = "col-10 p-0">
                                <input type="file" name="bukti_foto[]" class="form-control-file">
                            </div>
                            <div class="col-2 pr-0"> 
                                <button data-bukti="fotoinput" data-urutan="${urutan}" class="hapus btn btn-sm btn-block btn-danger" type="button"><i class="fas fa-minus"></i></button>
                            </div>
                        </div>
                    </div>`;
    return t;
}

function tambah_dokumen() {
    let t = `
    <div div class = "custom-file dokumeninput ${urutan} mb-4" >
                        <div class="row">
                            <div class = "col-10 p-0">
                                <input type="file" name="bukti_dokumen[]" class="form-control-file">
                            </div>
                            <div class="col-2 pr-0"> 
                                <button data-bukti="dokumeninput" data-urutan="${urutan}" class="hapus btn btn-sm btn-block btn-danger" type="button"><i class="fas fa-minus"></i></button>
                            </div>
                        </div>
                    </div>`;
    return t;
}

function tambah_audio() {
    let t = `
    <div class = "custom-file suarainput ${urutan} mb-4" >
                        <div class="row">
                            <div class = "col-10 p-0">
                                <input type="file" name="bukti_suara[]" class="form-control-file">
                            </div>
                            <div class = "col-2 pr-0" >
                                <button data-bukti="suarainput" data-urutan="${urutan}" class="hapus btn btn-sm btn-block btn-danger" type="button"><i class="fas fa-minus"></i></button>
                            </div>
                        </div>
                    </div>`;
    return t;
}

$(document).on('click', '.video', function (e) {
    urutan++;
    $(".tambah_video").append(tambah_video());
})

$(document).on('click', '.foto', function (e) {
    urutan++;
    $(".tambah_foto").append(tambah_foto());
})

$(document).on('click', '.dokumen', function (e) {
    urutan++;
    $(".tambah_dokumen").append(tambah_dokumen());
})

$(document).on('click', '.suara', function (e) {
    urutan++;
    $(".tambah_suara").append(tambah_audio());
})