@php
use App\Helpers\ActionHelper;
use Carbon\Carbon;
use Illuminate\Support\Str;
@endphp
@extends('layouts.app')

@section('title', 'Client Details')

@section('breadcrumbs')
    @include('components.breadcrumbs', ['items' => [
        ['title' => $client->name, 'active' => true]
    ]])
@endsection

@section('content')
<style>
    /* === SEZIONI COLLASSABILI === */
    .section-collapsible {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
        opacity: 0;
    }

    .section-collapsible.show {
        max-height: 1000px;
        transition: max-height 0.5s ease-in, opacity 0.5s ease-in;
        opacity: 1;
    }

    /* === ANIMAZIONI BASE === */
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    .spin {
        animation: spin 1.5s linear infinite;
        display: inline-block;
    }

    @keyframes pulse {
        0% { opacity: 1; }
        50% { opacity: 0.5; }
        100% { opacity: 1; }
    }

    .pulse {
        animation: pulse 2s ease-in-out infinite;
    }

    @keyframes glow {
        0% { box-shadow: 0 0 5px rgba(255, 193, 7, 0.3); }
        50% { box-shadow: 0 0 20px rgba(255, 193, 7, 0.6); }
        100% { box-shadow: 0 0 5px rgba(255, 193, 7, 0.3); }
    }

    /* === GESTIONE VISIBILITÀ ELEMENTI DI STATO === */
    .status-element {
        display: none !important;
    }
    
    /* Mostra elementi corrispondenti allo stato della CARD */
    .status-pending > .card > .card-header .status-badge .status-element.pending,
