@extends(Auth::check() ? 'layouts.frontend_noauth' : 'layouts.frontend_noauth')
@section('title', $quiz->title)
@section('styles')
{!! SEO::generate() !!}
<link href="{{ asset('theme/material/css/style.css') }}" rel="stylesheet" />
<link href="{{ asset('theme/css/noauth.css') }}" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/css/intlTelInput.css" />
@endsection
@section('content')

    @guest
        <div class="container" id="content">
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xl-12 col-lg-12">
                    &nbsp;
                </div>
            </div>
            <div class="container" id="content">
                <h5 class="quiz-title" style="">{{ $quiz->title }}</h5>
                <div class="row">
                    <div class="col-md-10 col-sm-10 col-xl-10 col-lg-10">
                        <div class="tagline">
                            <p>{!! Str::limit($quiz->quiz_detail, 250, ' ...') !!}</p>
                        </div>
                    </div>
                    <div class="col-md-2 col-sm-2 col-xl-2 col-lg-2">
                        <button type="button" class=" btn btn-rose btn-link btn-lg" id="more_button" style="">
                            Know More
                        </button>
                    </div>
                    <hr class="quiz_heading" style="">
                </div>
                <div class="form">
                    <main class="login-form">
                        <div class="container">
                            <div class="row justify-content-center">
                                <div class="col-md-8 col-xl-6 col-lg-6 col-sm-6">
                                    <div class="card"  id="login_with_quiz">
                                        <div class="participant" style="">Login to participate in
                                            the Quiz</div>
                                        <br>
                                        <div class="card-body">
                                            @if ($errors->any())
                                                <div class="alert alert-danger">
                                                    <ul>
                                                        @foreach ($errors->all() as $error)
                                                            <li>{{ $error }}</li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            @endif
                                            <form action="{{ route('auth.pin.login') }}" method="post">
                                                @csrf
                                                <input type="hidden" name="quiz_id" value="{{ $quiz->id }}" />
                                                <div class="form-group row">
                                                    <div class="col-md-2">

                                                    </div>
                                                    <div class="col-md-8">
                                                        <label for="name" class=" text-md-right">Enter Your Name</label>
                                                        <input type="text" class="form-control" id="name" name="name"
                                                            required="" autofocus=""  style="text-align:center;">
                                                    </div>
                                                </div>

                                                <div class="form-group row">
                                                    <div class="col-md-2">

                                                    </div>
                                                    <div class="col-md-8">
                                                        <label for="Number" class=" text-md-right">Mobile Number</label>
                                                        <div class="form_group">
                                                            <div class="iti iti--allow-dropdown iti--separate-dial-code" style="background:none;">
                                                                <div class="iti__flag-container">
                                                                    <div class="iti__selected-flag" role="combobox"
                                                                        aria-owns="country-listbox" tabindex="0">
                                                                        <div class="iti__flag iti__in"></div>
                                                                        <div class="iti__selected-dial-code"></div>
                                                                        <div class=""></div>
                                                                    </div>
                                                                </div>
                                                                <input type="tel" id="txtPhone" name="mobile"
                                                                    class="form-control" autocomplete="off"
                                                                    style="padding-left: 84px;">
                                                                <input type="hidden" id="full_mobile_number"
                                                                    name="full_number" style="text-align:center;">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group d-none row" id="enterpin">
                                                    <div class="col-md-2">

                                                    </div>
                                                    <div class="col-md-8">
                                                        <label for="name" class=" text-md-right">Enter 4 Digit PIN</label>
                                                        <input type="number" maxlength="4" minlength="4" id=""
                                                            class="form-control" name="pin" placeholder="Enter 4 Digit PIN"
                                                            required="">
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <div class="col-md-2">

                                                    </div>
                                                    <div class="col-md-8">
                                                        <input type="Submit"  value="Get Pin" id="getpin" value="Get PIN"
                                                          class="form-control" style="  background: #3c86d5;">

                                                    </div>
                                                </div>

                                            </form>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </main>
                </div>
            </div>
        </div>
    @else
        <div class="container" id="content">
            <div class="row">
                <div class="col-md-10 col-sm-10 col-xl-10 col-lg-10" style="margin-left: 10px;">
                    <div class="row">
                        <div class="col-md-4">
                            <p style="padding: 20px;">Your name</p>
                            <h5 class="name" style="padding: 20px; margin-top:-44px;">{{ auth()->user()->name }}</h5>
                        </div>
                        <div class="col-md-4">
                            <p style="padding: 20px;">Mobile Number</p>
                            <h5 class="leader_number" style="padding: 20px; margin-top:-44px;">
                                +{{ auth()->user()->mobile_number }}</h5>
                        </div>
                        <div class="col-md-4">
                            <p style="padding: 20px;">Email ID</p>
                            <h5 class="leader_number" style="padding: 20px; margin-top:-44px;">{{ auth()->user()->email }}
                            </h5>
                        </div>
                    </div>
                </div>
                <div class="col-md-2 col-sm-2 col-xl-2 col-lg-2">

                </div>
                <hr class="quiz_heading"
                    style="width: 94%;
          border: 1px dotted #787d83;
          margin-left: 30px; margin-top: -15px;">
            </div>
            <div class="container" id="content">
                <div class="row">
            <div class="col-md-10 col-sm-10 col-xl-10 col-lg-10">
                <h5 style="padding: 20px; margin-top:-40px;">{{ $quiz->title }}</h5>
            </div>
            <div class="col-md-2 col-sm-2 col-xl-2 col-lg-2">
                        <button type="button" class=" btn btn-rose btn-link btn-lg" id="more_button"
                            style="color:#000;    text-decoration: none; margin-left:47px;">
                            Know More
                        </button>
                    </div>
            </div>
                <div class="row">
                    <div class="col-md-10 col-sm-10 col-xl-10 col-lg-10">
                        <div class="tagline">
                            <p style=" ">{!! Str::limit($quiz->quiz_detail, 250, ' ...') !!}</p>
                        </div>
                    </div>
                    <div class="col-md-2 col-sm-2 col-xl-2 col-lg-2">
                        <!-- <button type="button" class=" btn btn-rose btn-link btn-lg" id="more_button"
                            style="color:#000;    text-decoration: none; margin-left:47px;">
                            Know More
                        </button> -->
                    </div>
                    <hr class="quiz_heading"
                        style="width: 94%;
          border: 1px dotted #787d83;
          margin-left: 30px;">
                </div>
                @if ($quiz_over == true)
                    @if ($quiz_status == 'Upcoming')
                        <div class="form">
                            <main class="login-form">
                                <div class="container">

                                    <div class="row justify-content-center" id="quiz_page">
                                        <div class="col-md-12">
                                            <div class="card" style="background-color: rgba(0,0,0,.03); height: 265px;">

                                                <div class="card-body">
                                                    <!---content-->
                                                    <h6 style="text-align: center; margin-top:15px;"><b>The Quiz is not yet
                                                            started</b></h6>
                                                    <h6 style="text-align: center; margin-top:15px;">
                                                        <p>The Quiz will start on <strong>{{ Carbon\Carbon::parse($start_time)->format('d M Y H:i a') }}</strong>
                                                            <p>Time remains: <span id="countdown_quiz_start"
                                                                data-countdown="{{ $start_time }}"></span></p>

                                                        </p>
                                                    </h6>

                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                </div>

                            </main>

                        </div>
                    @else
                        <div class="form">
                            <main class="login-form">
                                <div class="container">

                                    <div class="row justify-content-center" id="quiz_page">
                                        <div class="col-md-12">
                                            <div class="card" style="background-color: rgba(0,0,0,.03); height: 265px;">

                                                <div class="card-body">
                                                    <!---content-->
                                                    <h6 style="text-align: center;"><b>Thank you!</b></h6>
                                                    <h6 style="text-align: center; margin-top:15px;"><b>This quiz has been
                                                            finished.</b></h6>
                                                    <h6 style="text-align: center; margin-top:15px;">
                                                        <p>Click "Leadership board" below to view the score.</p>
                                                    </h6>

                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="row">
                                        <div class="col-md-10 col-sm-10 col-xl-10 col-lg-10">
                                            <p style="color:black; margin-top:10px; ">Go to Leadership Board for View Result
                                            </p>
                                        </div>
                                        <div class="col-md-2 col-sm-2 col-xl-2 col-lg-2">
                                            <a href="{{ route('frontend.quiz.daily.scorecard', $quiz->slug) }}"
                                                target="_blank" type="button" class=" btn btn-rose btn-link btn-lg"
                                                style="    color: #000;
                                                        text-decoration: none;
                                                        margin-left: 12px;
                                                        margin-top: 10px;">
                                                Leadership Board
                                            </a>
                                        </div>

                                    </div>
                                </div>

                            </main>

                        </div>
                    @endif
                @else
                    @if ($is_participated == 0)
                        <div class="form">
                            <main class="login-form">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <h6 style=""><strong>Take the daily
                                                    Quiz</strong></h6>
                                        </div>
                                        <div class="col-md-6 text-right">
                                            <h6 style="color:black">Time remain to answer this question:
                                                </span>
                                                    <span id="countdown_next_question"
                                                                            data-countdown="{{ $next_question_date }}"></span>
                                            </h6>

                                        </div>
                                    </div>

                                    <div class="row justify-content-center" id="quiz_page">
                                        <div class="col-md-12">
                                            <div class="card" style="background-color: rgba(0,0,0,.03);">
                                                <div class="card-body">
                                                    <form method="post"
                                                        action="{{ route('frontend.quiz.submit.dailyanswer', $quiz->slug) }}"
                                                        id="formquizsubmit">
                                                        <div class="">
                                                            <div class="card-header " id="question">

                                                                @csrf
                                                                @php $count = 1; @endphp
                                                                @forelse ($quiz_detail['quiz_q_a'] as $qa)
                                                                    <div class="card">
                                                                        <div class="container" style="margin:15px;">
                                                                            <p>{{ $count }}&nbsp;&nbsp;
                                                                                {!! $qa->question !!}</p>
                                                                            <div class="form-check">
                                                                                <label class="form-check-label">
                                                                                    <input class="form-check-input"
                                                                                        type="radio"
                                                                                        name="question[{{ $qa->id }}]"
                                                                                        value="answer_1">
                                                                                    {!! $qa->answer_1 !!}
                                                                                    <span class="circle">
                                                                                        <span class="check"></span>
                                                                                    </span>
                                                                                </label>
                                                                            </div>
                                                                            <!---second option---->
                                                                            <div class="form-check">
                                                                                <label class="form-check-label">
                                                                                    <input class="form-check-input"
                                                                                        type="radio"
                                                                                        name="question[{{ $qa->id }}]"
                                                                                        value="answer_2">
                                                                                    {!! $qa->answer_2 !!}
                                                                                    <span class="circle">
                                                                                        <span class="check"></span>
                                                                                    </span>
                                                                                </label>
                                                                            </div>
                                                                            <!----third option---->
                                                                            <div class="form-check">
                                                                                <label class="form-check-label">
                                                                                    <input class="form-check-input"
                                                                                        type="radio"
                                                                                        name="question[{{ $qa->id }}]"
                                                                                        value="answer_3">
                                                                                    {!! $qa->answer_3 !!}
                                                                                    <span class="circle">
                                                                                        <span class="check"></span>
                                                                                    </span>
                                                                                </label>
                                                                            </div>
                                                                            <!---fourth option--->
                                                                            <div class="form-check">
                                                                                <label class="form-check-label">
                                                                                    <input class="form-check-input"
                                                                                        type="radio"
                                                                                        name="question[{{ $qa->id }}]"
                                                                                        value="answer_4">{!! $qa->answer_4 !!}
                                                                                    <span class="circle">
                                                                                        <span class="check"></span>
                                                                                    </span>
                                                                                </label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    @php
                                                                        $count++;
                                                                    @endphp
                                                                @empty
                                                                    <p>No questions available at the moment.</p>
                                                                @endforelse
                                                            </div>
                                                        </div>
                                                        <div class="container">
                                                            <input type="hidden" name="time_taken" id="hidden_time_taken"
                                                                value="">
                                                            <button type="submit" class="btn btn-info" id="btnquizsubmit"
                                                                style="float:right;"> Submit
                                                                <div class="ripple-container"></div>
                                                            </button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                </div>

                            </main>

                        </div>
                    @else
                        <div class="form">
                            <main class="login-form">
                                <div class="container">

                                    <div class="row justify-content-center" id="quiz_page">
                                        <div class="col-md-12">
                                            <div class="card" style="background-color: rgba(0,0,0,.03); height: 265px;">

                                                <div class="card-body">
                                                    <!---content-->
                                                    <h6 style="text-align: center;"><b>Thank you!</b></h6>
                                                    <h6 style="text-align: center; margin-top:15px;"><b>we have save your
                                                            answer,</b></h6>
                                                    <p style="text-align: center; margin-top:15px;">Next Question Will Appear
                                                        on
                                                    </p>
                                                    <div class="container" id="conformation">
                                                        <div class="row">
                                                            <div class="col-md-2 col-sm-2 col-lg-2 col-xl-2">

                                                            </div>
                                                            <div class="col-md-4 col-sm-4 col-lg-4 col-xl-4">
                                                                <h6 style="text-align: center;"> <i class="fa fa-calendar"
                                                                        style="color: #000;"></i> &nbsp;&nbsp;
                                                                    <strong>{{ Carbon\Carbon::parse($next_question_date)->format('d M Y') }}</strong>
                                                                </h6>
                                                            </div>
                                                            <div class="col-md-3 col-sm-3 col-lg-3 col-xl-3">
                                                                <h6 style="text-align: center;"> <i class="fa fa-clock-o"
                                                                        style="color: #000;"></i> &nbsp;&nbsp;
                                                                    <strong>{{ Carbon\Carbon::parse($next_question_date)->format('d M Y h:i:s a') }}</strong>
                                                                    <div>(Time Remains: <span id="countdown_next_question"
                                                                            data-countdown="{{ $next_question_date }}"></span>)
                                                                    </div>
                                                                </h6>
                                                            </div>

                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="row">
                                        <div class="col-md-10 col-sm-10 col-xl-10 col-lg-10">
                                            <p style="color:black; margin-top:10px; ">Go to Leadership Board for View Result
                                            </p>
                                        </div>
                                        <div class="col-md-2 col-sm-2 col-xl-2 col-lg-2">
                                            <a href="{{ route('frontend.quiz.daily.scorecard', $quiz->slug) }}"
                                                type="button" class=" btn btn-rose btn-link btn-lg"
                                                style="    color: #000;
                              text-decoration: none;
                              margin-left: 12px;
                              margin-top: 10px;">
                                                Leadership Board
                                            </a>
                                        </div>

                                    </div>
                                </div>

                            </main>

                        </div>
                    @endif
                @endif
            </div>

        </div>

    @endguest

