<?php $__env->startSection('title', 'Antrian Notifikasi'); ?>

<?php $__env->startSection('content'); ?>

<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
    <div class="bg-white rounded-xl border border-gray-100 p-4">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-xs text-gray-500 uppercase font-medium">Total Dijadwalkan</p>
                <p class="text-2xl font-bold text-gray-800 mt-1"><?php echo e($stats['total_scheduled']); ?></p>
            </div>
            <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </div>
        </div>
    </div>
    <div class="bg-white rounded-xl border border-gray-100 p-4">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-xs text-gray-500 uppercase font-medium">Email Menunggu</p>
                <p class="text-2xl font-bold text-blue-600 mt-1"><?php echo e($stats['email_scheduled']); ?></p>
            </div>
            <div class="w-10 h-10 bg-blue-50 rounded-lg flex items-center justify-center">
                <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"/></svg>
            </div>
        </div>
    </div>
    <div class="bg-white rounded-xl border border-gray-100 p-4">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-xs text-gray-500 uppercase font-medium">WhatsApp Menunggu</p>
                <p class="text-2xl font-bold text-green-600 mt-1"><?php echo e($stats['wa_scheduled']); ?></p>
            </div>
            <div class="w-10 h-10 bg-green-50 rounded-lg flex items-center justify-center">
                <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z"/></svg>
            </div>
        </div>
    </div>
    <div class="bg-white rounded-xl border border-gray-100 p-4">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-xs text-gray-500 uppercase font-medium">Siap Kirim Sekarang</p>
                <p id="dueNowCount" class="text-2xl font-bold <?php echo e($stats['due_now'] > 0 ? 'text-orange-600' : 'text-gray-400'); ?> mt-1"><?php echo e($stats['due_now']); ?></p>
            </div>
            <div id="dueNowIconWrap" class="w-10 h-10 <?php echo e($stats['due_now'] > 0 ? 'bg-orange-100' : 'bg-gray-50'); ?> rounded-lg flex items-center justify-center">
                <svg id="dueNowIcon" class="w-5 h-5 <?php echo e($stats['due_now'] > 0 ? 'text-orange-500' : 'text-gray-400'); ?>" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"/></svg>
            </div>
        </div>
    </div>
</div>


<div class="flex flex-wrap items-center gap-3 mb-6">
    <?php if($stats['due_now'] > 0): ?>
    <form action="<?php echo e(route('admin.notifications.send-all-due')); ?>" method="POST" onsubmit="return confirm('Kirim semua <?php echo e($stats['due_now']); ?> notifikasi yang sudah jatuh tempo?')">
        <?php echo csrf_field(); ?>
        <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-indigo-700 flex items-center gap-2">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"/></svg>
            Kirim Semua yang Jatuh Tempo (<?php echo e($stats['due_now']); ?>)
        </button>
    </form>
    <?php endif; ?>

    <?php if($stats['total_scheduled'] > 0): ?>
    <form action="<?php echo e(route('admin.notifications.cancel-all')); ?>" method="POST" onsubmit="return confirm('Batalkan SEMUA <?php echo e($stats['total_scheduled']); ?> notifikasi yang dijadwalkan?')">
        <?php echo csrf_field(); ?>
        <button class="bg-red-50 text-red-600 px-4 py-2 rounded-lg text-sm font-medium hover:bg-red-100 flex items-center gap-2">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
            Batalkan Semua
        </button>
    </form>
    <?php endif; ?>

    <a href="<?php echo e(route('admin.notifications')); ?>" class="bg-gray-100 text-gray-600 px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-200 flex items-center gap-2">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg>
        Lihat Log Notifikasi
    </a>
</div>


<div class="mb-6">
    <form action="<?php echo e(route('admin.notifications.queue')); ?>" method="GET" class="flex flex-wrap items-center gap-2">
        <select name="channel" class="border border-gray-200 rounded-lg px-4 py-2 text-sm">
            <option value="">Semua Channel</option>
            <option value="email" <?php echo e(request('channel') === 'email' ? 'selected' : ''); ?>>Email</option>
            <option value="whatsapp" <?php echo e(request('channel') === 'whatsapp' ? 'selected' : ''); ?>>WhatsApp</option>
        </select>
        <select name="type" class="border border-gray-200 rounded-lg px-4 py-2 text-sm">
            <option value="">Semua Tipe</option>
            <option value="application_received" <?php echo e(request('type') === 'application_received' ? 'selected' : ''); ?>>Lamaran Diterima</option>
            <option value="accepted" <?php echo e(request('type') === 'accepted' ? 'selected' : ''); ?>>Diterima</option>
            <option value="rejected" <?php echo e(request('type') === 'rejected' ? 'selected' : ''); ?>>Ditolak</option>
        </select>
        <select name="job_id" class="border border-gray-200 rounded-lg px-4 py-2 text-sm">
            <option value="">Semua Lowongan</option>
            <?php $__currentLoopData = $jobs; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $job): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <option value="<?php echo e($job->id); ?>" <?php echo e(request('job_id') == $job->id ? 'selected' : ''); ?>><?php echo e($job->title); ?></option>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </select>
        <button class="bg-gray-100 text-gray-600 px-4 py-2 rounded-lg text-sm hover:outline hover:outline-2 hover:outline-gray-400">Filter</button>
    </form>
