@extends('layouts.app')
@section('content')

<main class="main">
    <nav aria-label="breadcrumb" class="breadcrumb-nav">
        <div class="container">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ url('/') }}"><i class="icon-home"></i></a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">
                    Contact Us
                </li>
            </ol>
        </div>
    </nav>


    <div class="container contact-us-container">
        <div class="contact-info">
            <div class="row">
                <div class="col-12">
                    <h2 class="ls-n-25 m-b-1">
                        {{ $contactPage->title }}
                    </h2>

                    <p>
                        {{ $contactPage->description }}
                    </p>
                </div>

                <div class="col-sm-6 col-lg-3">
                    <div class="feature-box text-center">
                        <i class="sicon-location-pin"></i>
                        <div class="feature-box-content">
                            <h3>Address</h3>
                            <h5>{{ $contactPage->address }}</h5>
                        </div>
                    </div>
                </div>

                <div class="col-sm-6 col-lg-3">
                    <div class="feature-box text-center">
                        <i class="fa fa-mobile-alt"></i>
                        <div class="feature-box-content">
                            <h3>Phone Number</h3>
                            <h5>{{ $contactPage->phone }}</h5>
                        </div>
                    </div>
                </div>

                <div class="col-sm-6 col-lg-3">
                    <div class="feature-box text-center">
                        <i class="far fa-envelope"></i>
                        <div class="feature-box-content">
                            <h3>E-mail Address</h3>
                            <h5>
                                <a href="mailto:{{ $contactPage->email }}">
                                    {{ $contactPage->email }}
                                </a>
                            </h5>
                        </div>
                    </div>
                </div>

                <div class="col-sm-6 col-lg-3">
                    <div class="feature-box text-center">
                        <i class="far fa-calendar-alt"></i>
                        <div class="feature-box-content">
                            <h3>Working Days/Hours</h3>
                            <h5>{{ $contactPage->working_days }}</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-6">
                <h2 class="mt-6 mb-2">Send Us a Message</h2>

                @if(session('success'))
                    <div class="alert alert-success">
                        {{ session('success') }}
                    </div>
                @endif

                @if($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form class="mb-0" action="{{ route('contact.submit') }}" method="POST">
                    @csrf

                    <div class="form-group">
                        <label class="mb-1" for="contact-name">
                            Your Name <span class="required">*</span>
                        </label>
                        <input type="text" class="form-control" id="contact-name" name="name" value="{{ old('name') }}" required>
                    </div>

                    <div class="form-group">
                        <label class="mb-1" for="contact-email">
                            Your E-mail <span class="required">*</span>
                        </label>
                        <input type="email" class="form-control" id="contact-email" name="email" value="{{ old('email') }}" required>
                    </div>

                    <div class="form-group">
                        <label class="mb-1" for="contact-message">
                            Your Message <span class="required">*</span>
                        </label>
                        <textarea cols="30" rows="5" id="contact-message" class="form-control" name="message" required>{{ old('message') }}</textarea>
                    </div>

                    <div class="form-footer mb-0">
                        <button type="submit" class="btn btn-dark font-weight-normal">
                            Send Message
                        </button>
                    </div>
                </form>
            </div>

            <div class="col-lg-6">
                <h2 class="mt-6 mb-1">Frequently Asked Questions</h2>
                <div id="accordion">
                    @forelse($faqs as $key => $faq)
                        <div class="card card-accordion">
                            <a class="card-header {{ $key != 0 ? 'collapsed' : '' }}"
                               href="#"
                               data-toggle="collapse"
                               data-target="#collapse{{ $faq->id }}"
                               aria-expanded="{{ $key == 0 ? 'true' : 'false' }}"
                               aria-controls="collapse{{ $faq->id }}">
                                {{ $faq->question }}
                            </a>

                            <div id="collapse{{ $faq->id }}"
                                 class="collapse {{ $key == 0 ? 'show' : '' }}"
                                 data-parent="#accordion">
                                <p>{{ $faq->answer }}</p>
                            </div>
                        </div>
                    @empty
                        <p>No FAQs available right now.</p>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    <div class="mb-8"></div>
    
    <div id="map">
        {!! $contactPage->map_embed !!}
    </div>
</main>

@endsection