@extends('layouts.landing')

@section('title')
    {{$poll->name}}
@endsection

@section('content')
    <style>
        .progress-bar {
            color: #515457;
            font-size: 16px;
            text-align: left;
            white-space: nowrap;
            background-color: #f5f5ff;
        }
        .progress-bar:first-child {
            border-bottom-left-radius: 0 !important;
            border-top-left-radius: 0 !important;
        }
        .progress-bar:last-child {
            border-bottom-right-radius: 0 !important;
            border-top-right-radius: 0 !important;
        }
        .progress {
            background-color: transparent;
            border: 1px solid #E8E8FF;
            border-radius: 2rem;
        }
    </style>
    <div class="row mobile-mt-8">
        <div class="col-12">
            <div class="card w-100 border-0 p-0 bg-white shadow-xss rounded-xxl">
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between">
                        <h5>{{$poll->name}}</h5>
                        <span id="addQuestion" class="custom-btn cursor-pointer rounded-2"><i class="mdi mdi-plus"></i> Add Question</span>
                    </div>
                    @php
                        $question_no = 1;
                    @endphp
                    @forelse ($questions as $question)
                        <div class="row justify-content-center">
                            <div class="col-12 col-lg-7 col-xl-7">
                                <div class="my-4">
                                    <h6 class="text-color">Question {{$question_no++}}</h6>
                                    <p>{{$question->title}}</p>
                                    <div class="mt-4">
                                        @php
                                            $answers = json_decode($question->options);
                                            $user_answer = App\Models\PollAnswer::where('user_id', Auth::user()->id)->where('poll_question_id', $question->id)->first();
                                        @endphp

                                        @if(isset($user_answer))

                                            @forelse($answers as $key => $answer)
                                                @php
                                                    $answers_count = count($answers);
                                                    $vote_count = App\Models\PollAnswer::where('poll_question_id', $question->id)->where('choice', $key)->count();
                                                    if($vote_count < 1) {
                                                        $percentage = 0;
                                                    } else {
                                                        $percentage = ( 1 / $vote_count ) * 100;
                                                    }
                                                @endphp
                                                <div class="progress answered cursor-pointer h50 mb-3" id="{{$key}}">
                                                    <div class="progress-bar" role="progressbar" style="width: {{$percentage}}%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                                        <div class="d-flex justify-content-between -mt-1-5">
                                                            <span id="" class="position-absolute pl-4">{{$answer}}
                                                                @if($user_answer->choice == $key)
                                                                    <span class="ml-3 text-color"><i class="feather-check-circle"></i></span>
                                                                @endif
                                                            </span>
                                                            <span id="" class="position-absolute r-2">{{$percentage}}%</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            @empty

                                            @endforelse

                                        @else
                                            @forelse($answers as $key => $answer)
                                                <div class="progress answer cursor-pointer h50 mb-3" id="{{$key}}">
                                                    <div class="progress-bar" id="progress-bar{{$key}}" role="progressbar" style="width: 0%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                                        <div class="d-flex justify-content-between -mt-1-5">
                                                            <span id="" class="position-absolute pl-4">{{$answer}} <span class="ml-3 text-color" id="check{{$key}}"></span></span>
                                                            <span id="percentage{{$key}}" class="position-absolute remove-radio{{$question->id}} r-2">
                                                                <div class="form-check mt-1" id="radio{{$key}}">
                                                                    <input type="radio" class="form-check-input mt-0" name="user_option" aria-label="">
                                                                    <input type="hidden" name="poll_question_id" id="poll_question_id{{$key}}" value="{{$question->id}}">
                                                                    <input type="hidden" name="poll_id" id="poll_id{{$key}}" value="{{$poll->id}}">
                                                                </div>
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            @empty

                                            @endforelse
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="row">
                            <div class="col-12">
                                <div class="text-center mb-5">
                                    <img src="{{asset('assets/images/poll.png')}}" class="w80 mt-6" alt="">
                                    <br>
                                    <span class="pt-4 mt-5 text-gray-500">You haven't created a poll question</span>
                                </div>
                            </div>
                        </div>
                    @endforelse

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

    @include('elements.create-poll-question')
    {{-- @include('elements.create-poll-answer') --}}
    <script>
        function addAnswerModal(id) {
            $('#quesion_id').val(id);
            $('#showAnswerModal').modal('show');
        }
        $('#addQuestion').click(function(e){
            $('.add-question-poll').show();
            $('.add-question-poll').toggleClass('nav-active');
        });
        $('.close-poll').click(function(e){
            $('.add-question-poll').toggleClass('nav-active');
            $('.add-question-poll').hide();
        });

        $(document).on("click", ".answer", function(e){
            var answerKey = this.id;

            var pollId = $("#poll_id"+ answerKey).val();
            var pollQuestionId = $("#poll_question_id"+ answerKey).val();

            $("#"+answerKey).removeClass("answer");

            $.ajax({
                type: 'POST',
                url: "/polls/answer-poll-question",
                data: {
                    "_token": "{{ csrf_token() }}",
                    choice: answerKey,
                    poll_id: pollId,
                    poll_question_id: pollQuestionId,
                },
                success: function (response) {
                    console.log(response);
                    if(response.status == true) {
                        toastr.success("Poll answered", "", defaultSetting)
                        var width = "width:"+ response.percentage + "%";
                        var percentage = response.percentage + "%";
                        $("#progress-bar"+ answerKey).attr("style", width)
                        // $("#percentage"+ answerKey).html("")
                        $(".remove-radio"+ pollQuestionId).html("")

                        $("#percentage"+ answerKey).html(percentage)

                        $("#check"+ answerKey).html('<i class="feather-check-circle"></i>')

                    }
                },
                error: function(error) {
                    toastr.error("You have already answered the question", "", defaultSetting)
                }
            });
        });
    </script>
@endsection