@extends('admin.layouts.app')

@section('content')
<div class="container">
    <h3 class="page-title">Détails de l'utilisateur</h3>
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-md-3">
                    <img src="{{ !empty($user->avatar) ? asset('storage/users/'.$user->avatar) : asset('assets/img/avatar.png') }}" class="img-fluid rounded-circle" alt="Avatar">
                </div>
                <div class="col-md-9">
                    <h4>{{ $user->name }}</h4>
                    <p><strong>Email:</strong> {{ $user->email }}</p>
                    <p><strong>Matricule:</strong> {{ $user->matricule }}</p>
                    <p><strong>Rôle:</strong> {{ $user->getRoleNames()->implode(', ') }}</p>
                    <p><strong>Modalité:</strong> {{ $user->modalite }}</p>
                    <p><strong>Département:</strong> {{ $user->departement }}</p>
                    <p><strong>Mobile:</strong> {{ $user->phone }}</p>
                    <a href="{{ route('users.index') }}" class="btn btn-secondary">Retour</a>
                </div>
            </div>
        </div>
    </div>

    <div class="card mt-4">
        <div class="card-body">
            <h5>Nombre Total des Interventions</h5>
            <table class="table">
                <thead>
                    <tr>
                        <th>Trimestre</th>
                        <th>Total Interventions</th>
                        <th>Date de Début</th>
                        <th>Date de Fin</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($performances as $performance)
                    <tr>
                        <td>{{ $performance->quarter }}</td>
                        <td>{{ $performance->total_interventions }}</td>
                        <td>{{ \Carbon\Carbon::parse($performance->start_date)->toDateString() }}</td>
                        <td>{{ \Carbon\Carbon::parse($performance->end_date)->toDateString() }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            <canvas id="userPerformanceChart"></canvas>
        </div>
    </div>

    <div class="card mt-4">
        <div class="card-body">
            <h5>Temps de Réponse par Intervention</h5>
            <canvas id="responseTimeChart" class="mt-4"></canvas>
        </div>
    </div>
    <br><br><br>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const ctx = document.getElementById('userPerformanceChart').getContext('2d');

    const labels = @json($performances->pluck('quarter'));
    const totalInterventions = @json($performances->pluck('total_interventions'));

    const userPerformanceChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: 'Total Interventions par Trimestre',
                data: totalInterventions,
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1,
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                }
            }
        }
    });

    // Response time chart
    const responseCtx = document.getElementById('responseTimeChart').getContext('2d');

    const responseLabels = @json($responseData->pluck('intervention_date'));
    const responseTimes = @json($responseData->pluck('response_time'));
    const averageResponseTime = @json($averageResponseTime); // Average response time

    const responseTimeChart = new Chart(responseCtx, {
        type: 'line',
        data: {
            labels: responseLabels,
            datasets: [{
                label: 'Temps de Réponse (Jours)',
                data: responseTimes,
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 2,
                fill: false,
            },
            {
                label: 'Moyenne de Temps de Réponse',
                data: Array(responseLabels.length).fill(averageResponseTime), // Fill array with average response time value
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 2,
                fill: false,
                borderDash: [5, 5], // Dashed line for average
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                }
            }
        }
    });
</script>
@endsection