@extends('hr::layouts.app')

@section('title', 'Audit Log Statistics')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-chart-bar"></i>
                        Audit Log Statistics
                    </h3>
                    <div class="card-tools">
                        <a href="{{ route('audit-logs.index') }}" class="btn btn-secondary btn-sm">
                            <i class="fas fa-arrow-left"></i>
                            Back to Audit Logs
                        </a>
                    </div>
                </div>

                <div class="card-body">
                    <!-- Summary Cards -->
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <div class="card bg-primary text-white">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h4>{{ number_format($stats['total_logs']) }}</h4>
                                            <p class="mb-0">Total Logs ({{ $dateRange }} days)</p>
                                        </div>
                                        <div class="align-self-center">
                                            <i class="fas fa-history fa-2x"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-success text-white">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h4>{{ $stats['events']->where('event', 'created')->first()->count ?? 0 }}</h4>
                                            <p class="mb-0">Created Records</p>
                                        </div>
                                        <div class="align-self-center">
                                            <i class="fas fa-plus-circle fa-2x"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-warning text-white">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h4>{{ $stats['events']->where('event', 'updated')->first()->count ?? 0 }}</h4>
                                            <p class="mb-0">Updated Records</p>
                                        </div>
                                        <div class="align-self-center">
                                            <i class="fas fa-edit fa-2x"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-danger text-white">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h4>{{ $stats['events']->where('event', 'deleted')->first()->count ?? 0 }}</h4>
                                            <p class="mb-0">Deleted Records</p>
                                        </div>
                                        <div class="align-self-center">
                                            <i class="fas fa-trash fa-2x"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <!-- Events Chart -->
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title">
                                        <i class="fas fa-chart-pie"></i>
                                        Events Distribution
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <canvas id="eventsChart" height="200"></canvas>
                                </div>
                            </div>
                        </div>

                        <!-- Models Chart -->
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title">
                                        <i class="fas fa-chart-bar"></i>
                                        Models Activity
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <canvas id="modelsChart" height="200"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-4">
                        <!-- Top Users -->
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title">
                                        <i class="fas fa-users"></i>
                                        Most Active Users
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-sm">
                                            <thead>
                                                <tr>
                                                    <th>User</th>
                                                    <th>Email</th>
                                                    <th>Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse($stats['users'] as $userStat)
                                                    <tr>
                                                        <td>
                                                            @if($userStat->user)
                                                                {{ $userStat->user->name }}
                                                            @else
                                                                <span class="text-muted">Unknown</span>
                                                            @endif
                                                        </td>
                                                        <td>
                                                            @if($userStat->user)
                                                                <small class="text-muted">{{ $userStat->user->email }}</small>
                                                            @else
                                                                <span class="text-muted">-</span>
                                                            @endif
                                                        </td>
                                                        <td>
                                                            <span class="badge badge-primary">{{ $userStat->count }}</span>
                                                        </td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="3" class="text-center text-muted">No user activity found</td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Daily Activity -->
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title">
                                        <i class="fas fa-chart-line"></i>
                                        Daily Activity
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <canvas id="dailyActivityChart" height="200"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Detailed Tables -->
                    <div class="row mt-4">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title">
                                        <i class="fas fa-list"></i>
                                        Events Summary
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-sm">
                                            <thead>
                                                <tr>
                                                    <th>Event</th>
                                                    <th>Count</th>
                                                    <th>Percentage</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($stats['events'] as $event)
                                                    <tr>
                                                        <td>
                                                            <span class="badge badge-{{ $event->event === 'created' ? 'success' : ($event->event === 'updated' ? 'warning' : ($event->event === 'deleted' ? 'danger' : 'info')) }}">
                                                                {{ ucfirst($event->event) }}
                                                            </span>
                                                        </td>
                                                        <td>{{ number_format($event->count) }}</td>
                                                        <td>
                                                            @php
                                                                $percentage = $stats['total_logs'] > 0 ? round(($event->count / $stats['total_logs']) * 100, 1) : 0;
                                                            @endphp
                                                            <div class="progress" style="height: 20px;">
                                                                <div class="progress-bar" role="progressbar" style="width: {{ $percentage }}%">
                                                                    {{ $percentage }}%
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title">
                                        <i class="fas fa-list"></i>
                                        Models Summary
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-sm">
                                            <thead>
                                                <tr>
                                                    <th>Model</th>
                                                    <th>Count</th>
                                                    <th>Percentage</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($stats['models'] as $model)
                                                    <tr>
                                                        <td>
                                                            <strong>{{ class_basename($model->auditable_type) }}</strong>
                                                        </td>
                                                        <td>{{ number_format($model->count) }}</td>
                                                        <td>
                                                            @php
                                                                $percentage = $stats['total_logs'] > 0 ? round(($model->count / $stats['total_logs']) * 100, 1) : 0;
                                                            @endphp
                                                            <div class="progress" style="height: 20px;">
                                                                <div class="progress-bar bg-info" role="progressbar" style="width: {{ $percentage }}%">
                                                                    {{ $percentage }}%
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Events Chart
const eventsCtx = document.getElementById('eventsChart').getContext('2d');
new Chart(eventsCtx, {
    type: 'doughnut',
    data: {
        labels: [
            @foreach($stats['events'] as $event)
                '{{ ucfirst($event->event) }}',
            @endforeach
        ],
        datasets: [{
            data: [
                @foreach($stats['events'] as $event)
                    {{ $event->count }},
                @endforeach
            ],
            backgroundColor: [
                '#28a745', // green for created
                '#ffc107', // yellow for updated
                '#dc3545', // red for deleted
                '#17a2b8', // blue for others
            ]
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false
    }
});

// Models Chart
const modelsCtx = document.getElementById('modelsChart').getContext('2d');
new Chart(modelsCtx, {
    type: 'bar',
    data: {
        labels: [
            @foreach($stats['models'] as $model)
                '{{ class_basename($model->auditable_type) }}',
            @endforeach
        ],
        datasets: [{
            label: 'Activity Count',
            data: [
                @foreach($stats['models'] as $model)
                    {{ $model->count }},
                @endforeach
            ],
            backgroundColor: '#17a2b8'
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

// Daily Activity Chart
const dailyCtx = document.getElementById('dailyActivityChart').getContext('2d');
new Chart(dailyCtx, {
    type: 'line',
    data: {
        labels: [
            @foreach($stats['daily_activity'] as $day)
                '{{ \Carbon\Carbon::parse($day->date)->format("M d") }}',
            @endforeach
        ],
        datasets: [{
            label: 'Daily Activity',
            data: [
                @foreach($stats['daily_activity'] as $day)
                    {{ $day->count }},
                @endforeach
            ],
            borderColor: '#007bff',
            backgroundColor: 'rgba(0, 123, 255, 0.1)',
            tension: 0.4
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});
</script>
@endpush
@endsection