</div>


<div class="bg-white rounded-xl border border-gray-100 overflow-x-auto">
    <table class="w-full min-w-[700px]">
        <thead>
            <tr class="bg-gray-50 border-b border-gray-100">
                <th class="text-left px-6 py-3 text-xs font-medium text-gray-500 uppercase">Pelamar</th>
                <th class="text-left px-6 py-3 text-xs font-medium text-gray-500 uppercase">Lowongan</th>
                <th class="text-left px-6 py-3 text-xs font-medium text-gray-500 uppercase">Tipe</th>
                <th class="text-left px-6 py-3 text-xs font-medium text-gray-500 uppercase">Channel</th>
                <th class="text-left px-6 py-3 text-xs font-medium text-gray-500 uppercase">Dijadwalkan</th>
                <th class="text-left px-6 py-3 text-xs font-medium text-gray-500 uppercase">Countdown</th>
                <th class="text-center px-6 py-3 text-xs font-medium text-gray-500 uppercase">Aksi</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-50">
            <?php $__empty_1 = true; $__currentLoopData = $pendingLogs; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $log): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
            <tr data-log-row="<?php echo e($log->id); ?>" class="hover:bg-gray-50">
                <td class="px-6 py-3">
                    <div class="text-sm font-medium text-gray-800"><?php echo e($log->recipient_name ?? ($log->application->applicant->name ?? 'N/A')); ?></div>
                    <div class="text-xs text-gray-400"><?php echo e($log->recipient_contact ?? ''); ?></div>
                </td>
                <td class="px-6 py-3 text-sm text-gray-600">
                    <?php echo e($log->application->jobListing->title ?? '-'); ?>

                </td>
                <td class="px-6 py-3">
                    <span class="text-xs px-2 py-1 rounded-full bg-gray-100 text-gray-700"><?php echo e($log->type); ?></span>
                </td>
                <td class="px-6 py-3">
                    <span class="text-xs px-2 py-1 rounded-full <?php echo e($log->channel === 'email' ? 'bg-blue-100 text-blue-700' : 'bg-green-100 text-green-700'); ?>">
                        <?php echo e($log->channel === 'email' ? 'Email' : 'WhatsApp'); ?>

                    </span>
                </td>
                <td class="px-6 py-3 text-sm text-gray-600">
                    <?php if($log->scheduled_at): ?>
                        <?php echo e($log->scheduled_at->format('d/m/Y H:i')); ?>

                    <?php else: ?>
                        <span class="text-gray-400">-</span>
                    <?php endif; ?>
                </td>
                <td class="px-6 py-3 text-sm">
                    <?php if($log->scheduled_at): ?>
                        <span class="js-queue-countdown <?php echo e($log->scheduled_at->isPast() ? 'text-blue-600 font-medium' : 'text-gray-500'); ?>" data-log-id="<?php echo e($log->id); ?>" data-scheduled-at="<?php echo e($log->scheduled_at->toIso8601String()); ?>">
                            <?php echo e($log->scheduled_at->isPast() ? 'Mengirim...' : $log->scheduled_at->diffForHumans()); ?>

                        </span>
                    <?php endif; ?>
                </td>
                <td class="px-6 py-3 text-center">
                    <div class="flex items-center justify-center gap-1">
                        
                        <form action="<?php echo e(route('admin.notifications.send-now', $log)); ?>" method="POST" class="inline" onsubmit="return confirm('Kirim notifikasi ini sekarang?')">
                            <?php echo csrf_field(); ?>
                            <button class="text-indigo-600 hover:text-indigo-800 p-1 rounded hover:bg-indigo-50" title="Kirim Sekarang">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"/></svg>
                            </button>
                        </form>

                        
                        <button onclick="openReschedule(<?php echo e($log->id); ?>, '<?php echo e($log->scheduled_at?->format('Y-m-d\TH:i')); ?>')" class="text-yellow-600 hover:text-yellow-800 p-1 rounded hover:bg-yellow-50" title="Ubah Jadwal">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        </button>

                        
                        <form action="<?php echo e(route('admin.notifications.cancel', $log)); ?>" method="POST" class="inline" onsubmit="return confirm('Batalkan notifikasi ini?')">
                            <?php echo csrf_field(); ?>
                            <button class="text-red-500 hover:text-red-700 p-1 rounded hover:bg-red-50" title="Batalkan">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                            </button>
                        </form>
                    </div>
                </td>
            </tr>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
            <tr>
                <td colspan="7" class="px-6 py-12 text-center text-gray-400">
                    <svg class="w-12 h-12 mx-auto mb-3 text-gray-300" fill="none" stroke="currentColor" stroke-width="1" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    Tidak ada notifikasi yang dijadwalkan
                </td>
            </tr>
            <?php endif; ?>
        </tbody>
    </table>
