@extends('layouts.master')
@section('title')
    @lang('translation.Data_Tables')
@endsection
@section('css')
<!-- DataTables -->
<link href="{{ URL::asset('/assets/admin/vendors/general/datatable/jquery.dataTables.min.css') }}" id="bootstrap-style" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox/dist/jquery.fancybox.min.css"/>
<style type="text/css">
    p img{
        width: 700px;
        height: auto;
    }
</style>
@endsection
@section('content')
@include('components.breadcum')
<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-body">
                <ul class="nav nav-tabs nav-tabs-custom nav-justified" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-bs-toggle="tab" href="#overview1" role="tab" aria-selected="true">
                            <span class="d-block"><i class="fas fa-newspaper"></i></span>
                            <span class="d-none d-sm-block">Articles Information</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#overview2" role="tab" aria-selected="true">
                            <span class="d-block"><i class="fas fa-question"></i></span>
                            <span class="d-none d-sm-block">Quiz Information</span>
                        </a>
                    </li>
                </ul>
                <div class="tab-content p-3 text-muted">
                    <div class="tab-pane active" id="overview1" role="tabpanel">
                        <div class="card ">
                            <div class="card-body">
                                <div class="card-title">
                                    <div class="kt-widget__media text-center w-100">
                                        <a data-fancybox="gallery" href="{{checkFileExist($data->image)}}" style="margin-right: 15px;">
                                            <img class="img_75" src="{{checkFileExist($data->image)}}" alt="image" width="100" height="100">
                                        </a>
                                    </div>
                                </div>
                                <hr>
                                    <h4 class="card-title">Title:</h4>
                                    <h6 class="card-subtitle font-14 text-muted">{{$data->title}}</h6>
                                <hr>
                                    <h4 class="card-title">Description:</h4>
                                    <h6 class="card-subtitle font-14 text-muted">{!! $data->description !!}</h6>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="overview2" role="tabpanel">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title">{{$data->quiz_name}} :</h4>
                                <table class="table table-bordered">
                                    @foreach($data['questions'] as $key => $questions)
                                        <tr>
                                            <td colspan="2"><b>Q {{$key+1}}.&nbsp&nbsp&nbsp {{$questions->question_name}}</b></td>
                                        </tr>
                                        @foreach($questions['answers'] as $keys => $answers)
                                            @if($answers->options != 'Not from all')
                                            <tr>
                                                <td>{{$answers->options}}</td>
                                                <td><input type="radio" name="radio{{$key}}" @if($answers->is_right == '1') checked @endif disabled></td>
                                            </tr>
                                            @endif
                                        @endforeach
                                    @endforeach
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script src="{{asset('/assets/admin/vendors/general/validate/jquery.validate.min.js')}}"></script>
<script src="{{asset('/assets/admin/vendors/general/datatable/jquery.dataTables.min.js')}}"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox/dist/jquery.fancybox.min.js"></script>
<script type="text/javascript">
</script>
@endsection