@php
/**
 * @api-readonly
 * Tracks progress for test package creator
 */
$progress = Cache::get('tp-creator-queue');
@endphp

@if(!is_null($progress))
    @foreach($progress AS $queueId => $data)
    <?php 
    $originalQueueId = $queueId;
    $queueId = str_slug($queueId, '_');
    
    // Get progress data from cache (if separate progress tracking is used)
    // For TpCreator, we are currently storing everything in the main queue array, 
    // but if we switch to granular tracking like RegisterCreator:
    // $progressData = Cache::get("tp-creator-progress-$originalQueueId");
    
    // Fallback to data directly in the queue item
    $totalJobs = $data['total_registers'] ?? 1;
    $currentJob = 1; // TpCreator usually processes one big job per line, but kept for compatibility
    $progressPercent = $data['progress'] ?? 0;
    $currentDescription = $data['description'] ?? e2('Waiting...');
    $updatedAt = $data['created_at'] ?? now();
    $status = $data['status'] ?? 'pending';
    $lineData = $data['line_identifier'] ?? null;
    
    // Determine status color and icon
    $statusColor = match($status) {
        'running' => 'primary',
        'completed' => 'success',
        'failed' => 'danger',
        default => 'secondary'
    };
    
    $statusIcon = match($status) {
        'running' => 'fa-spinner fa-spin',
        'completed' => 'fa-check-circle',
        'failed' => 'fa-exclamation-circle',
        default => 'fa-clock'
    };
    
    $statusText = match($status) {
        'running' => e2('Running'),
        'completed' => e2('Completed'),
        'failed' => e2('Failed'),
        default => e2('Pending')
    };
    ?>
    <div class="border p-3 border-radius mb-2" id="queue-{{$queueId}}">
        <div class="d-flex justify-content-between align-items-start">
            <div class="flex-grow-1">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <div class="d-flex align-items-center flex-wrap" style="gap: 8px;">
                        <strong style="font-size: 13px;" class="d-none">{{$queueId}}</strong>
                        @if($lineData)
                        <span class="badge badge-info badge-sm">
                            <i class="fa fa-database"></i> {{$lineData}}
                        </span>
                        @endif
                        <small class="text-muted">by {{$data['user']?->name}} {{$data['user']?->surname}}</small>
                        <small class="text-muted">
                            <i class="fa fa-clock"></i> {{df($updatedAt, 'd.m.Y H:i')}}
                        </small>
                    </div>
                    <span class="badge badge-{{$statusColor}}">
                        <i class="fa {{$statusIcon}}"></i> {{$statusText}}
                    </span>
                </div>
                
                <div class="description{{$queueId}} mb-2" style="font-size: 12px;">
                    <i class="fa fa-info-circle text-info"></i> {{$currentDescription}}
                </div>
                
                <div class="d-flex align-items-center">
                    <div id="progress-bar-{{$queueId}}" class="flex-grow-1 mr-2"></div>
                    <small class="text-muted font-weight-bold" style="min-width: 40px;">{{$progressPercent}}%</small>
                </div>
            </div>
            @if(isAuth('tp-creator', 'write'))
            <div class="ml-3">
                <button class="btn btn-sm btn-outline-danger" onclick="deleteQueue('{{$originalQueueId}}')" title="{{e2('Delete Queue')}}">
                    <i class="fa fa-trash"></i>
                </button>
            </div>
            @endif
        </div>
    </div>
    <script>
        $("#progress-bar-{{$queueId}}").dxProgressBar({
            min: 0,
            max: 100,
            value: {{$progressPercent}},
            statusFormat: function(ratio) {
                return (ratio * 100).toFixed(0) + "%";
            }
        });
    </script>
    @endforeach
@endif