@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 {

        border: 2px solid #a2a2a2;

        border-radius: 5px;

        width: inherit;

    }

    .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;

    }

    .countdown{

        width: 120px;

        height: 120px;

        margin-left: auto;

        margin-right: auto;

        border: 10px solid #0069b0;

        padding: 5px;

        text-align: center;

        font-size: 60px !important;

        font-weight: 600;

        color: #c00f3c !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">

                            @foreach ($res_voting_details as $row)

                            <div class="row">

                                <input type="hidden" id="question_id" value="{{$row->question_id}}"> 

                                <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="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 text-center">

                                    @php

                                    $counter_timing = is_null($res_voting_details[0]->question_timing) || empty($res_voting_details[0]->question_timing) ? 20 : $res_voting_details[0]->question_timing

                                    @endphp

                                    <p class="countdown" id="cd_div"> {{$counter_timing}} </p>

                                </div>

							</div>

							<div class="row mt-4 options">

								<div class="col-sm-12 text-center">

                                    <button class="btn btn-primary" id="cd_start">Start</button>

                                </div>

                            </div>

                            @endforeach

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

@endsection



@section('footer')

	@include('admin.layouts.footer')

@endsection



@section('scripts')

<script>

    $(document).ready(function(){

        var audio = new Audio("/AOCN-IANCON-2022/public/assets/timer_beep.mp3"); 

        var counter = '';
        
        var counter=15;
        
        document.getElementById('cd_div').innerHTML = counter;

        var question_id = $('#question_id').val();

        $('#cd_start').click(function(){
            
            
            question_id = $('#question_id').val();

            $.ajax({

                type: 'GET',

                url: '/AOCN-IANCON-2022/server.php/admin/voting/start-countdown/'+question_id

            })

            .done(function(data){

                if(data == '0'){

                    var audio = new Audio('/assets/files/heartbeat.mp3');

                    audio.play();

                    startCountdown();

                }

                else{

                    alert("Failed to start. Please make the question active.");

                }

                $('#response').html(data);

            })

            .fail(function() {

                    alert( "Posting failed." );

            });

            return false;

        });

        function startCountdown() {
            
        document.getElementById('cd_div').innerHTML = counter;

            counter--;

            if(counter < 0) {

                document.location.href = '/AOCN-IANCON-2022/server.php/admin/voting/graph/'+question_id;

            }

            else {
                audio.play();
                setTimeout(startCountdown, 1000);

            }
        }

    });

</script>

@endsection