document.addEventListener("DOMContentLoaded", function(event) {
    $.datepicker.regional['nl'] = {clearText: 'Effacer', clearStatus: '',
        closeText: 'sluiten', closeStatus: 'Onveranderd sluiten ',
        prevText: '<vorige', prevStatus: 'Zie de vorige maand',
        nextText: 'volgende>', nextStatus: 'Zie de volgende maand',
        currentText: 'Huidige', currentStatus: 'Bekijk de huidige maand',
        monthNames: ['januari','februari','maart','april','mei','juni',
            'juli','augustus','september','oktober','november','december'],
        monthNamesShort: ['jan','feb','mrt','apr','mei','jun',
            'jul','aug','sep','okt','nov','dec'],
        monthStatus: 'Bekijk een andere maand', yearStatus: 'Bekijk nog een jaar',
        weekHeader: 'Sm', weekStatus: '',
        dayNames: ['zondag','maandag','dinsdag','woensdag','donderdag','vrijdag','zaterdag'],
        dayNamesShort: ['zo', 'ma','di','wo','do','vr','za'],
        dayNamesMin: ['zo', 'ma','di','wo','do','vr','za'],
        dayStatus: 'Gebruik DD als de eerste dag van de week', dateStatus: 'Kies DD, MM d',
        dateFormat: 'dd/mm/yy', firstDay: 1,
        initStatus: 'Kies een datum', isRTL: false};
    $.datepicker.setDefaults($.datepicker.regional['nl']);

    $( ".datepicker" ).datepicker({
        dateFormat: 'dd-mm-yy',
        maxDate: "today()",
        changeMonth: true,
        changeYear: true,
        yearRange: "-118:-10",
        onSelect: function(dateText) {
            $( 'input.age').val(calculateAge(new Date(dateText)));
        }
    });

    //LOAD PRESENCE MANAGER IF NEEDED
    let presenceManagerInput = document.querySelector('#certificate_number');
    let presenceManagerOuput = document.querySelector('.checkin-result');
    if(presenceManagerInput && presenceManagerInput.dataset.courseId) {
        let presenceManager = new PresenceManager('#certificate_number', '/presence');

        console.log('checking subscriptions');

        //Track the present and subscribed users in li's
        presenceManager.trackCheckedInUsersInList('#presentUsers');
        presenceManager.trackSubscribedUsersInList('#subscribedUsers');

        //let presenceManagerInput = document.querySelector(presenceManagerInputSelector);

        //Listen to the events of the manager
        presenceManager.on('check-in', function (userModel) {
            console.log('Checked in user: ' + userModel.first_name + " " + userModel.last_name);
            console.log(userModel);
            presenceManagerOuput.classList.remove('failed', 'success');
            presenceManagerOuput.classList.add('show', 'success');
            presenceManagerOuput.innerHTML = 'Cursist: ' + userModel.first_name + " " + userModel.last_name + " is ingelogd.";

            setTimeout(function(){
                presenceManagerOuput.classList.remove('show');
            }, 5000);
        });

        presenceManager.on('check-in-fail', function (error) {
            console.error('User could not be checked in: ' + error);
            presenceManagerOuput.classList.remove('failed', 'success');
            presenceManagerOuput.classList.add('show', 'failed');
            presenceManagerOuput.innerHTML = 'De cursist kon niet ingelogd worden: <br>' + error;

            setTimeout(function(){
                presenceManagerOuput.classList.remove('show');
            }, 5000);
        });

        presenceManager.on('api-error', function (error) {
            presenceManagerOuput.classList.remove('failed', 'success');
            presenceManagerOuput.classList.add('show', 'failed');
            presenceManagerOuput.innerHTML = 'Er ging iets fout in het systeem: <br>' + error;
            console.error('Api error: ' + error);

            setTimeout(function(){
                presenceManagerOuput.classList.remove('show');
            }, 5000);
        })
    }
});