@extends('site.layouts.master')
@section('content')
<style>
    .radiolist label{
        width: 100%;
    }

    body {
        /* background: url({{ asset('site/img/paracivil/bg-paracivil.jpg') }}); */
        background-size: contain;
    }
    @media screen and (max-width: 1960px) and (min-width: 1800px) {

    }

    @media screen and (max-width: 1024px) and (min-width: 985px) {

    }
</style>
        <div class="main-container quiz-container">
            <div class="container mb-4 text-center">
                {{-- @if(!$unansweredQuestions->isEmpty()) --}}
                    @if($tournament->turn_id == auth()->id())
                        {{-- @foreach ($unansweredQuestions as $item) --}}
                            @php
                                $correct = $unansweredQuestions->correct == 1 ? true : false;
                            @endphp
                            <div class="box-quiz my-4" data-bank="">
                                <div class="quiz-fr">
                                    <div class="quiz-fr__logo">
                                        <div class="quiz-fr__logo__main">
                                            <img src="/assets/logo.png" alt="" />
                                        </div>
                                        <div class="quiz-fr__logo__back">
                                            <img src="/assets/backlogo.png" alt="" />
                                        </div>
                                    </div>
                                    <p class="question">
                                        {!! $unansweredQuestions->bank->question !!}
                                    </p>
                                    <img src="{{ asset($unansweredQuestions->bank->image ?? '/site/img/install-app.png') }}" alt="سوال مسابقه پاراسیویل">
                                    <div class="quiz-fr__writer">
                                        <p>نویسنده: {{ $unansweredQuestions->bank->user->fullName }}</p>
                                    </div>
                                    <div class="quiz-fr__rate">
                                        <p class="poll-msg" style="display: none;">ممنون از نظرت حتما رسیدگی میشه :)</p>
                                        <button class="poll" data-value="1"><i class="fa fa-thumbs-up"></i>باحال بود</button>
                                        <button class="poll" data-value="0"><i class="fa fa-thumbs-down"></i>باحال نبود</button>
                                    </div>
                                </div>
                                <div class="quiz-timer">
{{--                                    <div class="col-8" style="text-align: right;font-size: 20px;margin-top: 0.5em;"></div>--}}
                                    <div class="timer timer" data-time="20">
                                        <span></span>
                                        {{-- <p>زمان باقی مانده تا پایان: 5 </p> --}}
                                    </div>
                                </div>
                                <div class="quiz-qu">
                                   {{-- <div class="container"> --}}
                                        <div class="radiolist">
                                            <div class="form-group">
                                                <input autocomplete="off" data-tournament="{{ $tournamentId }}"  data-bank="{{ $unansweredQuestions->bank->id }}"
                                                type="radio" value="1" id="opt-1-{{ $unansweredQuestions->bank->id }}" name="opt"/>
                                                <label for="opt-1-{{ $unansweredQuestions->bank->id }}" class="{{ $unansweredQuestions->answer == 1 ? $correct ? 'bg-success text-white' : 'bg-danger text-white' : '' }}">{!! $unansweredQuestions->bank->answer_1 !!}</label>
                                            </div>

                                            <div class="form-group">
                                                <input autocomplete="off" data-tournament="{{ $tournamentId }}"  data-bank="{{ $unansweredQuestions->bank->id }}"
                                                type="radio" value="2" id="opt-2-{{ $unansweredQuestions->bank->id }}" name="opt"/>
                                                <label for="opt-2-{{ $unansweredQuestions->bank->id }}" class="{{ $unansweredQuestions->answer == 2 ? $correct ? 'bg-success text-white' : 'bg-danger text-white' : '' }}">{!! $unansweredQuestions->bank->answer_2 !!}</label>
                                            </div>

                                            <div class="form-group">
                                                <input autocomplete="off" data-tournament="{{ $tournamentId }}"  data-bank="{{ $unansweredQuestions->bank->id }}"
                                                type="radio" value="3" id="opt-3-{{ $unansweredQuestions->bank->id }}" name="opt"/>
                                                <label for="opt-3-{{ $unansweredQuestions->bank->id }}" class="{{ $unansweredQuestions->answer == 3 ? $correct ? 'bg-success text-white' : 'bg-danger text-white' : '' }}">{!! $unansweredQuestions->bank->answer_3 !!}</label>
                                            </div>

                                            <div class="form-group">
                                                <input autocomplete="off" data-tournament="{{ $tournamentId }}"  data-bank="{{ $unansweredQuestions->bank->id }}"
                                                type="radio" value="4" id="opt-4-{{ $unansweredQuestions->bank->id }}" name="opt"/>
                                                <label for="opt-4-{{ $unansweredQuestions->bank->id }}" class="{{ $unansweredQuestions->answer == 4 ? $correct ? 'bg-success text-white' : 'bg-danger text-white' : '' }}">{!! $unansweredQuestions->bank->answer_4 !!}</label>
                                            </div>
                                        </div>
                                    {{-- </div> --}}
                                </div>
                            </div>
                        {{-- @endforeach --}}
                    @else
                        <div class="box-quiz my-4">
                            <div class="quiz-fr">
                                <p class="question">
                                    نوبت حریفته صبر کن ببینیم چیکار میکنه 🧐
                                </p>
                            </div>
                        </div>
                    @endif
                {{-- @else
                    <div class="box-quiz my-4">
                        <div class="quiz-fr">
                            <p class="question">
                                سوالات تموم شد😊
                            </p>
                        </div>
                        <div class="quiz-next">
                            <a href="{{ route('quiz.result', $tournamentId) }}">
                                دیدن نتایج
                            </a>
                        </div>
                    </div>
                @endif --}}
            </div>
        </div>
