@extends('layouts.adminlte')
@section('title', 'Report')
@section('page_title', 'Report e Statistiche')

@section('content')

@if(session('success'))
<div class="alert alert-success alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    {{ session('success') }}
</div>
@endif

@if(session('error'))
<div class="alert alert-danger alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    {{ session('error') }}
</div>
@endif

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-chart-bar mr-2"></i>Panoramica Database</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-2 col-4 text-center">
                        <div class="info-box">
                            <span class="info-box-icon bg-info"><i class="fas fa-users"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">Individui</span>
                                <span class="info-box-number">{{ number_format($stats['individui']) }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 col-4 text-center">
                        <div class="info-box">
                            <span class="info-box-icon bg-warning"><i class="fas fa-folder"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">Gruppi</span>
                                <span class="info-box-number">{{ number_format($stats['gruppi']) }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 col-4 text-center">
                        <div class="info-box">
                            <span class="info-box-icon bg-danger"><i class="fas fa-calendar"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">Eventi</span>
                                <span class="info-box-number">{{ number_format($stats['eventi']) }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 col-4 text-center">
                        <div class="info-box">
                            <span class="info-box-icon bg-secondary"><i class="fas fa-file"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">Documenti</span>
                                <span class="info-box-number">{{ number_format($stats['documenti']) }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 col-4 text-center">
                        <div class="info-box">
                            <span class="info-box-icon bg-purple"><i class="fas fa-list"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">Mailing List</span>
                                <span class="info-box-number">{{ number_format($stats['mailing_liste']) }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 col-4 text-center">
                        <div class="info-box">
                            <span class="info-box-icon bg-teal"><i class="fas fa-address-book"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">Contatti</span>
                                <span class="info-box-number">{{ number_format($stats['contatti']) }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-chart-pie mr-2"></i>Report Predefiniti</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    @foreach($prebuiltReports as $report)
                    <div class="col-md-4 col-lg-3 mb-3">
                        <div class="card card-{{ $report['colore'] }} card-outline h-100">
                            <div class="card-body text-center">
                                <i class="fas {{ $report['icona'] }} fa-3x text-{{ $report['colore'] }} mb-3"></i>
                                <h5>{{ $report['nome'] }}</h5>
                                <p class="text-muted small mb-3">{{ $report['descrizione'] }}</p>
                                <a href="{{ route('report.run', ['report' => $report['id']]) }}" class="btn btn-sm btn-{{ $report['colore'] }}">
                                    <i class="fas fa-play mr-1"></i> Genera
                                </a>
                                <a href="{{ route('report.export', ['report' => $report['id']]) }}" class="btn btn-sm btn-outline-{{ $report['colore'] }}">
                                    <i class="fas fa-download mr-1"></i> CSV
                                </a>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-bookmark mr-2"></i>Report Personalizzati</h3>
            </div>
            <div class="card-body p-0">
                @if($customReports->count() > 0)
                <table class="table table-striped mb-0">
                    <thead>
                        <tr>
                            <th>Nome</th>
                            <th>Tipo</th>
                            <th>Creato il</th>
                            <th style="width: 120px;">Azioni</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($customReports as $report)
                        <tr>
                            <td>
                                <i class="fas fa-chart-line text-primary mr-1"></i>
                                {{ $report->nome }}
                            </td>
                            <td><span class="badge badge-info">{{ ucfirst($report->tipo_report) }}</span></td>
                            <td>{{ $report->created_at->format('d/m/Y H:i') }}</td>
                            <td>
                                <a href="{{ route('report.run-custom', $report->id) }}" class="btn btn-xs btn-success" title="Esegui">
                                    <i class="fas fa-play"></i>
                                </a>
                                <form action="{{ route('report.destroy-custom', $report->id) }}" method="POST" class="d-inline">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="btn btn-xs btn-danger" onclick="return confirm('Eliminare questo report?')" title="Elimina">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                @else
                <div class="text-center text-muted py-4">
                    <i class="fas fa-chart-line fa-3x mb-3"></i>
                    <p>Nessun report personalizzato creato.</p>
                </div>
                @endif
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card">
            <div class="card-header bg-primary">
                <h3 class="card-title text-white"><i class="fas fa-plus mr-2"></i>Crea Report Personalizzato</h3>
            </div>
            <div class="card-body">
                <form action="{{ route('report.store-custom') }}" method="POST">
                    @csrf
                    <div class="form-group">
                        <label>Nome Report *</label>
                        <input type="text" name="nome" class="form-control" required placeholder="Es: Individui attivi">
                    </div>
                    <div class="form-group">
                        <label>Descrizione</label>
                        <textarea name="descrizione" class="form-control" rows="2" placeholder="Descrizione opzionale..."></textarea>
                    </div>
                    <div class="form-group">
                        <label>Tipo Dato *</label>
                        <select name="tipo_report" class="form-control" required>
                            <option value="">Seleziona...</option>
                            <option value="individui">Individui</option>
                            <option value="gruppi">Gruppi</option>
                            <option value="eventi">Eventi</option>
                            <option value="documenti">Documenti</option>
                            <option value="contatti">Contatti</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Colonne (separate da virgola)</label>
                        <input type="text" name="columns" class="form-control" placeholder="Es: cognome, nome, email">
                        <small class="text-muted">Lascia vuoto per tutte le colonne</small>
                    </div>
                    <div class="form-group">
                        <label>Ordina per</label>
                        <select name="sort_by" class="form-control">
                            <option value="">Nessun ordinamento</option>
                            <option value="created_at">Data creazione</option>
                            <option value="updated_at">Ultimo aggiornamento</option>
                            <option value="nome">Nome</option>
                            <option value="cognome">Cognome</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Limite risultati</label>
                        <input type="number" name="limit" class="form-control" placeholder="Es: 100" min="1">
                    </div>
                    <button type="submit" class="btn btn-primary btn-block">
                        <i class="fas fa-save mr-1"></i> Salva Report
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const tipoSelect = document.querySelector('select[name="tipo_report"]');
    const columnsInput = document.querySelector('input[name="columns"]');
    const sortBySelect = document.querySelector('select[name="sort_by"]');

    const columns = {
        'individui': 'codice_id, cognome, nome, data_nascita, genere, email, telefono',
        'gruppi': 'nome, descrizione, diocesi_id',
        'eventi': 'nome_evento, data_inizio, tipo_recorrenza',
        'documenti': 'nome_file, tipologia, visibilita, created_at',
        'contatti': 'tipo, valore, etichetta',
    };

    tipoSelect.addEventListener('change', function() {
        if (columns[this.value]) {
            columnsInput.placeholder = 'Suggerite: ' + columns[this.value];
        }
    });
});
</script>
@endsection