@extends('components.dashboard.layouts.master')

@section('title',__($titleKey))

@section('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <style>
        body {
            background-color: #f4f6f9;
        }

        .app-content.content {
            padding: 0 15px 40px;
            background: #fdfdfd;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        }

        .card {
            border: none;
            border-radius: 10px;
            margin-bottom: 25px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            background-color: #ffffff;
        }

        .card-header {
            background-color: #0A4199;
            color: #fff;
            font-size: 1.5rem;
            font-weight: 700;
            padding: 15px 20px;
            border-bottom: none;
        }

        .card-body {
            padding: 20px 25px;
            background-color: #ffffff;
            font-size: 1.3rem;
        }

        .exam-details-list {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            list-style: none;
            padding: 0;
        }

        .exam-details-list li {
            flex: 1 1 calc(50% - 20px);
            background: #f1f4fa;
            padding: 15px;
            border-radius: 8px;
        }

        .stat-box {
            background: #f1f4fa;
            border-radius: 1rem;
            padding: 2rem 1rem;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
            transition: all 0.3s ease;
            position: relative;
            margin-bottom: 30px;
        }

        .stat-box .icon {
            font-size: 2.2rem;
            color: #0A4199;
        }

        .stat-box h6 {
            font-weight: bold;
            font-size: 1.1rem;
        }

        .stat-box p {
            font-size: 1.25rem;
        }

        ol, ul {
            padding-right: 1rem;
        }
        .btn-student-view {
            background: linear-gradient(135deg, #0A4199, #4e95d3);
            color: #fff;
            font-weight: 700;
            padding: 14px 32px;
            border-radius: 40px;
            font-size: 1.25rem;
            box-shadow: 0 8px 15px rgba(10, 65, 153, 0.3);
            transition: all 0.3s ease;
            text-decoration: none;
            user-select: none;
        }
        .btn-student-view:hover {
            background: linear-gradient(135deg, #083370, #356ab7);
            box-shadow: 0 12px 20px rgba(10, 65, 153, 0.5);
            transform: translateY(-3px);
            text-decoration: none;
            color: #fff;
        }
        .btn-student-view:active {
            transform: translateY(-1px);
            box-shadow: 0 6px 10px rgba(10, 65, 153, 0.2);
        }
        .bounce-icon {
            animation: bounce 1.5s infinite;
        }

        @keyframes bounce {
            0%, 100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-5px);
            }
        }

    </style>

@endsection


@section('content')



    <div class="app-content content">
        <div class="content-wrapper">
            <x-dashboard.layouts.breadcrumb now="{{ __($titleKey) }}">
                <li class="breadcrumb-item">
                    <a href="{{ route('teacher.quiz.exams.index') }}">
                        {{ __('Quizzes and Exams') }}
                    </a>
                </li>
            </x-dashboard.layouts.breadcrumb>

            <div class="card">
                <div class="card-header bg-gradient text-center text-white fs-4 fw-bold d-flex justify-content-center align-items-center"
                     style="background: linear-gradient(90deg, #0A4199, #4e95d3); padding: 12px 0;">
                    <i class="bi bi-file-earmark-text me-2 mx-1"></i> {{ __($titleKey) }}
                </div>

                <div class="card-body">
                    <ul class="exam-details-list row">
                              <li class="col-sm-12 col-md-6 mt-2"><strong>{{__('Title')}}:</strong> {{ $item->title }}</li>
                               <li class="col-sm-12 col-md-6 mt-2"><strong>{{__('Number Of Questions')}}:</strong> {{ $item->number_of_questions }}</li>
                        @if(isset($item->start_time))
                               <li class="col-sm-12 col-md-6 mt-2"><strong>{{__('Start Date')}}:</strong> {{ $item?->start_time ?? ''}}</li>
                        @endif
                        @if(isset($item->end_time))
                                <li class="col-sm-12 col-md-6 mt-2"><strong>{{__('End Date')}}:</strong> {{ $item?->end_time ?? ''}}</li>
                        @endif

                        <li class="col-sm-12 col-md-6 mt-2"><strong>{{__('Duration')}}:</strong> {{ $item->duration }} دقيقة</li>
                        @if(isset($item->creation_type))
                                <li class="col-sm-12 col-md-6 mt-2"><strong>{{__('Questions Order')}}:</strong>
                                   {{__($item->creation_type)}}
                                </li>
                        @endif
                            @if(!empty($item->description))
                                <li class="col-sm-12 col-md-12 mt-2"><strong>{{__('Description')}}</strong> {{ $item->description }}</li>
                            @endif
                        @if(isset($item->success_percentage))
                            <li class="col-sm-12 col-md-6 mt-2"><strong>{{__('Success Percentage')}}:</strong>
                                {{__($item->success_percentage)}} %
                            </li>
                        @endif
                        @if(isset($item->is_question_shuffle))
                            <li class="col-sm-12 col-md-6 mt-2">
                                <strong>{{ __('Shuffle Questions') }}:</strong>
                                {{ $item->is_question_shuffle ? __('Yes') : __('No') }}
                            </li>
                        @endif
                        @if(isset($item->see_result))
                            <li class="col-sm-12 col-md-6 mt-2">
                                <strong>{{ __('See Result') }}:</strong>
                                {{ $item->see_result ? __('Yes') : __('No') }}
                            </li>
                        @endif

                        @if(isset($item->with_rules))
                            <li class="col-sm-12 col-md-6 mt-2">
                                <strong>{{ __('With Rules') }}:</strong>
                                {{ $item->with_rules ? __('Yes') : __('No') }}
                            </li>
                        @endif

                        @if(isset($item->with_calculator))
                            <li class="col-sm-12 col-md-6 mt-2">
                                <strong>{{ __('With Calculator') }}:</strong>
                                {{ $item->with_calculator ? __('Yes') : __('No') }}
                            </li>
                        @endif


                    </ul>
                    @php
                        $type = $item instanceof \App\Models\Quiz ? 'quiz' : 'exam';
                    @endphp


                    <div class="text-center my-4">
                                <a href="{{ route('teacher.quiz.exams.students.index', ['id' => $item->id, 'type' => $type])}}"
                                   class="btn btn-student-view d-inline-flex align-items-center gap-2 shadow-lg px-3 py-1 fs-5"
                                   style="background: linear-gradient(135deg, #1172c2, #38a1f3); border-radius: 50px;">
                                    <i class="bi bi-people-fill fs-4 bounce-icon"></i>
                                    {{ __('Show Students') }}
                                </a>

                            </div>
                    </div>
                </div>


            <div class="card shadow border-0">
                <div class="card-header bg-gradient text-center text-white fs-4 fw-bold d-flex justify-content-center align-items-center"
                     style="background: linear-gradient(90deg, #0A4199, #4e95d3); padding: 12px 0;">
                    <i class="bi bi-graph-up-arrow me-2 mx-1"></i>
                    {{ __('Success Statistics') }}
                </div>

                @php
                    $hasBasicStats = isset($totalStudents) && isset($passedStudents) && isset($failedStudents);
                    $colClass = $hasBasicStats ? 'col-md-4' : 'col-12';
                @endphp

                <div class="card-body">
                    <div class="row g-4 text-center">
                        @if(isset($totalStudents))
                            <div class="{{ $colClass }}">
                                <div class="stat-box border-top border-primary border-4">
                                    <i class="bi bi-people icon text-primary"></i>
                                    <h6>{{ __('Total Students') }}</h6>
                                    <p>{{ $totalStudents }}</p>
                                </div>
                            </div>
                        @endif

                        @if(isset($passedStudents))
                            <div class="{{ $colClass }}">
                                <div class="stat-box border-top border-success border-4">
                                    <i class="bi bi-check-circle icon text-success"></i>
                                    <h6>{{ __('Passed Students') }}</h6>
                                    <p>{{ $passedStudents }}</p>
                                </div>
                            </div>
                        @endif

                        @if(isset($failedStudents))
                            <div class="{{ $colClass }}">
                                <div class="stat-box border-top border-danger border-4">
                                    <i class="bi bi-x-circle icon text-danger"></i>
                                    <h6>{{ __('Failed Students') }}</h6>
                                    <p>{{ $failedStudents }}</p>
                                </div>
                            </div>
                        @endif

                        {{-- بيانات أخرى مثل الدرجات --}}
                        @php
                            // هذه القيم لا تحتاج تغيير الكول، لأنها تظهر فقط لو البيانات موجودة
                            $scoreColClass = 'col-md-4';
                        @endphp

                        @if(isset($highestScore))
                            <div class="{{ $scoreColClass }}">
                                <div class="stat-box border-top border-warning border-4">
                                    <i class="bi bi-arrow-up icon text-warning"></i>
                                    <h6>{{ __('Highest Score') }}</h6>
                                    <p>{{ number_format($highestScore, 2) }}%</p>
                                </div>
                            </div>
                        @endif

                        @if(isset($lowestScore))
                            <div class="{{ $scoreColClass }}">
                                <div class="stat-box border-top border-secondary border-4">
                                    <i class="bi bi-arrow-down icon text-secondary"></i>
                                    <h6>{{ __('Lowest Score') }}</h6>
                                    <p>{{ number_format($lowestScore, 2) }}%</p>
                                </div>
                            </div>
                        @endif

                        @if(isset($averageScore))
                            <div class="{{ $scoreColClass }}">
                                <div class="stat-box border-top border-info border-4">
                                    <i class="bi bi-bar-chart-line icon text-info"></i>
                                    <h6>{{ __('Average Score') }}</h6>
                                    <p>{{ number_format($averageScore, 2) }}%</p>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Questions -->
{{--            <div class="card shadow-sm">--}}

{{--                <div class="card-header bg-gradient text-center text-white fs-4 fw-bold d-flex justify-content-center align-items-center"--}}
{{--                     style="background: linear-gradient(90deg, #0A4199, #4e95d3); padding: 12px 0;">--}}
{{--                    <i class="bi bi-patch-question me-2 mx-1"></i> {{ __('Questions') }}--}}

{{--                </div>--}}
{{--                @php--}}
{{--                    $totalScore = $item->questions->sum('score');--}}
{{--                @endphp--}}

{{--                <div class="card-body">--}}
{{--                    <div class="d-flex justify-content-between align-items-center mb-4 border-bottom pb-3">--}}
{{--                        <h5 class="fw-semibold mb-0">{{ __('Total Score') }}</h5>--}}
{{--                        <span class="badge bg-success fs-5 px-4 py-2">{{ $totalScore }}</span>--}}
{{--                    </div>--}}

{{--                    <ol class="list-group list-group-numbered">--}}
{{--                        @foreach($item->questions as $question)--}}
{{--                            <li class="list-group-item mb-3 rounded-3 shadow-sm">--}}
{{--                                <div class="d-flex justify-content-between align-items-center mb-2">--}}
{{--                                    <div class="fw-semibold fs-6 d-flex align-items-center gap-2">--}}
{{--<span class="rounded-circle bg-primary text-white d-inline-flex justify-content-center align-items-center fw-bold mr-1"--}}
{{--      style="width: 25px; height: 25px;">--}}
{{--    {{ $loop->iteration }}--}}
{{--</span>--}}
{{--                                        <div class="d-flex flex-column align-items-start gap-2">--}}
{{--                                            @if($question->question_image)--}}
{{--                                                <img--}}
{{--                                                    src="{{ $question->question_image }}"--}}
{{--                                                    alt="Question Image"--}}
{{--                                                    style="max-height: 200px; max-width: 200px; object-fit: contain; cursor: pointer;"--}}
{{--                                                    data-bs-toggle="modal"--}}
{{--                                                    data-bs-target="#imageModal{{ $loop->iteration }}"--}}
{{--                                                >--}}

{{--                                                <div class="modal fade" id="imageModal{{ $loop->iteration }}" tabindex="-1" aria-labelledby="imageModalLabel{{ $loop->iteration }}" aria-hidden="true">--}}
{{--                                                    <div class="modal-dialog modal-dialog-centered modal-lg">--}}
{{--                                                        <div class="modal-content">--}}
{{--                                                            <div class="modal-body p-0">--}}
{{--                                                                <img src="{{ $question->question_image }}" alt="Question Image" class="img-fluid w-100" style="object-fit: contain;">--}}
{{--                                                            </div>--}}
{{--                                                            <div class="modal-footer">--}}
{{--                                                                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">{{ __('Close') }}</button>--}}
{{--                                                            </div>--}}
{{--                                                        </div>--}}
{{--                                                    </div>--}}
{{--                                                </div>--}}
{{--                                            @endif--}}

{{--                                            <div>{{ $question->question_text }}</div>--}}
{{--                                        </div>--}}



{{--                                    </div>--}}
{{--                                    <span class="badge bg-primary text-white rounded-pill fw-semibold shadow-sm"--}}
{{--                                          style="font-size: 1rem; padding: 0.6rem 1rem;">--}}
{{--    {{ $question->score }} {{ __("Point") }}--}}
{{--</span>--}}
{{--                                </div>--}}

{{--                                @if($question->question_type === \App\Enum\QuestionTypeEnum::MCQ)--}}
{{--                                    <ul class="list-group">--}}
{{--                                        @foreach($question->options as $option)--}}
{{--                                            <li class="list-group-item d-flex justify-content-between align-items-center--}}
{{--                    @if($option->is_correct) list-group-item-success fw-bold @endif">--}}
{{--                    <span class="d-flex align-items-center gap-2">--}}
{{--                        @if($option->photo)--}}
{{--                            <img src="{{ $option->photo }}" alt="Option Image" style="max-height: 80px; max-width: 150px; object-fit: contain;">--}}
{{--                        @else--}}
{{--                            {{ $option->answer }}--}}
{{--                        @endif--}}
{{--                    </span>--}}
{{--                                                @if($option->is_correct)--}}
{{--                                                    <span class="badge bg-success">{{ __('Correct') }}</span>--}}
{{--                                                @endif--}}
{{--                                            </li>--}}
{{--                                        @endforeach--}}
{{--                                    </ul>--}}
{{--                                @elseif($question->question_type === \App\Enum\QuestionTypeEnum::GridIn)--}}
{{--                                    <div class="alert alert-success mt-3 mb-0">--}}
{{--                                        <strong>{{ __('Answer') }}:</strong> {{ $question->answer }}--}}
{{--                                    </div>--}}
{{--                                @endif--}}
{{--                            </li>--}}

{{--                        @endforeach--}}
{{--                    </ol>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--            </div>--}}
        </div>
    @endsection
@section('script')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

@endsection