{% 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">Sms Logs</h1>
                <p class="text-slate-400 mt-1 text-sm">Sms and filter outbound message history</p>
            </div>
            <button id="exportCsv" class="flex items-center gap-2 px-6 py-3 bg-emerald-500 hover:bg-emerald-600 text-white rounded-xl font-bold transition-all shadow-lg shadow-emerald-500/20 text-sm">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                </svg>
                Download CSV Report
            </button>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 bg-white/5 p-6 rounded-[2rem] border border-white/10 backdrop-blur-md">
            
            <div class="flex flex-col gap-2">
                <label class="text-xs font-bold text-emerald-400 uppercase tracking-widest ml-1">Recipient</label>
                <input type="text" id="serverSearch" placeholder="Search client or pet..." 
                    class="bg-slate-900/50 border border-white/10 text-white text-sm rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-emerald-500/50 transition-all">
            </div>

            <div class="flex flex-col gap-2">
                <label class="text-xs font-bold text-emerald-400 uppercase tracking-widest ml-1">Delivery Status</label>
                <select id="statusFilter" class="bg-slate-900/50 border border-white/10 text-white text-sm rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-emerald-500/50 transition-all appearance-none">
                    <option value="">All Statuses</option>
                    <option value="delivered">Successfully Delivered</option>
                    <option value="{{'Queued'|upper}}">Pending Queue</option>
                    <option value="failed">Delivery Failures</option>
                </select>
            </div>

            <div class="flex flex-col gap-2">
                <label class="text-xs font-bold text-emerald-400 uppercase tracking-widest ml-1">Date </label>
                <input type="date" id="dateFilter" 
                    class="bg-slate-900/50 border border-white/10 text-white text-sm rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-emerald-500/50 transition-all [color-scheme:dark]">
            </div>
        </div>

        <div class="relative overflow-hidden bg-slate-900/40 backdrop-blur-xl border border-white/5 rounded-3xl 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">Clinic</th>
                            <th class="px-6 py-4 text-xs uppercase tracking-widest text-emerald-400 font-bold">Client</th>
                            <th class="px-6 py-4 text-xs uppercase tracking-widest text-emerald-400 font-bold">Message</th>
                            <th class="px-6 py-4 text-xs uppercase tracking-widest text-emerald-400 font-bold">Date Return</th>
                            <th class="px-6 py-4 text-xs uppercase tracking-widest text-emerald-400 font-bold">Sender No.</th>
                            <th class="px-6 py-4 text-xs uppercase tracking-widest text-emerald-400 font-bold">Status</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 loadSms(page = 1) {
        const tbody = document.getElementById('tableBody');
        const query = document.getElementById('serverSearch').value;
        const status = document.getElementById('statusFilter').value;
        const date = document.getElementById('dateFilter').value;
        
        tbody.style.opacity = '0.5';

        try {
            const url = `{{ path('sms_ajax_list') }}?page=${page}&q=${query}&status=${status}&date=${date}`;
            const response = await fetch(url);
            const result = await response.json();
            
            tbody.innerHTML = result.data.map(server => {
                const fullMessage = server.message || '';
                const isLong = fullMessage.length > 120;
                const shortMessage = isLong ? fullMessage.substring(0, 120) + '...' : fullMessage;

                return `
                <tr class="group hover:bg-white/[0.02] transition-colors">
                    <td class="px-6 py-5 text-slate-400 text-sm font-mono">${server.companyName}</td>
                    <td class="px-6 py-5 text-slate-400 text-sm font-mono">${server.clientName} (${server.clientNo})</td>
                    <td class="px-6 py-5 text-slate-400 text-sm font-mono cursor-help" title="${fullMessage.replace(/"/g, '&quot;')}">
                        <div class="max-w-xs xl:max-w-md">${shortMessage}</div>
                    </td>
                    <td class="px-6 py-5 text-slate-400 text-sm font-mono">${server.dateReturn}</td>
                    <td class="px-6 py-5 text-slate-400 text-sm font-mono">${server.senderNo}</td>
                    <td class="px-6 py-5 text-slate-400 text-sm font-mono">
                        <span class="px-2 py-1 rounded text-xs ${
                            server.status === 'QUEUED' || server.status === 'PENDING' 
                            ? 'bg-blue-500/10 text-blue-400' 
                            : server.status === 'FAILED' 
                            ? 'bg-red-500/10 text-red-400' 
                            : 'bg-green-500/10 text-green-400'
                        }">
                            ${server.status}
                        </span>
                    </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('serverSearch').addEventListener('input', () => {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(() => loadSms(1), 400);
    });

    document.getElementById('statusFilter').addEventListener('change', () => loadSms(1));
    document.getElementById('dateFilter').addEventListener('change', () => loadSms(1));

    document.getElementById('prevPage').onclick = () => loadSms(currentPage - 1);
    document.getElementById('nextPage').onclick = () => loadSms(currentPage + 1);

    document.getElementById('exportCsv').addEventListener('click', () => {
        const query = document.getElementById('serverSearch').value;
        const status = document.getElementById('statusFilter').value;
        const date = document.getElementById('dateFilter').value;
        
        const url = `{{ path('sms_export_csv') }}?q=${query}&status=${status}&date=${date}`;
        
        window.location.href = url;
    });

    loadSms();
</script>
{% endblock %}