@extends('layouts.entry')

@section('content')


    <div class="timer" id="timer">
   
   
    </div>

   

   

    <h1 style='padding-left:5px;padding-top:3px;padding-bottom:5px;border: 2px solid #ccc'>
   
</h1>
 
<div class="container">
   
    @foreach($questions as $index => $question)
        <div class="question-block"  style="background-color:#f8f8f8;padding: 10px; margin-bottom: 10px;">
           
           <div  style="background-color:#ccc; padding: 7px;display:flex;justify-content:space-between">
              <div>
              Question No :   {{ str_pad($question->number, 2, '0', STR_PAD_LEFT) }}
</div>
<div>
                            <a class="button is-small is-info" style="border-radius: 0;"  href="{{route('data.edit', ["paper_id"=>$paper_id,'question_id' => $question->question_id])}}">edit</a>
                        </div>
        
            </div>

           <div>
           <img src="{{ $question->url }}"  class="question-image">
           </div>
            @if(isset($question->url2) && $question->url2)
                <div>
                    <img src="{{ $question->url2 }}" class="question-image">
                </div>
            @endif

            
           <div class="answers-row" style='margin-top:25px'>
                @for($i = 1; $i <= 5; $i++)    
                    <div style='padding:5px 10px; position: relative;' 
                  
                        class="answer-option " 
                        data-question-id="{{ $question->id }}" 
                        data-answer="{{ $i }}" 
                       >
                        <div><img src="{{ $question->{'ans' . $i} }}" class="answer-image"></div>
                      
                        @if($question->answer==$i)
                        <div class="mark-icon correct-mark" style="position: absolute;  right: 10px;">
                            <img src="{{ asset('images/correct.png') }}" width='35px'>
                        </div>
                        @endif
                        

                        @if($question->selected_answer<>$question->answer)
                        @if($question->selected_answer==$i)
                        <div class="mark-icon wrong-mark" style="position: absolute; right: 10px;">
                            <img src="{{ asset('images/wrong.png') }}" width='35px'>
                        </div>
                        @endif
                        @endif


                    </div>
                @endfor
            </div>
        </div>
        @endforeach

   
</div>




<style>
.container {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 60px; /* Make room for the sticky buttons */
}


/* Container for navigation buttons */
.navigation-buttons {
    bottom: 0;
    position: fixed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    width:100%;
    background-color: #f8f9fa;
    box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1);
    border-top: 1px solid #ccc;
   
}

/* Buttons */
.navigation-buttons button {
    background-color: #87ceeb; ; /* Light background color */
    border: none;
    border-radius: 50%; /* Make the button round */
    width: 50px !important;
height: 50px !important;

    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    margin: 0 10px; /* Space between buttons */
}

.answer-image {
    width: 100%;
    height: auto;
    display: block;
}

.answer-option {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
}
.answers-row {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.mark-icon {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-size: 24px;
}
.correct-mark {
    color: green;
}
.wrong-mark {
    color: red;
}

.selected-answer {
   
   background-color: #e0f7ff;
   border: 2px solid #007bff;
}



/* Media query for mobile screens */
@media screen and (max-width: 600px) {
    .navigation-buttons {
        justify-content: space-between; /* Ensure buttons are spaced apart */
        padding: 5px;
    }

    .navigation-buttons button {
        width: 40px; /* Adjust button size for smaller screens */
        height: 40px;
        margin: 0 5px; /* Adjust margin for smaller screens */
    }
}

/* Button hover effect */
.navigation-buttons button:hover {
    background-color: #87ceeb; ; /* Slightly darker on hover */
}

/* Icon inside the button */
.arrow-icon {
    width: 30px;
    height: 30px;
}






/* For screens larger than 768px (tablets and up), keep the content the same width */
@media screen and (min-width: 768px) {
    .container {
        width: 400px; /* Set a fixed width for your container */
        margin: 0 auto; /* Center the container */
    }
    
    .navigation-buttons {
        width: 400px; /* Set the width for the navigation buttons container */
        left: 50%;
        transform: translateX(-50%); /* Center it */
    }
    
    .modal-content {
        width: 400px; /* Fix the width of modal content */
    }

    .fixed-bottom {
        max-width: 400px;
    }

   
}


}

/* Continue your existing styles below */


</style>








@endsection