@extends('layouts.admin')
@section('content')
@section('headerTitle')
Sondaje
@endsection
@section('breadcrumbs')
    {{ Breadcrumbs::render('admin.interact.sondaje.view', $survey) }}
@endsection
@section('buttons')
@can('admin-create')
<add-survey-questions-and-answers :survey="{{$survey->id}}"></add-survey-questions-and-answers>
@endcan
@endsection
<div class="row">
    <section class="wrapper">
        <div class="container pt-4 pb-4">
            <h1 class="display-5 mx-md-n5 mx-lg-0 mb-4">{{$survey->title}} - intrebari si raspunsuri</h1>
            <div class="accordionHC mb-4">
                @foreach ($survey->questions as $question)
                <div class="accordion-itemHC">
                    <div class="accordion-headerHC d-flex justify-content-between align-items-center" onclick="toggleAccordion({{$loop->index}})">
                        <p class="m-0">
                            <i class="uil uil-arrow-resize-diagonal"></i> {{$question->title}}
                        </p>
                    </div>
                    <div class="accordion-contentHC mb-1" style="display: block;">
                        <!-- la href ar trebui sa vina locatia documentului -->
                        <div class="row">
                            <div class="col-md-6"><h4>Raspunsuri</h4></div>
                            <div class="col-md-6 text-center"><h4>Voturi</h4></div>
                            <hr>
                        </div>
                        @foreach ($question->answers as $answer)
                            <div class="row">
                                <div class="col-md-6"><h4>{{$answer->title}}</h4></div>
                                <div class="col-md-6 text-center"><h4>{{$answer->votes->count()}}</h4></div>
                            </div>
                        @endforeach
                    </div>
                </div>
                @endforeach
            </div>
    
    
            <!--/.row -->
        </div>
        <!-- /.container -->
    </section>
  </div>
@endsection
@push('scripts')
<script>
      function toggleAccordion(index) {
        let accordionItems = document.getElementsByClassName('accordion-itemHC');
        let accordionContents = document.getElementsByClassName('accordion-contentHC');

        // ascunde toate item-ele, cu exceptia celui cu indexul dat
        for (let i = 0; i < accordionItems.length; i++) {
            if (i === index) {
                if (accordionContents[i].style.maxHeight) {
                    accordionContents[i].style.maxHeight = null;
                } else {
                    accordionContents[i].style.maxHeight = accordionContents[i].scrollHeight + 'px';
                }
            } else {
                accordionContents[i].style.maxHeight = null;
            }
        }
    }

    // primul item deschis initial
    toggleAccordion(0);
</script>
@endpush