// source --> https://www.wismakreasi.com/wp-content/plugins/dw-jam-shalat/assets/js/dwjs.js?ver=1 
jQuery(document).ready(function($) {
    $('.dwjs_daftar_kota').select2({
        placeholder: {
            id: "kota",
            placeholder: "Cari Kota."
        },
        language: {
            inputTooShort: function (args) {
    
                return "Minimal 3 huruf.";
            },
            noResults: function () {
                return "Tidak ditemukan.";
            },
            searching: function () {
                return "Sedang mencari...";
            }
        },
        minimumInputLength: 3,
        ajax: {
                url: submit.ajaxurl, // AJAX URL is predefined in WordPress admin
                dataType: 'json',
                delay: 250, // delay in ms while typing when to perform a AJAX search
                data: function (params) {
                        return {
                        q: params.term, // search query
                        action: 'dwjs_get_kota' // AJAX action for admin-ajax.php
                        };
                },
                processResults: function( data ) {
                var options = [];
                if ( data ) {
            
                    // data is the array of arrays, and each of them contains ID and the Label of the option
                    $.each( data, function( index, text ) { // do not forget that "index" is just auto incremented value
                        options.push( { 
                            id: text.id, // as option value
                            text: text.lokasi // as option label
                        } );
                    });
                
                }
                return {
                    results: options
                };
            },
            cache: true
        },
    });
    $('span.select2.select2-container.select2-container--default').attr('style', 'width: 100%;');

    function dwjs_ajax_city(){
        if (typeof($('.dwjs_daftar_kota')) != 'undefined' && $('.dwjs_daftar_kota') != null){
            var city_code = $('.dwjs_daftar_kota').val();
            var type = $('.dwjs_daftar_kota').data('type');
        }else{
            var city_code = $('#dwjs_default_city').val();
            var type = 'json';
        }
        $('.dw-jadwal-shalat .dwjs-kota').text('');
        $('.dw-jadwal-shalat .grid-jadwal-shalat').html(`<div class="wifi-loader">
            <svg class="circle-outer" viewBox="0 0 86 86">
                <circle class="back" cx="43" cy="43" r="40"></circle>
                <circle class="front" cx="43" cy="43" r="40"></circle>
                <circle class="new" cx="43" cy="43" r="40"></circle>
            </svg>
            <svg class="circle-middle" viewBox="0 0 60 60">
                <circle class="back" cx="30" cy="30" r="27"></circle>
                <circle class="front" cx="30" cy="30" r="27"></circle>
            </svg>
            <svg class="circle-inner" viewBox="0 0 34 34">
                <circle class="back" cx="17" cy="17" r="14"></circle>
                <circle class="front" cx="17" cy="17" r="14"></circle>
            </svg>
            <div class="text" data-text="Searching"></div>
        </div>`);

        if(city_code !== 'Pilih Kota ----' || city_code > 0){

            $.ajax({
                type: 'post',
                url: submit.ajaxurl,
                data: {
                    action: 'dwjs_get_data',
                    city: city_code,
                    type: type
                },
                success: function (response) {
                    var res = JSON.parse(response);
                    // console.log(res);
                    if(type == 'html'){
                        $('.dw-jadwal-shalat .dwjs-kota').text(res.city_name);
                        var $content = '';
                        $.each(res.content, function(index, el){
                            if(jQuery.inArray(index, res.modules) !== -1) {
                                $content += `
                                <div class="jadwal-card `+index+el.fardhu+el.status+`">
                                    <i class="bi`+el.icon+`"></i>
                                    <div class="jadwal-inner-card">
                                        <p>`+index.toUpperCase()+`</p>
                                        <p>`+el.time+`</p>
                                    </div>
                                </div>
                                `;
                            }
                        });
                        $('.dw-jadwal-shalat .grid-jadwal-shalat').html($content);
                    }else{
                        $('.sc-city').text(res.city_name);
                        $.each(res.content, function(index, element){
                            $('.sc-'+index).text(element.time);
                            $('.sc-'+index).attr('data-fardhu', res.fardhu);
                            $('.sc-'+index).attr('data-status', res.status);
                        });
                    }
                    $('#dwjs_date_hijriah_now').html(res.hijr);
                }
            });

        }
    }

    dwjs_ajax_city();

    $('.dwjs-table').on('change', function(){
        dwjs_ajax_city();
    });

    function action_dwjs_table() {
        $('#tabel-jadwal-shalat').bootstrapTable('destroy');
        $('#tabel-jadwal-shalat').bootstrapTable({
            url: '/wp-json/dwjs/v1/calendar?city='+$('.dwjs_daftar_kota').val()+'&start='+$('#mulai').val()+'&to='+$('#hingga').val(),
            paging: false,
            onLoadSuccess: function (data) {
                $.each($('.date_hijr'), function(i, el){
                    $(this).html(writeIslamicCal($(this).data('adjust')));
                });
            }
        });
    }
    action_dwjs_table();
    $('.dwjs_daftar_kota').on('change', function(){
        action_dwjs_table();
        dwjs_ajax_city();
    });

    $(document).on('click', 'table#tabel-jadwal-shalat tbody tr', function(){
        $('table#tabel-jadwal-shalat tbody tr').removeAttr('style');
        $(this).css('background-color', '#cccccc');
    })
});

function display_ct5() {
    var x = new Date()
    var ampm = x.getHours( ) >= 12 ? ' PM' : ' AM';
    
    var hour = x.getHours();
    if(hour < 10){
        hour = "0"+hour;
    } 
    var minute = x.getMinutes();
    if(minute < 10){
        minute = "0"+minute;
    } 
    var seconds = x.getSeconds();
    if(seconds < 10){
        seconds = "0"+seconds;
    } 
    var date = x.getDate();
    if(date < 10){
        date = "0"+date;
    } 
    var month = (x.getMonth() + 1);
    const month_name = [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"];
    if(month < 10){
        month = month_name[x.getMonth()];
    } 
    
    var the_time = hour + ":" +  minute + ":" +  seconds;
    var the_date = date + " " + month + " " + x.getFullYear(); 

    var time_element = document.getElementById('dwjs_time_now');
    var date_element = document.getElementById('dwjs_date_now');
    if (typeof(time_element) != 'undefined' && time_element != null){
        time_element.innerHTML = the_time; 
    }
    if (typeof(date_element) != 'undefined' && date_element != null){
        date_element.innerHTML = the_date; 
    }

    display_c5();
}
function display_c5(){
    var refresh=1000; // Refresh rate in milli seconds
    mytime=setTimeout('display_ct5()',refresh)
}
display_c5();