@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>

                        <div style="overflow: auto">

                            <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($exams) --}}
                                    @forelse ($exams as $exam)
                                        <tr>
                                            <td>{{ $exam->id }}</td>
                                            <td>{{ $exam->title }}<span>({{ count($exam->questions) }} Questions)</span>
                                            </td>

                                            <td>
                                                <div class="">
                                                    @php
                                                        $schedule = $exam->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 && $exam->is_upcoming)
                                                        {{-- Countdown Timer --}}
                                                        <div class="badge bg-info text-white border mt-2"
                                                             data-countdown="{{ $startDateTime->timestamp }}"
                                                             data-exam-id="{{ $exam->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>{{ $exam->schedules->first()->staffScheduled->staff->first_name ?? '' }} {{ $exam->schedules->first()->staffScheduled->staff->last_name ?? '' }}</td>
                                            <td>
                                                @foreach($exam->schedules->first()->staffScheduled->admin_assigned_students as $admin)
                                                    {{ $admin->admin->full_name ?? '' }} ,
                                                @endforeach
                                            </td>

                                            <td>
                                                @php
                                                    $submission = $exam->examSubmissions;
                                                @endphp
                                                @if ($exam->examSubmissions)
                                                    @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>

                                            {{-- @dd($exam->attempts) --}}
                                            {{-- @dd($exam->has_submission,$exam->attempts,$exam->is_expired) --}}
                                            @if ($exam->has_submission)
                                                <td>{{ $exam->examSubmissions->submitted_at }}</td>
                                                <td><a href="{{ route('exam.feedback.page', $exam->examSubmissions->id) }}"class="text-decoration-none btn btn-outline-primary btn-sm radius-8">Feedback</a></td>
                                            @elseif ($exam->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 ($exam->attempts->isNotEmpty() && $exam->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 ($exam->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 (!$exam->can_start_now)
                                                <td>-</td>
                                                <td><a class="text-decoration-none btn btn-outline-secondary btn-sm radius-8" style="cursor:not-allowed">Start Exam</a></td>
                                            @else
                                                <td>Start Exam</td>
                                                <td><a class="text-decoration-none load-exam btn btn-outline-success btn-sm radius-8" data-exam-id="{{ $exam->id }}">Start Exam</a></td>
                                            @endif
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="8" class="text-center">No exams found.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="m-2">
                    <div>
                        {{ $exams->appends(request()->except('page'))->links('pagination::bootstrap-5') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


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

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

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

            function loadExamContent(examData, examId) {
                const examTitle = examData.title || 'Untitled Assessment';

                const examHtml = `
                    <div class="card shadow-sm border-0 p-3 rounded-3">
                        <div class="card-body text-center">
                            <div class="fw-bold mb-2">${examData.title}</div>
                            <p class="text-muted mb-3">${examData.description || 'No description available.'}</p>

                            <button class="btn btn-primary btn-lg start-exam mt-3 px-3 py-2" data-exam-id="${examData.id}">
                                <i class="bi bi-play-circle me-2"></i> Start Exam
                            </button>
                        </div>
                    </div>
                `;



                $('#container').removeClass('exam-container').html(examHtml).addClass('exam-container');


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

                    $.ajax({
                        url: '{{ route('startExam') }}',
                        type: 'POST',
                        data: {
                            examId: examId,
                            _token: $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function (response) {
                            if (response.success) {
                                window.location.href ="{{ route('showExamQuestions', ['examId' => 'id']) }}".replace('id', examId);
                            } else {
                                toastr.error(response.error || 'Exam 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 exam. 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> Exam 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