@extends('layout.layout')

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card h-100 border-0 shadow-sm overflow-hidden p-3">
                    <div id="container">
                        <div
                            class="card-header border-bottom py-3 px-5 d-flex align-items-center flex-wrap justify-content-start gap-3">
                            <form action="" method="GET">
                                <select name="per_page" class="form-select form-select-sm w-auto"
                                    onchange="this.form.submit()">
                                    @foreach ([5, 10, 25, 50, 100, 150] as $count)
                                        <option value="{{ $count }}" {{ request('per_page', 10) == $count ? 'selected' : '' }}>
                                            {{ $count }}
                                        </option>
                                    @endforeach
                                </select>
                            </form>
                            <form class="d-flex" action="" method="GET">
                                <div class="input-group input-group-sm">
                                    <input type="text" class="form-control" name="search" placeholder="Search"
                                        value="{{ request('search') }}">
                                    <button class="btn btn-outline-secondary" type="submit">
                                        <iconify-icon icon="ion:search-outline"></iconify-icon>
                                    </button>
                                </div>
                            </form>

                        </div>

                        <table class="text-center table table-bordered table-sm table bordered-table sm-table mb-0">

                            <thead class="">
                                <tr>
                                    <th class="text-center">Id</th>
                                    <th class="text-center">Name</th>
                                    <th class="text-center">Due Date</th>
                                    <th class="text-center">Teacher</th>
                                    <th class="text-center">Admin</th>
                                    <th class="text-center">Result</th>
                                    <th class="text-center">Submitted Date</th>
                                    <th class="text-center">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {{-- {{ dd($quizzes) }} --}}
                                @forelse ($quizzes as $quiz)
                                    <tr>
                                        <td>{{ $quiz->id }}</td>
                                        <td>{{ $quiz->title }}<span>({{ count($quiz->questions) }} Questions)</span>
                                        </td>

                                        <td>
                                            <div class="">
                                                @php
                                                    $schedule = $quiz->schedules->first();
                                                    $startDateTime = null;
                                                    if ($schedule && $schedule->start_date && $schedule->start_time) {
                                                        $dateOnly = \Carbon\Carbon::parse($schedule->start_date)->format('Y-m-d');
                                                        $startDateTime = \Carbon\Carbon::parse($dateOnly . ' ' . $schedule->start_time);
                                                    }
                                                @endphp
                                                <div class="badge bg-light text-dark border">
                                                    From: <strong>{{ $schedule->start_date ?? '' }}</strong> -
                                                    {{ $schedule->start_time ?? '' }}
                                                </div>
                                                <br>

                                                @if ($startDateTime && $quiz->is_upcoming)
                                                    {{-- Countdown Timer --}}
                                                    <div class="badge bg-info text-white border mt-2" 
                                                            data-countdown="{{ $startDateTime->timestamp }}"
                                                            data-quiz-id="{{ $quiz->id }}">
                                                        <i class="bi bi-clock"></i> Loading...
                                                    </div>
                                                    <br>
                                                @endif

                                                @if ($schedule->schedule_type == 'fixed')
                                                    <div class="badge bg-light text-dark border">
                                                        Grace Period: <strong>{{ $schedule->grace_period ?? '' }}</strong> min

                                                    </div>
                                                @elseif ($schedule->schedule_type == 'flexible')

                                                    <div class="badge bg-light text-dark border">
                                                        To: <strong>{{ $schedule->end_date ?? '' }}</strong> -
                                                        {{ $schedule->end_time ?? ''}}
                                                    </div>
                                                @endif
                                            </div>
                                        </td>

                                        <td>{{ $quiz->schedules->first()->staffScheduled->staff->first_name ?? '' }} {{ $quiz->schedules->first()->staffScheduled->staff->last_name ?? '' }}</td>
                                        <td>
                                            @foreach($quiz->schedules->first()->staffScheduled->admin_assigned_students as $admin)
                                                {{ $admin->admin->full_name ?? '' }} ,
                                            @endforeach
                                        </td>

                                        <td>
                                            @php
                                                $submission = $quiz->quizSubmissions;
                                            @endphp
                                            @if ($quiz->quizSubmissions)
                                                @if ($submission->passed)
                                                    <span class="badge bg-success">Pass</span>
                                                @else
                                                    <span class="badge bg-danger">Fail</span>
                                                @endif
                                            @else
                                                <span class="badge bg-secondary">No Result</span>
                                            @endif
                                        </td>



                                        @if ($quiz->has_submission)
                                            <td>{{ $quiz->quizSubmissions->submitted_at }}</td>
                                            <td><a href="{{ route('quiz.feedback.page', $quiz->quizSubmissions->id) }}" class="text-decoration-none btn btn-outline-primary btn-sm radius-8">Feedback</a>
                                            </td>
                                        @elseif ($quiz->is_upcoming)
                                            <td>Not Started Yet</td>
                                            <td><a class="text-decoration-none btn btn-outline-info btn-sm radius-8" style="cursor:not-allowed">Not Started Yet</a></td>
                                            @elseif ($quiz->attempts->isNotEmpty() && $quiz->attempts->first()->status === 'in_progress')
                                                <td>Already Started</td>
                                                <td> <a class="text-decoration-none btn btn-outline-info btn-sm radius-8" style="cursor:not-allowed">Already Started</a></td>
                                        @elseif ($quiz->is_expired)
                                            <td>Expired</td>
                                            <td><a class="text-decoration-none btn btn-outline-danger btn-sm radius-8" style="cursor:not-allowed">Expired</a></td>
                                        @elseif (!$quiz->can_start_now)
                                            <td>-</td>
                                            <td><a class="text-decoration-none btn btn-outline-secondary btn-sm radius-8" style="cursor:not-allowed">Start Quiz</a></td>
                                        @else
                                            <td>Start Quiz</td>
                                            <td><a class="text-decoration-none load-quiz btn btn-outline-success btn-sm radius-8" data-quiz-id="{{ $quiz->id }}">Start Quiz</a></td>
                                        @endif
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="8" class="text-center">No quizzes found.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="m-2">
                    <div>
                        {{ $quizzes->appends(request()->except('page'))->links('pagination::bootstrap-5') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@push('scripts')
    <script>
        $(document).ready(function () {
            $('.load-quiz').on('click', function (e) {
                e.preventDefault();
                const quizId = $(this).data('quiz-id');

                $.ajax({
                    url: "{{ route('getQuiz', ['id' => 'id']) }}".replace('id', quizId),

                    method: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function (response) {
                        loadQuizContent(response, quizId);
                    },
                    error: function (xhr) {
                        toastr.error('Failed to load the quiz. Please try again.', xhr);
                    }
                });
            });

            function loadQuizContent(quizData, quizId) {
                const quizTitle = quizData.title || 'Untitled Assessment';
                
                 const quizHtml = `
                    <div class="card shadow-sm border-0 p-3 rounded-3">
                        <div class="card-body text-center">
                            <div class="fw-bold mb-2">${quizData.title}</div>
                            <p class="text-muted mb-3">${quizData.description || 'No description available.'}</p>
                            <button class="btn btn-primary btn-lg start-quiz mt-3 px-3 py-2" data-quiz-id="${quizData.id}">
                                <i class="bi bi-play-circle me-2"></i> Start quiz
                            </button>
                        </div>
                    </div>
                `;

                $('#container').removeClass('quiz-container').html(quizHtml).addClass('quiz-container');


                $('.start-quiz').on('click', function (e) {
                    e.preventDefault();
                    const quizId = $(this).data('quiz-id');

                    $.ajax({
                        url: '{{ route('startQuiz') }}',
                        type: 'POST',
                        data: {
                            quizId: quizId,
                            _token: $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function (response) {
                            if (response.success) {
                                window.location.href ="{{ route('showQuestions', ['quizId' => 'id']) }}".replace('id', quizId);

                            } else {
                                toastr.error(response.error || 'Quiz start failed. Please try again.');

                            }
                        },
                         error: function (xhr) {
                            if (xhr.responseJSON && xhr.responseJSON.error) {
                                toastr.error(xhr.responseJSON.error);
                            } else {
                                toastr.error('Failed to start the Quiz. Please try again.');
                            }
                        }
                    });
                });

            }
             // Countdown Timer Logic
            function updateCountdowns() {
                $('[data-countdown]').each(function() {
                    const $this = $(this);
                    const targetTime = parseInt($this.data('countdown'));
                    const now = Math.floor(Date.now() / 1000);
                    const timeDiff = targetTime - now;

                    if (timeDiff <= 0) {
                        $this.removeClass('bg-info').addClass('bg-success');
                        $this.html('<i class="bi bi-check-circle"></i> Quiz Started!');
                        // Optionally reload page after countdown ends
                        setTimeout(function() {
                            location.reload();
                        }, 2000);
                    } else {
                        // Calculate days, hours, minutes, seconds
                        const days = Math.floor(timeDiff / 86400);
                        const hours = Math.floor((timeDiff % 86400) / 3600);
                        const minutes = Math.floor((timeDiff % 3600) / 60);
                        const seconds = timeDiff % 60;

                        let countdownText = '<i class="bi bi-clock"></i> ';
                        
                        if (days > 0) {
                            countdownText += days + 'd ';
                        }
                        if (hours > 0 || days > 0) {
                            countdownText += hours + 'h ';
                        }
                        if (minutes > 0 || hours > 0 || days > 0) {
                            countdownText += minutes + 'm ';
                        }
                        countdownText += seconds + 's';

                        $this.html(countdownText);
                    }
                });
            }

            // Update countdown every second
            if ($('[data-countdown]').length > 0) {
                updateCountdowns();
                setInterval(updateCountdowns, 1000);
            }
        });
    </script>
@endpush