@extends('admin.layouts.app')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
@section('header-script')
@include('admin.layouts.dashboard-header-script')
@endsection
<script type="text/javascript">
    $(document).ready(function () {
        $(".js-click1").click(function () {
            $(".js-click1").css('background', 'green', 'color', '#ffffff');
        });
    });


    $(document).ready(function () {
        $(".js-click2").click(function () {
            $(".js-click2").css('background', 'green');
        });
    });

    $(document).ready(function () {
        $(".js-click3").click(function () {
            $(".js-click3").css('background', 'green');
        });
    });

    $(document).ready(function () {
        $(".js-click4").click(function () {
            $(".js-click4").css('background', 'green');
        });
    });


    $(document).ready(function () {
        $('#another-element').hide()
        $("#myelement").click(function () {
            $('#another-element').show("slide")
        });
    });

    $(document).ready(function () {
        $('#rightAnswer').hide()
        $("#rightAnswerBtn").click(function () {
            $('#rightAnswer').toggle("slide")
        });
    });

    jQuery(function ($) {
        $('#timeTable').hide("slide")
        $('#myelement').on('click', doCount);
    });

    $(document).ready(function () {
        $("#myelement").click(function () {
            $('#rightAnswerBtn').show("slide")
        });
    });

    function doCount() {
        $('#timeTable').show("slide")

        var counter = "";
        var ansButton1 = document.getElementById('ansButton1');
        var ansButton2 = document.getElementById('ansButton2');
        var ansButton3 = document.getElementById('ansButton3');
        var ansButton4 = document.getElementById('ansButton4');
        var rightAnswerBtn = document.getElementById('rightAnswerBtn');

        setInterval(function () {
            counter--;
            if (counter >= 0) {
                span = document.getElementById("count");
                span.innerHTML = counter;
                var trueflse = '';
                if (trueflse == 0) {
                    rightAnswerBtn.disabled = false;
                } else {
                    rightAnswerBtn.disabled = true;
                }

            }
            if (counter === 0) {

                stopSound();
                ansButton1.disabled = true;
                ansButton2.disabled = true;
                ansButton3.disabled = true;
                ansButton4.disabled = true;
                rightAnswerBtn.disabled = false;

                alert('Time Out');
                sound.currentTime = 0;
                clearInterval(counter);
            }
        }, 1000);
    }

    function myFunction() {
        document.getElementById("btn1").disabled = true;
    }

    function PlaySound() {
        var sound = document.getElementById("audio");
        sound.play()
    }

    function stopSound() {
        var sound = document.getElementById("audio");
        sound.pause();

    }

    $(document).ready(function () {
        $('input[type="radio"]').click(function () {
            var demovalue = $(this).val();
            $("div.myDiv").hide();
            $("#show" + demovalue).show();
            $("input[type=radio]").attr('disabled', true);
        });
    });
</script>
<style>
    button {
        background: #fbca35;
        height: 50px;
        width: 350px;

    }

    .ansColor {
        color: #000000;
    }
</style>
@section('content')

<!-- Page-Title -->

