@extends('vendor.installer.layouts.master')

@section('template_title', 'Cron / Scheduler')

@section('title')
    <span class="inline-flex items-center gap-3"><i class="fa-solid fa-clock text-brand-600"></i> Configure Cron</span>
@endsection

@section('subtitle', 'GCXpass relies on Laravel’s scheduler for daily metrics, AI briefings, token cleanup and AutoCloseDays.')

@section('container')
    <div class="space-y-6">

        <div class="rounded-xl bg-brand-50 dark:bg-brand-900/20 border border-brand-100 dark:border-brand-800/40 p-4 text-sm text-brand-900 dark:text-brand-100">
            Add one of the cron lines below to your server. It runs every minute and is safe to leave in place forever.
        </div>

        <div>
            <div class="flex items-center justify-between mb-2">
                <h3 class="text-sm font-bold uppercase tracking-wide text-gray-600 dark:text-gray-300">Standard server</h3>
                <button type="button" onclick="copyCron('cron-line', this)" class="btn-ghost text-xs"><i class="fa-regular fa-copy"></i> Copy</button>
            </div>
            <pre id="cron-line" class="font-mono text-[12.5px] bg-ink-900 text-brand-100 p-4 rounded-xl overflow-x-auto leading-relaxed">{{ $cronLine }}</pre>
        </div>

        <div>
            <div class="flex items-center justify-between mb-2">
                <h3 class="text-sm font-bold uppercase tracking-wide text-gray-600 dark:text-gray-300">cPanel / shared hosting</h3>
                <button type="button" onclick="copyCron('cron-line-cpanel', this)" class="btn-ghost text-xs"><i class="fa-regular fa-copy"></i> Copy</button>
            </div>
            <pre id="cron-line-cpanel" class="font-mono text-[12.5px] bg-ink-900 text-brand-100 p-4 rounded-xl overflow-x-auto leading-relaxed">{{ $cronLineCpanel }}</pre>
        </div>

        <div id="cron-status" class="rounded-xl p-4 border bg-amber-50 border-amber-200 text-amber-900 dark:bg-amber-500/10 dark:border-amber-500/30 dark:text-amber-200">
            <div class="flex items-start gap-3">
                <i class="fa-solid fa-hourglass-half mt-0.5"></i>
                <div>
                    <div class="font-semibold">Waiting for first cron tick…</div>
                    <p class="text-xs mt-0.5 opacity-90">Once the cron is added, the first run can take up to 60 seconds.</p>
                </div>
            </div>
        </div>

        <div class="flex flex-wrap items-center justify-between gap-2 pt-2">
            <a href="{{ route('LaravelInstaller::cron.skip') }}" class="btn-ghost"><i class="fa-solid fa-forward"></i> Skip for now</a>
            <div class="flex gap-2">
                <button type="button" id="check-now" class="btn-ghost"><i class="fa-solid fa-rotate"></i> Check now</button>
                <a href="{{ route('LaravelInstaller::health') }}" id="continue-btn" class="btn-primary hidden">Continue to health check <i class="fa-solid fa-arrow-right"></i></a>
            </div>
        </div>
    </div>

    <script>
        function copyCron(id, btn) {
            const el = document.getElementById(id);
            navigator.clipboard.writeText(el.innerText.trim()).then(() => {
                const orig = btn.innerHTML;
                btn.innerHTML = '<i class="fa-solid fa-check"></i> Copied';
                setTimeout(() => btn.innerHTML = orig, 1500);
            });
        }

        const statusBox = document.getElementById('cron-status');
        const continueBtn = document.getElementById('continue-btn');

        async function poll() {
            try {
                const res = await fetch('{{ route('LaravelInstaller::cron.status') }}', { headers: { 'Accept': 'application/json' } });
                const j = await res.json();
                if (j.ok) {
                    statusBox.className = 'rounded-xl p-4 border bg-emerald-50 border-emerald-200 text-emerald-900 dark:bg-emerald-500/10 dark:border-emerald-500/30 dark:text-emerald-200';
                    statusBox.innerHTML = '<div class="flex items-start gap-3"><i class="fa-solid fa-circle-check mt-0.5"></i><div><div class="font-semibold">Cron is running.</div><p class="text-xs mt-0.5 opacity-90">Last tick: ' + new Date(j.last_run_at).toLocaleString() + ' (' + j.last_run_ago + 's ago)</p></div></div>';
                    continueBtn.classList.remove('hidden');
                } else {
                    statusBox.querySelector('.font-semibold').textContent = 'Still waiting…';
                    if (j.reason) statusBox.querySelector('p').textContent = j.reason;
                }
            } catch (e) {}
        }
        document.getElementById('check-now').addEventListener('click', poll);
        poll();
        setInterval(poll, 10000);
    </script>
@endsection