@extends('layouts.app')

@section('content')
    <div class="page">
        <div class="page-inner">
            <header class="page-title-bar">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="/"><i class="breadcrumb-icon fa fa-angle-left mr-2"></i>{{ __('Dashboard') }}</a>
                        </li>
                        <li class="breadcrumb-item active">{{ __('Test Result') }}</li>
                    </ol>
                </nav>
                <h1 class="page-title">{{ __('Test Result') }}: {{ $test->trans('name') }}</h1>
            </header>

            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            <div class="page-section">
                <div class="row">
                    <div class="col-lg-8">
                        {{-- Scores Chart --}}
                        <section class="card mb-4">
                            <header class="card-header">{{ __('Your Scores') }}</header>
                            <div class="card-body">
                                <canvas id="resultsChart" height="300"></canvas>
                            </div>
                        </section>

                        {{-- Detailed Scores --}}
                        <section class="card mb-4">
                            <header class="card-header">{{ __('Score Details') }}</header>
                            <div class="card-body">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>{{ __('Category') }}</th>
                                            <th>{{ __('Score') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($categories as $category)
                                            <tr>
                                                <td>{{ $category->trans('name') }}</td>
                                                <td>
                                                    <strong>{{ $result->result[$category->id] ?? 0 }}</strong>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </section>

                        {{-- Feedback --}}
                        @if(count($regularFeedback) > 0)
                            <section class="card mb-4">
                                <header class="card-header">{{ __('Feedback') }}</header>
                                <div class="card-body">
                                    @foreach($regularFeedback as $fb)
                                        <div class="mb-3">
                                            <h6>{{ $fb['name'] }}</h6>
                                            <p>{!! nl2br(e($fb['text'])) !!}</p>
                                        </div>
                                    @endforeach
                                </div>
                            </section>
                        @endif

                        {{-- Summary --}}
                        @if(count($summaryFeedback) > 0)
                            <section class="card mb-4">
                                <header class="card-header bg-primary text-white">{{ __('Summary') }}</header>
                                <div class="card-body">
                                    @foreach($summaryFeedback as $fb)
                                        <div class="mb-3">
                                            <h6>{{ $fb['name'] }}</h6>
                                            <p>{!! nl2br(e($fb['text'])) !!}</p>
                                        </div>
                                    @endforeach
                                </div>
                            </section>
                        @endif
                    </div>

                    <div class="col-lg-4">
                        {{-- Test Info --}}
                        <section class="card mb-4">
                            <header class="card-header">{{ __('Test Information') }}</header>
                            <div class="card-body">
                                <dl>
                                    <dt>{{ __('Test') }}</dt>
                                    <dd>{{ $test->trans('name') }}</dd>

                                    <dt>{{ __('Completed') }}</dt>
                                    <dd>{{ $result->completed_at->format('d-m-Y H:i') }}</dd>

                                    @if($result->duration_minutes)
                                        <dt>{{ __('Duration') }}</dt>
                                        <dd>{{ $result->duration_minutes }} {{ __('minutes') }}</dd>
                                    @endif

                                    @if($result->session)
                                        <dt>{{ __('Team') }}</dt>
                                        <dd>{{ $result->session->sessionName }}</dd>
                                    @endif
                                </dl>
                            </div>
                        </section>

                        {{-- Actions --}}
                        <section class="card">
                            <div class="card-body">
                                <a href="{{ route('tests.user.my-results') }}" class="btn btn-block btn-outline-primary">
                                    <i class="fa fa-list mr-1"></i> {{ __('All My Results') }}
                                </a>
                                @if($result->session)
                                    <a href="{{ route('tests.user.overview', $result->session_id) }}" class="btn btn-block btn-outline-secondary">
                                        <i class="fa fa-arrow-left mr-1"></i> {{ __('Back to Tests') }}
                                    </a>
                                @endif
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var ctx = document.getElementById('resultsChart').getContext('2d');
    
    var chartData = {
        labels: {!! json_encode($chartLabels) !!},
        datasets: [{
            label: '{{ __("Score") }}',
            data: {!! json_encode($chartData) !!},
            backgroundColor: 'rgba(1, 144, 160, 0.6)',
            borderColor: 'rgba(1, 144, 160, 1)',
            borderWidth: 1
        }]
    };

    @if($test->graph_type == 2)
        new Chart(ctx, {
            type: 'radar',
            data: chartData,
            options: {
                scale: {
                    ticks: { beginAtZero: true }
                }
            }
        });
    @elseif($test->graph_type == 3)
        chartData.datasets[0].backgroundColor = [
            'rgba(1, 144, 160, 0.6)',
            'rgba(39, 194, 173, 0.6)',
            'rgba(255, 206, 86, 0.6)',
            'rgba(255, 99, 132, 0.6)',
            'rgba(54, 162, 235, 0.6)',
            'rgba(153, 102, 255, 0.6)'
        ];
        new Chart(ctx, {
            type: 'pie',
            data: chartData
        });
    @else
        new Chart(ctx, {
            type: 'bar',
            data: chartData,
            options: {
                scales: {
                    yAxes: [{
                        ticks: { beginAtZero: true }
                    }]
                }
            }
        });
    @endif
});
</script>
@endpush