@extends('layouts.installer')

@section('title', 'Queue & Cron Setup')
@section('subtitle', 'Configure background job processing.')

@section('content')
<div class="bg-blue-500/10 border border-blue-500/20 rounded-xl p-4 mb-8 text-sm text-blue-300 flex items-start gap-3">
    <i data-lucide="info" class="w-5 h-5 flex-shrink-0 mt-0.5"></i>
    <p>Background jobs are essential for processing emails, optimizing images, and running scheduled tasks like subscription renewals.</p>
</div>

<form action="{{ route('install.queue.post') }}" method="POST" class="space-y-8">
    @csrf
    
    <div>
        <label class="block text-lg font-medium text-white mb-4">Queue Connection Driver</label>
        
        <div class="grid gap-4 md:grid-cols-3">
            <label class="relative flex flex-col items-center bg-slate-800/50 p-6 rounded-xl border-2 border-slate-700 cursor-pointer hover:bg-slate-800 transition-colors focus-within:border-blue-500">
                <input type="radio" name="queue_connection" value="database" class="sr-only peer" {{ old('queue_connection', $data['queue_connection']) == 'database' ? 'checked' : '' }}>
                <div class="mb-3 text-text-dim peer-checked:text-blue-500">
                    <i data-lucide="database" class="w-8 h-8 mx-auto"></i>
                </div>
                <div class="font-600 text-white mb-1">Database</div>
                <div class="text-xs text-text-dim text-center">Recommended for standard shared hosting or standard VPS.</div>
                <div class="absolute inset-0 border-2 border-transparent peer-checked:border-blue-500 rounded-xl" aria-hidden="true"></div>
            </label>

            <label class="relative flex flex-col items-center bg-slate-800/50 p-6 rounded-xl border-2 border-slate-700 cursor-pointer hover:bg-slate-800 transition-colors focus-within:border-blue-500">
                <input type="radio" name="queue_connection" value="sync" class="sr-only peer" {{ old('queue_connection', $data['queue_connection']) == 'sync' ? 'checked' : '' }}>
                <div class="mb-3 text-text-dim peer-checked:text-blue-500">
                    <i data-lucide="refresh-cw" class="w-8 h-8 mx-auto"></i>
                </div>
                <div class="font-600 text-white mb-1">Sync</div>
                <div class="text-xs text-text-dim text-center">Executes instantly. Slows down page load times. Not recommended for production.</div>
                <div class="absolute inset-0 border-2 border-transparent peer-checked:border-blue-500 rounded-xl" aria-hidden="true"></div>
            </label>

            <label class="relative flex flex-col items-center bg-slate-800/50 p-6 rounded-xl border-2 border-slate-700 cursor-pointer hover:bg-slate-800 transition-colors focus-within:border-blue-500">
                <input type="radio" name="queue_connection" value="redis" class="sr-only peer" {{ old('queue_connection', $data['queue_connection']) == 'redis' ? 'checked' : '' }}>
                <div class="mb-3 text-text-dim peer-checked:text-blue-500">
                    <i data-lucide="server" class="w-8 h-8 mx-auto"></i>
                </div>
                <div class="font-600 text-white mb-1">Redis</div>
                <div class="text-xs text-text-dim text-center">Fastest. Requires Redis server installed and configured on your server.</div>
                <div class="absolute inset-0 border-2 border-transparent peer-checked:border-blue-500 rounded-xl" aria-hidden="true"></div>
            </label>
        </div>
        @error('queue_connection')
            <p class="mt-2 text-sm text-red-400">{{ $message }}</p>
        @enderror
    </div>

    <div class="bg-slate-900/50 rounded-xl p-6 border border-white/5">
        <h3 class="text-lg font-600 mb-2 flex items-center gap-2">
            <i data-lucide="calendar-clock" class="w-5 h-5 text-emerald-400"></i>
            Required Cron Job
        </h3>
        <p class="text-sm text-text-dim mb-4">You MUST add this cron job to your server (cPanel -> Cron Jobs) to run every minute (<code class="text-emerald-400">* * * * *</code>).</p>
        
        <div class="bg-black/50 p-4 rounded-lg font-mono text-sm text-text-dim relative border border-white/10 flex items-center justify-between">
            <code id="cron-command">* * * * * cd {{ base_path() }} && php artisan schedule:run >> /dev/null 2>&1</code>
            <button type="button" onclick="navigator.clipboard.writeText(document.getElementById('cron-command').innerText); alert('Copied!')" class="text-text-dim hover:text-white transition-colors" title="Copy to clipboard">
                <i data-lucide="copy" class="w-4 h-4"></i>
            </button>
        </div>
    </div>

    <div class="pt-6 border-t border-white/5 flex justify-between items-center">
        <a href="{{ route('install.mail') }}" class="text-sm text-text-dim hover:text-white transition-colors">
            &larr; Back
        </a>
        <button type="submit" class="btn-primary">
            Next Step
            <i data-lucide="arrow-right" class="w-4 h-4"></i>
        </button>
    </div>
</form>
@endsection