@extends('admin.layouts.app')

@section('styles')
<style type="text/css">
    .card .text-muted{
        margin-bottom: 5px !important;
    }
    .divider{
        margin: 20px 10px;
        border: 2px solid #a2a2a2;
    }
    .card p{
        font-size: 16px;
        letter-spacing: 1px;
    }
    .view{
        color: #4677ff;
        border: 2px solid #4677ff;
        padding: 2px 3px;
        border-radius: 3px;
    }
    .approve{
        color: #0f9c0d;
        border: 2px solid #0f9c0d;
        padding: 2px 3px;
        border-radius: 3px;
    }
    .reject{
        color: #de2a43;
        border: 2px solid #de2a43;
        padding: 2px 3px;
        border-radius: 3px;
    }
    .qImage {
        margin: 5px 20px;
        border: 2px solid #a2a2a2;
        border-radius: 5px;
    }
    .options {
        padding: 10px 30px;
    }
    .option{
        height: 80px;
    }
    .option_icon {
        padding: 10px 12px;
        border: 2px solid #616161;
        border-radius: 10%;
        margin-right: 20px;
        background-color: white;
        font-size: 16px;
        letter-spacing: 1px;
        margin-bottom: 5px !important;
    }
</style>
<script type="text/javascript">
    function backAway(){
        alert(document.referrer);
        history.back();
    }
</script>
@endsection

@section('header')
	@include('admin.layouts.header')
@endsection

@section('sidemenu')
	@include('admin.layouts.sidemenu')
@endsection

@section('content')
<div class="content-page">
    <div class="content">
        <div class="page-content-wrapper">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="page-title-box">
                            <div class="float-right">
                                <ol class="breadcrumb p-0 m-0">
                                    <li class="breadcrumb-item"><a href="#">Admin</a></li>
                                    <li class="breadcrumb-item"><a href="#">Voting</a></li>
                                    <li class="breadcrumb-item active">Question Details</li>
                                </ol>
                            </div>
                            <h4 class="page-title">Question Details</h4>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 col-lg-12 col-xl-1"></div>
                    <div class="col-md-12 col-lg-12 col-xl-10">
                        @if(session()->has('success-message'))
                            <div class="alert alert-success text-center">{{ session()->get('success-message') }}</div>
                        @endif
                        @if(session()->has('error-message'))
                            <div class="alert alert-danger text-center">{{ session()->get('error-message') }}</div>
                        @endif
                        <div class="card m-b-20 card-body">
                            <h3 class="card-title font-20 mb-4 text-primary text-center">Question Details</h3>
                            @foreach ($res_question_details as $row)
                            <div class="row">
                                <div class="col-sm-12 options">
                                    <p class="text-muted"><strong>Q: </strong>{{$row->question}}</p>
                                </div>
                                
                                        @if(!empty($row->image1))

                                            <div class="col-sm-4 options">

                                                <img style="height: 220px;     width: 220px;" src="/AOCN-IANCON-2022/public//uploads/question_images/{{$row->image1}}" class="qImage" />

                                            </div>

                                            @endif

                                            @if(!empty($row->image2))

                                            <div class="col-sm-4 options">

                                                <img style="height: 220px;     width: 220px;" src="/AOCN-IANCON-2022/public//uploads/question_images/{{$row->image2}}" class="qImage" />

                                            </div>

                                            @endif

                                            @if(!empty($row->image3))

                                            <div class="col-sm-4 options">

                                                <img style="height: 220px;     width: 220px;" src="/AOCN-IANCON-2022/public//uploads/question_images/{{$row->image3}}" class="qImage" />

                                            </div>

                                            @endif

                                            @if(!empty($row->image4))

                                            <div class="col-sm-4 options">

                                                <img style="height: 220px;     width: 220px;" src="/AOCN-IANCON-2022/public//uploads/question_images/{{$row->image4}}" class="qImage" />

                                            </div>

                                            @endif

                                            @if(!empty($row->image5))

                                            <div class="col-sm-4 options">

                                                <img style="height: 220px;     width: 220px;" src="/AOCN-IANCON-2022/public//uploads/question_images/{{$row->image5}}" class="qImage" />

                                            </div>

                                            @endif
                            </div>
                            <div class="divider"></div>
                            <div class="row m-t-30 options">
                                @if(!empty($row->answer1))
                                <div class="col-sm-6">
                                    <div class="option">
                                        <span class="option_icon">A</span>{{ $row->answer1 }}
                                    </div>
                                </div>
                                @endif
                                @if(!empty($row->answer2))
                                <div class="col-sm-6">
                                    <div class="option">
                                        <span class="option_icon">B</span>{{ $row->answer2 }}
                                    </div>
                                </div>
                                @endif
                                @if(!empty($row->answer3))
                                <div class="col-sm-6">
                                    <div class="option">
                                        <span class="option_icon">C</span>{{ $row->answer3 }}
                                    </div>
                                </div>
                                @endif
                                @if(!empty($row->answer4))
                                <div class="col-sm-6">
                                    <div class="option">
                                        <span class="option_icon">D</span>{{ $row->answer4 }}
                                    </div>
                                </div>
                                @endif
                                 @if(!empty($row->answer5))
                                <div class="col-sm-6">
                                    <div class="option">
                                        <span class="option_icon">E</span>{{ $row->answer5 }}
                                    </div>
                                </div>
                                @endif
                            </div>
                            
                            <div class="row options">
                                <div class="col-sm-12">
                                    <div class="option">
                                        <p class="text-muted"><strong>Correct Answer: </strong>{{$row->correct_answer}}</p>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('footer')
	@include('admin.layouts.footer')
@endsection