@endsection
@section('scripts')
<script>
    var quiz = new Audio('{{ asset("assets/quiz.mp3") }}');
    var correctAudio = new Audio('{{ asset("assets/quiz-correct.mp3") }}');
    var incorrectAudio = new Audio('{{ asset("assets/quiz-wrong.mp3") }}');

    setTimeout(function(){
        // quiz.addEventListener('loadedmetadata', function() {
        //     quiz.currentTime = 5; // Set the desired start time in seconds
            quiz.play();
        // });
    }, 3000);

    let main = $('.main-container');
    let btn = $('.next-page');
    $(document).on('change', 'input[type="radio"]', function(e){
        e.preventDefault();
        $('input[type="radio"]').attr('disabled', 'disabled')
        let self = $(this);
        let bank = self.data('bank');
        let tournament = self.data('tournament');
        let answer = $('input[type="radio"]:checked').val();
        let label = self.siblings('label');

        $.ajax({
            type: 'POST',
            url: '{{ route('quiz.store.answer') }}',
            data:{
                bank_id: bank,
                tournament: tournament,
                answer: answer
            }, success: function(res){
                if(res == '1'){
                    correctAudio.play();
                    label.css('background', 'green')
                }else{
                    incorrectAudio.play();
                    label.css('background', 'red')
                }
                window.location.href = '{{ route('lobby', $tournament->id) }}'
                // main.html($(res).find('.main-container'));
            }
        })
    })

    var timerEl = $(`.timer`);
    var timerSpan = $('.quiz-timer .timer span');
    var timer = timerEl.data('time')
    var interval = setInterval(function() {
        timer--;
        timerSpan.css("width", (timer / 2) * 10 + "%");
        //timerEl.text(timer);
        if (timer === 0){
            clearInterval(interval);
            $('input[type="radio"]').attr('disabled', 'disabled')
            $.ajax({
                method: 'POST',
                url: '{{ route("tournament.endtime") }}',
                data:{
                    tournamentId : {{ $tournamentId }},
                    bankId : {{ $unansweredQuestions->bank->id }}
                }, success: function(res){
                    incorrectAudio.play();
                    window.location.href = '{{ route('lobby', $tournament->id) }}'
                }
            })
        }
    }, 1000);

    btn.each(function(key ,value){
        let bankId = $(value).data('bank')
        var timerEl = $(`.timer-${bankId}`);
        var timer = timerEl.data('time')
        var interval = setInterval(function() {
            timer--;
            timerEl.text(timer);
            if (timer === 0) clearInterval(interval);
        }, 1000);
    })

    history.pushState(null, null, document.URL);
    window.addEventListener('popstate', function(event) {
        history.pushState(null, null, document.URL);
    });

    $(document).on('click', '.poll', function (){
        let self = $(this);
        let value = self.data('value');

        $.ajax({
            method: 'POST',
            url: '{{ route("tournament.poll") }}',
            data:{
                tournamentId : {{ $tournamentId }},
                bankId : {{ $unansweredQuestions->bank->id }},
                value: value
            }, success: function(res){
                $('.poll').fadeOut();
                $('.poll-msg').fadeIn();
            }
        })
    })
</script>
@endsection