@extends('layouts.app')

@section('title', __('app.titles.dashboard'))

@section('breadcrumbs')
    @include('components.breadcrumbs', ['items' => []])
@endsection

@section('content')
    <h2 class="mt-4">{{ __('clients.title') }}</h2>
    
    <!-- Informazioni sul limite clienti -->
    <div class="alert alert-info mb-3">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <i class="bi bi-info-circle me-2"></i>
                <strong>{{ __('clients.limits.title') }}:</strong> {{ $currentClientCount }} / {{ $clientLimit }} {{ __('clients.limits.used') }}
            </div>
            @if(!$canAddNewClient)
                <div class="text-warning">
                    <i class="bi bi-exclamation-triangle me-1"></i>
                    <strong>{{ __('clients.limits.reached') }}!</strong> {{ __('clients.limits.cannot_add') }}
                </div>
            @endif
        </div>
    </div>
    
    <div class="d-flex justify-content-between align-items-center mb-3">
        <span>{{ __('clients.list_description') }}</span>
        @if($canAddNewClient)
            <a href="{{ route('clients.create') }}" class="btn btn-success">
                <i class="bi bi-plus-circle me-1"></i>{{ __('clients.add_new') }}
            </a>
        @else
            <button class="btn btn-secondary" disabled title="{{ __('clients.limits.max_reached') }}">
                <i class="bi bi-plus-circle me-1"></i>{{ __('clients.add_new') }}
            </button>
        @endif
    </div>

    <!-- Filtro di ricerca -->
    <div class="row mb-3">
        <div class="col-md-6">
            <div class="input-group">
                <span class="input-group-text">
                    <i class="bi bi-search"></i>
                </span>
                <input type="text" 
                       id="clientSearch" 
                       class="form-control" 
                       placeholder="{{ __('clients.search_placeholder') }}"
                       autocomplete="off">
                <button class="btn btn-outline-secondary" 
                        type="button" 
                        id="clearSearch" 
                        style="display: none;">
                    <i class="bi bi-x-circle"></i>
                </button>
            </div>
        </div>
        <div class="col-md-6 text-end">
            <small class="text-muted">
                <span id="searchResults">{{ __('clients.found') }} <span id="resultsCount">{{ $clients->count() }}</span> {{ __('clients.clients') }}</span>
            </small>
        </div>
    </div>

    <!-- Tabella dinamica dei clienti -->
    <div class="table-responsive">
        <table class="table table-striped table-hover" id="clientsTable">
            <thead class="table-dark">
                <tr>
                    <th>
                        <a href="{{ request()->fullUrlWithQuery(['sort' => 'id', 'order' => $sortBy === 'id' && $sortOrder === 'asc' ? 'desc' : 'asc']) }}" 
                           class="text-white text-decoration-none">
                            ID
                            @if($sortBy === 'id')
                                <i class="bi bi-arrow-{{ $sortOrder === 'asc' ? 'up' : 'down' }}"></i>
                            @endif
                        </a>
                    </th>
                    <th>
                        <a href="{{ request()->fullUrlWithQuery(['sort' => 'name', 'order' => $sortBy === 'name' && $sortOrder === 'asc' ? 'desc' : 'asc']) }}" 
                           class="text-white text-decoration-none">
                            {{ __('clients.table.name') }}
                            @if($sortBy === 'name')
                                <i class="bi bi-arrow-{{ $sortOrder === 'asc' ? 'up' : 'down' }}"></i>
                            @endif
                        </a>
                    </th>
                    <th>
                        <a href="{{ request()->fullUrlWithQuery(['sort' => 'last_scan_date', 'order' => $sortBy === 'last_scan_date' && $sortOrder === 'asc' ? 'desc' : 'asc']) }}" 
                           class="text-white text-decoration-none">
                            {{ __('clients.table.last_scan') }}
                            @if($sortBy === 'last_scan_date')
                                <i class="bi bi-arrow-{{ $sortOrder === 'asc' ? 'up' : 'down' }}"></i>
                            @endif
                        </a>
                    </th>
                    <th>
                        <a href="{{ request()->fullUrlWithQuery(['sort' => 'current_score', 'order' => $sortBy === 'current_score' && $sortOrder === 'asc' ? 'desc' : 'asc']) }}" 
                           class="text-white text-decoration-none">
                            {{ __('clients.table.current_score') }}
                            @if($sortBy === 'current_score')
                                <i class="bi bi-arrow-{{ $sortOrder === 'asc' ? 'up' : 'down' }}"></i>
                            @endif
                        </a>
                    </th>
                    <th>
                        <a href="{{ request()->fullUrlWithQuery(['sort' => 'current_total_errors', 'order' => $sortBy === 'current_total_errors' && $sortOrder === 'asc' ? 'desc' : 'asc']) }}" 
                           class="text-white text-decoration-none">
                            {{ __('clients.table.total_errors') }}
                            @if($sortBy === 'current_total_errors')
                                <i class="bi bi-arrow-{{ $sortOrder === 'asc' ? 'up' : 'down' }}"></i>
                            @endif
                        </a>
                    </th>
                    <th>{{ __('clients.table.actions') }}</th>
                </tr>
            </thead>
            <tbody>
                @foreach($clients as $client)
                    <tr data-client-name="{{ strtolower($client['name']) }}">
                        <td>{{ $client['id'] }}</td>
                        <td>
                            <a href="{{ route('clients.show', $client['id']) }}" class="text-decoration-none">
                                {{ $client['name'] }}
                            </a>
                        </td>
                        <td>
                            @if($client['last_scan_date'])
                                <span class="text-muted">
                                    <i class="bi bi-calendar-event me-1"></i>
                                    {{ $client['last_scan_date']->format('d/m/Y H:i') }}
                                </span>
                            @else
                                <span class="text-muted">
                                    <i class="bi bi-dash-circle me-1"></i>
                                    {{ __('clients.table.no_scan') }}
                                </span>
                            @endif
                        </td>
                        <td>
                            @if($client['current_score'] !== null)
                                @php
                                    $scoreClass = 'text-success';
                                    $scoreDescription = __('clients.score.excellent');
                                    if($client['current_score'] < 50) {
                                        $scoreClass = 'text-danger';
                                        $scoreDescription = __('clients.score.critical');
                                    } elseif($client['current_score'] < 75) {
                                        $scoreClass = 'text-warning';
                                        $scoreDescription = __('clients.score.needs_improvement');
                                    }
                                @endphp
                                <span class="badge bg-light {{ $scoreClass }} fs-6" 
                                      title="{{ __('clients.score.accessibility_score') }}: {{ $scoreDescription }}">
                                    {{ $client['current_score'] }}%
                                </span>
                            @else
                                <span class="text-muted" title="{{ __('clients.no_completed_scan') }}">
                                    <i class="bi bi-dash-circle"></i>
                                    N/A
                                </span>
                            @endif
                        </td>
                        <td>
                            @if($client['current_total_errors'] !== null)
                                @php
                                    $errorClass = 'text-success';
                                    $errorDescription = __('clients.errors.few');
                                    if($client['current_total_errors'] > 50) {
                                        $errorClass = 'text-danger';
                                        $errorDescription = __('clients.errors.many_critical');
                                    } elseif($client['current_total_errors'] > 20) {
                                        $errorClass = 'text-warning';
                                        $errorDescription = __('clients.errors.to_fix');
                                    }
                                @endphp
                                <span class="badge bg-light {{ $errorClass }}" 
                                      title="{{ __('clients.errors.accessibility_errors') }}: {{ $errorDescription }}">
                                    <i class="bi bi-exclamation-triangle me-1"></i>
                                    {{ $client['current_total_errors'] }}
                                </span>
                            @else
                                <span class="text-muted" title="{{ __('clients.no_completed_scan') }}">
                                    <i class="bi bi-dash-circle"></i>
                                    N/A
                                </span>
                            @endif
                        </td>
                        <td>
                            <div class="btn-group" role="group">
                                <a href="{{ route('clients.show', $client['id']) }}" 
                                   class="btn btn-sm btn-outline-primary" 
                                   title="{{ __('clients.actions.view') }}">
                                    <i class="bi bi-eye"></i>
                                </a>
                                <a href="{{ route('clients.edit', $client['id']) }}" 
                                   class="btn btn-sm btn-outline-warning" 
                                   title="{{ __('clients.actions.edit') }}">
                                    <i class="bi bi-pencil"></i>
                                </a>
                                <form action="{{ route('clients.destroy', $client['id']) }}" 
                                      method="POST" 
                                      style="display:inline;"
                                      onsubmit="return confirm('{{ __('clients.confirm_delete') }}')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" 
                                            class="btn btn-sm btn-outline-danger" 
                                            title="{{ __('clients.actions.delete') }}">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    
    @if($clients->isEmpty())
        <div class="text-center py-4">
            <i class="bi bi-people text-muted" style="font-size: 3rem;"></i>
            <p class="text-muted mt-2">{{ __('clients.no_clients') }}</p>
            @if($canAddNewClient)
                <a href="{{ route('clients.create') }}" class="btn btn-primary">
                    <i class="bi bi-plus-circle me-1"></i>{{ __('clients.add_first') }}
                </a>
            @endif
        </div>
    @endif

    <style>
        .table th a:hover {
            text-decoration: underline !important;
        }
        .table th {
            background-color: #212529 !important; /* Mantiene il colore di sfondo fisso */
        }
        .table th:hover {
            background-color: #212529 !important; /* Previene il cambio di colore al hover */
        }
        .badge {
            font-weight: 500;
        }
        .btn-group .btn {
            margin-right: 2px;
        }
        .btn-group .btn:last-child {
            margin-right: 0;
        }
        .table-row-hidden {
            display: none !important;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const searchInput = document.getElementById('clientSearch');
            const clearButton = document.getElementById('clearSearch');
            const resultsCount = document.getElementById('resultsCount');
            const tableRows = document.querySelectorAll('#clientsTable tbody tr');
            const totalRows = tableRows.length;

            // Funzione di ricerca
            function performSearch() {
                const searchTerm = searchInput.value.toLowerCase().trim();
                let visibleCount = 0;

                tableRows.forEach(row => {
                    const clientName = row.getAttribute('data-client-name');
                    
                    if (searchTerm === '' || clientName.includes(searchTerm)) {
                        row.classList.remove('table-row-hidden');
                        visibleCount++;
                    } else {
                        row.classList.add('table-row-hidden');
                    }
                });

                // Aggiorna il contatore
                resultsCount.textContent = visibleCount;

                // Mostra/nascondi il pulsante di pulizia
                if (searchTerm !== '') {
                    clearButton.style.display = 'block';
                } else {
                    clearButton.style.display = 'none';
                }

                // Aggiorna il testo del contatore
                const searchResults = document.getElementById('searchResults');
                if (searchTerm !== '') {
                    searchResults.innerHTML = `{{ __('clients.found') }} <span id="resultsCount">${visibleCount}</span> {{ __('clients.clients') }}`;
                } else {
                    searchResults.innerHTML = `{{ __('clients.found') }} <span id="resultsCount">${totalRows}</span> {{ __('clients.clients') }}`;
                }
            }

            // Event listener per l'input di ricerca
            searchInput.addEventListener('input', function() {
                performSearch();
            });

            // Event listener per il pulsante di pulizia
            clearButton.addEventListener('click', function() {
                searchInput.value = '';
                performSearch();
                searchInput.focus();
            });

            // Event listener per il tasto Escape
            searchInput.addEventListener('keydown', function(e) {
                if (e.key === 'Escape') {
                    searchInput.value = '';
                    performSearch();
                }
            });

            // Focus automatico sul campo di ricerca
            searchInput.focus();
        });
    </script>
@endsection