<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="card card-primary">
                <div id="from_loading" class="overlay d-flex justify-content-center align-items-center">
                    <i class="fas fa-2x fa-sync fa-spin"></i>
                </div>
                <div class="card-header">
                    <h3 class="card-title">NOTIFIKASI</h3>
                </div>
                <div class="card-body">
                    <form class="form-horizontal">
                        <div class="card-body">
                            <div class="form-group row">
                                <label for="inputEmail3" class="col-sm-2 col-form-label">Pilih Menu</label>
                                <div class="offset-sm-0 col-sm-10">
                                    <select class="form-control select2bs4" style="width: 100%;" id='txt_menu' onchange="aksi_menu()" required>
                                        <option selected="selected"></option>
                                        <option value="webview">Webview</option>
                                        <!-- ISI ULANG -->
                                        <option value="main_activity">Halaman Utama</option>
                                        <option value="paket_data_masukkan_activity">Paket Data</option>
                                    </select>
                                </div>
                            </div>

                            <div id="link">
                                <div class="form-group row">
                                    <label for="inputEmail3" class="col-sm-2 col-form-label">Link Webview</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" id="txt_link" name="txt_link" placeholder="Link Webview">
                                    </div>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="inputEmail3" class="col-sm-2 col-form-label">Title</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="txt_judul" required placeholder="Title">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="inputEmail3" class="col-sm-2 col-form-label">Isi</label>
                                <div class="col-sm-10">
                                    <textarea id="txt_isi" class="form-control" name="txt_isi" rows="4" cols="50"></textarea>
                                </div>
                            </div>


                        </div>
                        <!-- /.card-body -->
                        <div class="card-footer">
                            <a id="kirim" onclick="custom()" class="btn btn-info">Kirim Notifikasi</a>
                            <a id="btn" href="javascript:window.history.go(-1);" class="btn btn-default float-right">Tutup</a>
                        </div>
                        <!-- /.card-footer -->
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="<?php echo base_url(); ?>assets/plugins/jquery/jquery.min.js"></script>
<script>
    $(function() {
        $('.select2').select2()
        //Initialize Select2 Elements
        $('.select2bs4').select2({
            theme: 'bootstrap4'
        })
    });
</script>

<script>
    $(document).ready(function() {
        document.getElementById("from_loading").style.visibility = "hidden";
        document.getElementById("link").style.display = "none";
        aksi_menu();
    });

    function custom() {
        //VARIABLE
        var txt_menu = $("#txt_menu").val();
        var txt_link = $("#txt_link").val();
        var txt_judul = $("#txt_judul").val();
        var txt_isi = $("#txt_isi").val();

        //LOGIC
        if (txt_menu == "" || txt_judul == "" || txt_isi == "") {
            $(function() {
                var Toast = Swal.mixin({
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 3000
                });

                $('.toastrDefaultSuccess').ready(function() {
                    toastr.error('Silahkan lengkapi form terlebih dahulu')
                })
            });

            document.getElementById("from_loading").style.visibility = "hidden";
        } else if (txt_menu == "webview" && txt_link == "-" || txt_menu == "webview" && txt_link == "") {
            $(function() {
                var Toast = Swal.mixin({
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 3000
                });

                $('.toastrDefaultSuccess').ready(function() {
                    toastr.error('Wajib mengisi link jika memilih webview')
                })
            });

            document.getElementById("from_loading").style.visibility = "hidden";
        } else {
            document.getElementById("from_loading").style.visibility = "visible";
            $.ajax({
                type: 'POST',
                url: '<?php echo base_url() ?>notifikasi/custom',
                data: {
                    txt_menu: txt_menu,
                    txt_link: txt_link,
                    txt_judul: txt_judul,
                    txt_isi: txt_isi,
                },
                success: function(html) {
                    $(function() {
                        document.getElementById("from_loading").style.visibility = "hidden";
                        var Toast = Swal.mixin({
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false,
                            timer: 3000
                        });
                        $('.toastrDefaultError').ready(function() {
                            toastr.success('Notifikasi terkirim')
                        })
                    });

                    //SET VALUE
                    $("#txt_menu").val('').trigger("change");
                    document.getElementById("txt_link").value = '';
                    document.getElementById("txt_judul").value = '';
                    document.getElementById("txt_isi").value = '';

                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $(function() {
                        document.getElementById("from_loading").style.visibility = "hidden";
                        var Toast = Swal.mixin({
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false,
                            timer: 3000
                        });
                        $('.toastrDefaultError').ready(function() {
                            toastr.error('Notifikasi tidak terkirim')
                        })
                    });
                }
            })
        }
    }


    function aksi_menu() {
        var txt_menu = $("#txt_menu").val();
        if (txt_menu == "webview") {
            document.getElementById("link").style.display = "block";
        } else {
            document.getElementById("link").style.display = "none";
        }
    }
</script>