@extends('front.layout.app')
@section('content')




    <section class="innerbanner">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2>Contact Us</h2>
                </div>
            </div>
        </div>
    </section>

    <section class="contact-sec">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="contact-overlay">
                        <h2 class="mainHead">FAQs For You!</h2>
                        <div id="accordion">
                            @foreach($faqs as $index => $faq)
                                <div class="card">
                                    <div id="heading{{$index}}">
                                        <h5 class="mb-0 ">
                                            <button class="btn btn-link {{$index === 0 ? '' : 'collapsed'}}"
                                                    data-toggle="collapse" data-target="#collapse{{$index}}"
                                                    aria-expanded="{{$index === 0? 'true': 'false'}}"
                                                    aria-controls="collapse{{$index}}">
                                                {!! $faq->question ?? '' !!}
                                                <i class="fas fa-plus"></i>
                                            </button>
                                        </h5>
                                    </div>
                                    <div id="collapse{{$index}}" class="collapse {{$index === 0 ? 'show' : ''}}" aria-labelledby="heading{{$index}}"
                                         data-parent="#accordion">
                                        <div class="card-body">
                                            {!! $faq->answer ?? '' !!}
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="contact-main">
                        <h2 class="mainHead">Contact Now!</h2>
                        <form class="contact-form">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <input type="text" class="form-control" placeholder="Enter Your name">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <input type="text" class="form-control" placeholder="Enter Your email">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <input type="text" class="form-control" placeholder="Phone number">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <input type="text" class="form-control" placeholder="Subject">
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <textarea type="text" class="form-control" placeholder="message"></textarea>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <button class="themeBtn">Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="icon-sec">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="icon-wrapp">
                        <a href="tel:{{$setting->phone_number ?? ''}}"><i class="fas fa-phone"></i></a>
                        <a href="">
                            <h5>Phone Numer<span>{{$setting->phone_number ?? ''}}</span></h5>
                        </a>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="icon-wrapp">
                        <a href="mailto:{{$setting->email ?? ''}}"><i class="far fa-envelope"></i></a>
                        <a href="">
                            <h5>Email Us<span>{{$setting->email ?? ''}}</span></h5>
                        </a>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="icon-wrapp">
                        <a href="{{$setting->location ?? ''}}"><i class="fas fa-map-marker-alt"></i></a>
                        <a href="">
                            <h5> Location<span> {{$setting->address ?? ''}}</span></h5>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <section class="map-sec p-0">
        <iframe class="d-block"
                src="{{$setting->location ?? ''}}"
                width="100%" height="550px" style="border:0;" allowfullscreen="" loading="lazy"
                referrerpolicy="no-referrer-when-downgrade"></iframe>
    </section>




@endsection