{{-- resources/views/admin/partials/automation-widget.blade.php --}}
<div class="card shadow mb-4">
    <div class="card-header py-3 d-flex justify-content-between align-items-center">
        <h6 class="m-0 font-weight-bold text-primary">
            <i class="fas fa-robot me-2"></i>Automation Engine
        </h6>
        <div id="automation-indicator" class="badge bg-success" data-status="active">
            <span class="status-text">Active</span>
            <span class="processing-spinner d-none">
                <i class="fas fa-spinner fa-spin"></i>
            </span>
        </div>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-6">
                <div class="mb-3">
                    <label class="text-muted small">Mode</label>
                    <div class="h5" id="automation-mode">
                        {{ Cache::get('automation:mode', 'cron') }}
                    </div>
                </div>
                <div class="mb-3">
                    <label class="text-muted small">Last Run</label>
                    <div class="h6" id="last-run-time">
                        @if($lastRun = Cache::get('automation:last_run'))
                            {{ $lastRun->diffForHumans() }}
                        @else
                            Never
                        @endif
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="mb-3">
                    <label class="text-muted small">Active Workers</label>
                    <div class="h5" id="active-workers">
                        {{ Cache::get('automation:active_workers', 0) }}
                    </div>
                </div>
                <div class="mb-3">
                    <label class="text-muted small">Pending Jobs</label>
                    <div class="h5" id="pending-jobs">
                        {{ App\Models\JobQueue::where('status', 'pending')->count() }}
                    </div>
                </div>
            </div>
        </div>

        <div class="progress mb-3" style="height: 5px;">
            <div class="progress-bar bg-success" role="progressbar" 
                 style="width: {{ $this->getAutomationHealth() }}%"></div>
        </div>

        <div class="d-flex justify-content-between align-items-center">
            <small class="text-muted">
                <i class="fas fa-clock me-1"></i>
                Heartbeat every 60 seconds
            </small>
            <button class="btn btn-sm btn-primary" onclick="triggerManualProcess()">
                <i class="fas fa-play me-1"></i>Run Now
            </button>
        </div>
    </div>
</div>

@push('scripts')
<script>
async function triggerManualProcess() {
    const button = event.target.closest('button');
    const originalText = button.innerHTML;
    
    button.disabled = true;
    button.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Processing...';
    
    try {
        const response = await fetch('/automation/trigger', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({
                token: document.querySelector('meta[name="heartbeat-token"]').content
            })
        });
        
        const data = await response.json();
        
        if (data.success) {
            showNotification('success', 'Automation triggered successfully');
        } else {
            showNotification('error', data.error || 'Failed to trigger automation');
        }
    } catch (error) {
        showNotification('error', 'Failed to trigger automation');
    } finally {
        button.disabled = false;
        button.innerHTML = originalText;
    }
}

function showNotification(type, message) {
    // Implement your notification system
    alert(message);
}
</script>
@endpush