@extends('layouts.public')
@section('title', 'Contact us | Kenya Diaspora Alliance')
@section('content')
    <div class="page-header d-none">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="page-header-inner text-center">
                        <h1 class="page-title text-white">
                            Contact
                        </h1>
                        <ul>
                            <li>
                                <a class="active text-white" href="{{ route('welcome') }}">Home</a>
                            </li>
                            <li class="text-white">Contact</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <section id="map">
        <div class="container-fluid">
            <div class="row">
                <div id="map_canvas"></div>
            </div>
        </div>
    </section>
    <section id="contact-map" class="section-padding" style="background-color: rgba(31, 19, 19, 0.5);">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section-title-header text-center text-white">
                        <h2 class="section-title text-white wow fadeInUp" data-wow-delay="0.2s">Contact the KDA Secretariat</h2>
                        <p class="wow fadeInDown" data-wow-delay="0.2s">
                            Please fill out the form below, and we'll get back
                            to you as soon as possible. <br>{{ config('convention.dates') }} · {{ config('convention.venue') }} · Hybrid
                        </p>
                    </div>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-lg-8 col-md-12 col-xs-12">
                    <div class="container-form wow fadeInLeft" data-wow-delay="0.2s">
                        <div class="form-wrapper">
                            @if (session()->has('message'))
                                <div class="alert alert-success">
                                    {{ session()->get('message') }}
                                </div>
                            @endif
                            <form role="form" method="post" action="{{ route('feedback.record') }}" id="feedbackForm"
                                name="feedback-form" data-toggle="validator" autocomplete="off">
                                @csrf
                                <div class="row">
                                    <div class="col-md-6 form-line">
                                        <div class="form-group">
                                            <input type="text" class="form-control" id="name" name="name"
                                                placeholder="Name" required data-error="Please enter your name">
                                            <div class="help-block with-errors"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 form-line">
                                        <div class="form-group">
                                            <input type="email" class="form-control" id="email" name="email"
                                                placeholder="Email" required data-error="Please enter your Email">
                                            <div class="help-block with-errors"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-12 form-line">
                                        <div class="form-group">
                                            <input type="text" class="form-control" id="msg_subject" name="subject"
                                                placeholder="Subject" required
                                                data-error="Please enter your message subject">
                                            <div class="help-block with-errors"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <textarea class="form-control" rows="4" id="message" name="message" required data-error="Write your message"></textarea>
                                        </div>
                                        <div class="form-submit">
                                            <button type="submit" class="btn btn-common btn-primary" id="form-submit"><i
                                                    class="fa fa-paper-plane" aria-hidden="true"></i>
                                                Send Message
                                            </button>
                                            <div id="msgSubmit" class="h3 text-center hidden"></div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="google-map-area">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <object style="border:0; height: 450px; width: 100%;"
                        data="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3988.814384572199!2d36.82020007418611!3d-1.2853551487024246!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x182f10d643350cf1%3A0x5d09abbf6f1d7f07!2sLonrho%20House!5e0!3m2!1sen!2ske!4v1695562049097!5m2!1sen!2ske"></object>
                </div>
            </div>
        </div>
    </section>
    <section id="contact-text">
        <div class="container">
            <div class="row contact-wrapper">
                <div class="col-lg-4 col-md-5 col-xs-12">
                    <ul class='d-flex flex-row align-items-center'>
                        <li>
                            <i class="lni-home"></i>
                        </li>
                        <li><span>Lonhro House, 17th Floor, <br>Mama Ngina Street, CBD.</li>
                    </ul>
                </div>
                <div class="col-lg-4 col-md-3 col-xs-12">
                    <ul class='d-flex flex-row align-items-center'>
                        <li>
                            <i class="lni-phone"></i>
                        </li>
                        <li>
                            <span class='text-nowrap'>+254 757 903 452</span>
                        </li>
                    </ul>
                </div>
                <div class="col-lg-4 col-md-3 col-xs-12">
                    <ul class='d-flex flex-row align-items-center'>
                        <li>
                            <i class="lni-envelope"></i>
                        </li>
                        <li><span><a href="mailto:info@kdhc.co.ke" class="__cf_email__">info@kdhc.co.ke</a></span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
@endsection