{% extends 'dashboard/base.html.twig' %}

{% block main %}
<div class="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700">
        <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-6">
        <div>
            <h1 class="text-3xl font-bold text-white tracking-tight">Company Directory</h1>
            <p class="text-slate-400 mt-1 text-sm">Manage company</p>
        </div>
    
        <div class="flex flex-col md:flex-row items-center gap-4">
            <div class="relative group">
                <div class="absolute -inset-0.5 bg-gradient-to-r from-emerald-500 to-blue-500 rounded-xl blur opacity-20 group-hover:opacity-60 transition duration-300"></div>
                <input type="text" id="companySearch" placeholder="Filter by name..." 
                    class="relative bg-slate-900/80 border border-white/10 text-white text-sm rounded-xl px-4 py-3 w-64 focus:outline-none focus:ring-2 focus:ring-emerald-500/50 transition-all">
            </div>
        </div>
    </div>


    <div class="relative overflow-hidden bg-slate-900/40 backdrop-blur-xl border border-white/5 shadow-2xl">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="border-b border-white/5 bg-white/[0.02]">
                        <th class="px-6 py-4 text-xs uppercase tracking-widest text-emerald-400 font-bold">Code</th>
                        <th class="px-6 py-4 text-xs uppercase tracking-widest text-emerald-400 font-bold">Description</th>
                        <th class="px-6 py-4 text-xs uppercase tracking-widest text-emerald-400 font-bold text-right">Action</th>
                    </tr>
                </thead>
                <tbody id="tableBody" class="divide-y divide-white/[0.05]"></tbody>
            </table>
        </div>

        <div class="px-6 py-4 bg-white/[0.02] border-t border-white/5 flex items-center justify-between">
            <button id="prevPage" class="px-4 py-2 rounded-xl border border-white/10 text-slate-400 hover:bg-white/5 hover:text-white transition-all text-sm disabled:opacity-30 disabled:cursor-not-allowed">
                Previous
            </button>
            <span id="pageInfo" class="text-xs font-mono text-slate-500 uppercase tracking-widest">Page 1 of 1</span>
            <button id="nextPage" class="px-4 py-2 rounded-xl border border-white/10 text-slate-400 hover:bg-white/5 hover:text-white transition-all text-sm disabled:opacity-30 disabled:cursor-not-allowed">
                Next
            </button>
        </div>
    </div>
</div>

  <script>
    let currentPage = 1;
    let searchTimeout;

    async function loadCompany(page = 1, query = '') {
        const tbody = document.getElementById('tableBody');
        tbody.style.opacity = '0.5';

        try {
            const response = await fetch(`{{ path('company_ajax_list') }}?page=${page}&q=${query}`);
            const result = await response.json();
            
            tbody.innerHTML = result.data.map(company => {
            const isOnTheDay = company.isSmsOnTheDay === true;
                return `
                <tr class="group hover:bg-white/[0.02] transition-colors">
                    <td class="px-6 py-5">
                        <div class="flex items-center space-x-3">
                          
                            <span class="text-slate-200 font-medium group-hover:text-white transition-colors">
                                ${company.code}
                            </span>
                        </div>
                    </td>
                    <td class="px-6 py-5 text-slate-400 text-sm font-mono">${company.description}</td>
                    <td class="px-6 py-5 text-right">
                       <button 
                            onclick="updateOnTheDay(${company.id}, this)"
                            ${isOnTheDay ? 'disabled' : ''}
                            class="px-4 py-2 rounded-xl text-xs font-bold tracking-widest uppercase transition-all 
                            ${isOnTheDay 
                                ? 'bg-emerald-500/20 text-emerald-500 cursor-not-allowed border border-emerald-500/30' 
                                : 'bg-white/5 text-slate-400 hover:bg-emerald-500/10 hover:text-emerald-400 border border-white/10 hover:border-emerald-500/30'}">
                            ${isOnTheDay ? '✓ On the day' : 'Set On The Day'}
                        </button>
                    </td>
                </tr>
            `}).join('');

            document.getElementById('pageInfo').innerText = `Page ${result.page} of ${result.last_page}`;
            document.getElementById('prevPage').disabled = (result.page <= 1);
            document.getElementById('nextPage').disabled = (result.page >= result.last_page);
            currentPage = result.page;
        } finally {
            tbody.style.opacity = '1';
        }
    }
    document.getElementById('companySearch').addEventListener('input', (e) => {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(() => loadCompanies(1, e.target.value), 400);
    });

    document.getElementById('prevPage').onclick = () => loadCompanies(currentPage - 1, document.getElementById('companySearch').value);
    document.getElementById('nextPage').onclick = () => loadCompanies(currentPage + 1, document.getElementById('companySearch').value);

        async function updateOnTheDay(companyId, btnElement) {
        if (!confirm('Enable "On The Day" status for this company?')) return;

        btnElement.innerText = "Processing...";
        btnElement.disabled = true;

        try {
            const response = await fetch(`/company/toggle-ontheday/${companyId}`, {
                method: 'POST',
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            });
            
            const result = await response.json();

            if (result.success) {
                loadCompany(currentPage, document.getElementById('companySearch').value);
            } else {
                alert('Failed to update: ' + (result.message || 'Unknown error'));
                btnElement.innerText = "Set On The Day";
                btnElement.disabled = false;
            }
        } catch (error) {
            console.error('Error:', error);
            btnElement.innerText = "Set On The Day";
            btnElement.disabled = false;
        }
    }

        loadCompany();

</script>
{% endblock %}