@extends('admin.layouts.app')

@section('title', 'Exam Details')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('admin.exams.index') }}">Exams</a></li>
                        <li class="breadcrumb-item active">Exam Details</li>
                    </ol>
                </div>
                <h4 class="page-title">Exam Details</h4>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">{{ $exam->title }}</h4>
                    <div class="d-flex gap-2">
                        <a href="{{ route('admin.exams.edit', $exam->id) }}" class="btn btn-primary btn-sm">
                            <i class="mdi mdi-pencil"></i> Edit
                        </a>
                        <a href="{{ route('admin.exams.questions', $exam->id) }}" class="btn btn-warning btn-sm">
                            <i class="mdi mdi-help-circle"></i> Manage Questions
                        </a>
                        <a href="{{ route('admin.exams.attempts', $exam->id) }}" class="btn btn-info btn-sm">
                            <i class="mdi mdi-account-group"></i> View Attempts
                        </a>
                        <a href="{{ route('admin.exams.stats', $exam->id) }}" class="btn btn-success btn-sm">
                            <i class="mdi mdi-chart-line"></i> Statistics
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    @if($exam->description)
                        <div class="mb-3">
                            <h6>Description</h6>
                            <p class="text-muted">{{ $exam->description }}</p>
                        </div>
                    @endif

                    <div class="row">
                        <div class="col-md-6">
                            <h6>Exam Settings</h6>
                            <table class="table table-sm">
                                <tr>
                                    <td><strong>Course:</strong></td>
                                    <td>{{ $exam->material->course->title ?? 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Attempts:</strong></td>
                                    <td>{{ $exam->attempts }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Pass Score:</strong></td>
                                    <td>{{ $exam->pass_score }}%</td>
                                </tr>
                                <tr>
                                    <td><strong>Max Score:</strong></td>
                                    <td>{{ $exam->max_score }}</td>
                                </tr>
                                @if($exam->time_limit)
                                    <tr>
                                        <td><strong>Time Limit:</strong></td>
                                        <td>{{ $exam->time_limit }} minutes</td>
                                    </tr>
                                @endif
                            </table>
                        </div>
                        <div class="col-md-6">
                            <h6>Marking Scheme</h6>
                            <table class="table table-sm">
                                <tr>
                                    <td><strong>Correct Answer:</strong></td>
                                    <td>+{{ $exam->mark_correct }} marks</td>
                                </tr>
                                <tr>
                                    <td><strong>Wrong Answer:</strong></td>
                                    <td>{{ $exam->mark_wrong }} marks</td>
                                </tr>
                                <tr>
                                    <td><strong>Shuffle Questions:</strong></td>
                                    <td>
                                        @if($exam->shuffle_questions)
                                            <span class="badge bg-success">Yes</span>
                                        @else
                                            <span class="badge bg-secondary">No</span>
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Shuffle Options:</strong></td>
                                    <td>
                                        @if($exam->shuffle_options)
                                            <span class="badge bg-success">Yes</span>
                                        @else
                                            <span class="badge bg-secondary">No</span>
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Publish Results:</strong></td>
                                    <td>
                                        @if($exam->publish_results)
                                            <span class="badge bg-success">Yes</span>
                                        @else
                                            <span class="badge bg-secondary">No</span>
                                        @endif
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    @if($exam->start_time || $exam->end_time)
                        <div class="row mt-3">
                            <div class="col-12">
                                <h6>Schedule</h6>
                                <table class="table table-sm">
                                    @if($exam->start_time)
                                        <tr>
                                            <td><strong>Start Time:</strong></td>
                                            <td>{{ \Carbon\Carbon::parse($exam->start_time)->format('d-m-Y, g:i A') }}</td>
                                        </tr>
                                    @endif
                                    @if($exam->end_time)
                                        <tr>
                                            <td><strong>End Time:</strong></td>
                                            <td>{{ \Carbon\Carbon::parse($exam->end_time)->format('d-m-Y, g:i A') }}</td>
                                        </tr>
                                    @endif
                                </table>
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Questions Section -->
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Exam Questions ({{ $exam->examQuestions->count() }})</h4>
                </div>
                <div class="card-body">
                    @if($exam->examQuestions->count() > 0)
                        @foreach($exam->examQuestions as $index => $examQuestion)
                            <div class="card mb-3">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                        <h6 class="mb-0">Question {{ $index + 1 }}</h6>
                                        <span class="badge bg-primary">{{ $examQuestion->question->question_type }}</span>
                                    </div>
                                    <p class="mb-2">{{ $examQuestion->question->question_text }}</p>
                                    
                                    @if($examQuestion->question->questionOptions->count() > 0)
                                        <div class="mt-2">
                                            <small class="text-muted">Options:</small>
                                            <ul class="list-unstyled mt-1">
                                                @foreach($examQuestion->question->questionOptions as $option)
                                                    <li class="mb-1">
                                                        <span class="badge bg-{{ $option->is_correct ? 'success' : 'light' }} text-{{ $option->is_correct ? 'white' : 'dark' }} me-2">
                                                            {{ chr(64 + $option->sort_order) }}
                                                        </span>
                                                        {{ $option->option_text }}
                                                        @if($option->is_correct)
                                                            <i class="mdi mdi-check text-success"></i>
                                                        @endif
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    @endif

                                    @if($examQuestion->question->explanation)
                                        <div class="mt-2">
                                            <small class="text-info">
                                                <i class="mdi mdi-information"></i> 
                                                <strong>Explanation:</strong> {{ $examQuestion->question->explanation }}
                                            </small>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    @else
                        <div class="text-center text-muted">
                            <i class="mdi mdi-help-circle-outline" style="font-size: 48px;"></i>
                            <p>No questions added to this exam yet.</p>
                            <a href="{{ route('admin.exams.edit', $exam->id) }}" class="btn btn-primary">
                                <i class="mdi mdi-plus"></i> Add Questions
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <!-- Statistics Card -->
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Statistics</h4>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="mb-3">
                                <h3 class="text-primary">{{ $stats['total_questions'] ?? 0 }}</h3>
                                <p class="text-muted mb-0">Questions</p>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <h3 class="text-success">{{ $stats['total_attempts'] ?? 0 }}</h3>
                                <p class="text-muted mb-0">Attempts</p>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <h3 class="text-info">{{ number_format($stats['average_score'] ?? 0, 1) }}%</h3>
                                <p class="text-muted mb-0">Avg Score</p>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <h3 class="text-warning">{{ number_format($stats['pass_rate'] ?? 0, 1) }}%</h3>
                                <p class="text-muted mb-0">Pass Rate</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Status Card -->
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Status</h4>
                </div>
                <div class="card-body">
                    <div class="text-center">
                        @if ($exam->status === 'active')
                            <span class="badge bg-success p-3" style="font-size: 14px;">
                                <i class="mdi mdi-check"></i> Active
                            </span>
                        @elseif ($exam->status === 'scheduled')
                            <span class="badge bg-info p-3" style="font-size: 14px;">
                                <i class="mdi mdi-clock"></i> Scheduled
                            </span>
                        @elseif ($exam->status === 'completed')
                            <span class="badge bg-primary p-3" style="font-size: 14px;">
                                <i class="mdi mdi-check-all"></i> Completed
                            </span>
                        @elseif ($exam->status === 'archived')
                            <span class="badge bg-secondary p-3" style="font-size: 14px;">
                                <i class="mdi mdi-archive"></i> Archived
                            </span>
                        @else
                            <span class="badge bg-warning p-3" style="font-size: 14px;">
                                <i class="mdi mdi-file-document"></i> Draft
                            </span>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Quick Actions</h4>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{{ route('admin.exams.edit', $exam->id) }}" class="btn btn-primary">
                            <i class="mdi mdi-pencil"></i> Edit Exam
                        </a>
                        <a href="{{ route('admin.exams.attempts', $exam->id) }}" class="btn btn-info">
                            <i class="mdi mdi-account-group"></i> View Attempts
                        </a>
                        <a href="{{ route('admin.exams.stats', $exam->id) }}" class="btn btn-success">
                            <i class="mdi mdi-chart-line"></i> View Statistics
                        </a>
                        <button type="button" class="btn btn-warning" onclick="cloneExam({{ $exam->id }})">
                            <i class="mdi mdi-content-copy"></i> Clone Exam
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function cloneExam(examId) {
    if (confirm('Are you sure you want to clone this exam?')) {
        $.ajax({
            url: '{{ route("admin.exams.clone", ":id") }}'.replace(':id', examId),
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.success) {
                    toastr.success(response.message);
                    setTimeout(function() {
                        window.location.href = '{{ route("admin.exams.index") }}';
                    }, 1000);
                } else {
                    toastr.error(response.message);
                }
            },
            error: function() {
                toastr.error('Failed to clone exam');
            }
        });
    }
}
</script>
@endsection