@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)
                @php
                    $st_data = $exam->studentData->where('student_id', Auth::user()->id)->first();
                @endphp
                @if($st_data || strtotime($exam->end_date_time) < strtotime("now"))
                    <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>
                                <a href="{{route('report.student', [encrypt($exam->id), encrypt(Auth::user()->id)])}}" class="btn btn-primary">View Report</a>
                            {{-- <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");
            
            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