</div>

<div class="mt-6"><?php echo e($pendingLogs->appends(request()->query())->links('pagination')); ?></div>


<div id="rescheduleModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center">
    <div class="bg-white rounded-xl p-6 w-full max-w-md mx-4">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">Ubah Jadwal Notifikasi</h3>
        <form id="rescheduleForm" method="POST">
            <?php echo csrf_field(); ?>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Jadwal Baru</label>
                <input type="datetime-local" name="scheduled_at" id="rescheduleInput" class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm" required>
            </div>
            <div class="flex justify-end gap-2">
                <button type="button" onclick="closeReschedule()" class="px-4 py-2 text-sm text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200">Batal</button>
                <button type="submit" class="px-4 py-2 text-sm text-white bg-indigo-600 rounded-lg hover:bg-indigo-700">Simpan</button>
            </div>
        </form>
    </div>
</div>

<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script>
function openReschedule(id, currentDate) {
    document.getElementById('rescheduleModal').classList.remove('hidden');
    document.getElementById('rescheduleInput').value = currentDate || '';
    document.getElementById('rescheduleForm').action = '/admin/notifications/' + id + '/reschedule';
}

function closeReschedule() {
    document.getElementById('rescheduleModal').classList.add('hidden');
}

// Close modal on backdrop click
document.getElementById('rescheduleModal').addEventListener('click', function(e) {
    if (e.target === this) closeReschedule();
});

const queueStatsUrl = "<?php echo e(route('admin.notifications.queue-stats')); ?>";
const sendAllDueUrl = "<?php echo e(route('admin.notifications.send-all-due')); ?>";
const csrfToken = "<?php echo e(csrf_token()); ?>";
const AUTO_SEND_COOLDOWN_MS = 8000;

let latestDueNow = <?php echo e((int) $stats['due_now']); ?>;
let latestTotalScheduled = <?php echo e((int) $stats['total_scheduled']); ?>;
let autoSendInProgress = false;
let lastAutoSendAt = 0;

function formatRemainingTime(remainingMs) {
    const totalSeconds = Math.max(0, Math.floor(remainingMs / 1000));

    if (totalSeconds < 60) {
        return `${totalSeconds} detik lagi`;
    }

    const totalMinutes = Math.floor(totalSeconds / 60);
    if (totalMinutes < 60) {
        return `${totalMinutes} menit lagi`;
    }

    const totalHours = Math.floor(totalMinutes / 60);
    if (totalHours < 24) {
        return `${totalHours} jam lagi`;
    }

    const totalDays = Math.floor(totalHours / 24);
    return `${totalDays} hari lagi`;
}

function updateDueNowWidget(dueCount) {
    const dueNowCount = document.getElementById('dueNowCount');
    const dueNowIconWrap = document.getElementById('dueNowIconWrap');
    const dueNowIcon = document.getElementById('dueNowIcon');
    const hasDue = dueCount > 0;

    if (dueNowCount) {
        dueNowCount.textContent = String(dueCount);
        dueNowCount.className = `text-2xl font-bold mt-1 ${hasDue ? 'text-orange-600' : 'text-gray-400'}`;
    }

    if (dueNowIconWrap) {
        dueNowIconWrap.className = `w-10 h-10 rounded-lg flex items-center justify-center ${hasDue ? 'bg-orange-100' : 'bg-gray-50'}`;
    }

    if (dueNowIcon) {
        dueNowIcon.className = `w-5 h-5 ${hasDue ? 'text-orange-500' : 'text-gray-400'}`;
    }
}

