@extends('layouts.app')

@section('content')
    @if (Auth::user()->is_admin)
        <div class="row">
            <div class="col-sm-12">
                <a href="/graficos" class="btn backbutton"><i class="fa-solid fa-angles-left"></i> Voltar</a>
            </div>
        </div>
    @endif
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header card-header-fle color-back">
                    <h4 style="color: white;">Relatório de Riscos - Questionário:
                        {{ $groupedRisks[array_key_first($groupedRisks)]['Órgãos Administrativos'][0]->questionary->name ?? 'Desconhecido' }}
                    </h4>
                </div>
                <div class="card-body">
                    <div class="col-md-12 text-center">
                        <div class="col-sm-12 display">
                            <div class="form-group">

                                <div class="row" id="userSelect" style="max-height: 300px; overflow-y: auto;">
                                    <div class="col-md-2">
                                        <label class="form-check-label" for="userSelect">Selecione os usuários:</label>
                                    </div>
                                    @foreach ($groupedRisks as $userName => $userRisks)
                                        @php $userId = $userRisks[array_key_first($userRisks)][0]->user->id; @endphp
                                        <div class="col-md-2">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="{{ $userId }}"
                                                    name="user_ids[]" id="checkbox{{ $userId }}" checked>
                                                <label class="form-check-label" for="checkbox{{ $userId }}">
                                                    {{ $userName }}
                                                </label>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        <div style="max-width: 600px; margin: auto;">
                            <canvas id="riskMatrixChart" width="600" height="600"></canvas>
                        </div>
                    </div>
                    <div class="col-md-12 mt-4">
                        <h5>Perguntas e Respostas por Usuário</h5>
                        @foreach ($groupedRisks as $userName => $userRisks)
                            <div class="card mb-3">
                                <div class="card-header">
                                    <h6 class="mb-0">Usuário: {{ $userName }}</h6>
                                </div>
                                <div class="card-body">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>Pergunta</th>
                                                <th>Resposta</th>
                                                <th>Impacto</th>
                                                <th>Probabilidade</th>
                                                <th>Nível de Risco</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($userRisks as $source => $sourceRisks)
                                                @foreach ($sourceRisks as $risk)
                                                    <tr>
                                                        <td>{{ $risk->question->question }}</td>
                                                        <td>{{ $risk->option->description }}</td>
                                                        <td>{{ $risk->impact }}</td>
                                                        <td>{{ $risk->probability }}</td>
                                                        <td>
                                                            <span
                                                                style="background-color: {{ $risk->color }}; padding: 5px; border-radius: 3px;">
                                                                {{ $risk->risk_level }}
                                                            </span>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const ctx = document.getElementById('riskMatrixChart').getContext('2d');

                const initialRiskData = {
                    labels: ['Risco Baixo', 'Risco Moderado', 'Risco Alto', 'Risco Crítico'],
                    datasets: [{
                        data: [
                            {{ $riskCategories['Risco Baixo'] }},
                            {{ $riskCategories['Risco Moderado'] }},
                            {{ $riskCategories['Risco Alto'] }},
                            {{ $riskCategories['Risco Crítico'] }}
                        ],
                        backgroundColor: ['#00ff0094', '#ffff00b5', '#ffa500bf', '#ff0000b5'],
                        hoverBackgroundColor: ['#00FF00', '#FFFF00', '#FFA500', '#FF0000']
                    }]
                };

                const options = {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return context.label + ': ' + context.raw.toFixed(2) + '%';
                                }
                            }
                        }
                    }
                };

                const riskMatrixChart = new Chart(ctx, {
                    type: 'pie',
                    data: initialRiskData,
                    options: options
                });

                function updateChart(selectedUserIds) {
                    $.ajax({
                        url: '{{ route('getRiskDataForSelectedUsers') }}', // Defina esta rota no seu Laravel
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            user_ids: selectedUserIds
                        },
                        success: function(response) {
                            const newRiskData = {
                                labels: ['Risco Baixo', 'Risco Moderado', 'Risco Alto',
                                    'Risco Crítico'
                                ],
                                datasets: [{
                                    data: [
                                        response.riskCategories['Risco Baixo'],
                                        response.riskCategories['Risco Moderado'],
                                        response.riskCategories['Risco Alto'],
                                        response.riskCategories['Risco Crítico']
                                    ],
                                    backgroundColor: ['#00ff0094', '#ffff00b5', '#ffa500bf',
                                        '#ff0000b5'
                                    ],
                                    hoverBackgroundColor: ['#00FF00', '#FFFF00', '#FFA500',
                                        '#FF0000'
                                    ]
                                }]
                            };
                            riskMatrixChart.data = newRiskData;
                            riskMatrixChart.update();
                        },
                        error: function(xhr, status, error) {
                            console.error('Erro na requisição AJAX:', error);
                        }
                    });
                }

                // Initialize with all checkboxes checked
                const checkboxes = document.querySelectorAll('#userSelect .form-check-input');
                const selectedUserIds = Array.from(checkboxes).map(cb => cb.value);
                updateChart(selectedUserIds);

                checkboxes.forEach(checkbox => {
                    checkbox.addEventListener('change', function() {
                        const selectedUserIds = Array.from(document.querySelectorAll(
                            '#userSelect .form-check-input:checked')).map(cb => cb.value);
                        updateChart(selectedUserIds);
                    });
                });
            });
        </script>
    </div>
    <style>
        .col-sm-12.display {
            margin-bottom: 2%;
        }

        .form-check {
            display: flex;
            min-height: 1.5rem;
            padding-left: 1.5em;
            margin-bottom: .125rem;
            justify-content: flex-start;
        }

        label.form-check-label {
            padding-left: 10px;
        }
    </style>
@endsection