@extends('layouts.student')
@section('css')


    <style>
        body {
            text-align: center;
        }

        h1 {
            color: #396;
            font-weight: 100;
            font-size: 40px;
            margin: 40px 0px 20px;
        }

        #clockdivme {
            font-family: sans-serif;
            color: #fff;
            display: inline-block;
            font-weight: 100;
            text-align: center;
            font-size: 30px;
        }

        #clockdivme > div {
            text-align: center;
            padding: 10px;
            border-radius: 3px;
            background: #00BF96;
            display: inline-block;
        }

        #clockdivme div > span {
            padding: 15px;
            border-radius: 3px;
            background: #00816A;
            display: inline-block;
        }

        .smalltext {
            padding-top: 5px;
            font-size: 16px;
        }
    </style>

    <!-- begin::datepicker -->
    <link rel="stylesheet" href="/assets/vendors/datepicker-jalali/bootstrap-datepicker.min.css">
    <!-- end::datepicker -->

    <!-- begin::select2 -->
    <link rel="stylesheet" href="/assets/vendors/select2/css/select2.min.css" type="text/css">
    <!-- end::select2 -->
    <style>
        hr {
            border-top: 2px dashed red;
        }
    </style>
@endsection('css')
@section('navbar')



@endsection('navbar')
@section('sidebar')

@endsection('sidebar')
@section('header')
    <div class="page-header">
        <div>
            <h3> آزمون {{$exams[0]->exam->title}}</h3>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/student">داشبورد</a></li>
                    <li class="breadcrumb-item"><a href="#">آزمون آنلاین</a></li>
                    <li class="breadcrumb-item active" aria-current="page"> آزمون {{$exams[0]->exam->title}}</li>
                </ol>
            </nav>
        </div>

    </div>
@endsection('header')
<div class="card">
    <div class="card-body">
        <div style="text-align: center;padding-right: 300px">
            <div id="clockdivme">

                <div>
                    <span class="seconds"></span>
                    <div class="smalltext">Seconds</div>
                </div>
                <div>
                    <span class="minutes"></span>
                    <div class="smalltext">Minutes</div>
                </div>

                <div>
                    <span class="hours"></span>
                    <div class="smalltext">Hours</div>
                </div>
            </div>
        </div>
    </div>
</div>

@section('content')


    <div class="card">
        <div class="card-body">
            <div style="text-align: center">
                <h4 class="panel-title" style="padding-top: 40px;font-size: large;font-family: 'B Titr' ">
                    آزمون {{$exams[0]->exam->title}}
                    @if($exams[0]->exam->filename)
                        <a href="{{ route('exam.download', $exams[0]->exam->id) }}"
                           class="btn btn-outline-warning">
                            <i class="icon-download"></i>&nbsp; دانلود فایل کلی آزمون </a>
                    @endif
                </h4>
            </div>
            {{--<button class="btn btn-primary">شروع آزمون</button>--}}
            <div class="panel-heading">
                <div class="heading-elements">
                    <ul class="icons-list">
                        <li><a data-action="collapse"></a></li>
                        <li><a data-action="close"></a></li>
                    </ul>
                </div>
            </div>
                        <div id="questions">
                @foreach($exams as $exam)
                    <div style="text-align: right">

                        <button class="btn btn-danger">
                            <span>سوال شماره {{$exams->currentPage()}}</span>

                        </button>
                        @if($exam->dars_id)
                            <button class="btn btn-info">
                                <span> درس {{\App\dars::where('id',$exam->dars_id)->pluck('name')->first()}}</span>
                            </button>
                        @endif
                    </div>
                    <div id="questions0">
                        <div class="row">


                            <div class="col-md-12">
                                <br>
                                <label>صورت سوال </label>
                                <br>
                                <input class="form-control" value="{{$exam->title}}">
                                <br>

                            </div>
                            <div class=" col-md-6">
                                <br>
                                @if(!empty($exam->file))
                                    {{--@dd($exam->file);--}}
                                    <img class="" width="410" height="300"
                                         src="{{url('/images/exam/'.$exam->file)}}"
                                         alt="...">

                                @endif
                            </div>
                            <div class=" col-md-6">
                                <br>
                                @if(!empty($exam->image))
                                    {{--@dd($exam->image);--}}
                                    <img class="" width="410" height="300"
                                         src="{{url('/images/exam/'.$exam->image)}}"
                                         alt="...">

                                @endif
                            </div>
                        </div>
                        <br>
                        <label>گزینه ها</label>

                        <div class=" col-md-12">
                            @foreach($exam->myoptions as $myoptions)