@extends('layouts.metronic')

@section('content')  
<div class="portlet light bordered">
    <div class="portlet-title">
        <div class="caption">
            <span class="caption-subject bold uppercase">Întrebări chestionar</span>
        </div>
        <div class="tools">
            <a href="javascript:;" class="collapse" data-original-title="" title=""> </a>
            <a href="#portlet-config" data-toggle="modal" class="config" data-original-title="" title=""> </a>
            <a href="javascript:;" class="reload" data-original-title="" title=""> </a>
            <a href="javascript:;" class="remove" data-original-title="" title=""> </a>
        </div>
    </div>
    <div class="portlet-body">
        <div class="panel-group accordion" id="accordion1">
            @foreach ($questions as $question)
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <div class="row" style="height: 50px;  display: flex;  align-items: center">
                                <div class="col-md-11">
                                    <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" href="#collapse_{{$question->id}}" aria-expanded="false"> <h4>{{ $question->text }}</h4>  <h5>Filter:  {{ $question->filter_text }} </h5></a>
                                </div>

                                <div class="col-md-1">
                                    <a href="{{ route('question.edit', $question->id) }}"><i class="fa fa-edit"></i></a>
                                    <input type="checkbox" class="pull-right" style="margin-right:20px" onchange="onCheckChanged(this, {{$question->id}})" {{ ($question->active)?"checked":"" }}  />
                                </div>
                            </div>
                        </h4>
                    </div>
                    <div id="collapse_{{$question->id}}" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
                        <div class="panel-body">
                                                        @foreach ($question->answers as $answer)
                            <div class="row">
                                <div class="col-md-1">
                                    <h6 class="pull-right"><b>{{$index}}.</b></h6>
                                    
                                </div>
                                <div class="col-md-11">
                                    <h5>{{$answer->content}}</h5>
                                </div>                                
                            </div>
                                                        @endforeach
                        </div>
                    </div>
                </div>
            @endforeach               
        </div>
    </div>
</div>
@endsection

@section('scripts')  
<script>
    function onCheckChanged(element, id){
        $.post( "/question.activate/" + id , { active: element.checked, _token:"{{ csrf_token() }}"} )
            .done(function( data ) {}
        );
    }
</script>
@endsection

@section('menuVariables')
    var menuItemName = "menuQuestions";
    var submenuItemName = "";
@stop