@extends('backend.layouts.app')
@section('head')
    <style>
        .blinkborder {
            position: relative;
            z-index: 1;
            border: 1px #ff0000 solid;
            animation: blink 1s;
            animation-iteration-count: infinite !important;
        }
        .event-none{
            pointer-events: none;
        }
        .card-layer{
            /* content: ''; */
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 2;
            background-color: rgb(255 255 255 / 75%);
        }
        @keyframes blink { 50% { border-color:#fff ;}  }
        .time_text {
            font-size: 30px;
            font-weight: 600;
            color: #22BB33;
        }
    </style>
@endsection
@section('content')
    <div class="row">
        @if($exams->isNotEmpty())
            @foreach ($exams as $exam)
            @if(\App\Models\StudentData::where('exam_id', $exam->id)->where('student_id', Auth::user()->id)->first() == null)
                <div class="col-xxl-4 col-lg-6">
                    <div class="card card-body h-100 text-center">
                        <h4 class="card-title">{{ ucwords($exam->title) }}</h4>
                        <p class="card-text text-muted"> {{$exam->description}} </p>
                        <table class="table table-hover">
                                {{get_time_format($exam->date_and_time)}}
                            <tbody>
                                <tr>
                                    <th scope="row">Unique Exam Id</th>
                                    <td>#{{$exam->exam_id}}</td>
                                </tr>
                                <tr>
                                    <th scope="row">Start Date & Time</th>
                                    <td>{{date('d-m-Y H:i:s', strtotime($exam->date_and_time))}}</td>
                                </tr>
                                <tr>
                                    <th scope="row">Duration</th>
                                    <td> {{$exam->duration}} Minutes</td>
                                </tr>
                            </tbody>
                        </table>
                        @php
                            $diff = strtotime($exam->date_and_time) - strtotime("now");
                        @endphp
                        @if(strtotime($exam->end_date_time) > strtotime("now"))
                            <a href="javascript:void(0);" data-uri="{{route('st.exam-index', encrypt($exam->id))}}" data-time="{{$diff}}" class="btn btn-warning disabled"  id="start_btn" >Start Exam Now</a>
                        @else
                            <a href="{{route('report.student', [encrypt($exam->id), encrypt(Auth::user()->id)])}}" class="btn btn-primary">View Report</a>
                        @endif
                        {{-- <div class="card-layer" @if($exam->date_and_time == $latest_exam->date_and_time) id="count_down"  @endif>
                            <div @if($exam->date_and_time == $latest_exam->date_and_time) id="countdown-container" @endif class="time_text">
                                <span class="time_text"></span>
                            </div>
                        </div> --}}
                    </div>
                </div>
            @endif
            @endforeach
        @endif
    </div>
@endsection

@section('script')

 <script>
        $(document).ready(function() {
            let countdownTime = $('#start_btn').attr("data-time");
            console.log(countdownTime);
            const countdownContainer = $('#start_btn');

            // Update the countdown label every second
            const countdownInterval = setInterval(() => {
            const hours = Math.floor(countdownTime / 3600);
            const minutes = Math.floor((countdownTime % 3600) / 60);
            const seconds = countdownTime % 60;

            const formattedTime = `Exam Start In ${String(hours).padStart(2, '0')} : ${String(minutes).padStart(2, '0')} : ${String(seconds).padStart(2, '0')}`;
            if(countdownTime <= 300){
                countdownContainer.text(formattedTime);
            }
            countdownContainer.text(formattedTime);

            if(minutes < 10){
                $('.time_text').css('color', '#f0ad4e');
            }
            if(minutes < 1){
                $('.time_text').css('color', '#bb2124');
                $('.time_text').fadeIn(1000).fadeOut(50);
            }
            if (countdownTime <= 0) {
                clearInterval(countdownInterval);
                countdownContainer.text('Time\'s up!');
                console.log($('#count_down'));
                $('#count_down').remove()
                $('.event-none').removeClass('event-none');
                $('.blinkborder').css("border-color", "#00ff00");
                countdownContainer.removeClass('btn-warning disabled');
                countdownContainer.addClass('btn-success');
                countdownContainer.text('Start Exam Now');
                countdownContainer.attr("href", countdownContainer.attr("data-uri"));
            }

            countdownTime--;
            }, 1000);
        });

        
 </script>
@endsection