import './bootstrap';
import { AjaxTable } from './AjaxTable';

window.AjaxTable = AjaxTable;

import TomSelect from 'tom-select';
window.TomSelect = TomSelect;

document.addEventListener('DOMContentLoaded', () => {
    if (document.getElementById('filterForm') && document.querySelector('.bg-white.shadow-sm')) {
        new AjaxTable();
    }
});

window.openDeleteModal = function(msnv, url) {
    const messageEl = document.getElementById('deleteModal-message');

    if (messageEl) {
        messageEl.innerHTML = `Bạn có chắc chắn muốn đánh dấu nhân viên <span class="font-extrabold text-red-600">${msnv}</span> đã nghỉ việc?<br><br>Thao tác này sẽ ngăn user đăng nhập vào hệ thống, nhưng dữ liệu lịch sử vẫn được giữ lại.`;
    }
    
    const formEl = document.getElementById('deleteModal-form');

    if (formEl) {
        formEl.action = url;
    }
    if (typeof window.openModal === 'function') {
        window.openModal('deleteModal');
    }
};

window.togglePasswordVisibility = function(inputId, button) {
    const input = document.getElementById(inputId);
    if (!input) return;
    
    const eyeOpen = button.querySelector('.eye-icon-open');
    const eyeClosed = button.querySelector('.eye-icon-closed');
    
    if (input.type === 'password') {
        input.type = 'text';
        button.setAttribute('aria-label', 'Hide password');
        if (eyeOpen) eyeOpen.classList.remove('hidden');
        if (eyeClosed) eyeClosed.classList.add('hidden');
    } else {
        input.type = 'password';
        button.setAttribute('aria-label', 'Show password');
        if (eyeOpen) eyeOpen.classList.add('hidden');
        if (eyeClosed) eyeClosed.classList.remove('hidden');
    }
};

document.addEventListener('DOMContentLoaded', () => {
    const loginForm = document.querySelector('form[action$="/login"]');
    if (loginForm) {
        loginForm.addEventListener('submit', (e) => {
            const submitBtn = loginForm.querySelector('button[type="submit"]');
            if (submitBtn) {
                if (submitBtn.disabled) {
                    e.preventDefault();
                    return;
                }
                submitBtn.disabled = true;
                
                const originalText = submitBtn.textContent.trim();
                submitBtn.dataset.originalText = originalText;
                
                submitBtn.innerHTML = `
                    <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white inline-block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    <span>${originalText}</span>
                `;
            }
        });
    }
});