<table class="table">
    <tr>
        <td width="20%">
            <div style="font-size:50px; color:#ff0000; text-align:center;"> এখন ..... </div>
            <div>
                @if(Auth::user()->picture > 0)
                <img src="{{'public/images'}}/{{Auth::user()->picture}}" width="100%" />
                @else
                <img src="{{'public/images/photo.jpg'}}" width="50%" />
                @endif
            </div>
            <div class="studentDash">
                {{Auth::user()->name}} </div>
            <div class="studentDashTwo">
                {{Auth::user()->institute }}</div>
            <div class="studentDash"> {{Auth::user()->email}} </div>
            <div class="studentDashTwo"> {{Auth::user()->class}}, {{Auth::user()->roll}},
                {{Auth::user()->group_name }}
            </div>
            <div class="studentDash"> {{Auth::user()->present_address }} </div>
            <div class="studentDashTwo">{{Auth::user()->hobby}} </div>
            <div class="studentDash">{{Auth::user()->year  }} </div>



        </td>
        <td width="50%">
            <audio id="audio" src="{{'public/Quiz.mp3'}}" autostart="false"></audio>

            @if($quize)
            <div id="another-element">
                @if($quize->question_type == 1)
                <div
                    style="text-align:center; width: 100%; margin-bottom: 10px; margin-top: height: 100%; background-color: #04a5ff; padding:10px;color:#ffffff; font-size: 20px;">
                    কোশ্চেন টাইপ : টেক্সট
                </div>
                @elseif($quize->question_type == 2)
                <div
                    style="text-align:center; width: 100%; margin-bottom: 10px; margin-top:height: 100%; background-color: #04a5ff; padding:10px;color:#ffffff; font-size: 20px;">
                    কোশ্চেন টাইপ: ছবি
                    <div>
                        <img src="{{url('/public/images')}}/{{$quize->qus_media}}" height="100%" width="100%" />
                    </div>

                </div>
                @elseif($quize->question_type == 3)
                <div
                    style="text-align:center; width: 100%; margin-bottom: 10px; margin-top: height: 100%; background-color: #04a5ff; padding:10px;color:#ffffff; font-size: 20px;">
                    কোশ্চেন টাইপ: অডিও
                    <audio id="audio" src="{{$quize->link}}" autostart="false"></audio>
                </div>
                @endif

                @if($quize->question_type == 4)
                <div>
                    <iframe width="100%" height="450" src="{{ $quize->link }}}" frameborder="0"
                            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                            allowfullscreen></iframe>
                </div>
                @endif

                <div
                    style="text-align:center; width: 100%; margin-bottom: 40px; margin-top: height: 100%; background-color: #0b150c; padding:10px;color:#ffffff; font-size: 20px;">
                    {{$quize->question_name}}
                </div>

                <div class="row">

                    <div class="col-md-6 text-center option1" id="ans1">
                        {!! Form::open(['action' => ['AdminController@qizeanswerstore', $quize->id],
                        'method'=> 'POST']) !!}
                        {!! Form::hidden('question_id', $quize->id)!!}
                        {!! Form::hidden('round_id', $quize->round_id)!!}
                        {!! Form::hidden('marktype','byplay')!!}
                        {!! Form::hidden('user_id', Auth::user()->id)!!}
                        {!! Form::hidden('round_id', $quize->round_id)!!}
                        {!! Form::hidden('question_name', $quize->question_name)!!}
                        {!! Form::hidden('your_ans','op_1')!!}
                        {!! Form::hidden('right_answer',$quize->right_answer)!!}
                        {!! Form::hidden('marks_1',$quize->points)!!}
                        {!! Form::hidden('status', 0)!!}
                        {!! Form::hidden('_method', 'POST') !!}

                        <button class="js-click1" style="width:90%" id="ansButton1" type="submit">
                            <span class="ansColor"> {{$quize->op_1}} </span>
                        </button>

                        {!! Form::close() !!}

                    </div>
                    <div class="col-md-6 text-center option2">
                        {!! Form::open(['action' => ['AdminController@qizeanswerstore', $quize->id],
                        'method'=> 'POST']) !!}
                        {!! Form::hidden('question_id', $quize->id)!!}
                        {!! Form::hidden('user_id', Auth::user()->id)!!}
                        {!! Form::hidden('round_id', $quize->round_id)!!}
                        {!! Form::hidden('marktype','byplay')!!}
                        {!! Form::hidden('question_name', $quize->question_name)!!}
                        {!! Form::hidden('your_ans','op_2')!!}
                        {!! Form::hidden('right_answer',$quize->right_answer)!!}
                        {!! Form::hidden('marks_1',$quize->points)!!}
                        {!! Form::hidden('status', 0)!!}
                        {!! Form::hidden('_method', 'POST') !!}
                        <button class="js-click2" style="width:90%" id="ansButton2" type="submit">
                            <span class="ansColor"> {{$quize->op_2}}</span>
                        </button>
                        {!! Form::close() !!}
                    </div>
                </div>
                <div class="row" style="margin-top:-10px;">
                    <div class="col-md-6 text-center option3">
                        {!! Form::open(['action' => ['AdminController@qizeanswerstore', $quize->id],
                        'method'=> 'POST']) !!}
                        {!! Form::hidden('question_id', $quize->id)!!}
                        {!! Form::hidden('user_id', Auth::user()->id)!!}
                        {!! Form::hidden('round_id', $quize->round_id)!!}
                        {!! Form::hidden('marktype','byplay')!!}
                        {!! Form::hidden('question_name', $quize->question_name)!!}
                        {!! Form::hidden('your_ans','op_3')!!}
                        {!! Form::hidden('right_answer',$quize->right_answer)!!}
                        {!! Form::hidden('marks_1',$quize->points)!!}
                        {!! Form::hidden('status', 0)!!}
                        {!! Form::hidden('_method', 'POST') !!}
                        <button class="js-click3" style="width:90%" id="ansButton3" type="submit"> <span
                                class="ansColor"> {{$quize->op_3}}</span>
                        </button>
                        {!! Form::close() !!}
                    </div>
                    <div class="col-md-6 text-center option4">
                        {!! Form::open(['action' => ['AdminController@qizeanswerstore', $quize->id],
                        'method'=> 'POST']) !!}
                        {!! Form::hidden('question_id', $quize->id)!!}
                        {!! Form::hidden('user_id', Auth::user()->id)!!}
                        {!! Form::hidden('round_id', $quize->round_id)!!}
                        {!! Form::hidden('marktype','byplay')!!}
                        {!! Form::hidden('question_name', $quize->question_name)!!}
                        {!! Form::hidden('your_ans','op_4')!!}
                        {!! Form::hidden('right_answer',$quize->right_answer)!!}
                        {!! Form::hidden('marks_1',$quize->points)!!}
                        {!! Form::hidden('status', 0)!!}
                        {!! Form::hidden('_method', 'POST') !!}
                        <button class="js-click4" style="width:90%" id="ansButton4" type="submit">
                            <span class="ansColor"> {{$quize->op_4}} </span>
                        </button>
                        {!! Form::close() !!}
                    </div>
                </div>

                <div class="row naoption" style="display:none" >

                    <div class="col-md-6 text-center " id="naoption_yes">

                         {!! Form::open(['action' => ['AdminController@qizeanswerstore', $quize->id],
                        'method'=> 'POST']) !!}
                        {!! Form::hidden('question_id', $quize->id)!!}
                        {!! Form::hidden('user_id', Auth::user()->id)!!}
                        {!! Form::hidden('round_id', $quize->round_id)!!}
                        {!! Form::hidden('marktype','byplay')!!}
                        {!! Form::hidden('question_name', $quize->question_name)!!}
                        {!! Form::hidden('your_ans','right')!!}
                        {!! Form::hidden('right_answer','right')!!}
                        {!! Form::hidden('marks_1',$quize->points)!!}
                        {!! Form::hidden('status', 0)!!}
                        {!! Form::hidden('_method', 'POST') !!}
                        <button class="js-click4 btn btn-lg btn-block btn-success text-center" style="width:90%" id="ansButtonYes" type="submit">
                            <span class="ansColor"> Yes </span>
                        </button>
                        {!! Form::close() !!}
                    </div>
                    <div class="col-md-6 text-center " id="naoption_no">


                         {!! Form::open(['action' => ['AdminController@qizeanswerstore', $quize->id],
                        'method'=> 'POST']) !!}
                        {!! Form::hidden('question_id', $quize->id)!!}
                        {!! Form::hidden('user_id', Auth::user()->id)!!}
                        {!! Form::hidden('round_id', $quize->round_id)!!}
                        {!! Form::hidden('marktype','byplay')!!}
                        {!! Form::hidden('question_name', $quize->question_name)!!}
                        {!! Form::hidden('your_ans','no')!!}
                        {!! Form::hidden('right_answer','right')!!}
                        {!! Form::hidden('marks_1',$quize->points)!!}
                        {!! Form::hidden('status', 0)!!}
                        {!! Form::hidden('_method', 'POST') !!}
                        <button class="js-click4 btn btn-lg btn-block btn-danger text-center" style="width:90%" id="ansButtonYes" type="submit">
                            <span class="ansColor"> No </span>
                        </button>
                        {!! Form::close() !!}

                    </div>
                </div>




            </div>
            @else
            Thre is no quize

            @endif










            </div>
            <input id="question_num" type="hidden" class="form-control" name="op_2" value="{{$quize->option_num}}">
            <div id="rightAnswer">
                
                    <div  style="text-align:center; width: 100%; margin-bottom: 10px; margin-top:20px; height: 100%; background-color: #04a5ff; padding:10px;color:#ffffff; font-size: 20px;">
                        সঠিক উত্তর:                     </div>
                
            </div>
            </div>
            </div>

            <div class="col-3">

                <div style="margin-left:25%;">
                    <button class="btn btn-lg btn-block btn-danger text-center" id="myelement" onclick="PlaySound()"
                            style="position:fixed;bottom:78px;width:20%; height:5%; border-radius: 10px 10px 10px 10px;">
                        <span style="color:black"> শুরু </span> </button><br>

                    <div class="col-3">
                        <button class="btn btn-block btn-primary text-center"
                                style="position:fixed;bottom:78px;width:10%; height:5%; margin-left:400; border-radius: 10px 10px 10px 10px;"
                                onclick="window.location.reload();">
                            রিফ্রেশ </button>
                    </div>
                </div>
            </div>
        </td>



        <td width="20%" align="center">
            <div style="width:100%">
                <img class="card-img-top" style="height: 65px; width:100%"
                     src="{{url('/public/images')}}/studentotheyear.png" alt="image not found">
            </div>

            <div style="color:#ff0000; font-size:100px;" class="" id="timeTable">
                <span id="count">  </span> <br> <span style="color:green; font-size:50px;"> Seconds
                </span>
            </div>

            <div style="color:#ff0000; font-size:100px;" class="">
                <div>
                    <span id="">
                        {{$quize->points}}</span><br>
                    <span style="color:green; font-size:50px;"> Marks</span>

                </div>
            </div>

            <div class="col-12">
                <button class="btn btn-lg btn-block btn-success" id="rightAnswerBtn"
                        style="position:fixed;bottom:80px;width:15%; height:5%; border-radius: 10px 10px 10px 10px;">
                    উত্তর যাচাই </button>
            </div>





        </td>
    </tr>

