import '../css/app.css';
import Alpine from 'alpinejs';
import Datepicker from 'flowbite-datepicker/Datepicker';
import de from '../../node_modules/flowbite-datepicker/js/i18n/locales/de.js';
Datepicker.locales.de = de.de;
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
dayjs.extend(customParseFormat);

function initDatepicker(el) {
    new Datepicker(el, {
        autohide: true,
        format: 'dd.mm.yyyy',
        language: 'de',
        update: true,
    });
    el.addEventListener('changeDate', function (event) {
        event.target.dispatchEvent(new Event('input'));
    });
}

document.querySelectorAll('[datepicker]').forEach((el) => initDatepicker(el));

window.Alpine = Alpine;
Alpine.data('form', () => ({
    birthday: null,
    date: null,
    isUnder18: function () {
        if (!this.birthday || !this.date) {
            return false;
        }

        return dayjs(this.birthday, 'DD.MM.YYYY').add(18, 'year').isAfter(dayjs(this.date, 'DD.MM.YYYY'));
    },
}));

Alpine.start();