@extends('web.layouts.container')
@section('breadcrumb')
    <nav class="nav-breadcrumb" aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), url('/'), [], true)}}">{{__('main.home_page')}}</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{__('faqs.head')}}</li>
        </ol>
    </nav>
@endsection
@section('content')
    <main>
        <!--start faq-->
        <section class="faq">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
                        <div id="accordion" class="accordion">
                            @if($faqs->count())
                                @foreach($faqs as $faq)
                                    <div class="card">
                                        <div class="card-header done" id="headingOne">
                                            <h5 class="mb-0">
                                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse_{{$loop->iteration}}" aria-expanded="true" aria-controls="collapseOne">
                                                    <p>{{$faq->question}}</p>
                                                    <i class="fas fa-angle-down"></i>
                                                </button>
                                            </h5>
                                        </div>
                                        <div id="collapse_{{$loop->iteration}}" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
                                            <div class="card-body">
                                                <p>{!! $faq->answer !!}</p>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
{{--                        <div class="card-question">--}}
{{--                            <div class="card-header">--}}
{{--                                <h6>إرسل لنا سؤالك</h6>--}}
{{--                            </div>--}}
{{--                            <div class="card-body">--}}
{{--                                <div class="form-container">--}}
{{--                                    <form>--}}
{{--                                        <div class="form-group">--}}
{{--                                            <input placeholder="الأسم ..." class="form-control">--}}
{{--                                        </div>--}}
{{--                                        <div class="form-group">--}}
{{--                                            <input placeholder="البريد الالكتروني ..." class="form-control">--}}
{{--                                        </div>--}}
{{--                                        <div class="form-group">--}}
{{--                                            <textarea placeholder="سؤالك ..." rows="5" class="form-control"></textarea>--}}
{{--                                        </div>--}}
{{--                                        <button type="submit" class="submit-btn">إرسال</button>--}}
{{--                                    </form>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
                        <div class="card-contact">
                            <div class="card-header">
                                <h6>{{__('main.connect_with_us')}}</h6>
                            </div>
                            <div class="card-body">
                                <div class="inner">
                                    <a href="tel:{{settings('site_phone')}}">
                                        <div class="item">
                                            <img src="{{asset('assets/web/images/icons/call.png')}}" class="icon" alt="call.png">
                                            <div class="text contact-text">
                                                <p class="title"><b>{{__('main.contact_us')}}</b></p>
                                                <p class="details">{{settings('site_phone')}}</p>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <div class="inner">
                                    <a href="mailto:{{settings('site_email')}}">
                                        <div class="item">
                                            <img src="{{asset('assets/web/images/icons/email.png')}}" class="icon" alt="email.png">
                                            <div class="text contact-text">
                                                <p class="title"><b>{{__('users.email')}}</b></p>
                                                <p class="details">{{settings('site_email')}}</p>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <div class="inner">
                                    <div class="item">
                                        <img src="{{asset('assets/web/images/icons/location.png')}}" class="icon" alt="location.png">
                                        <div class="text contact-text">
                                            <p class="title"><b>{{__('users.address')}}</b></p>
                                            <p class="details">{{settings('site_address')}}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
@endsection


@section('inner_js')
    <script>
        $(document).ready(function () {
            $('.navs-container').addClass('page-heading')
        })
    </script>
@endsection