function renderCountdowns() {
    const countdowns = document.querySelectorAll('.js-queue-countdown[data-scheduled-at]');
    const nowMs = Date.now();
    let visibleDueCount = 0;

    countdowns.forEach((node) => {
        const scheduledAt = node.dataset.scheduledAt;
        const targetMs = Date.parse(scheduledAt);

        if (!scheduledAt || Number.isNaN(targetMs)) {
            return;
        }

        const row = node.closest('tr');
        const remainingMs = targetMs - nowMs;

        if (remainingMs <= 0) {
            visibleDueCount++;
            node.textContent = autoSendInProgress ? 'Mengirim...' : 'Siap diproses...';
            node.classList.remove('text-gray-500', 'text-orange-600');
            node.classList.add('text-blue-600', 'font-medium');
            if (row) {
                row.classList.remove('bg-orange-50');
                row.classList.add('bg-blue-50');
            }
            return;
        }

        node.textContent = formatRemainingTime(remainingMs);
        node.classList.remove('text-orange-600', 'text-blue-600', 'font-medium');
        node.classList.add('text-gray-500');
    });

    return visibleDueCount;
}

function markDueRowsAsProcessing() {
    const countdowns = document.querySelectorAll('.js-queue-countdown[data-scheduled-at]');
    const nowMs = Date.now();

    countdowns.forEach((node) => {
        const targetMs = Date.parse(node.dataset.scheduledAt);
        if (Number.isNaN(targetMs) || targetMs > nowMs) {
            return;
        }

        node.textContent = 'Mengirim...';
        node.classList.remove('text-gray-500', 'text-orange-600');
        node.classList.add('text-blue-600', 'font-medium');

        const row = node.closest('tr');
        if (row) {
            row.classList.remove('bg-orange-50');
            row.classList.add('bg-blue-50', 'opacity-80');
        }
    });
}

function hideDueRowsTemporarily() {
    const countdowns = document.querySelectorAll('.js-queue-countdown[data-scheduled-at]');
    const nowMs = Date.now();

    countdowns.forEach((node) => {
        const targetMs = Date.parse(node.dataset.scheduledAt);
        if (Number.isNaN(targetMs) || targetMs > nowMs) {
            return;
        }

        const row = node.closest('tr');
        if (row) {
            row.style.display = 'none';
        }
    });
}

function canTriggerAutoSend() {
    const now = Date.now();
    return !autoSendInProgress && (now - lastAutoSendAt) >= AUTO_SEND_COOLDOWN_MS;
}

async function triggerAutoSend(dueCount) {
    if (dueCount <= 0 || !canTriggerAutoSend()) {
        return;
    }

    autoSendInProgress = true;
    lastAutoSendAt = Date.now();
    markDueRowsAsProcessing();

    try {
        const response = await fetch(sendAllDueUrl, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': csrfToken,
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
            },
        });

        if (!response.ok) {
            return;
        }

        const payload = await response.json();
        if ((payload.due_count ?? 0) > 0) {
            hideDueRowsTemporarily();
            updateDueNowWidget(0);
            setTimeout(() => window.location.reload(), 1200);
        }
    } catch (error) {
        console.error('Auto send gagal dipicu:', error);
    } finally {
        autoSendInProgress = false;
    }
}

async function refreshQueueStats() {
    try {
        const response = await fetch(queueStatsUrl, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
            },
        });

        if (!response.ok) {
            return;
        }

        const stats = await response.json();
        const totalScheduled = Number(stats.total_scheduled ?? 0);
        latestDueNow = Number(stats.due_now ?? 0);

        // Refresh page when queue size changes to keep table clean without manual reload.
        if (totalScheduled !== latestTotalScheduled) {
            window.location.reload();
            return;
        }

        latestTotalScheduled = totalScheduled;
        updateDueNowWidget(latestDueNow);

        if (latestDueNow > 0) {
            await triggerAutoSend(latestDueNow);
        }
    } catch (error) {
        console.error('Gagal memuat stats queue:', error);
    }
}

function tickQueueCountdown() {
    const visibleDueCount = renderCountdowns();

    if (visibleDueCount > latestDueNow) {
        latestDueNow = visibleDueCount;
        updateDueNowWidget(latestDueNow);
    }

    if (visibleDueCount > 0) {
        triggerAutoSend(visibleDueCount);
    }
}

document.addEventListener('DOMContentLoaded', function () {
    updateDueNowWidget(latestDueNow);
    tickQueueCountdown();

    // Keep countdown moving in realtime
    setInterval(tickQueueCountdown, 1000);

    // Poll queue stats so due items outside current table page are still detected
    setInterval(refreshQueueStats, 5000);

    // Trigger immediately when page opens and there are due notifications
    if (latestDueNow > 0) {
        triggerAutoSend(latestDueNow);
    }
});
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.admin', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /var/www/bursakerja/resources/views/admin/notifications/queue.blade.php ENDPATH**/ ?>