@if(!empty($data))
<form id="answerform" method="POST"  action="{{route('question.getQuestionDataStore')}}">
    @csrf
    <input type="hidden" name="question_id" value="{{$data->question_id}}">
    <input type="hidden" name="question_type" value="{{$data->question_type}}">
    <input type="hidden" name="user_id" value="{{Auth::user()->id}}">
    <input type="hidden" name="category" id="categoryForupdate" value="{{$main_category}}">

<h2>{{$data->question}}</h2>
@if($data->question_type == 'Numeric - Open-end')

    <div class="form-check cusple frsr cheforemlisy p2">
        <input type="number" id="" name="answer[]" value="" class="form-control answer" placeholder="18">
    </div>
    @elseif($data->question_type == 'Single Punch')
    @if(count($data->questionAnswer)<3)
            @foreach ($data->questionAnswer as $item)
            <input type="radio" id="{{$item->answers}}" name="answer[]" value="{{$item->precode}}">
            <label for="{{$item->answers}}">{{$item->answers}}</label><br>
            @endforeach
    @else
    <div class="row">
        <div class="col-md-12">
            <div class="hoeks">
                <select name="answer[]" class="form-control_profile " id="">
                    <option value="" selected>Select Please</option>
                    @foreach ($data->questionAnswer as $item)
                    <option value="{{$item->precode}}">{{$item->answers}}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>
    @endif
    @elseif($data->question_type == 'Multi Punch')
    <div class="row" >
    @foreach ($data->questionAnswer as $item)
    <div class="col-md-4"></div>
    <div class="col-md-4 " style="text-align: left;background: #41b8004d;margin-bottom: 5px;border-radius: 9px;padding: 11px 0px 0px 30px;">
        <input type="checkbox" class="form-check-input cmarmat" id="{{$item->answers}}" name="answer[]" value="{{$item->precode}}">
        <label class="form-check-label msoactexrt" for="{{$item->answers}}"> {{$item->answers}}</label>
    </div>
    <div class="col-md-4"></div>
    @endforeach
    </div>
    @elseif($data->question_type == 'Dummy')
    <div class="row" style="margin-left: 27px; margin-right: 27px;">
        <div class="col-md-12">
            <label class="form-check-label" for="flexCheckDefault">
                <p style="color:#000;">Input  {{$data->question_name}}</p>
            </label>
            <input type="Text" id="" name="answer[]" class="form-control Dummy" placeholder="Country Name ">
        </div>
    </div>

    @endif

    <div class="col-md-12">
        <div class="brnchck">
            <input type="submit" id="continue" class="btn-e" value="Continue"  role="button">
        </div>
    </div>
@php



$count = $total_question;
$total_answer  = $answered_question;


$final = ($total_answer/$count)*100;
@endphp

<div class="progressbarsmodel">
        <div  class="bar">
            <div  class="progress2" style="width: {{$final}}%;">
                <div class="person">
                    <p>{{round($final)}}%</p>
                </div>
            </div>
        </div>
    </div>



    <div style="display: none" class="loading"></div>

</form>
@else
<div class="form-check cusple cheforemlisy p8">
  Your This Section  Complete
</div>
@endif
<script>
$("form").submit(function(e) {
       var category  =  $('#categoryForupdate').val();
        e.preventDefault(); // avoid to execute the actual submit of the form.
        var form = $(this);
        var actionUrl = form.attr('action');

        $(".loading").css("display", "block");
        $.ajax({
        type: "POST",
        url: actionUrl,
        data: form.serialize(), // serializes the form's elements.
        success: function(data)
        {
            if (data==0)
            {
                location.reload();
            }
            // show response from the php script.
            get_question(category);
            $(".loading").css("display", "none");

        }
        });

});

</script>