@extends('layouts.front-layout')
@section('title') {{ $pageData['Contact']['top_banner_title'] ?? '' }}@endsection
@section('content')

    <section class="inner-banner">
        <div class="container">
            <h2>{{ $pageData['Contact']['top_banner_title'] ?? '' }}</h2>
        </div>
    </section>

    <section class="contact">
        <div class="line"></div>
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="faq-section">
                        <div class="faq-head">
                            <h2>{{ $pageData['Contact']['heading'] ?? '' }}</h2>
                            <h3>{{ $pageData['Contact']['sub_heading'] ?? '' }}</h3>
                        </div>
                        <div id="accordion">
                            @forelse($get_contact_questions as $key => $contact_question)
                                <div class="card">

                                    <div id="headingOne{{$key}}">
                                        <h5 class="mb-0">
                                            <button class="btn btn-link {{ $key == 0 ? '' : 'collapsed' }}"
                                                    data-toggle="collapse" data-target="#collapse{{$key}}"
                                                    aria-expanded="{{ $key == 0 ? 'true' : 'false' }}"
                                                    aria-controls="collapseOne"><span></span>
                                                {{ $contact_question->first_heading }}
                                                <i class="fas fa-angle-up"></i>
                                            </button>
                                        </h5>
                                    </div>

                                    <div id="collapse{{$key}}" class="collapse {{ $key == 0 ? 'show' : '' }}"
                                         aria-labelledby="heading{{$key}}"
                                         data-parent="#accordion">
                                        <div class="card-body">
                                            {!! $contact_question->description !!}
                                        </div>
                                    </div>
                                </div>

                            @empty
                                <h2>Contact Questions Data Not Available</h2>
                            @endforelse
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="contact-section">
                        <div class="faq-head">
                            <h2>{{ $pageData['Contact']['second_section_heading'] ?? '' }}</h2>
                            <h3>{{ $pageData['Contact']['second_section_sub_heading'] ?? '' }}</h3>
                        </div>
                        <form action="{{route('contact.submit')}}" method="post">
                        <div class="contact-form">
                            @csrf
                            <div class="row">
                                <div class="col-md-6">
                                    <label for="">Your Name</label>
                                    <input type="text" name="first_name">
                                    <small class='text-danger'>@error ('first_name') {{$message}} @enderror</small>
                                </div>

                                <div class="col-md-6">
                                    <label for="">Your Email</label>
                                    <input type="email" name="email">
                                    <small class='text-danger'>@error ('email') {{$message}} @enderror</small>

                                </div>
                                <div class="col-md-6">
                                    <label for="">Phone Number</label>
                                    <input type="tel" name="phone">
                                    <small class='text-danger'>@error ('phone') {{$message}} @enderror</small>

                                </div>
                                <div class="col-md-6">
                                    <label for="">Company</label>
                                    <input type="text" name="company">
                                    <small class='text-danger'>@error ('company') {{$message}} @enderror</small>

                                </div>
                                <div class="col-md-12">
                                    <label>Your Message</label>
                                    <textarea rows="7" name="message"></textarea>
                                    <small class='text-danger'>@error ('message') {{$message}} @enderror</small>

                                    <button type="submit" class="themeBtn">Ask a question</button>
                                </div>
                            </div>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="map">
        <div class="map-loc">
            <iframe loading="lazy"
                    src="{{ $pageData['Contact']['map_link'] ?? '' }}"
                    title="London Eye, London, United Kingdom"
                    aria-label="London Eye, London, United Kingdom"></iframe>

        </div>
        </div>
    </section>
@endsection