Sindbad~EG File Manager

@extends('layout')
@section('content')
<?php 

  $mcq_option_id = isset($mcq_user_answer)? $mcq_user_answer->mcq_option_id :0;
  $url = url('mcq/'.Helper::encrypt($course_id).'/'.Helper::encrypt($mcq->mcq_id));
  $url_2 = url('user/question_index/'.$enc_course_id);
  
 ?>

<!-- <h1>Home</h1> -->
<style type="text/css">
   @media screen and (max-width: 600px) {

  .mobile-responsive table {
    border: 0;
    border-collapse: collapse;
  }

 .mobile-responsive table thead {
    display:none;
  }
  .mobile-responsive table th {
    display:none;
  }
  
  
 .mobile-responsive table tr {
    margin-bottom: 20px;
    display: block;
    border-bottom: 2px thin #faf5f5;
    box-shadow: 2px 2px 1px #dadada;
    border-collapse: collapse;

  }



 .mobile-responsive table td {
    display: block;
    text-align: right;
    font-size: 15px;
    border-collapse: collapse;
    padding: 25px;
  }

 .mobile-responsive table td:last-child {
    border-bottom: 0;
  }

 .mobile-responsive table td::before {
    content: attr(data-label);
    float: left;
    text-transform: uppercase;
    font-weight: bold;
    
  }

  /* .mobile-responsive tbody{
    line-height:0!important;
  } */
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }
  .sidebar a {float: left;}
  div.content {margin-left: 0;}
  .sidebar a {
    text-align: center;
    float: none;
  }
}

.text-warning
{
    color:#6e0d30 !important;    
}

</style>
  <!--  <div class="row">-->
  <!--      <div class="col-lg-4 col-md-12 col-sm-12 text-left">-->
  <!--        <span class="h5 alert alert-warning pt-0 pb-0" style="display: block;">Total Time Left : <span id="countdown"></span></span>-->
  <!--      </div>-->
  <!--</div>-->

 <div class="col-md-12 text-center">
    <h4> Question Index</h4>
 </div>
       <div class="row">
        <div class="col-md-4 col-sm-12 col-md-6 mr-2 p-3">
            <a href="{{$url_2}}" class="btn btn-primary text-white">All</a>
            <a href="{{$url_2}}?status=skipped" class="btn btn-warning text-white">Skipped</a>
            <a href="{{$url_2}}?status=notanswer" class="btn btn-info text-white">Not answered</a>
            
         </div>
         
        </div> 
        <div class="row">
            <div class="col-lg-8 col-sm-12 col-md-12">
                    <h5><span >Completed </span><span class="text-success">{{ $courses->completed_count }}</span> / <span class="text-danger">{{ $courses->course_question_limit }}</span></h5>
                    
                </div>
                <div class="col-lg-4 col-sm-12 col-md-12 text-center">
                    <span class="h5 alert alert-warning" style="display: block;padding: 5px 5px;">Total Time Left : <span id="countdown"></span></span>
                </div>    
             </div>



<table class="table table-striped  mobile-responsive"  cellpadding="6" border="3px solid black"  id="myTable">
   <thead class="thead-dark">
   <tr cellpadding="7" >
      <th>Q.No</th>
      <th>Question</th>
      <th>Your Answer</th>

   </tr>
   </thead>


  <tbody> 
       @if(isset($results))
            <?php $i=1;  $total_ques = 0 ;?>

            @foreach($results as $result)
            <?php 
              $url = url('mcq/'.Helper::encrypt($result->course_id).'/'.Helper::encrypt($result->mcq_id)).'?answer_status='.$answer_status;
              $skipped_url = url('mcq/'.Helper::encrypt($result->course_id).'/'.Helper::encrypt($result->mcq_id)).'?answer_status=skipped';
              $notanswer_url = url('mcq/'.Helper::encrypt($result->course_id).'/'.Helper::encrypt($result->mcq_id)).'?answer_status=notanswer';
            ?>
              
            <tr>
               <td data-label ="Q.NO"> {{ $result->order_no }}</td>
               <td data-label ="Question"><a href="{{$url}}" style="color:black;">{{ $result->question}}</a>  </td>
               @if(isset($result->option_initial))
                 <td data-label = "Your Answer">
                     <a class="text-primary" href="{{$url}}" ><span class="glyphicon glyphicon-pencil"></span>{{$result->option_initial}}.  {{$result->option_name}}</a></td>
               @else
                 <td data-label = "Click">
                 
                 @if($result->is_skip ==1)
                    <a class="text-warning" href="{{$skipped_url}}" ><span class="glyphicon glyphicon-pencil">skipped</span></a>
                 @else
                    <a class="text-danger" href="{{$notanswer_url}}" ><span class="glyphicon glyphicon-pencil"></span>yet to answer</a>
                 @endif
                 
                 
                 
                 <!-- <a class="btn btn-primary btn-xs" href="{{URL::to('mcq')}}"><span class="glyphicon glyphicon-pencil"></span> Click to answer</a>-->
                 </td>
              @endif
               
       
              
            </tr>
            <?php $i = $i+1 ; $total_ques = 0 ; ?>
            @endforeach
       @else     
       <tr>
          <td colspan="3"> <span style="color: red;"> Record not found.</span></td>
       </tr>
       @endif
         </tbody>
   
   
</table>
<br/>


<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script> 
   $(document).ready(function()
   {
     // $("#myTable").DataTable();
     
     

   });
   var countDownDate = new Date({{ date('Y,m,d,H,i,s,u',strtotime($course->course_end_at)) }}).getTime();
 

 // Update the count down every 1 second
 var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();
    
  // Find the distance between now and the count down date
  var distance = countDownDate - now;
    
  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
  hours = hours>9? hours:"0"+hours;
  minutes = minutes>9? minutes:"0"+minutes;
  seconds = seconds>9? seconds:"0"+seconds;
  // Output the result in an element with id="demo"
  document.getElementById("countdown").innerHTML =  hours + ":"
  + minutes + ":" + seconds;
    
  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("countdown").innerHTML = "00:00:00";
    location.reload();
  }
}, 1000);
  

</script>


@stop