@extends('layouts.app')

@section('style')
    <style>
        .custom-invalid-feedback {
            color: var(--anity-base);
            font-size: 16px;
            margin-top: 6px;
        }
    </style>
@endsection



@section('content')
    <div class="custom-cursor">

        @include('layouts.components.cursor-and-preloader')
        <!-- /cursor and preloader -->




        <div class="page-wrapper">



            @include('layouts.header')


            <div class="stricky-header stricked-menu main-menu">
                <div class="sticky-header__content"></div>
                <!-- /.sticky-header__content -->
            </div>
            <!-- /.stricky-header -->


            <!--Page Header Start-->
            {{-- @include('layouts.components.page-header', [
                'page_title' => 'Contact',
            ]) --}}
            <!--Page Header End-->

            <!--Contact One Start-->
            <section class="contact-one py-5">
                <h1 class="text-center mb-5">Contact Us</h1>
                <div class="container">
                    <div class="contact-one__inner">
                        <div class="section-title text-left sec-title-animation animation-style2">
                            <div class="section-title__tagline-box">
                                <span class="section-title__tagline">Contact Us</span>
                            </div>
                            <h2 class="section-title__title title-animation">Empowering Communities<br> through Donations
                            </h2>
                        </div>
                        <form class="contact-one__form" action="{{ route('contact.sumbit') }}" id="contact-form-submit"
                            method="POST">
                            @csrf

                            <div class="row">
                                <div class="col-xl-6 col-lg-6">
                                    <h4 class="contact-one__input-title">Your Name</h4>
                                    <div class="contact-one__input-box">
                                        <div class="contact-one__input-icon">
                                            <span class="icon-user"></span>
                                        </div>
                                        <input type="text" name="name" placeholder="Name">
                                        <div class="custom-invalid-feedback"></div>

                                    </div>
                                </div>
                                <div class="col-xl-6 col-lg-6">
                                    <h4 class="contact-one__input-title">Email Address</h4>
                                    <div class="contact-one__input-box">
                                        <div class="contact-one__input-icon">
                                            <span class="icon-pin"></span>
                                        </div>
                                        <input type="email" name="email" placeholder="Email Address">
                                        <div class="custom-invalid-feedback"></div>

                                    </div>
                                </div>
                                <div class="col-xl-12">
                                    <h4 class="contact-one__input-title">Your Phone</h4>
                                    <div class="contact-one__input-box">
                                        <div class="contact-one__input-icon">
                                            <span class="icon-call"></span>
                                        </div>
                                        <input type="text" name="phone" placeholder="Your Phone...">
                                        <div class="custom-invalid-feedback"></div>

                                    </div>
                                </div>
                                <div class="col-xl-12">
                                    <h4 class="contact-one__input-title">Message</h4>
                                    <div class="contact-one__input-box text-message-box">
                                        <div class="contact-one__input-icon">
                                            <span class="icon-envelope"></span>
                                        </div>
                                        <textarea name="message" placeholder="Write Message.."></textarea>
                                        <div class="custom-invalid-feedback"></div>
                                    </div>
                                    <div class="contact-one__btn-box">
                                        <button id="contact-form-button" type="submit"
                                            class="thm-btn contact-one__btn">Send Messege<span><i
                                                    class="icon-arrow-right"></i></span></button>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div class="result"></div>
                    </div>
                </div>
            </section>
            <!--Contact One End-->

            <!--Contact Two Start-->
            <section class="contact-two">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-xl-8 col-lg-7">
                            <div class="contact-two__left">

                                <iframe
                                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2480.263446650766!2d0.06532371154753666!3d51.56340380649385!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d8a7870dd67fd1%3A0x79a4438018cb9140!2sNabir%20Foundation!5e0!3m2!1sen!2sbd!4v1756448317993!5m2!1sen!2sbd"
                                    allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"
                                    class="contact-two__google-map"></iframe>
                                {{-- <iframe
                                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4562.753041141002!2d-118.80123790098536!3d34.152323469614075!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80e82469c2162619%3A0xba03efb7998eef6d!2sCostco+Wholesale!5e0!3m2!1sbn!2sbd!4v1562518641290!5m2!1sbn!2sbd"
                                    class="contact-two__google-map" allowfullscreen></iframe> --}}
                            </div>
                        </div>
                        <div class="col-xl-4 col-lg-5">
                            <div class="contact-two__right">
                                <ul class="contact-two__contact-list list-unstyled">
                                    <li>
                                        <div class="icon">
                                            <span class="icon-pin-two"></span>
                                        </div>
                                        <div class="content">
                                            <h4>UK</h4>
                                            <p>182
                                                Cranbrook Rd, Ilford, IG1 4LX</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icon">
                                            <span class="icon-pin-two"></span>
                                        </div>
                                        <div class="content">
                                            <h4>Bangladesh</h4>
                                            <p>Sami Sadi Complex, East Subid Bazar, Miah Fazil Chist, Sunamganj Road, Sylhet
                                            </p>
                                        </div>
                                    </li>



                                    <li>
                                        <div class="icon">
                                            <span class="icon-envelope"></span>
                                        </div>
                                        <div class="content">
                                            <h4>Email Address</h4>
                                            <p><a target="_blank" href="mailto:info@nabirfoundation.org">
                                                    info@nabirfoundation.org</a></p>
                                        </div>
                                    </li>
                                    {{-- <li>
                                        <div class="icon">
                                            <span class="icon-call"></span>
                                        </div>
                                        <div class="content">
                                            <h4>Phone number</h4>
                                            <p><a target="_blank" href="tel:+447708971995">+44 7708 971995</a></p>
                                        </div>
                                    </li> --}}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!--Contact Two End-->


            <!--Site Footer Start-->
            @include('layouts.footer')
            <!--Site Footer End-->

        </div>
        <!-- /.page-wrapper -->


    </div>
@endsection