@extends('admin.layouts.app')

@section('page-title', $page_title)

@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item"><a href="{{ route('admin.questions.index') }}">Questions</a></li>
    <li class="breadcrumb-item active">View</li>
@endsection

@section('content')
<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Question Details</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <strong>Question ID:</strong> {{ $question->id }}
                    </div>
                    <div class="col-md-6">
                        <strong>Status:</strong> 
                        <span class="badge bg-{{ $question->status === 'active' ? 'success' : 'secondary' }}">
                            {{ ucfirst($question->status) }}
                        </span>
                    </div>
                </div>
                
                <hr>
                
                <div class="mb-3">
                    <strong>Question Text:</strong>
                    <div class="mt-2 p-3 bg-light rounded">
                        {!! nl2br(e($question->question_text)) !!}
                    </div>
                </div>
                
                @if($question->question_images && is_array($question->question_images) && count($question->question_images) > 0)
                <div class="mb-3">
                    <strong>Question Images:</strong>
                    <div class="mt-2">
                        @foreach($question->question_images as $image)
                            <img src="{{ $image }}" alt="Question Image" class="img-thumbnail me-2" style="max-width: 150px;">
                        @endforeach
                    </div>
                </div>
                @endif
                
                @if($question->explanation)
                <div class="mb-3">
                    <strong>Explanation:</strong>
                    <div class="mt-2 p-3 bg-light rounded">
                        {!! nl2br(e($question->explanation)) !!}
                    </div>
                </div>
                @endif
                
                <div class="row">
                    <div class="col-md-3">
                        <strong>Question Type:</strong><br>
                        <span class="badge bg-info">{{ $question->question_type_label }}</span>
                    </div>
                    <div class="col-md-3">
                        <strong>Difficulty:</strong><br>
                        @php
                            $difficultyColors = [
                                'easy' => 'success',
                                'medium' => 'warning', 
                                'hard' => 'danger'
                            ];
                        @endphp
                        <span class="badge bg-{{ $difficultyColors[$question->difficulty] ?? 'secondary' }}">
                            {{ $question->difficulty_label }}
                        </span>
                    </div>
                    <div class="col-md-3">
                        <strong>Correct Marks:</strong><br>
                        <span class="text-success">{{ $question->mark_correct }}</span>
                    </div>
                    <div class="col-md-3">
                        <strong>Wrong Marks:</strong><br>
                        <span class="text-danger">{{ $question->mark_wrong }}</span>
                    </div>
                </div>
            </div>
        </div>
        
        @if($question->questionOptions && $question->questionOptions->count() > 0)
        <div class="card mt-4">
            <div class="card-header">
                <h5 class="card-title mb-0">Question Options</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>Option</th>
                                <th>Text</th>
                                <th>Correct</th>
                                <th>Order</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($question->questionOptions as $option)
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>{{ $option->option_text }}</td>
                                <td>
                                    @if($option->is_correct)
                                        <span class="badge bg-success">Yes</span>
                                    @else
                                        <span class="badge bg-secondary">No</span>
                                    @endif
                                </td>
                                <td>{{ $option->sort_order }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        @endif
    </div>
    
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Question Information</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <strong>Question Bank:</strong><br>
                    @if($question->bank)
                        <span class="badge bg-primary">{{ $question->bank->title }}</span>
                    @else
                        <span class="text-muted">No Bank</span>
                    @endif
                </div>
                
                <div class="mb-3">
                    <strong>Course:</strong><br>
                    @if($question->course)
                        <span class="badge bg-info">{{ $question->course->title }}</span>
                    @else
                        <span class="text-muted">No Course</span>
                    @endif
                </div>
                
                <div class="mb-3">
                    <strong>Unit:</strong><br>
                    @if($question->unit)
                        <span class="badge bg-warning">{{ $question->unit->title }}</span>
                    @else
                        <span class="text-muted">No Unit</span>
                    @endif
                </div>
                
                <div class="mb-3">
                    <strong>Sort Order:</strong><br>
                    {{ $question->sort_order }}
                </div>
                
                @if($question->tags && is_array($question->tags) && count($question->tags) > 0)
                <div class="mb-3">
                    <strong>Tags:</strong><br>
                    @foreach($question->tags as $tag)
                        <span class="badge bg-secondary me-1">{{ $tag }}</span>
                    @endforeach
                </div>
                @endif
            </div>
        </div>
        
        <div class="card mt-3">
            <div class="card-header">
                <h5 class="card-title mb-0">Actions</h5>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <a href="{{ route('admin.questions.edit', $question->id) }}" class="btn btn-warning">
                        <i class="fas fa-edit"></i> Edit Question
                    </a>
                    <button type="button" class="btn btn-primary clone-item" data-id="{{ $question->id }}">
                        <i class="fas fa-copy"></i> Clone Question
                    </button>
                    <button type="button" class="btn btn-{{ $question->status === 'active' ? 'secondary' : 'success' }} toggle-status" 
                            data-id="{{ $question->id }}" data-status="{{ $question->status }}">
                        <i class="fas fa-{{ $question->status === 'active' ? 'pause' : 'play' }}"></i> 
                        {{ $question->status === 'active' ? 'Deactivate' : 'Activate' }}
                    </button>
                    <button type="button" class="btn btn-danger delete-item" 
                            data-id="{{ $question->id }}" 
                            data-name="{{ Str::limit($question->question_text, 50) }}">
                        <i class="fas fa-trash"></i> Delete Question
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Toggle status
    $('.toggle-status').click(function() {
        const id = $(this).data('id');
        const status = $(this).data('status');
        const newStatus = status === 'active' ? 'inactive' : 'active';
        
        if (confirm(`Are you sure you want to ${newStatus} this question?`)) {
            $.ajax({
                url: `/admin/questions/${id}/toggle-status`,
                method: 'POST',
                data: { _token: $('meta[name="csrf-token"]').attr('content') },
                success: function(response) {
                    if (response.success) {
                        location.reload();
                    } else {
                        alert(response.message || 'Failed to update status');
                    }
                },
                error: function() {
                    alert('Failed to update status');
                }
            });
        }
    });

    // Clone item
    $('.clone-item').click(function() {
        const id = $(this).data('id');
        
        if (confirm('Are you sure you want to clone this question?')) {
            $.ajax({
                url: `/admin/questions/${id}/clone`,
                method: 'POST',
                data: { _token: $('meta[name="csrf-token"]').attr('content') },
                success: function(response) {
                    if (response.success) {
                        location.reload();
                    } else {
                        alert(response.message || 'Failed to clone question');
                    }
                },
                error: function() {
                    alert('Failed to clone question');
                }
            });
        }
    });
});
</script>
@endpush