@extends('layouts.student')

@section('content')
<div class="page-wrapper">
    <div class="container-xl">
        <div class="card">
            <div class="card-header">
                <button class="btn btn-primary float-right pull-right" onclick="window.print()">Print Results</button>
            </div>
            <div class="card-header print">
                <h2 class="card-title">Quiz Results: {{ $quizAttempt->quiz->title }}</h2>
            </div>
            <div class="card-header print">
                <h2><strong>Topic:</strong> {{ $quizAttempt->quiz->topic->title }}</h2> <!-- Display the topic -->

            </div>
            <div class="card-body">
                <div class="row mb-4">
                    <div class="col-md-6">
                        <p><strong>Total Marks:</strong> {{ $quizAttempt->total_marks }}</p>
                        <p><strong>Correct Answers:</strong> {{ $quizAttempt->correct_answers }}</p>
                        <p><strong>Incorrect Answers:</strong> {{ $quizAttempt->incorrect_answers }}</p>
                        <p><strong>Score:</strong> {{ $quizAttempt->score }}</p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>User:</strong> {{ $quizAttempt->user->name }}</p>
                        <p><strong>Date:</strong> {{ $quizAttempt->created_at->format('d M, Y h:i A') }}</p>
                    </div>
                </div>

                <hr>

                <h4>Detailed Results</h4>
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>Question</th>
                            <th>Your Answer</th>
                            <th>Correct Answer</th>
                            <th>Marks Awarded</th>
                            <th>Correct</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($quizAttempt->answers as $answer)
                        <tr>
                            <td>{{ $answer->question->title }}</td>
                            <td>{{ is_array(json_decode($answer->answer)) ? implode(', ', json_decode($answer->answer)) : $answer->answer }}</td>
                            <td>{{ $answer->question->correct_answer }}</td>
                            <td>{{ $answer->marks_awarded }}</td>
                            <td>{{ $answer->is_correct ? 'Yes' : 'No' }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('styles')
<style>
    /* Print-specific styling */
    @media print {
        body {
            visibility: hidden;
        }

        .page-wrapper {
            visibility: visible;
            width: 100%;
            margin: 0;
        }

        .page-wrapper .card {
            border: none;
        }

        .page-wrapper .card-header {
            display: none;
        }
        .print{
            display: block !important;
        }

        .page-wrapper .card-body {
            padding: 0;
        }

        .table {
            width: 100%;
            margin: 0;
        }

        .table th, .table td {
            border: 1px solid #000;
        }
    }
</style>
@endsection