@extends('layouts.app')

@section('head')
  <link rel="stylesheet" href="{{asset('css/bootstrap.min.css')}}">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="{{asset('css/font-awesome.min.css')}}">
  <!-- Google Font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
  <link href="{{ asset('css/app.css') }}" rel="stylesheet">
  <script>
    window.Laravel =  <?php echo json_encode([
        'csrfToken' => csrf_token(),
    ]); ?>
  </script>
@endsection

@section('top_bar')
  <nav class="navbar navbar-default navbar-static-top" role="navigation" aria-label="Quiz navigation">
    <div class="logo-main-block">
      <div class="container">
        @php
        $setting = App\Models\Setting::first();
        @endphp
        @if ($setting)
          <a href="{{ url('/') }}" title="{{$setting->welcome_txt}}">
            <img src="{{asset('/images/logo/'. $setting->logo)}}" class="img-responsive" alt="{{$setting->welcome_txt}}">
          </a>
        @endif
      </div>
    </div>
    <div class="nav-bar">
      <div class="container">
        <div class="row">
          <div class="col-md-6 col-xs-8">
            <div class="navbar-header">
              <!-- Branding Image -->
              @if($topic)
                <h4 class="heading">{{$topic->title}}</h4>
              @endif
            </div>
          </div>
          <div class="col-md-6 col-xs-4">
            <div class="collapse navbar-collapse" id="app-navbar-collapse">
              <!-- Left Side Of Navbar -->
              <ul class="nav navbar-nav">
                &nbsp;
              </ul>
              <!-- Right Side Of Navbar -->
              <ul class="nav navbar-nav navbar-right">
                <!-- Authentication Links -->
                <li id="clock"></li>
              </ul>
          </div>
        </div>
      </div>
    </div>
  </nav>
@endsection

@section('content')
<div class="container">
  @php
  $auth = Auth::user();
  @endphp
  @if ($auth)
    <div class="home-main-block">
      <div id="question_block" class="question-block">
        <question :topic_id="{{$topic->id}}" ></question>
      </div>
    </div>
  @endif
</div>
@endsection

@section('scripts')
  <!-- jQuery 3 -->
  <script src="{{asset('js/jquery.min.js')}}"></script>
  <!-- Bootstrap 3.3.7 -->
  <script src="{{asset('js/bootstrap.min.js')}}"></script>
  <script src="{{asset('js/jquery.cookie.js')}}"></script>
  <script src="{{asset('js/jquery.countdown.js')}}"></script>
  <script>
  var topic_id = {{$topic->id}};
  var timer = {{$topic->timer}};
   $(document).ready(function(){function e(e){(116==(e.which||e.keyCode)||82==(e.which||e.keyCode))&&e.preventDefault()}setTimeout(function(){$(".myQuestion:first-child").addClass("active")},2500),history.pushState(null,null,document.URL),window.addEventListener("popstate",function(){history.pushState(null,null,document.URL)}),$(document).on("keydown",e),setTimeout(function(){$(".nextbtn").click(function(){var e=$(".myQuestion.active");$(e).removeClass("active"),0==$(e).next().length?(Cookies.remove("time"),Cookies.set("done","Your Quiz is Over...!",{expires:1}),location.href="{{$topic->id}}/finish"):($(e).next().addClass("active"),$(".myForm")[0].reset())})},700);var i,o=(new Date).getTime()+6e4*timer;if(Cookies.get("time")&&Cookies.get("topic_id")==topic_id){i=Cookies.get("time");var t=o-i,n=o-t;$("#clock").countdown(n,{elapse:!0}).on("update.countdown",function(e){var i=$(this);e.elapsed?(Cookies.set("done","Your Quiz is Over...!",{expires:1}),Cookies.remove("time"),location.href="{{$topic->id}}/finish"):i.html(e.strftime("<span>%H:%M:%S</span>"))})}else Cookies.set("time",o,{expires:1}),Cookies.set("topic_id",topic_id,{expires:1}),$("#clock").countdown(o,{elapse:!0}).on("update.countdown",function(e){var i=$(this);e.elapsed?(Cookies.set("done","Your Quiz is Over...!",{expires:1}),Cookies.remove("time"),location.href="{{$topic->id}}/finish"):i.html(e.strftime("<span>%H:%M:%S</span>"))})});
  </script>
@endsection