@endsection
@section('scripts')
<script src="{{ asset('js/jquery.countdown.min.js') }}"></script>
    <script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/js/intlTelInput-jquery.min.js"></script>
    <script>
        //countdown_quiz_start
        $('[data-countdown]').each(function() {
            var $this = $(this),
                finalDate = $(this).data('countdown');
            $this.countdown(finalDate, function(event) {
                $this.html(event.strftime('%H:%M:%S'));
            });
        });

        $('[data-countdown]').each(function() {
            var $this = $(this),
                finalDate = $(this).data('countdown_quiz_start');
            $this.countdown(finalDate, function(event) {
                $this.html(event.strftime('%H:%M:%S'));
            });
        });
        var start_counter = 0;
        setInterval(function checkIfTimeRunsOut() {
            var current_time = $('#countdown_quiz_start').text();
            start_counter = start_counter + 1;
            $('#hidden_time_taken').val(start_counter);
            if (current_time == '00:00:00') {
                location.reload(true);
            }
        }, 1000);


        var counter = 0;
        setInterval(function checkIfTimeRunsOut() {
            var current_time = $('#countdown').text();
            counter = counter + 1;
            $('#hidden_time_taken').val(counter);
            if (current_time == '00:00:00') {
                // Auto submit form because time is over or disable submit.
            }
        }, 1000);

        @guest

        $(function() {
            var code = "+91"; // Assigning value from model.
            $('#txtPhone').val(code);
            $('#txtPhone').intlTelInput({
                autoHideDialCode: true,
                autoPlaceholder: "ON",
                dropdownContainer: document.body,
                formatOnDisplay: true,
                initialCountry: "auto",
                nationalMode: true,
                placeholderNumberType: "MOBILE",
                preferredCountries: ['IN', 'US'],
                separateDialCode: true
            });
            $('#getpin').on('click', function(e) {
                if ($('#name').val() == null || $('#txtPhone').val() == null) {
                    alert("Name and Mobile number fields are required");
                } else {
                    // Send OTP and display enter pin text box
                    $('#enterpin').removeClass('d-none');

                    // Change button type and name
                    $('#getpin').text('Login');

                    // Change button to submit
                    $('#getpin').attr('type', 'submit');
                    var code = $("#txtPhone").intlTelInput("getSelectedCountryData").dialCode;
                    var phoneNumber = $('#txtPhone').val();
                    var full_mobile_number = code + '' + phoneNumber;
                    $("#full_mobile_number").val(full_mobile_number);
                    // e.preventDefault();
                    $('#getpin').removeAttr('id');
                    // Submit the form

                    $.ajax({
                        url: "{{ route('auth.mobile.otp') }}",
                        type: "POST",
                        data: {
                            _token: "{{ csrf_token() }}",
                            mobile: full_mobile_number
                        },
                        success: function(response) {
                            //$('#submit').html('Submit');
                            //$("#submit").attr("disabled", false);
                            // alert('Ajax form has been submitted successfully');
                            //document.getElementById("contactUsForm").reset();
                        }
                    });
                }
            });
        });
        @else

            // for next question
            $('[data-countdown]').each(function() {
                var $this = $(this),
                    finalDate = $(this).data('countdown');
                $this.countdown(finalDate, function(event) {
                    $this.html(event.strftime('%H:%M:%S'));
                });
            });
            setInterval(function checkIfTimeRunsOut() {
                var current_time = $('#countdown_next_question').text();
                console.log(current_time);
                if (current_time == '00:00:00') {
                    location.reload(true);
                }
            }, 1000);
        @endguest
    </script>
@endsection