@extends('web.app')

@section('main-content')
    <div class="about">
        <div class="about-menu">
            <ul class="about-menu-ul">
                <li id="about-menu-reviews">
                    <a href="reviews.html">
                        <div class="icon reviews"></div>
                        Reviews
                    </a>
                </li>

                <li id="about-menu-about">
                    <a href="history.html">
                        <div class="icon story"></div>
                        Who we are?
                    </a>
                </li>

                <li id="about-menu-press">
                    <a href="press.html">
                        <div class="icon press"></div>
                        Press
                    </a>
                </li>

                <li id="about-menu-faq" class="active">
                    <a href="faq.html">
                        <div class="icon faq"></div>
                        FAQs
                    </a>
                </li>
                <li id="about-menu-judges">
                    <a href="judges.html">
                        <div class="icon judges"></div>
                        Adjudicator
                    </a>
                </li>
                <li id="about-menu-team">
                    <a href="team.html">
                        <div class="icon team"></div>
                        Team
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <h1 class="title faq" style="color:#e5780b;">FAQs</h1>
    <div class="container">
        <div class="text-center faq_text">
            Please note, the questions listed below are the frequent questions we are asked, therefore it is not a definitive list. If you have any further questions or queries please email:<a href="mailto: questions@winabike.in" style="color:#e5780b;">  questions@winabike.in </a>
        </div>
    </div>
    <section class="accordian_section">
        <div class="container">
            <div class="panel-group" id="accordion1">            
            @foreach($questions as $key => $question)    
                @if ($loop->first)
                <div class="panel panel-default">
                    <div class="panel-heading panel_heading_main" data-id="{{$key}}">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne{{$key}}">
                                <i class="more-less glyphicon glyphicon-chevron-down"></i>
                                {{ $question->question }}
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne{{$key}}" class="panel-collapse collapse in">
                        <div class="panel-body">
                                                    </div>
                    </div>
                </div>                
                @else
                <div class="panel panel-default">
                    <div class="panel-heading panel_heading_main" data-id="{{$key}}">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne{{$key}}">
                                <i class="more-less glyphicon glyphicon-chevron-down"></i>
                                {{ $question->question }}
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne{{$key}}" class="panel-collapse collapse">
                        <div class="panel-body">
                                                    </div>
                    </div>
                </div>
                @endif
            @endforeach
            </div>
        </div>
    </section>
@endsection