.status-pending > .card > .card-header .total-errors-badge > .status-element.pending,
.status-queued > .card > .card-header .status-badge .status-element.queued,
.status-queued > .card > .card-header .total-errors-badge > .status-element.queued {
        display: inline-block !important;
    }
    
    .status-running > .card > .card-header .status-badge .status-element.running,
    .status-running > .card > .card-header .total-errors-badge > .status-element.running {
        display: inline-block !important;
    }
    
    .status-completed > .card > .card-header .status-badge .status-element.completed,
    .status-completed > .card > .card-header .total-errors-badge > .status-element.completed {
        display: inline-block !important;
    }
    
    .status-failed > .card > .card-header .status-badge .status-element.failed,
    .status-failed > .card > .card-header .total-errors-badge > .status-element.failed {
        display: inline-block !important;
    }
    
    /* Mostra elementi di stato per SYSTEM basandosi sullo stato del system */
    .system-badge.status-pending .system-status-indicator .status-element.pending,
    .system-badge.status-queued .system-status-indicator .status-element.queued,
    .system-badge.status-running .system-status-indicator .status-element.running,
    .system-badge.status-completed .system-status-indicator .status-element.completed,
    .system-badge.status-failed .system-status-indicator .status-element.failed {
        display: flex !important;
    }

    /* === INDICATORI DI STATO === */
    .status-pending .status-indicator {
        background-color: #6c757d !important;
    }
    
    .status-queued .status-indicator {
        background-color: #17a2b8 !important;
    }

    .status-running .status-indicator {
        background-color: #ffc107 !important;
    }

    .status-completed .status-indicator {
        background-color: #198754 !important;
    }

    .status-failed .status-indicator {
        background-color: #dc3545 !important;
    }

    /* === STILI CARD PER STATO === */

    .card .card-title {
        white-space: normal;
        margin-bottom: 0;
    }
    .status-pending .card {
        border-left: 4px solid #6c757d;
    }
    
    .status-queued .card {
        border-left: 4px solid #17a2b8;
    }

    .status-running .card {
        border-left: 4px solid #ffc107;
        box-shadow: 0 0 0 1px rgba(255, 193, 7, 0.2);
        animation: glow 3s ease-in-out infinite;
    }

    .status-completed .card {
        border-left: 4px solid #198754;
    }

    .status-failed .card {
        border-left: 4px solid #dc3545;
        box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.2);
        background-color: #fdf2f2;
    }

    /* === STILI SISTEMA === */
    .system-container {
        font-size: 75%;
        line-height: 1;
        font-weight: 500;
        display: flex;
        overflow: hidden;
    }

    .system-name {
        padding: 0.25em 0.4em;
        background-color: #f8f9fa;
        border-right: 1px solid #dee2e6;
    }

    .system-status-indicator {
        display: contents;
    }

    .system-status-indicator .status-element:not(.completed),
    .system-status-indicator .status-element.completed span {
        padding: 0.25em 0.4em;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 1.5em;
    }

    /* === DEVICE BADGES === */
    .device-label {
        border: 1px solid #dee2e6;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        text-transform: uppercase;
        font-weight: 600;
    }

    .systems-container {
        border: 1px solid #dee2e6;
        border-radius: 0.25rem;
        overflow: hidden;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-left: none;
    }

    /* === DEVICE ERROR STYLES === */
    .device-error-container {
        transition: all 0.3s ease;
    }

    .device-error-container .badge {
        font-size: 0.75rem;
        padding: 0.25em 0.5em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border: 1px solid;
    }

    .device-error-container .badge i {
        margin-right: 0.25em;
    }

    /* Bordo per errori in stato pending (warning) */
    .device-badge.status-pending .device-error-container .badge.bg-warning {
        border-color: #ffc107;
    }

    /* Bordo per errori in stato failed (danger) */
    .device-badge.status-failed .device-error-container .badge.bg-danger {
        border-color: #dc3545;
    }

    .device-badge .systems-container,
    .device-badge .device-error-container {
        min-width: 150px;
    }

    .device-badge[data-has-errors="true"].status-failed .device-label {
        border-color: #dc3545 !important;
    }

    .device-badge[data-has-errors="true"].status-pending .device-label {
        border-color: #ffc107 !important;
    }

    /* Fix per il conflitto d-flex/d-none */
    .systems-container.d-none {
        display: none !important;
    }

    .device-error-container.d-none {
        display: none !important;
    }

    /* === PROGRESS BAR === */
    #scanProgressBar.bg-success {
        background: linear-gradient(90deg, #28a745 0%, #20c997 100%) !important;
    }

    .progress-bar-animated {
        background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent) !important;
        background-size: 1rem 1rem !important;
    }

    /* === STATUS BADGES === */
    .badge.status-element {
        transition: all 0.3s ease;
    }

    .badge.status-element.running {
        background: linear-gradient(45deg, #ffc107, #fd7e14) !important;
        animation: pulse 2s ease-in-out infinite;
    }

    .badge.status-element.completed.bg-success {
        background: linear-gradient(45deg, #28a745, #20c997) !important;
    }

    .badge.status-element.failed {
        background: linear-gradient(45deg, #dc3545, #e74c3c) !important;
    }

    /* === ELEMENTI DISABILITATI === */
    .disabled-during-scan {
        opacity: 0.6;
        pointer-events: none;
        cursor: not-allowed;
    }

    .disabled-during-scan .btn {
        opacity: 0.6;
        pointer-events: none;
    }
    
    .btn:disabled {
        opacity: 0.6;
        pointer-events: none;
        cursor: not-allowed;
    }
    
    .delete-scan-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
    
    .single-scan-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .devices-container {
        flex-wrap: wrap;
    }

    /* === RESPONSIVE === */
    @media (max-width: 768px) {
        .devices-container {
            flex-direction: column;
            gap: 0.5em !important;
        }
        
        .device-badge {
            margin-bottom: 0.5rem !important;
        }
        
        .systems-container {
            flex-wrap: wrap;
        }
    }

    /* === STILI BALLOON MENU === */
    .config-menu {
        filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
    }

    .balloon-arrow {
        position: absolute;
        top: -8px;
        right: 15px;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid #212529; /* Colore dark di Bootstrap */
        z-index: 1001;
    }

    .balloon-content {
        position: relative;
        border: 1px solid #495057;
        overflow: hidden; /* Per mantenere il border-radius pulito */
    }

    /* Stili per le voci del menu */
    .menu-item {
        padding: 10px 12px;
        cursor: pointer;
        transition: background-color 0.2s ease;
        border: none;
        background: none;
        color: white;
        width: 100%;
        text-align: left;
        display: flex;
        align-items: center;
        font-size: 13px;
        line-height: 1.3;
    }

    .menu-item i {
        margin-right: 8px !important; /* Distanziamento tra icona e testo */
        color: white !important; /* Tutte le icone bianche */
        width: 16px; /* Larghezza fissa per allineamento */
        text-align: center;
    }

    .menu-item:hover {
        background-color: #495057;
        color: white !important; /* Forza il testo bianco */
    }

    .menu-item:hover * {
        color: white !important; /* Tutte le icone e il testo bianco durante hover */
    }

    /* Separatori del menu */
    .menu-separator {
        height: 1px;
        background-color: #495057;
        margin: 0;
    }

    /* Rimuovi stili button precedenti */
    .config-menu .exclude-common-toggle {
        /* Rimossi tutti gli stili button */
    }

    .config-scan-btn {
        transition: all 0.2s ease;
    }

    .config-scan-btn:hover {
        transform: scale(1.05);
    }
    }
</style>
    <div class="row mb-4">
        <div class="col">
            <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
            <h2 class="fw-bold mb-0">{{ $client->name }}</h2>
            @if($client->scan_every > 0 && $nextScanDate)
                <div class="mt-1 text-muted">
                    <i class="bi bi-calendar-check me-1"></i> Prossima scansione automatica: {{ $nextScanDate->format('d/m/Y H:i') }}
                </div>
            @endif
            <div class="d-flex flex-wrap gap-2" id="headerActions">
                <a href="{{ route('clients.edit', $client->id) }}" class="btn btn-primary header-action-btn">
                    <i class="bi bi-pencil-square me-1"></i> Modifica Cliente
                </a>
                &nbsp;
                @if($canAddNewUrl)
                    <button class="btn btn-success header-action-btn" type="button" onclick="toggleSection('addUrlSection')">
                        <i class="bi bi-plus-circle me-1"></i> Aggiungi URL
                    </button>
                @else
                    <button class="btn btn-secondary header-action-btn" disabled title="Limite massimo di URL raggiunto">
                        <i class="bi bi-plus-circle me-1"></i> Aggiungi URL
                    </button>
                @endif
                &nbsp;
                <!-- Pulsante Avvia Scansione con Progress -->
                <div class="d-inline position-relative">
                    <button type="button" class="btn btn-warning header-action-btn" id="scheduleAllScansBtn" onclick="startScanCreation()">
                        <i class="bi bi-arrow-repeat me-1"></i> Avvia Scansione
                    </button>
                    
                    <!-- Progress Bar per creazione scansioni (posizionata in absolute sopra il pulsante) -->
                    <div id="scanCreationProgress" class="d-none position-absolute w-100 h-100" style="top: 0; left: 0; background-color: #e6b980; border-radius: 0.375rem; z-index: 10; opacity: 1;">
                        <div class="position-relative w-100 h-100 d-flex flex-column">
                            <!-- Progress bar in alto -->
                            <div class="progress w-100" style="height: 8px; border-radius: 0.375rem 0.375rem 0 0;">
                                <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" 
                                        role="progressbar" 
                                        style="width: 0%" 
                                        id="scanCreationProgressBar"
                                        aria-valuenow="0" 
                                        aria-valuemin="0" 
                                        aria-valuemax="100"></div>
                            </div>
                            <!-- Testo subito sotto la progress bar -->
                            <div class="flex-grow-1 d-flex align-items-center justify-content-center px-2">
                                <small class="text-dark fw-medium text-center" id="scanCreationProgressMessage" style="font-size: 0.775rem; line-height: 1.2;">In attesa</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Informazioni sul limite URL -->
        <div class="alert alert-info mb-3">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <i class="bi bi-link-45deg me-2"></i>
                    <strong>Limite URL:</strong> {{ $uniqueUrlsCount }} / {{ $urlLimit }} URL utilizzate
                </div>
                @if(!$canAddNewUrl)
                    <div class="text-warning">
                        <i class="bi bi-exclamation-triangle me-1"></i>
                        <strong>Limite raggiunto!</strong> Non è possibile aggiungere nuove URL.
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Sezione gestione cliente -->
<div class="row mb-4">
    <div class="col">
        <!-- Sezione Aggiungi URL (inizialmente nascosta) -->
        <div id="addUrlSection" class="section-collapsible collapse">
            <div class="card bg-light mb-3">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Aggiungi Nuova URL</h5>
                    <button type="button" class="btn-close" onclick="toggleSection('addUrlSection')"></button>
                </div>
                <div class="card-body">
                <form id="addUrlForm" onsubmit="return handleAddUrlSubmit(event)">
                        @csrf
                        <div class="mb-3">
                            <label for="newUrl" class="form-label">URL</label>
                            <input type="url" class="form-control" id="newUrl" name="url" placeholder="https://example.com/" required>
                        </div>

                        @php
                            // === ESTRAZIONE AZIONI CON NUOVA FUNZIONE UNIFICATA ===
                            $allDomainActions = \App\Helpers\ActionHelper::extractActionsFromDomain($client->action_domain);
                            
                            // === FILTRAGGIO AZIONI ===
                            // Rimuove azioni predefinite che creano scan automatici e categorie vuote
                            $filteredBeforeScanActions = [];
                            foreach ($allDomainActions['before_scan_action'] as $category => $actions) {
                                $filteredActions = [];
                                foreach ($actions as $actionName => $actionData) {
                                    // Includiamo l'azione solo se NON è (predefinita E crea auto scan)
                                    if (!($actionData['is_predefined'] && $actionData['creates_auto_scan'])) {
                                        $filteredActions[$actionName] = $actionData;
                                    }
                                }
                                // Aggiungiamo la categoria solo se ha azioni
                                if (!empty($filteredActions)) {
                                    $filteredBeforeScanActions[$category] = $filteredActions;
                                }
                            }
                            
                            $filteredActions = [];
                            foreach ($allDomainActions['action'] as $category => $actions) {
                                $filteredCategoryActions = [];
                                foreach ($actions as $actionName => $actionData) {
                                    // Includiamo l'azione solo se NON è (predefinita E crea auto scan)
                                    if (!($actionData['is_predefined'] && $actionData['creates_auto_scan'])) {
                                        $filteredCategoryActions[$actionName] = $actionData;
                                    }
                                }
                                // Aggiungiamo la categoria solo se ha azioni
                                if (!empty($filteredCategoryActions)) {
                                    $filteredActions[$category] = $filteredCategoryActions;
                                }
                            }
                            
                            $hasBeforeScanActions = !empty($filteredBeforeScanActions);
                        @endphp
                        
                        @if($hasBeforeScanActions)
                        <div class="mb-3">
                            <label for="before_scan_action" class="form-label">Azione preventiva (opzionale):</label>
                            <select id="before_scan_action" name="before_scan_action" class="form-control">
                                <option value="">Nessuna</option>
                                

                                <!-- Azioni da file custom e auto -->
                                @foreach($filteredBeforeScanActions as $category => $actions)
                                    <optgroup label="{{ $category }}">
                                        @foreach($actions as $actionName => $actionData)
                                            <option value="{{ $actionName }}">{{ $actionData['display_option_name'] }}</option>
                                        @endforeach
                                    </optgroup>
                                @endforeach
                            </select>
                        </div>
                        @endif
    
                        @php
                            // === RACCOLTA DATI PER AZIONI NORMALI ===
                            $hasActions = !empty($filteredActions);
                        @endphp
                        
                        @if($hasActions)
                        <div class="mb-3">
                            <label for="action" class="form-label">Azione (opzionale):</label>
                            <select id="action" name="action" class="form-control">
                                <option value="">Seleziona Azione</option>
                

                                <!-- Azioni da file custom e auto -->
                                @foreach($filteredActions as $category => $actions)
                                    <optgroup label="{{ $category }}">
                                        @foreach($actions as $actionName => $actionData)
                                            <option value="{{ $actionName }}">{{ $actionData['display_option_name'] }}</option>
                                        @endforeach
                                    </optgroup>
                                @endforeach
                            </select>
                        </div>
                        @endif
        
                                    <div class="text-end">
                            <button type="button" class="btn btn-secondary me-2" onclick="toggleSection('addUrlSection')">Annulla</button>
                            <button type="submit" class="btn btn-success" id="addUrlSubmitBtn">Aggiungi e Avvia Scansione</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Barra di avanzamento per gli scan in corso -->
<div id="scanProgressContainer" class="mb-4 d-none">
    <div class="card shadow-sm">
        <div class="card-header bg-light d-flex justify-content-between align-items-center">
            <h3 class="h5 mb-0">Avanzamento Scansioni</h3>
            <span id="scanProgressPercentage">0%</span>
        </div>
        <div class="card-body">
            <div class="progress">
                <div id="scanProgressBar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <div id="scanProgressInfo" class="text-center mt-2 small text-muted">
                <span id="completedScans">0</span> di <span id="totalScans">0</span> scansioni completate
            </div>
        </div>
    </div>
</div>

<div class="row mb-4">
    <div class="col">
        <div class="card shadow-sm">
            <div class="card-header d-flex justify-content-between align-items-center bg-light">
                <h3 class="h5 mb-0">Andamento Report nel Tempo</h3>
                <!--div class="text-muted small">
                    <i class="bi bi-info-circle"></i> 
                    Info
                </div-->
            </div>
            <div class="card-body">
                <div style="overflow-x: auto; min-height: 350px;">
                    <canvas id="scanChart" style="min-width: 800px; height: 300px;"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mb-4">
    <div class="col">
        <div class="card shadow-sm">
            <div class="card-header d-flex justify-content-between align-items-center bg-light">
                @if(count($availableDates ?? []) > 0)
                    <form action="{{ route('clients.show', $client->id) }}" method="GET" id="dateFilterForm">
                        <div class="input-group">
                            <label class="input-group-text" for="dateSelect">
                                <i class="bi bi-calendar3"></i>&nbsp;Visualizza:
                            </label>
                            <select class="form-select" id="dateSelect" name="date" onchange="this.form.submit()">
                                @foreach($availableDates as $dateOption)
                                    <option value="{{ $dateOption['value'] }}" {{ $dateOption['value'] == $selectedDate ? 'selected' : '' }}>
                                        {{ $dateOption['label'] }}
                                        @if($dateOption['is_current'])
                                            <span class="text-muted">(ultime scansioni)</span>
                                        @endif
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </form>
                @else
                    <h3 class="h5 mb-0">Scans</h3>
                @endif
                <div class="btn-group">
                    <a href="{{ route('clients.export', ['client' => $client->id, 'date' => $selectedDate]) }}" class="btn btn-sm btn-outline-primary">
                        <i class="bi bi-file-excel me-1"></i> Export to Excel
                    </a>
                    <a href="{{ route('generate.pdf', ['client' => $client->id, 'date' => $selectedDate]) }}" class="btn btn-sm btn-outline-secondary">
                        <i class="bi bi-file-pdf me-1"></i> Download PDF
                    </a>
                    <a href="{{ route('generate.pdf.view', ['client' => $client->id, 'date' => $selectedDate]) }}" class="btn btn-sm btn-outline-secondary">
                        <i class="bi bi-eye me-1"></i> View report
                    </a>
                </div>
                <div>
                    <form action="{{ route('reports.regenerate', $client->id) }}" method="POST" class="d-inline">
                        @csrf
                        <input type="hidden" name="date" value="{{ $selectedDate }}">
                        <input type="hidden" name="force" value="1">
                        <button type="submit" class="btn btn-sm btn-outline-warning">
                            <i class="bi bi-arrow-clockwise me-1"></i> Rigenera report
                        </button>
                    </form>
                </div>
            </div>
            <div class="card-body">
                @if(count($groupedScans) > 0)
                    <div class="table-responsive">
                        <div class="row row-cols-1" style="row-gap: 1rem;" id="scansContainer">
                            @foreach($groupedScans as $groupKey => $group)
                                @php
                                    $cardId = 'scan-card-' . $group['key'];
                                    $overallStatus = $group['overall_status'] ?? 'pending';
                                    
                                    // Determina se mostrare i pulsanti
                                    $isLatestDateScans = $isLatestDate; // Questo scan fa parte dell'ultimo giorno di scans
                                    $isTodayLatestDate = $selectedDate === 'current' || $selectedDate === Carbon::today()->format('Y-m-d'); // Stato attuale o oggi è l'ultimo giorno di scan
                                    
                                    // Controlla se l'azione automatica crea scansioni automatiche (per nascondere il pulsante delete)
                                    $actionCreatesAutoScan = false;
                                    $beforeActionCreatesAutoScan = false;
                                    
                                    if (!empty($group['action']) && Str::startsWith($group['action'], '_auto_')) {
                                        $predefinedActionsService = app('App\Services\PredefinedActionsService');
                                        $actionCreatesAutoScan = $predefinedActionsService->actionCreatesAutomaticScan($group['action']);
                                    }
                                    
                                    if (!empty($group['before_scan_action']) && Str::startsWith($group['before_scan_action'], '_auto_')) {
                                        $predefinedActionsService = app('App\Services\PredefinedActionsService');
                                        $beforeActionCreatesAutoScan = $predefinedActionsService->actionCreatesAutomaticScan($group['before_scan_action']);
                                    }
                                    
                                    // Nascondi il pulsante delete solo se è un'azione automatica che crea scansioni automatiche
                                    $isBlockedAutomaticAction = $actionCreatesAutoScan || $beforeActionCreatesAutoScan;
                                    
                                    // Il pulsante delete è ora sempre visibile (se non è un'azione automatica bloccata), 
                                    // indipendentemente dalla data selezionata
                                    $showDeleteButton = !$isBlockedAutomaticAction;
                                    
                                    // DEBUG TEMPORANEO per URL cyberguru
                                    if (str_contains($group['url'], 'cyberguru')) {
                                        error_log("DEBUG CYBERGURU: URL = " . $group['url']);
                                        error_log("DEBUG CYBERGURU: action = " . ($group['action'] ?? 'NULL'));
                                        error_log("DEBUG CYBERGURU: before_scan_action = " . ($group['before_scan_action'] ?? 'NULL'));
                                        error_log("DEBUG CYBERGURU: actionCreatesAutoScan = " . ($actionCreatesAutoScan ? 'true' : 'false'));
                                        error_log("DEBUG CYBERGURU: beforeActionCreatesAutoScan = " . ($beforeActionCreatesAutoScan ? 'true' : 'false'));
                                        error_log("DEBUG CYBERGURU: isBlockedAutomaticAction = " . ($isBlockedAutomaticAction ? 'true' : 'false'));
                                        error_log("DEBUG CYBERGURU: showDeleteButton = " . ($showDeleteButton ? 'true' : 'false'));
                                    }
                                    $showRepeatButton = $isLatestDateScans && $isTodayLatestDate;
                                @endphp
                                <div class="col status-{{ $overallStatus }}" 
                                        id="{{ $cardId }}" 
                                        data-url="{{ $group['url'] }}" 
                                        data-action="{{ $group['action'] }}" 
                                        data-before-scan-action="{{ $group['before_scan_action'] }}"
                                        data-overall-status="{{ $overallStatus }}">
                                    
                                    <div class="card h-100 border-light rounded-lg">
                                        <div class="card-header d-flex justify-content-between align-items-start bg-white">
                                            <div class="d-flex flex-column">
                                                <div class="d-flex align-items-center">
                                                    <!-- Indicatore colorato che cambia in base allo stato -->
                                                    <span class="badge me-2 status-indicator" style="width: 12px; height: 12px; padding: 0; flex-shrink: 0;"></span>
                                                    
                                                    <h5 class="mb-0 text-truncate flex-grow-1 min-width-0">
                                                        <span class="fw-bold card-title">{{ $group['page_title'] ?? 'Page' }}</span>
                                                    </h5>
                                                </div>

                                                @if($group['exclude_common_state'])
                                                <div class="mt-1 d-flex align-items-center">
                                                    <i class="bi bi-x-circle text-warning me-1"></i>
                                                    <small class="text-warning fw-medium">&nbsp;URL esclusa dal contesto rilevante per il calcolo degli errori comuni</small>
                                                </div>
                                                @endif

                                                <div class="mt-1 d-flex align-items-center">
                                                    <i class="bi bi-link-45deg text-muted me-1"></i>
                                                    <div class="card-url-container">
                                                        <small class="text-muted card-url" title="{{ $group['url'] }}">&nbsp;{{ $group['url'] }}</small>
                                                    </div>
                                                </div>
                                                
                                                @if($group['before_scan_action'])
                                                <div class="mt-1 d-flex align-items-center card-before-action">
                                                    <i class="bi bi-door-open text-muted me-1"></i>
                                                    @if(Str::startsWith($group['before_scan_action'], '_auto_'))
                                                        &nbsp;<i class="bi bi-robot text-muted ms-1" title="Azione preventiva automatica" data-bs-toggle="tooltip"></i>
                                                    @endif
                                                    <small class="text-muted">&nbsp;Azione preventiva: {{ $group['before_scan_action_metadata'] ? ($group['before_scan_action_metadata']['display_name'] ?? $group['before_scan_action_metadata']['name'] ?? $group['before_scan_action']) : $group['before_scan_action'] }}</small>
                                                </div>
                                                @endif

                                                    @if($group['action'])
                                                <div class="mt-1 d-flex align-items-center card-action">
                                                    <i class="bi bi-activity text-muted me-1"></i>
                                                    @if(Str::startsWith($group['action'], '_auto_'))
                                                        &nbsp;<i class="bi bi-robot text-muted ms-1" title="Azione automatica" data-bs-toggle="tooltip"></i>
                                                    @endif
                                                    <small class="text-muted">&nbsp;{{ $group['action_metadata'] ? ($group['action_metadata']['display_name'] ?? $group['action_metadata']['name'] ?? $group['action']) : $group['action'] }}</small>
                                                </div>
                                                @endif
                                                
                                                <div class="mt-2 d-flex align-items-center devices-container" style="column-gap: 1em; row-gap: 0.5em;">
                                                    @foreach($group['devices'] as $device => $deviceData)
                                                        @php
                                                            $deviceStatus = $deviceData['device_status'] ?? 'pending';
                                                            // Trova il primo errore per questo device
                                                            $deviceError = null;
                                                            if (!empty($group['unique_errors'])) {
                                                                foreach ($group['unique_errors'] as $error) {
                                                                    if (in_array($device, $error['devices'] ?? [])) {
                                                                        $deviceError = $error;
                                                                        break; // Prendi solo il primo errore
                                                                    }
                                                                }
                                                            }
                                                            $hasError = $deviceError !== null;
                                                        @endphp
                                                        <div class="d-flex align-items-center device-badge status-{{ $deviceStatus }}" 
                                                            data-device="{{ $device }}" 
                                                            data-device-status="{{ $deviceStatus }}"
                                                            data-has-errors="{{ $hasError ? 'true' : 'false' }}">
                                                            <span class="badge bg-light me-2 device-label">{{ ucfirst($device) }}</span>
                                                            
                                                            <!-- Container per systems (nascosto quando ci sono errori) -->
                                                            <div class="{{ $hasError && in_array($deviceStatus, ['failed', 'pending', 'queued']) ? 'systems-container' : 'd-flex systems-container' }} {{ $hasError && in_array($deviceStatus, ['failed', 'pending', 'queued']) ? 'd-none' : '' }}">
                                                                @foreach($deviceData['systems'] as $system => $systemData)
                                                                    @php
                                                                        $systemStatus = $systemData['status'] ?? 'pending';
                                                                    @endphp
                                                                    <div class="d-inline-block position-relative me-2 system-badge status-{{ $systemStatus }}" 
                                                                        data-system="{{ $system }}" 
                                                                        data-system-status="{{ $systemStatus }}"
                                                                        data-scan-id="{{ $systemData['id'] }}">
                                                                        <span class="bg-light text-dark system-container">
                                                                            <span class="system-name">{{ ucfirst($system) }}</span>
                                                                            <span class="system-status-indicator">
                                                                                <!-- Pending state -->
                                                                                <span class="status-element pending bg-secondary">
                                                                                    <i class="bi bi-pause-circle"></i>
                                                                                </span>
                                                                                <!-- Queued state -->
                                                                                <span class="status-element queued bg-info">
                                                                                    <i class="bi bi-clock-history"></i>
                                                                                </span>
                                                                                <!-- Running state -->
                                                                                <span class="status-element running bg-warning">
                                                                                    <i class="bi bi-arrow-repeat spin"></i>
                                                                                </span>
                                                                                <!-- Completed state - SEMPRE mostra il numero -->
                                                                                <span class="status-element completed">
                                                                                    <span class="{{ $systemData['errors'] > 0 ? 'bg-danger' : 'bg-success' }} system-error-count">{{ $systemData['errors'] ?? 0 }}</span>
                                                                                </span>
                                                                                <!-- Failed state -->
                                                                                <span class="status-element failed bg-danger">
                                                                                    <i class="bi bi-x"></i>
                                                                                </span>
                                                                            </span>
                                                                        </span>
                                                                    </div>
                                                                @endforeach
                                                            </div>
                                                            
                                                            <!-- Container per errori device (mostrato solo quando ci sono errori e stato failed/pending) -->
                                                            <div class="device-error-container {{ !$hasError || !in_array($deviceStatus, ['failed', 'pending', 'queued']) ? 'd-none' : '' }}">
                                                                @if($hasError)
                                                                <div class="d-flex align-items-center">
                                                                    <span class="badge {{ $deviceStatus === 'failed' ? 'bg-danger' : 'bg-warning' }} text-white">
                                                                        <i class="bi bi-{{ $deviceStatus === 'failed' ? 'exclamation-triangle-fill' : 'exclamation-circle-fill' }} me-1"></i>{{ $deviceError['message'] }}
                                                                    </span>
                                                                </div>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>

                                                @if(($group['requires_base_scan'] ?? false) && !($group['has_base_scan'] ?? false))
                                                <div class="mt-2">
                                                    <div class="alert alert-info py-2 px-3 mb-0" style="font-size: 0.875rem;">
                                                        <i class="bi bi-info-circle me-1"></i>
                                                        <small>Si consiglia di eseguire anche una <strong>scansione della pagina base</strong> (senza azione) per un'analisi completa.</small>
                                                    </div>
                                                </div>
                                                @endif

                                            </div>

                                            <div class="d-flex flex-column align-items-end">
                                                <!-- Data scansione e differenza giorni -->
                                                @if(isset($group['date_display']) || (isset($group['show_day_difference']) && $group['show_day_difference']))
                                                    <div class="scan-date-info mb-2 text-end">
                                                        <span class="badge rounded-pill bg-secondary text-white d-inline-flex align-items-center" style="font-weight: bold; text-transform: uppercase; font-size: 0.7rem; padding: 0.3em;" title="Informazioni temporali scansione">
                                                            @if($group['selected_date_mode'] === 'current')
                                                                <!-- Modalità "current": differenza, data -->
                                                                @if($group['show_day_difference'] && $group['day_difference'] !== 0)
                                                                    <span class="rounded-circle bg-white text-secondary d-inline-flex align-items-center justify-content-center" style="width: 18px; height: 18px; font-size: 0.65rem; font-weight: bold;">{{ $group['day_difference'] > 0 ? '+' : '' }}{{ $group['day_difference'] }}</span>
                                                                @endif
                                                                @if($group['date_display'])
                                                                    <span style="padding: 0 4px; display: block;">{{ $group['date_display'] }}</span>
                                                                @endif
                                                            @else
                                                                <!-- Modalità data specifica: differenza -->
                                                                @if($group['show_day_difference'] && $group['day_difference'] !== 0)
                                                                    <span class="rounded-circle bg-white text-secondary d-inline-flex align-items-center justify-content-center" style="width: 18px; height: 18px; font-size: 0.65rem; font-weight: bold;">{{ $group['day_difference'] > 0 ? '+' : '' }}{{ $group['day_difference'] }}</span>
                                                                @endif
                                                            @endif
                                                        </span>
                                                    </div>
                                                @endif
                                                
                                                <!-- Badge errori totali con stati multipli -->
                                                <div class="total-errors-badge">
                                                    <!-- Pending state -->
                                                    <span class="badge rounded-pill bg-secondary status-element pending">
                                                        <i class="bi bi-pause-circle"></i> In attesa
                                                    </span>
                                                    <!-- Queued state -->
                                                    <span class="badge rounded-pill bg-info status-element queued">
                                                        <i class="bi bi-clock-history"></i> In coda
                                                    </span>
                                                    <!-- Running state -->  
                                                    <span class="badge rounded-pill bg-warning text-dark status-element running pulse">
                                                        <i class="bi bi-arrow-repeat spin"></i> In corso
                                                    </span>
                                                    <!-- Completed state -->
                                                    <span class="status-element completed">
                                                        @if($group['total_errors'] > 0)
                                                            <span class="badge rounded-pill bg-danger total-error-count">{{ $group['total_errors'] }} Errors</span>
                                                        @else
                                                            <span class="badge rounded-pill bg-success">No Errors</span>
                                                        @endif
                                                    </span>
                                                    <!-- Failed state -->
                                                    <span class="badge rounded-pill bg-danger status-element failed">
                                                        <i class="bi bi-x-circle"></i> Fallito
                                                    </span>
                                                </div>
                                                
                                                <!-- Pulsanti azione (con logica migliorata) -->
                                                <div class="d-flex align-items-center mt-auto pt-3 action-buttons">
                                                    @if($showRepeatButton)
                                                    <button type="button" 
                                                        class="btn btn-outline-secondary btn-sm rounded-pill single-scan-btn" 
                                                        title="Ripeti scansione" 
                                                        onclick="startSingleScan('{{ $group['url'] }}', '{{ $group['action'] }}', '{{ $group['before_scan_action'] }}')">
                                                        <i class="bi bi-arrow-repeat me-1"></i>
                                                    </button>
                                                    &nbsp;
                                                    @endif
                                                    
                                                    <!-- Pulsante configurazione exclude_common -->
                                                    <div class="position-relative d-inline-block">
                                                        <button type="button" 
                                                            class="btn btn-outline-primary btn-sm rounded-pill config-scan-btn" 
                                                            title="Configurazione errori comuni"
                                                            data-url="{{ $group['url'] }}"
                                                            data-exclude-common="{{ $group['exclude_common_state'] ? 'true' : 'false' }}"
                                                            onclick="toggleConfigMenu(this)"
                                                            {{ in_array($overallStatus, ['pending', 'queued', 'running']) ? 'disabled' : '' }}>
                                                            <i class="bi bi-gear me-1"></i>
                                                        </button>
                                                        
                                                        <!-- Menu contestuale con stile balloon -->
                                                        <div class="config-menu position-absolute shadow-lg" 
                                                                style="display: none; top: 100%; right: 0; z-index: 1000; min-width: 240px; margin-top: 10px;">
                                                            <!-- Freccia del balloon -->
                                                            <div class="balloon-arrow"></div>
                                                            
                                                            <!-- Contenuto del menu -->
                                                            <div class="balloon-content bg-dark text-white rounded">
                                                                <div class="menu-item exclude-common-toggle"
                                                                    data-url="{{ $group['url'] }}"
                                                                    data-client-id="{{ $client->id }}"
                                                                    data-exclude-common="{{ $group['exclude_common_state'] ? 'false' : 'true' }}"
                                                                    onclick="toggleExcludeCommon(this)">
                                                                    @if($group['exclude_common_state'])
                                                                        <i class="bi bi-check-circle-fill"></i>
                                                                        Includi di nuovo URL negli errori comuni
                                                                    @else
                                                                        <i class="bi bi-x-circle"></i>
                                                                        Escludi URL dagli errori comuni
                                                                    @endif
                                                                </div>
                                                                <!-- Separatore per future voci del menu -->
                                                                <!-- <div class="menu-separator"></div> -->
                                                                <!-- <div class="menu-item">Altra opzione futura</div> -->
                                                            </div>
                                                        </div>
                                                    </div>
                                                    &nbsp;
                                                    
                                                    @if($showDeleteButton)
                                                    <form action="{{ route('clients.deleteScans', $client->id) }}" method="POST" class="delete-scan-form">
                                                        @csrf
                                                        @method('DELETE')
                                                        <input type="hidden" name="url" value="{{ $group['url'] }}">
                                                        <input type="hidden" name="action" value="{{ $group['action'] }}">
                                                        <input type="hidden" name="before_scan_action" value="{{ $group['before_scan_action'] }}">
                                                        <input type="hidden" name="date" value="{{ $selectedDate }}">
                                                        <button type="submit" class="btn btn-outline-danger btn-sm rounded-pill delete-scan-btn" 
                                                            title="Elimina URL (modalità intelligente)" 
                                                            onclick="return confirm('Sei sicuro di voler eliminare queste scansioni? La cancellazione intelligente proteggerà automaticamente i report futuri.');" 
                                                            {{ in_array($overallStatus, ['pending', 'queued', 'running']) ? 'disabled' : '' }}>
                                                            <i class="bi bi-trash me-1"></i>
                                                        </button>
                                                    </form>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @else
                    <div class="alert alert-info" id="noScansMessage">
                        No scans found for this client.
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
<script>
    // === VARIABILI GLOBALI ===
    let pendingScansCount = 0;
    let queuedScansCount = 0;
    let runningScansCount = 0;
    let completedScansCount = 0;
    let failedScansCount = 0;
    let totalScansCount = 0;
    let clientId = {{ $client->id }};
    let selectedDate = '{{ $selectedDate }}';
    let scanChart = null;
    let lastReportCheckTime = 0;
    let currentChartData = [];

    // Timer separati
    let scanMonitoringTimer = null;
    let reportsMonitoringTimer = null;
    let isScanMonitoring = false;
    let isReportMonitoring = false;
    
    // Flag per tracciare se la pagina è stata inizializzata
    let isPageInitialized = false;

    // === FUNZIONI PER GESTIONE UI DISABILITAZIONE ===

    function updateUIState() {
        const inProgressCount = pendingScansCount + runningScansCount;
        const hasScansInProgress = inProgressCount > 0;
        
        console.log(`🎛️ Aggiornamento UI state: ${hasScansInProgress ? 'Disabilita' : 'Abilita'} controlli (scansioni in corso: ${inProgressCount})`);
        
        // Gestisci pulsanti header
        updateHeaderButtons(hasScansInProgress);
        
        // Gestisci action buttons nelle card
        updateActionButtons(hasScansInProgress);
    }

    function updateHeaderButtons(disable) {
        const headerActionBtns = document.querySelectorAll('.header-action-btn');
        
        headerActionBtns.forEach(btn => {
            // Escludi il pulsante "Aggiungi URL" dal blocco
            if (btn.textContent.trim().includes('Aggiungi URL')) {
                return; // Salta questo pulsante
            }
            
            // Escludi anche il pulsante "Avvia Scansione" se il job di creazione è in corso
            if (btn.id === 'scheduleAllScansBtn' && scanCreationJobId) {
                return; // È già gestito dalla funzione di creazione scansioni
            }
            
            if (disable) {
                btn.disabled = true;
                btn.classList.add('disabled-during-scan');
            } else {
                btn.disabled = false;
                btn.classList.remove('disabled-during-scan');
            }
        });
    }

    function updateActionButtons(hide) {
        const actionButtons = document.querySelectorAll('.action-buttons');
        
        actionButtons.forEach(actionButtonContainer => {
            const card = actionButtonContainer.closest('[data-overall-status]');
            const status = card ? card.getAttribute('data-overall-status') : null;
            
            if (hide) {
                // Se ci sono scansioni globali in corso, nascondi tutto tranne le delete per scan completed
                if (status === 'completed') {
                    actionButtonContainer.style.display = 'flex';
                    // Ma disabilita comunque i pulsanti di repeat
                    updateCardActionButtonStates(actionButtonContainer, status, true);
                } else {
                    actionButtonContainer.style.display = 'none';
                }
            } else {
                // Mostra i pulsanti in base allo stato dello scan specifico
                actionButtonContainer.style.display = status === 'completed' ? 'flex' : 'none';
                updateCardActionButtonStates(actionButtonContainer, status, false);
            }
        });
        
        // Disabilita i pulsanti di single scan se presenti
        const singleScanBtns = document.querySelectorAll('.single-scan-btn');
        
        singleScanBtns.forEach(btn => {
            btn.disabled = hide;
        });
    }

    function updateCardActionButtonStates(actionButtonContainer, cardStatus, globalScansInProgress) {
        const card = actionButtonContainer.closest('[data-overall-status]');
        
        // Pulsante di eliminazione - disabilitato se questo scan specifico è pending/running
        const deleteBtn = actionButtonContainer.querySelector('.delete-scan-btn');
        const deleteForm = actionButtonContainer.querySelector('.delete-scan-form');
        
        if (deleteBtn) {
                                    const shouldDisableDelete = ['pending', 'queued', 'running'].includes(cardStatus);
            deleteBtn.disabled = shouldDisableDelete;
            
            if (deleteForm) {
                if (shouldDisableDelete) {
                    deleteForm.classList.add('disabled-during-scan');
                } else {
                    deleteForm.classList.remove('disabled-during-scan');
                }
            }
        }
        
        // Pulsante di repeat - disabilitato se ci sono scansioni globali in corso o se questo scan non è completed
        const repeatBtn = actionButtonContainer.querySelector('.single-scan-btn');
        
        if (repeatBtn) {
            const shouldDisableRepeat = globalScansInProgress || cardStatus !== 'completed';
            repeatBtn.disabled = shouldDisableRepeat;
        }
    }

    // === FUNZIONI PER IL GRAFICO ===

    function initializeChart(chartData) {
        if (chartData.length === 0) {
            const chartContainer = document.getElementById('scanChart').parentNode;
            chartContainer.innerHTML = '<div class="alert alert-info">Nessun dato disponibile per il grafico.</div>';
            currentChartData = [];
            return;
        }
        
        console.log('📊 Inizializzazione grafico...');
        
        // Salva i dati per il tooltip
        currentChartData = chartData;
        lastReportCheckTime = Math.floor(Date.now() / 1000);
        
        const labels = chartData.map(item => item.formattedDate);
        const scores = chartData.map(item => item.score);
        const highErrors = chartData.map(item => item.highErrors);
        const mediumErrors = chartData.map(item => item.mediumErrors);
        const lowErrors = chartData.map(item => item.lowErrors);
        
        const ctx = document.getElementById('scanChart').getContext('2d');
        scanChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [
                    {
                        label: 'Score',
                        data: scores,
                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 2,
                        tension: 0.3,
                        yAxisID: 'y',
                        pointRadius: 4,
                        pointHoverRadius: 6,
                    },
                    {
                        label: 'Errori Gravi',
                        data: highErrors,
                        backgroundColor: 'rgba(255, 99, 132, 0.5)',
                        borderColor: 'rgba(255, 99, 132, 1)',
                        borderWidth: 1,
                        yAxisID: 'y1',
                        type: 'bar',
                        stack: 'errori'
                    },
                    {
                        label: 'Errori Medi',
                        data: mediumErrors,
                        backgroundColor: 'rgba(255, 159, 64, 0.5)',
                        borderColor: 'rgba(255, 159, 64, 1)',
                        borderWidth: 1,
                        yAxisID: 'y1',
                        type: 'bar',
                        stack: 'errori'
                    },
                    {
                        label: 'Errori Minori',
                        data: lowErrors,
                        backgroundColor: 'rgba(255, 205, 86, 0.5)',
                        borderColor: 'rgba(255, 205, 86, 1)',
                        borderWidth: 1,
                        yAxisID: 'y1',
                        type: 'bar',
                        stack: 'errori'
                    }
                ]
            },
            options: {
                responsive: true,
                interaction: {
                    mode: 'index',
                    intersect: false,
                },
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: 'Data del report'
                        }
                    },
                    y: {
                        type: 'linear',
                        display: true,
                        position: 'left',
                        title: {
                            display: true,
                            text: 'Score'
                        },
                        min: 0,
                        max: 100,
                        grid: {
                            color: 'rgba(0, 0, 0, 0.05)'
                        }
                    },
                    y1: {
                        type: 'linear',
                        display: true,
                        position: 'right',
                        title: {
                            display: true,
                            text: 'Numero di errori'
                        },
                        grid: {
                            drawOnChartArea: false,
                        },
                        min: 0
                    }
                },
                plugins: {
                    tooltip: {
                        callbacks: {
                            afterTitle: function(context) {
                                const dataIndex = context[0].dataIndex;
                                const data = currentChartData[dataIndex];
                                if (!data) return [];
                                
                                return [
                                    `Stato al: ${data.formattedDate}`,
                                    `Livello WCAG: ${data.wcagLevel || 'N/A'}`,
                                    `Pagine analizzate: ${data.totalPages || 0}`,
                                    `Problemi totali: ${data.totalIssues || 0}`
                                ];
                            },
                        }
                    },
                    legend: {
                        display: true,
                        position: 'top',
                        labels: {
                            usePointStyle: true,
                            padding: 15
                        }
                    }
                }
            }
        });
        
        highlightSelectedDate(chartData);
    }

    function updateChart(chartData) {
        if (!scanChart || chartData.length === 0) return;
        
        console.log('📈 Aggiornamento grafico con nuovi dati...');
        
        // Aggiorna i dati globali per il tooltip
        currentChartData = chartData;
        
        // Aggiorna i dati del grafico
        scanChart.data.labels = chartData.map(item => item.formattedDate);
        scanChart.data.datasets[0].data = chartData.map(item => item.score);
        scanChart.data.datasets[1].data = chartData.map(item => item.highErrors);
        scanChart.data.datasets[2].data = chartData.map(item => item.mediumErrors);
        scanChart.data.datasets[3].data = chartData.map(item => item.lowErrors);
        
        // Aggiorna le opzioni del tooltip
        scanChart.options.plugins.tooltip.callbacks.afterTitle = function(context) {
            const dataIndex = context[0].dataIndex;
            const data = currentChartData[dataIndex];
            if (!data) return [];
            
            return [
                `Stato al: ${data.formattedDate}`,
                `Livello WCAG: ${data.wcagLevel || 'N/A'}`,
                `Pagine analizzate: ${data.totalPages || 0}`,
                `Problemi totali: ${data.totalIssues || 0}`
            ];
        };
        
        // Aggiorna il grafico
        scanChart.update();
        highlightSelectedDate(chartData);
        
        console.log('📊 Tooltip aggiornato con nuovi dati');
    }

    function highlightSelectedDate(chartData) {
        if (!scanChart) return;
        
        let selectedIndex = chartData.findIndex(item => item.date === selectedDate);
        
        if (selectedIndex >= 0) {
            const addSelectedDateLine = function() {
                const meta = scanChart.getDatasetMeta(0);
                if (!meta.data[selectedIndex]) return;
                
                const x = meta.data[selectedIndex].x;
                const ctx = scanChart.ctx;
                const chartArea = scanChart.chartArea;
                
                ctx.save();
                ctx.strokeStyle = 'rgba(46, 184, 92, 0.8)';
                ctx.lineWidth = 2;
                ctx.setLineDash([5, 3]);
                ctx.beginPath();
                ctx.moveTo(x, chartArea.top);
                ctx.lineTo(x, chartArea.bottom);
                ctx.stroke();
                
                const y = meta.data[selectedIndex].y;
                ctx.setLineDash([]);
                ctx.strokeStyle = 'rgba(46, 184, 92, 1)';
                ctx.fillStyle = 'rgba(46, 184, 92, 0.3)';
                ctx.lineWidth = 2;
                ctx.beginPath();
                ctx.arc(x, y, 8, 0, 2 * Math.PI);
                ctx.fill();
                ctx.stroke();
                
                ctx.fillStyle = 'rgba(46, 184, 92, 1)';
                ctx.font = 'bold 12px Arial';
                ctx.textAlign = 'center';
                ctx.fillText('Data selezionata', x, chartArea.top - 5);
                ctx.restore();
            };
            
            scanChart.options.plugins.afterDraw = addSelectedDateLine;
            scanChart.update();
        }
    }

    // === FUNZIONI PER AGGIORNAMENTO STATO CARD ===

    function updateCardStatus(cardElement, newStatus, errorCount = 0, uniqueErrors = []) {
        if (!cardElement) return;
        
        console.log(`🔄 Aggiornamento card a stato: ${newStatus}`);
        
        // Rimuovi tutte le classi di stato esistenti
                                cardElement.classList.remove('status-pending', 'status-queued', 'status-running', 'status-completed', 'status-failed');
        
        // Aggiungi la nuova classe di stato
        cardElement.classList.add(`status-${newStatus}`);
        
        // Aggiorna data attribute
        cardElement.setAttribute('data-overall-status', newStatus);
        
        // Aggiorna errori nei device
        updateDeviceErrors(cardElement, uniqueErrors, newStatus);
        
        // Gestisci i diversi stati
        if (newStatus === 'completed') {
            updateCompletedBadge(cardElement, errorCount);
            // Assicurati che tutti i device mostrino i systems se completed
            const deviceElements = cardElement.querySelectorAll('[data-device]');
            deviceElements.forEach(device => {
                const systemsContainer = device.querySelector('.systems-container');
                const errorContainer = device.querySelector('.device-error-container');
                if (systemsContainer) {
                    systemsContainer.classList.remove('d-none');
                    if (!systemsContainer.classList.contains('d-flex')) {
                        systemsContainer.classList.add('d-flex');
                    }
                }
                if (errorContainer) errorContainer.classList.add('d-none');
            });
        }
        
        // Aggiorna lo stato dei pulsanti azione per questa card specifica
        const actionButtonsContainer = cardElement.querySelector('.action-buttons');
        if (actionButtonsContainer) {
            const inProgressCount = pendingScansCount + runningScansCount;
            const globalScansInProgress = inProgressCount > 0;
            
            // Mostra/nascondi in base allo stato
            actionButtonsContainer.style.display = newStatus === 'completed' ? 'flex' : 'none';
            
            // Aggiorna stato dei singoli pulsanti
            updateCardActionButtonStates(actionButtonsContainer, newStatus, globalScansInProgress);
        }
    }

    function updateCompletedBadge(cardElement, errorCount) {
        // Cerca il container del badge errori totali nella struttura corretta
        const totalErrorsBadgeContainer = cardElement.querySelector('.total-errors-badge');
        if (!totalErrorsBadgeContainer) {
            console.warn('⚠️ Container total-errors-badge non trovato');
            return;
        }
        
        // Cerca l'elemento completed specifico
        const completedElement = totalErrorsBadgeContainer.querySelector('.status-element.completed');
        if (!completedElement) {
            console.warn('⚠️ Elemento status-element.completed non trovato');
            return;
        }
        
        // Rimuovi tutto il contenuto esistente
        completedElement.innerHTML = '';
        
        // Crea il nuovo badge
        const badge = document.createElement('span');
        badge.className = errorCount > 0 ? 'badge rounded-pill bg-danger total-error-count' : 'badge rounded-pill bg-success';
        badge.textContent = errorCount > 0 ? `${errorCount} Errors` : 'No Errors';
        
        // Aggiungi il badge al container
        completedElement.appendChild(badge);
        
        console.log(`✅ Badge errori aggiornato: ${errorCount} errori`);
    }

    function updateCardDateInfo(cardElement, groupData) {
        if (!cardElement || !groupData) return;
        
        const dateInfoContainer = cardElement.querySelector('.scan-date-info');
        if (!dateInfoContainer) return;
        
        // Check if we should show date info
        const shouldShow = groupData.date_display || (groupData.show_day_difference && groupData.day_difference !== 0);
        
        if (!shouldShow) {
            dateInfoContainer.style.display = 'none';
            return;
        }
        
        // Clear existing content and create badge
        dateInfoContainer.innerHTML = '';
        
        const badge = document.createElement('span');
        badge.className = 'badge rounded-pill bg-secondary text-white d-inline-flex align-items-center';
        badge.style.fontWeight = 'bold';
        badge.style.textTransform = 'uppercase';
        badge.style.fontSize = '0.7rem';
        badge.style.padding = '0.3em';
        badge.title = 'Informazioni temporali scansione';
        
        if (groupData.selected_date_mode === 'current') {
            // Current mode: show difference first, then date
            if (groupData.show_day_difference && groupData.day_difference !== 0) {
                const diffCircle = document.createElement('span');
                diffCircle.className = 'rounded-circle bg-white text-secondary d-inline-flex align-items-center justify-content-center';
                diffCircle.style.width = '18px';
                diffCircle.style.height = '18px';
                diffCircle.style.fontSize = '0.65rem';
                diffCircle.style.fontWeight = 'bold';
                diffCircle.textContent = (groupData.day_difference > 0 ? '+' : '') + groupData.day_difference;
                badge.appendChild(diffCircle);
            }
            
            if (groupData.date_display) {
                const dateSpan = document.createElement('span');
                dateSpan.style.padding = '0 4px';
                dateSpan.style.display = 'block';
                dateSpan.textContent = groupData.date_display;
                badge.appendChild(dateSpan);
            }
        } else {
            // Specific date mode: show only difference if not zero
            if (groupData.show_day_difference && groupData.day_difference !== 0) {
                const diffCircle = document.createElement('span');
                diffCircle.className = 'rounded-circle bg-white text-secondary d-inline-flex align-items-center justify-content-center';
                diffCircle.style.width = '18px';
                diffCircle.style.height = '18px';
                diffCircle.style.fontSize = '0.65rem';
                diffCircle.style.fontWeight = 'bold';
                diffCircle.textContent = (groupData.day_difference > 0 ? '+' : '') + groupData.day_difference;
                badge.appendChild(diffCircle);
            }
        }
        
        dateInfoContainer.appendChild(badge);
        dateInfoContainer.style.display = 'block';
    }

    function updateSystemStatus(systemElement, newStatus, errorCount = 0) {
        if (!systemElement) return;
        
        // Rimuovi tutte le classi di stato esistenti
                                systemElement.classList.remove('status-pending', 'status-queued', 'status-running', 'status-completed', 'status-failed');
        
        // Aggiungi la nuova classe di stato
        systemElement.classList.add(`status-${newStatus}`);
        
        // Aggiorna data attribute
        systemElement.setAttribute('data-system-status', newStatus);
        
        // Aggiorna il conteggio errori se è completato
        if (newStatus === 'completed') {
            const completedElement = systemElement.querySelector('.status-element.completed');
            if (completedElement) {
                // Cerca o crea l'elemento per il conteggio errori
                let errorElement = completedElement.querySelector('.system-error-count');
                if (!errorElement) {
                    errorElement = document.createElement('span');
                    errorElement.className = 'system-error-count';
                    completedElement.innerHTML = '';
                    completedElement.appendChild(errorElement);
                }
                
                // Aggiorna il conteggio e lo stile
                errorElement.textContent = errorCount;
                errorElement.className = errorCount > 0 ? 'bg-danger system-error-count' : 'bg-success system-error-count';
            }
        }
    }

    function updateDeviceErrors(cardElement, uniqueErrors, overallStatus) {
        if (!cardElement) return;
        
        console.log(`🔄 Aggiornamento errori nei device per stato: ${overallStatus}`);
        
        // Rimuovi sempre la sezione errori globale esistente
        const existingErrorSection = cardElement.querySelector('.error-section');
        if (existingErrorSection) {
            existingErrorSection.remove();
        }
        
        // Per ogni device, aggiorna la visualizzazione
        const deviceElements = cardElement.querySelectorAll('[data-device]');
        
        deviceElements.forEach(deviceElement => {
            const deviceName = deviceElement.getAttribute('data-device');
            const deviceStatus = deviceElement.getAttribute('data-device-status');
            
            // Trova il primo errore per questo device (ne mostriamo sempre solo uno)
            const deviceError = uniqueErrors.find(error => 
                error.devices && error.devices.includes(deviceName)
            );
            
            // Aggiorna data attribute
            deviceElement.setAttribute('data-has-errors', deviceError ? 'true' : 'false');
            
            // Trova i container
            const systemsContainer = deviceElement.querySelector('.systems-container');
            let errorContainer = deviceElement.querySelector('.device-error-container');
            
            // Se non esiste il container errori, crealo
            if (!errorContainer) {
                errorContainer = document.createElement('div');
                errorContainer.className = 'device-error-container d-none';
                deviceElement.appendChild(errorContainer);
            }
            
            // Logica di visualizzazione semplificata
                                    const shouldShowError = deviceError && ['failed', 'pending', 'queued'].includes(deviceStatus);
            
            if (shouldShowError) {
                // Nascondi systems, mostra errori
                if (systemsContainer) {
                    systemsContainer.classList.add('d-none');
                    // Rimuovi d-flex per evitare conflitti
                    systemsContainer.classList.remove('d-flex');
                }
                errorContainer.classList.remove('d-none');
                
                // Aggiorna contenuto errore
                updateDeviceErrorContent(errorContainer, deviceError, deviceStatus);
            } else {
                // Mostra systems, nascondi errori
                if (systemsContainer) {
                    systemsContainer.classList.remove('d-none');
                    // Ripristina d-flex
                    if (!systemsContainer.classList.contains('d-flex')) {
                        systemsContainer.classList.add('d-flex');
                    }
                }
                errorContainer.classList.add('d-none');
            }
        });
    }

    function updateDeviceErrorContent(errorContainer, deviceError, deviceStatus) {
        errorContainer.innerHTML = '';
        
        const flexContainer = document.createElement('div');
        flexContainer.className = 'd-flex align-items-center';
        
        const badge = document.createElement('span');
        badge.className = `badge ${deviceStatus === 'failed' ? 'bg-danger' : 'bg-warning'} text-white`;
        
        const icon = document.createElement('i');
        icon.className = `bi bi-${deviceStatus === 'failed' ? 'exclamation-triangle-fill' : 'exclamation-circle-fill'} me-1`;
        badge.appendChild(icon);
        
        // Mostra sempre solo un errore
        badge.appendChild(document.createTextNode(deviceError.message));
        
        flexContainer.appendChild(badge);
        errorContainer.appendChild(flexContainer);
    }

    function updateDeviceStatus(deviceElement, newStatus) {
        if (!deviceElement) return;
        
        // Rimuovi tutte le classi di stato esistenti
                                deviceElement.classList.remove('status-pending', 'status-queued', 'status-running', 'status-completed', 'status-failed');
        
        // Aggiungi la nuova classe di stato
        deviceElement.classList.add(`status-${newStatus}`);
        
        // Aggiorna data attribute
        deviceElement.setAttribute('data-device-status', newStatus);
    }

    // === FUNZIONI PER AGGIORNAMENTO BULK ===

    function updateAllCards(groupedScans, isLatestDate) {
        if (!groupedScans || groupedScans.length === 0) {
            console.log('📋 Nessuna scansione da aggiornare');
            return;
        }

        console.log(`🔄 Aggiornamento di ${groupedScans.length} gruppi di scansioni`);

        const inProgressCount = pendingScansCount + runningScansCount;
        const globalScansInProgress = inProgressCount > 0;

        groupedScans.forEach(groupData => {
            const cardElement = document.getElementById('scan-card-' + groupData.key);
            if (cardElement) {
                // Aggiorna stato generale della card con errori nei device
                updateCardStatus(
                    cardElement, 
                    groupData.overall_status, 
                    groupData.total_errors,
                    groupData.unique_errors || []
                );
                
                // Aggiorna informazioni data scansione
                updateCardDateInfo(cardElement, groupData);
                
                // Aggiorna i singoli dispositivi e sistemi
                Object.entries(groupData.devices || {}).forEach(([device, deviceData]) => {
                    const deviceElement = cardElement.querySelector(`[data-device="${device}"]`);
                    if (deviceElement) {
                        updateDeviceStatus(deviceElement, deviceData.device_status);
                        
                        // Trova il primo errore per questo device
                        const deviceError = (groupData.unique_errors || []).find(error => 
                            error.devices && error.devices.includes(device)
                        );
                        
                        // Aggiorna visualizzazione errori/systems per questo device
                        const shouldShowError = deviceError && 
                            ['failed', 'pending', 'queued'].includes(deviceData.device_status);
                        
                        const systemsContainer = deviceElement.querySelector('.systems-container');
                        const errorContainer = deviceElement.querySelector('.device-error-container');
                        
                        if (shouldShowError && errorContainer) {
                            if (systemsContainer) {
                                systemsContainer.classList.add('d-none');
                                systemsContainer.classList.remove('d-flex');
                            }
                            errorContainer.classList.remove('d-none');
                            updateDeviceErrorContent(errorContainer, deviceError, deviceData.device_status);
                        } else {
                            if (systemsContainer) {
                                systemsContainer.classList.remove('d-none');
                                if (!systemsContainer.classList.contains('d-flex')) {
                                    systemsContainer.classList.add('d-flex');
                                }
                            }
                            if (errorContainer) errorContainer.classList.add('d-none');
                        }
                        
                        // Aggiorna data-has-errors
                        deviceElement.setAttribute('data-has-errors', deviceError ? 'true' : 'false');
                    }
                    
                    // Aggiorna systems (se visibili)
                    Object.entries(deviceData.systems || {}).forEach(([system, systemData]) => {
                        const systemElement = cardElement.querySelector(`[data-system="${system}"][data-scan-id="${systemData.id}"]`);
                        if (systemElement) {
                            updateSystemStatus(systemElement, systemData.status, systemData.errors);
                        }
                    });
                });
                
                // Aggiorna stato specifico dei pulsanti azione per questa card
                const actionButtonsContainer = cardElement.querySelector('.action-buttons');
                if (actionButtonsContainer) {
                    updateCardActionButtonStates(actionButtonsContainer, groupData.overall_status, globalScansInProgress);
                }
            } else {
                console.warn(`⚠️ Card non trovata per chiave: ${groupData.key}`);
            }
        });
    }

    // === PROGRESS BAR ===

    function updateProgressBar() {
        const progressBar = document.getElementById('scanProgressBar');
        const progressPercentage = document.getElementById('scanProgressPercentage');
        const completedScansElement = document.getElementById('completedScans');
        const totalScansElement = document.getElementById('totalScans');
        
        const percentage = totalScansCount > 0 ? Math.round((completedScansCount / totalScansCount) * 100) : 0;
        
        // Aggiorna progress bar
        if (progressBar) {
            progressBar.style.width = percentage + '%';
            progressBar.setAttribute('aria-valuenow', percentage);
            
            // Cambia colore in base allo stato
            if (failedScansCount > 0) {
                progressBar.className = 'progress-bar progress-bar-striped bg-danger';
            } else if (runningScansCount > 0) {
                progressBar.className = 'progress-bar progress-bar-striped progress-bar-animated bg-warning';
            } else if (percentage === 100) {
                progressBar.className = 'progress-bar bg-success';
            } else {
                progressBar.className = 'progress-bar progress-bar-striped progress-bar-animated';
            }
        }
        
        // Aggiorna testi
        if (progressPercentage) progressPercentage.textContent = percentage + '%';
        if (completedScansElement) completedScansElement.textContent = completedScansCount;
        if (totalScansElement) totalScansElement.textContent = totalScansCount;
    }

    // === TIMER 1: MONITORAGGIO SCANSIONI ===

    function startScanMonitoring() {
        if (isScanMonitoring || scanMonitoringTimer !== null) return;
        
        console.log('🔄 Avvio monitoraggio scansioni (ogni 5 secondi)...');
        isScanMonitoring = true;
        scanMonitoringTimer = setInterval(checkScansStatus, 5000);
    }

    function stopScanMonitoring() {
        if (!isScanMonitoring || scanMonitoringTimer === null) return;
        
        console.log('⏹️ Fermo monitoraggio scansioni');
        isScanMonitoring = false;
        clearInterval(scanMonitoringTimer);
        scanMonitoringTimer = null;
    }

    function checkScansStatus() {
        const params = new URLSearchParams({ date: selectedDate });
        
        fetch(`/clients/${clientId}/check-empty-scans?${params}`)
            .then(response => response.json())
            .then(data => {
                // Aggiorna contatori globali
                pendingScansCount = data.emptyScansCount - (data.runningScansCount || 0);
                runningScansCount = data.runningScansCount || 0;
                failedScansCount = data.failedScansCount || 0;
                completedScansCount = data.totalScansCount - data.emptyScansCount;
                totalScansCount = data.totalScansCount;
                
                const inProgressCount = pendingScansCount + runningScansCount;
                
                console.log(`📊 Scansioni: ${completedScansCount}/${totalScansCount} completate, ${runningScansCount} in corso, ${pendingScansCount} in attesa, ${failedScansCount} fallite`);
                
                // Aggiorna le card
                updateAllCards(data.groupedScans, data.isLatestDate);
                
                // Aggiorna stato UI
                updateUIState();
                
                const progressContainer = document.getElementById('scanProgressContainer');
                
                if (inProgressCount > 0 && totalScansCount > 0) {
                    // Ci sono ancora scansioni in corso
                    if (progressContainer) progressContainer.classList.remove('d-none');
                    updateProgressBar();
                    
                } else if (inProgressCount === 0 && totalScansCount > 0) {
                    // Tutte le scansioni completate
                    console.log('✅ Tutte le scansioni completate!');
                    
                    if (progressContainer && !progressContainer.classList.contains('d-none')) {
                        updateProgressBar(); // Aggiorna una volta finale
                        
                        // Nascondi il progress bar dopo un breve delay
                        setTimeout(() => {
                            if (progressContainer) progressContainer.classList.add('d-none');
                        }, 2000);
                    }
                    
                    stopScanMonitoring();
                    updateAllCards(data.groupedScans, data.isLatestDate);
                    updateUIState(); // Riabilita i controlli
                    setTimeout(startReportMonitoring, 3000);
                    
                } else {
                    // Nessuna scansione
                    if (progressContainer) progressContainer.classList.add('d-none');
                    stopScanMonitoring();
                    updateUIState(); // Riabilita i controlli
                    setTimeout(startReportMonitoring, 1000);
                }
            })
            .catch(error => {
                console.error('❌ Errore durante il controllo degli scan:', error);
                stopScanMonitoring();
                updateUIState(); // Riabilita i controlli in caso di errore
                setTimeout(startReportMonitoring, 5000);
            });
    }

    // === TIMER 2: MONITORAGGIO REPORT ===

    function startReportMonitoring() {
        if (isReportMonitoring || reportsMonitoringTimer !== null) return;
        
        console.log('📈 Avvio monitoraggio report (ogni 60 secondi)...');
        isReportMonitoring = true;
        reportsMonitoringTimer = setInterval(checkReportsUpdate, 60000);
        
        // Primo check dopo 10 secondi per dare tempo ai report di generarsi
        setTimeout(checkReportsUpdate, 10000);
    }

    function stopReportMonitoring() {
        if (!isReportMonitoring || reportsMonitoringTimer === null) return;
        
        console.log('⏹️ Fermo monitoraggio report');
        isReportMonitoring = false;
        clearInterval(reportsMonitoringTimer);
        reportsMonitoringTimer = null;
    }

    function checkReportsUpdate() {
        const params = new URLSearchParams({
            last_check: lastReportCheckTime
        });
        
        fetch(`/clients/${clientId}/check-reports-update?${params}`)
            .then(response => response.json())
            .then(data => {
                if (data.reportsUpdateNeeded && data.chartData && data.chartData.length > 0) {
                    console.log('📈 Rilevati nuovi/modificati report, aggiorno il grafico...');
                    updateChart(data.chartData);
                } else {
                    console.log('📊 Controllo report: nessun aggiornamento necessario');
                }
                
                // Aggiorna timestamp solo se la chiamata è andata a buon fine
                if (data.checkTime) {
                    lastReportCheckTime = data.checkTime;
                }
            })
            .catch(error => {
                console.error('❌ Errore durante il controllo dei report:', error);
            });
    }

    // === INIZIALIZZAZIONE ===

    function calculateInitialCounts() {
        // Usa i conteggi reali dal PHP invece di calcolarli dalle card
        @php
            $defaultCounts = [
                'pending' => 0,
                'queued' => 0,
                'running' => 0, 
                'completed' => 0,
                'failed' => 0,
                'total' => 0
            ];
        @endphp
        const initialCounts = @json($initialScanCounts ?? $defaultCounts);
        
        console.log('📊 Conteggi iniziali dal PHP:', initialCounts);
        
        return {
            pending: initialCounts.pending || 0,
            queued: initialCounts.queued || 0,
            running: initialCounts.running || 0,
            completed: initialCounts.completed || 0,
            failed: initialCounts.failed || 0,
            total: initialCounts.total || 0
        };
    }

    function initialCheck() {
        console.log('🚀 Controllo iniziale stato scansioni...');
        
        const counts = calculateInitialCounts();
        
        pendingScansCount = counts.pending;
        queuedScansCount = counts.queued;
        runningScansCount = counts.running;
        completedScansCount = counts.completed;
        failedScansCount = counts.failed;
        totalScansCount = counts.total;
        
        const inProgressCount = pendingScansCount + queuedScansCount + runningScansCount;
        
        console.log(`📋 Stato iniziale: ${completedScansCount}/${totalScansCount} completate, ${runningScansCount} in corso, ${queuedScansCount} in coda, ${pendingScansCount} in attesa, ${failedScansCount} fallite`);
        
        // Aggiorna immediatamente lo stato UI
        updateUIState();
        
        if (inProgressCount > 0 && totalScansCount > 0) {
            console.log('âš¡ Scansioni in corso rilevate, avvio monitoraggio scansioni...');
            
            const progressContainer = document.getElementById('scanProgressContainer');
            if (progressContainer) progressContainer.classList.remove('d-none');
            updateProgressBar();
            
            startScanMonitoring();
            
        } else {
            console.log('✨ Nessuna scansione in corso, avvio monitoraggio report...');
            const progressContainer = document.getElementById('scanProgressContainer');
            if (progressContainer) progressContainer.classList.add('d-none');
            
            startReportMonitoring();
        }
    }

    /**
     * Funzione per il controllo quando si torna sul tab
     * Fa una chiamata immediata per aggiornare i dati senza resettare ai valori PHP
     */
    function resumeAfterTabReturn() {
        console.log('🔄 Ripresa attività dopo ritorno su tab, controllo stato corrente...');
        
        // Se non abbiamo dati di partenza validi, usa quelli del PHP
        if (totalScansCount === 0) {
            const counts = calculateInitialCounts();
            pendingScansCount = counts.pending;
            queuedScansCount = counts.queued;
            runningScansCount = counts.running;
            completedScansCount = counts.completed;
            failedScansCount = counts.failed;
            totalScansCount = counts.total;
        }
        
        const inProgressCount = pendingScansCount + queuedScansCount + runningScansCount;
        
        // Aggiorna immediatamente l'UI con i dati che abbiamo
        updateUIState();
        
        if (inProgressCount > 0 && totalScansCount > 0) {
            console.log('âš¡ Scansioni in corso (dati precedenti), avvio monitoraggio e check immediato...');
            
            const progressContainer = document.getElementById('scanProgressContainer');
            if (progressContainer) progressContainer.classList.remove('d-none');
            updateProgressBar();
            
            // Avvia monitoraggio e fai un check immediato
            startScanMonitoring();
            // Check immediato per aggiornare subito i dati
            setTimeout(checkScansStatus, 100);
            
        } else {
            console.log('✨ Nessuna scansione in corso (dati precedenti), controllo immediato...');
            
            // Fai comunque un check per essere sicuri dello stato attuale
            const params = new URLSearchParams({ date: selectedDate });
            
            fetch(`/clients/${clientId}/check-empty-scans?${params}`)
                .then(response => response.json())
                .then(data => {
                    // Aggiorna contatori con i dati reali
                    pendingScansCount = data.emptyScansCount - (data.runningScansCount || 0);
                    runningScansCount = data.runningScansCount || 0;
                    failedScansCount = data.failedScansCount || 0;
                    completedScansCount = data.totalScansCount - data.emptyScansCount;
                    totalScansCount = data.totalScansCount;
                    
                    const realInProgressCount = pendingScansCount + runningScansCount;
                    
                    console.log(`📊 Stato reale al ritorno: ${completedScansCount}/${totalScansCount} completate, ${runningScansCount} in corso, ${pendingScansCount} in attesa, ${failedScansCount} fallite`);
                    
                    updateAllCards(data.groupedScans, data.isLatestDate);
                    updateUIState();
                    
                    const progressContainer = document.getElementById('scanProgressContainer');
                    
                    if (realInProgressCount > 0 && totalScansCount > 0) {
                        // Scansioni in corso trovate dopo il check
                        console.log('âš¡ Rilevate scansioni in corso dopo check, avvio monitoraggio...');
                        if (progressContainer) progressContainer.classList.remove('d-none');
                        updateProgressBar();
                        startScanMonitoring();
                    } else {
                        // Nessuna scansione in corso
                        if (progressContainer) progressContainer.classList.add('d-none');
                        startReportMonitoring();
                    }
                })
                .catch(error => {
                    console.error('❌ Errore durante check al ritorno su tab:', error);
                    // Fallback: usa initialCheck normale
                    startReportMonitoring();
                });
        }
    }

    // === UTILITY FUNCTIONS ===

    function toggleSection(sectionId) {        
        document.querySelectorAll('.section-collapsible').forEach(section => {
            if (section.id !== sectionId) {
                section.classList.remove('show');
            }
        });
        
        const section = document.getElementById(sectionId);
        if (section) {
            section.classList.toggle('show');
        }
    }

    function refreshPage() {
        window.location.reload();
    }

    // === EVENT LISTENERS ===

    document.addEventListener('DOMContentLoaded', function() {
        console.log('🎯 Inizializzazione pagina...');
        
        // Inizializza tooltip per le icone azioni automatiche
        const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
        
        // Inizializza grafico
        const chartData = @json($chartData);
        initializeChart(chartData);
        
        // Avvia controllo iniziale
        initialCheck();
        isPageInitialized = true;
        
        // Event listener per visibilità pagina (pausa monitoraggio quando tab non visibile)
        document.addEventListener('visibilitychange', function() {
            if (document.hidden) {
                console.log('👁️ Tab nascosto, pauso monitoraggio');
                stopScanMonitoring();
                stopReportMonitoring();
            } else {
                console.log('👁️ Tab visibile, riprendo monitoraggio');
                
                if (!isPageInitialized) {
                    // Prima volta che la pagina diventa visibile, usa initialCheck normale
                    console.log('🚀 Prima inizializzazione dopo visibilitychange');
                    initialCheck();
                    isPageInitialized = true;
                } else {
                    // Ritorni successivi sul tab, preserva lo stato corrente
                    console.log('🔄 Ritorno su tab già inizializzato');
                    resumeAfterTabReturn();
                }
            }
        });
        
        // Cleanup quando si lascia la pagina
        window.addEventListener('beforeunload', function() {
            stopScanMonitoring();
            stopReportMonitoring();
        });
        
        // Form submit prevention removed - now using AJAX for scan creation
        
        // Single scan forms removed - now using AJAX buttons
        
        // Il form addUrlForm NON viene bloccato durante le scansioni in corso
        // Questo permette di aggiungere nuove URL anche mentre altre scansioni sono attive
        
        // Previeni invio form delete scan se lo scan specifico è pending/running
        document.querySelectorAll('.delete-scan-form').forEach(form => {
            form.addEventListener('submit', function(e) {
                const card = form.closest('[data-overall-status]');
                const cardStatus = card ? card.getAttribute('data-overall-status') : null;
                
                                        if (['pending', 'queued', 'running'].includes(cardStatus)) {
                    e.preventDefault();
                    console.log('⚠️ Invio form delete scan bloccato: scan in pending/running');
                    return false;
                }
            });
        });

        // === GESTIONE MENU CONFIGURAZIONE EXCLUDE_COMMON ===
        
        // Chiudi tutti i menu quando si clicca fuori
        document.addEventListener('click', function(e) {
            if (!e.target.closest('.position-relative')) {
                document.querySelectorAll('.config-menu').forEach(menu => {
                    menu.style.display = 'none';
                });
            }
        });
    });

    // Funzione per mostrare/nascondere il menu configurazione
    function toggleConfigMenu(button) {
        const menu = button.nextElementSibling;
        const isVisible = menu.style.display === 'block';
        
        // Chiudi tutti gli altri menu
        document.querySelectorAll('.config-menu').forEach(m => {
            if (m !== menu) m.style.display = 'none';
        });
        
        // Toggle del menu corrente
        menu.style.display = isVisible ? 'none' : 'block';
    }

    // Funzione per gestire il toggle exclude_common
    function toggleExcludeCommon(element) {
        const url = element.getAttribute('data-url');
        const clientId = element.getAttribute('data-client-id');
        const excludeCommon = element.getAttribute('data-exclude-common') === 'true';
        
        // Disabilita l'elemento durante la richiesta
        element.style.pointerEvents = 'none';
        element.style.opacity = '0.6';
        const originalContent = element.innerHTML;
        element.innerHTML = '<i class="bi bi-hourglass-split me-2"></i>Aggiornamento...';
        
        // Prepara i dati per la richiesta
        const formData = new FormData();
        formData.append('url', url);
        formData.append('exclude_common', excludeCommon);
        formData.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
        
        // Effettua la richiesta AJAX
        fetch(`/clients/${clientId}/toggle-exclude-common`, {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Mostra messaggio di successo
                showNotification(data.message, 'success');
                
                // Aggiorna l'interfaccia
                updateExcludeCommonUI(url, data.new_state);
                
                // Chiudi il menu
                document.querySelectorAll('.config-menu').forEach(menu => {
                    menu.style.display = 'none';
                });
            } else {
                showNotification('Errore durante l\'aggiornamento: ' + (data.message || 'Errore sconosciuto'), 'error');
            }
        })
        .catch(error => {
            console.error('Errore:', error);
            showNotification('Errore di connessione durante l\'aggiornamento', 'error');
        })
        .finally(() => {
            // Riabilita l'elemento
            element.style.pointerEvents = '';
            element.style.opacity = '';
            element.innerHTML = originalContent;
        });
    }

    // Funzione per aggiornare l'UI dopo il toggle
    function updateExcludeCommonUI(url, newState) {
        // Trova tutti i pulsanti relativi a questa URL
        document.querySelectorAll(`[data-url="${url}"]`).forEach(element => {
            if (element.classList.contains('config-scan-btn')) {
                // Aggiorna il data attribute del pulsante configurazione
                element.setAttribute('data-exclude-common', newState ? 'true' : 'false');
                
                // Aggiorna l'indicatore di esclusione nella card
                const card = element.closest('.col');
                const cardHeader = card.querySelector('.card-header .d-flex.flex-column');
                
                // Rimuovi l'indicatore esistente se presente
                const existingIndicator = cardHeader.querySelector('small.text-warning');
                if (existingIndicator && existingIndicator.textContent.includes('URL esclusa dal contesto')) {
                    existingIndicator.closest('div').remove();
                }
                
                // Aggiungi l'indicatore se la URL è ora esclusa
                if (newState) {
                    const indicator = document.createElement('div');
                    indicator.className = 'mt-1 d-flex align-items-center';
                    indicator.innerHTML = '<i class="bi bi-x-circle text-warning me-1"></i><small class="text-warning fw-medium">&nbsp;URL esclusa dal contesto rilevante per il calcolo degli errori comuni</small>';
                    
                    // Inserisci dopo il titolo e prima della URL
                    const titleDiv = cardHeader.children[0]; // Il div con il titolo
                    titleDiv.insertAdjacentElement('afterend', indicator);
                }
                
            } else if (element.classList.contains('exclude-common-toggle')) {
                // Aggiorna il pulsante toggle nel menu
                element.setAttribute('data-exclude-common', newState ? 'false' : 'true');
                
                // Aggiorna il contenuto del pulsante
                if (newState) {
                    element.innerHTML = '<i class="bi bi-check-circle-fill"></i>Includi di nuovo URL negli errori comuni';
                } else {
                    element.innerHTML = '<i class="bi bi-x-circle"></i>Escludi URL dagli errori comuni';
                }
            }
        });
    }

    // Funzione per mostrare notifiche
    function showNotification(message, type = 'info') {
        // Crea o trova il container delle notifiche
        let container = document.querySelector('#notification-container');
        if (!container) {
            container = document.createElement('div');
            container.id = 'notification-container';
            container.style.position = 'fixed';
            container.style.top = '20px';
            container.style.right = '20px';
            container.style.zIndex = '9999';
            document.body.appendChild(container);
        }
        
        // Crea la notifica
        const notification = document.createElement('div');
        notification.className = `alert alert-${type === 'success' ? 'success' : type === 'error' ? 'danger' : 'info'} alert-dismissible fade show`;
        notification.style.minWidth = '300px';
        notification.innerHTML = `${message}`;
        
        container.appendChild(notification);
        
        // Rimuovi automaticamente dopo 5 secondi
        setTimeout(() => {
            if (notification.parentNode) {
                notification.remove();
            }
        }, 5000);
    }

    // === FUNZIONI PER CREAZIONE SCANSIONI ASINCRONE ===

    let scanCreationJobId = null;
    let scanCreationMonitoringTimer = null;

    function startScanCreation() {
        const button = document.getElementById('scheduleAllScansBtn');
        const progressContainer = document.getElementById('scanCreationProgress');
        
        // Disabilita il pulsante e mostra progress (senza nascondere il pulsante)
        button.disabled = true;
        progressContainer.classList.remove('d-none');
        
        console.log('🚀 Avvio creazione scansioni...');
        
        // Chiama l'endpoint per avviare il job
        fetch(`/clients/${clientId}/schedule-all-scans`, {
            method: 'POST',
            credentials: 'same-origin',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                scanCreationJobId = data.job_id;
                console.log('✅ Job di creazione scansioni avviato', data);
                showNotification(data.message, 'success');
                
                // Avvia il monitoraggio del progresso con un piccolo delay
                // per dare tempo al job di essere processato
                setTimeout(() => {
                    startScanCreationMonitoring();
                }, 100);
            } else {
                console.error('❌ Errore nell\'avvio del job:', data.error);
                showNotification(data.error || 'Errore nell\'avviare la creazione scansioni', 'error');
                resetScanCreationUI();
            }
        })
        .catch(error => {
            console.error('❌ Errore di rete:', error);
            showNotification('Errore di connessione', 'error');
            resetScanCreationUI();
        });
    }

    function startScanCreationMonitoring() {
        if (scanCreationMonitoringTimer) {
            clearInterval(scanCreationMonitoringTimer);
        }
        
        console.log('🔄 Avvio monitoraggio creazione scansioni...');
        
        // Polling più frequente all'inizio, poi rallenta
        let pollInterval = 300; // Inizia con 300ms dopo il delay iniziale
        let maxInterval = 2000; // Massimo 2 secondi
        let attemptCount = 0;
        let maxAttempts = 120; // Massimo 2 minuti di tentativi
        let initialPhase = true; // Flag per gestire la fase iniziale
        
        function poll() {
            attemptCount++;
            console.log(`📊 Polling attempt ${attemptCount}/${maxAttempts} (interval: ${pollInterval}ms)`);
            
            checkScanCreationProgress().then((result) => {
                if (result.shouldContinue && attemptCount < maxAttempts) {
                    // Se abbiamo ricevuto progress, non siamo più in fase iniziale
                    if (result.hasProgress) {
                        initialPhase = false;
                    }
                    
                    // Aumenta gradualmente l'intervallo solo dopo i primi 10 tentativi
                    if (attemptCount > 10 && !initialPhase) {
                        pollInterval = Math.min(pollInterval * 1.1, maxInterval);
                    }
                    scanCreationMonitoringTimer = setTimeout(poll, pollInterval);
                } else if (attemptCount >= maxAttempts) {
                    console.warn('⏰ Polling timeout reached, stopping monitoring');
                    completeScanCreation();
                }
            }).catch(error => {
                // Durante la fase iniziale, i 404 sono normali
                if (initialPhase && attemptCount <= 10) {
                    console.log(`⏳ Waiting for job to start (attempt ${attemptCount}/10)...`);
                } else {
                    console.error('❌ Polling error:', error);
                }
                
                if (attemptCount < maxAttempts) {
                    scanCreationMonitoringTimer = setTimeout(poll, pollInterval);
                }
            });
        }
        
        // Primo check immediato
        poll();
    }

    function checkScanCreationProgress() {
        if (!scanCreationJobId) return Promise.resolve({shouldContinue: false, hasProgress: false});
        
        return fetch(`/clients/${clientId}/check-scan-creation-progress?job_id=${encodeURIComponent(scanCreationJobId)}`, {
            method: 'GET',
            credentials: 'same-origin',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            }
        })
            .then(response => {
                // Controlla se c'è un redirect di autenticazione
                if (response.redirected && response.url.includes('/login')) {
                    console.error('❌ Sessione scaduta - redirect a login');
                    throw new Error('Authentication required');
                }
                
                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                }
                
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    updateScanCreationProgress(data.percentage, data.message);
                    
                    if (data.completed) {
                        console.log('✅ Creazione scansioni completata');
                        completeScanCreation();
                        return {shouldContinue: false, hasProgress: true}; // Stop polling
                    }
                    return {shouldContinue: true, hasProgress: true}; // Continue polling
                } else {
                    console.warn('⚠️ Progresso non disponibile:', data.error);
                    if (data.error === 'Job progress not found') {
                        // Il job potrebbe essere completato o fallito
                        console.log('🔄 Job progress not found - potrebbero esserci scansioni recenti');
                        completeScanCreation();
                        return {shouldContinue: false, hasProgress: false}; // Stop polling
                    }
                    return {shouldContinue: true, hasProgress: false}; // Continue polling for other errors
                }
            })
            .catch(error => {
                // Re-throw per permettere al chiamante di gestire l'errore
                throw error;
            });
    }

    function updateScanCreationProgress(percentage, message) {
        const progressBar = document.getElementById('scanCreationProgressBar');
        const progressMessage = document.getElementById('scanCreationProgressMessage');
        
        progressBar.style.width = percentage + '%';
        progressBar.setAttribute('aria-valuenow', percentage);
        // Rimuovo il testo dalla progress bar dato che ora è alta solo 8px
        progressBar.textContent = '';
        progressMessage.textContent = message;
        
        // Aggiungi timestamp al messaggio per mostrare che sta aggiornando
        const timestamp = new Date().toLocaleTimeString();
        console.log(`📊 Progresso creazione: ${percentage}% - ${message} [${timestamp}]`);
        
        // Se il progresso è > 0, significa che sta funzionando
        if (percentage > 0 && percentage < 100) {
            progressMessage.className = 'text-success';
        } else if (percentage >= 100) {
            progressMessage.className = 'text-success fw-bold';
        }
    }

    function completeScanCreation() {
        stopScanCreationMonitoring();
        
        // Riabilita il pulsante e nasconde progress
        resetScanCreationUI();
        
        showNotification('Creazione scansioni completata! Le scansioni sono ora in stato pending.', 'success');
        
        // Ricarica lo stato delle scansioni dopo un breve delay
        setTimeout(() => {
            console.log('🔄 Ricarico stato scansioni dopo creazione...');
            checkScansStatus();
        }, 2000);
    }

    function stopScanCreationMonitoring() {
        if (scanCreationMonitoringTimer) {
            clearInterval(scanCreationMonitoringTimer);
            scanCreationMonitoringTimer = null;
        }
        scanCreationJobId = null;
        console.log('⏹️ Fermato monitoraggio creazione scansioni');
    }

    function resetScanCreationUI() {
        const button = document.getElementById('scheduleAllScansBtn');
        const progressContainer = document.getElementById('scanCreationProgress');
        
        button.disabled = false;
        progressContainer.classList.add('d-none');
        
        // Reset progress
        updateScanCreationProgress(0, 'In attesa');
    }

    // === FUNZIONI PER SCANSIONI SINGOLE ===

    function startSingleScan(url, action, beforeScanAction) {
        console.log('🚀 Avvio scansione singola...', { url, action, beforeScanAction });
        
        // Prepara i dati per la richiesta
        const data = {
            url: url,
            action: action || null,
            before_scan_action: beforeScanAction || null
        };
        
        // Chiama l'endpoint per avviare il job
        fetch(`/clients/${clientId}/schedule-single-scan`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json'
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                console.log('✅ Scansione singola avviata', data);
                showNotification(data.message, 'success');
                
                // La scansione singola parte immediatamente, quindi aggiorna subito lo stato
                setTimeout(() => {
                    console.log('🔄 Aggiorno stato dopo scansione singola...');
                    checkScansStatus();
                }, 2000);
            } else {
                console.error('❌ Errore nell\'avvio della scansione singola:', data.error);
                showNotification(data.error || 'Errore nell\'avviare la scansione', 'error');
            }
        })
        .catch(error => {
            console.error('❌ Errore di rete nella scansione singola:', error);
            showNotification('Errore di connessione', 'error');
        });
    }

    function handleAddUrlSubmit(event) {
        event.preventDefault();
        
        const form = document.getElementById('addUrlForm');
        const formData = new FormData(form);
        
        const url = formData.get('url');
        const action = formData.get('action');
        const beforeScanAction = formData.get('before_scan_action');
        
        if (!url) {
            showNotification('URL non specificato', 'error');
            return false;
        }
        
        console.log('🚀 Avvio scansione per nuova URL...', { url, action, beforeScanAction });
        
        // Avvia la scansione singola
        startSingleScan(url, action, beforeScanAction);
        
        // Chiudi il form e resetta i campi
        toggleSection('addUrlSection');
        form.reset();
        
        return false;
    }
</script>
@endsection