</table>

<!-- Footer -->
@section('footer')
@include('admin.layouts.footer')
@endsection
<!-- End Footer -->
@endsection
@section('footer-script')
@include('admin.layouts.dashboard-footer-script')
<script>
    question_num();
    function question_num() {
        var question_num = $('#question_num').val();
        if (question_num == 1) {
            $('.option1').css('display', 'block');
            $('.option2').css('display', 'none');
            $('.option3').css('display', 'none');
            $('.option4').css('display', 'none');
            $('.option_na').css('display', 'none');
        } else if (question_num == 2) {
            $('.option1').css('display', 'block');
            $('.option2').css('display', 'block');
            $('.option3').css('display', 'none');
            $('.option4').css('display', 'none');
            $('.option_na').css('display', 'none');
        } else if (question_num == 3) {
            $('.option1').css('display', 'block');
            $('.option2').css('display', 'block');
            $('.option3').css('display', 'block');
            $('.option4').css('display', 'none');
            $('.option_na').css('display', 'none');
        } else if (question_num == 4) {
            $('.option1').css('display', 'block');
            $('.option2').css('display', 'block');
            $('.option3').css('display', 'block');
            $('.option4').css('display', 'block');
            $('.option_na').css('display', 'none');
        } else {
            $('.option1').css('display', 'none');
            $('.option2').css('display', 'none');
            $('.option3').css('display', 'none');
            $('.option4').css('display', 'none');
            $('.naoption').css('display', 'block');
        }
    }
    $("#question_num").change(function () {
        question_num();
    });
</script>
@endsection