@extends('layouts.app')
@php($hideLayout = true)

@push('css')
    <link rel="stylesheet" href="{{ asset('assets/css/sweetalert2.min.css') }}">
@endpush
@section('content')
    <div class="min-h-screen bg-gray-100 py-10 px-2">

        <!-- Exam Card -->
        <div class="max-w-4xl mx-auto bg-white shadow-lg rounded-xl border border-gray-200">

            <!-- Header -->
            <div class="bg-primary text-white text-center py-3 rounded-t-xl">
                <h1 class="text-3xl font-bold">HSC 2026 Test</h1>
            </div>

            <div class="p-4 md:p-6 pt-2 md:pt-2 relative">
                <!-- ✅ Sticky Timer -->
                <div class="flex justify-center mb-3 sticky top-0 z-50">
                    <div id="timer" class="flex items-center justify-center gap-2 text-2xl font-bold bg-white pt-2">
                        <span id="hours" class="text-white bg-gray-700 rounded px-2.5 py-1">00</span>
                        <span class="text-gray-700">:</span>
                        <span id="minutes" class="text-white bg-gray-700 rounded px-2.5 py-1">00</span>
                        <span class="text-gray-700">:</span>
                        <span id="seconds" class="text-white bg-gray-700 rounded px-2.5 py-1">00</span>
                    </div>
                </div>


                <!-- Exam Info -->
                <div class="bg-primary-light border border-gray-200 rounded-lg  px-4 py-3 mb-6">
                    <div class="flex flex-wrap justify-between text-center text-sm text-gray-700 font-medium">
                        <div>Questions: <span class="font-bold text-primary text-md">{{count($exam->questions)}}</span></div>
                        <div>Full Marks: <span class="font-bold text-green-600 text-md">{{$exam->total_marks}}</span></div>
                        <div>Time: <span class="font-bold text-blue-600 text-md">{{$exam->duration_minutes}} min</span></div>
                    </div>
                </div> <!-- User Info -->
                <form action="{{route('dashboard.exam.submit',$exam->id)}}" method="POST">
                    @csrf
                    <div class="mb-12">
                        <h2 class="text-lg font-semibold mb-4 text-gray-800 border-l-4 border-primary pl-3"> পরীক্ষার্থীর
                            তথ্য
                        </h2>
                        <input type="hidden" name="start_time" id="start_time">
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
                            <div> <label class="block mb-1 text-sm font-medium text-gray-700">নাম</label>
                                <input type="text" id="userName" placeholder="আপনার নাম লিখুন" class="py-2" name="name" required value="{{Auth::user()->name}}">
                            </div>
                            <div>
                                <label class="block mb-1 text-sm font-medium text-gray-700">প্রতিষ্ঠানের নাম</label>
                                <input type="text" id="instituteName" placeholder="প্রতিষ্ঠানের নাম" class="py-2" name="institute_name"
                                    required>
                            </div>
                            <div> <label class="block mb-1 text-sm font-medium text-gray-700">মোবাইল নাম্বার</label>
                                <input type="text" id="userNumber" name="phone" placeholder="মোবাইল নাম্বার লিখুন" class="py-2"value="{{Auth::user()->phone}}"
                                    required>
                            </div>
                        </div>
                    </div>


                    <div id="questionsWrapper">
                        @foreach ($exam->questions as $index => $question)
                            <div class="question {{ $index === 0 ? '' : 'hidden' }}" data-index="{{ $index }}">
                                <h2 class="font-semibold text-xl mb-4 bg-gray-200/80 rounded-md p-2 shadow">
                                    <span
                                        class="bg-primary text-white rounded-full w-8 h-8 inline-flex items-center justify-center">
                                        {{ $index + 1 }}.
                                    </span>
                                    {{ $question->question }}
                                </h2>

                                <div class="space-y-2 ml-5">
                                    @foreach (['option_1', 'option_2', 'option_3', 'option_4'] as $optKey)
                                        <label
                                            class="flex items-center border border-gray-300 bg-slate-50 rounded-lg px-4 py-2.5 cursor-pointer hover:bg-primary/5 transition mb-3">
                                            <input type="radio" name="answers[{{ $question->id }}]" value="{{ $optKey }}"
                                                class="mr-3 text-primary focus:ring-primary !w-fit">
                                            <span>{{ $question->$optKey }}</span>
                                        </label>
                                    @endforeach
                                </div>
                            </div>
                        @endforeach

                    </div>



                    <div id="questionNav" class="flex flex-wrap justify-center gap-2 mt-7 mb-5">
                        @foreach ($exam->questions as $index => $q)
                            <button type="button"
                                class="nav-btn w-8 h-8 rounded-full cursor-pointer bg-gray-200 font-medium text-gray-700">{{ $index + 1 }}</button>
                        @endforeach
                    </div>

                    <div class="flex justify-between mt-8">
                        <button id="prevBtn" type="button"
                            class="py-2 px-4 bg-gray-200 rounded-md text-md font-medium hover:bg-gray-300 duration-300 cursor-pointer hidden">←
                            Previous</button>
                        <button id="nextBtn" type="button"
                            class="py-2 px-4 bg-secondary text-white rounded-md text-md hover:opacity-90 duration-300 cursor-pointer font-medium ">Next
                            →</button>
                    </div>

                    <div class="text-right mt-10 " id="submitSection">
                        <button id="submitBtn" class="btn-primary" type="submit">Submit Exam</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @push('js')
        <script src="{{ asset('assets/js/sweetalert2.min.js') }}"></script>
        <script>
            $(document).ready(function() {

                let current = 0;
                const questions = $('.question');
                const navButtons = $('.nav-btn');

                $('input[type="radio"]').on('change', function() {
                    const $questionDiv = $(this).closest('.question');
                    const index = $questionDiv.data('index'); // Use data-index instead of ID

                    // style for label
                    $questionDiv.find('input[type="radio"]').each(function() {
                        $(this).closest('label').removeClass(
                            'border-primary !bg-primary/10 text-primary');
                    });
                    $(this).closest('label').addClass('border-primary !bg-primary/10 text-primary');

                    // mark nav button as answered
                    navButtons.eq(index).addClass('!bg-primary text-white');
                });


                navButtons.click(function() {
                    const index = $(this).index();
                    showQuestion(index);
                });


                $('#nextBtn').click(function() {
                    if (current < questions.length - 1) {
                        showQuestion(current + 1);
                    }
                });

                $('#prevBtn').click(function() {
                    if (current > 0) {
                        showQuestion(current - 1);
                    }
                });

                function showQuestion(index) {
                    questions.addClass('hidden');
                    $(questions[index]).removeClass('hidden');
                    navButtons.removeClass('bg-primary-light border border-primary');
                    navButtons.eq(index).addClass('bg-primary-light border border-primary');
                    current = index;

                    // toggle prev/next visibility
                    $('#prevBtn').toggle(current > 0);
                    $('#nextBtn').toggle(current < questions.length - 1);
                }


                showQuestion(0);
            });
        </script>


        <script>
            function showFullScreenAlert() {
                Swal.fire({
                    icon: 'info',
                    title: 'পরীক্ষার সতর্কবার্তা!',
                    text: ' আপনার ব্রাউজার পূর্ণ-স্ক্রীন মোডে যেতে হবে।',
                    confirmButtonText: 'Go Full Screen',
                    allowOutsideClick: false,
                    allowEscapeKey: false
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Request full screen
                        let elem = document.documentElement;
                        if (elem.requestFullscreen) {
                            elem.requestFullscreen();
                        } else if (elem.mozRequestFullScreen) {
                            elem.mozRequestFullScreen();
                        } else if (elem.webkitRequestFullscreen) {
                            elem.webkitRequestFullscreen();
                        } else if (elem.msRequestFullscreen) {
                            elem.msRequestFullscreen();
                        }
                    }
                });
            }

            // Listen if user exits full screen
            document.addEventListener('fullscreenchange', () => {
                if (!document.fullscreenElement) {
                    showFullScreenAlert();
                }
            });

            // For Firefox
            document.addEventListener('mozfullscreenchange', () => {
                if (!document.mozFullScreenElement) {
                    showFullScreenAlert();
                }
            });

            // For Webkit (Chrome, Safari, Opera)
            document.addEventListener('webkitfullscreenchange', () => {
                if (!document.webkitFullscreenElement) {
                    showFullScreenAlert();
                }
            });

            // For IE/Edge
            document.addEventListener('msfullscreenchange', () => {
                if (!document.msFullscreenElement) {
                    showFullScreenAlert();
                }
            });


            $('#submitBtn').on('click', function(e) {
                e.preventDefault(); // Prevent default form submission (if it's a form)

                 const name = $('#userName').val().trim();
    const phone = $('#userNumber').val().trim();

    if (!name || !phone) {
        Swal.fire({
            icon: 'error',
            title: 'ফিল্ড পূরণ করুন',
            text: 'নাম এবং মোবাইল নাম্বার অবশ্যই পূরণ করতে হবে।'
        });
        return; // stop submit
    }

                Swal.fire({
                    title: 'আপনি কি নিশ্চিত?',
                    text: "আপনি পরীক্ষা জমা দিতে যাচ্ছেন।",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#1D4ED8',
                    cancelButtonColor: '#EF4444',
                    confirmButtonText: 'হ্যাঁ, জমা দিন',
                    cancelButtonText: 'না, বাতিল করুন'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Submit the exam
                        console.log("Exam submitted!");
                        // If it's a form:
                         $(this).closest('form').submit();
                    }
                });
            });



              // Get duration from PHP variable
                let durationMinutes = {{ $exam->duration_minutes }}; // e.g., 27
                let totalSeconds = durationMinutes * 60;

                function startTimer() {
                    const timerInterval = setInterval(() => {
                        let hours = Math.floor(totalSeconds / 3600);
                        let minutes = Math.floor((totalSeconds % 3600) / 60);
                        let seconds = totalSeconds % 60;

                        // Pad with leading zeros
                        $('#hours').text(hours.toString().padStart(2, '0'));
                        $('#minutes').text(minutes.toString().padStart(2, '0'));
                        $('#seconds').text(seconds.toString().padStart(2, '0'));

                        if (totalSeconds <= 0) {
                            clearInterval(timerInterval);

                            Swal.fire({
                                icon: 'info',
                                title: 'সময় শেষ!',
                                text: 'পরীক্ষার সময় শেষ হয়ে গেছে।',
                                confirmButtonText: 'ঠিক আছে',
                                allowOutsideClick: false,
                                allowEscapeKey: false,
                                timer: 3000,
                                timerProgressBar: true,
                                didOpen: () => {
                                    const b = Swal.getHtmlContainer().querySelector('b')
                                },
                                willClose: () => {
                                    $('#submitBtn').closest('form').submit();
                                }
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    $('#submitBtn').closest('form').submit();
                                }
                            });

                        }

                        totalSeconds--;
                    }, 1000);
                }




            function showExamInstructions() {
                Swal.fire({
                    title: '<span >পরীক্ষা নির্দেশনা</span>',
                    html: `
            <div style="text-align: left; line-height: 1.6;">
                <p style="margin-bottom: 10px;">নিম্নলিখিত নির্দেশনাগুলি মেনে পরীক্ষা শুরু করুন:</p>
                <ul style="padding-left: 1.2rem; color:#374151; font-size: 16px;">
                    <li>✅ পরীক্ষাটি <strong>পূর্ণ-স্ক্রীন মোডে</strong> দেওয়া আবশ্যক।</li>
                    <li>✅ পরীক্ষার সময় <strong>ট্যাব পরিবর্তন</strong> করা যাবে না।</li>
                    <li>✅ সময় শেষ হলে পরীক্ষাটি <strong>স্বয়ংক্রিয়ভাবে জমা</strong> হবে।</li>
                    <li>✅ ইন্টারনেট সংযোগ <strong>স্থিতিশীল</strong> রাখতে হবে।</li>
                </ul>
                <p style="margin-top: 10px; color:#6B7280; font-size: 14px;">
                    অনুগ্রহ করে সব নির্দেশনা পড়ে তারপর পরীক্ষা শুরু করুন।
                </p>
            </div>
        `,

                    confirmButtonText: 'Start Exam',
                    background: '#F9FAFB',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    showClass: {
                        popup: 'swal2-show swal2-animate-fade-in'
                    },
                    hideClass: {
                        popup: 'swal2-hide swal2-animate-fade-out'
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        
                        // Request full-screen mode
                        let elem = document.documentElement;
                        if (elem.requestFullscreen) {
                            elem.requestFullscreen();
                        } else if (elem.mozRequestFullScreen) {
                            /* Firefox */
                            elem.mozRequestFullScreen();
                        } else if (elem.webkitRequestFullscreen) {
                            /* Chrome, Safari, Opera */
                            elem.webkitRequestFullscreen();
                        } else if (elem.msRequestFullscreen) {
                            /* IE/Edge */
                            elem.msRequestFullscreen();
                        }

                        // Start the exam timer or load exam here
                        startTimer();
                    $('#start_time').val(new Date().toISOString().slice(0, 19).replace('T', ' '));

                    }
                });
            }




            // Show instructions on page load
            showExamInstructions();

        
              

            
        </script>
    @endpush
@endsection