@extends('frontend.layout.master')
@section('content')
    <!-- #Start Main Body  -->

    <!-- page title -->
    <div  class="my-10 text-center mt-0 pt-14 ">
        <h4 class=" font-bold  m-auto uppercase text-primary text-lg md:text-3xl text-[#333] md:tracking-widest   block ">contact us</h4>
    </div>

    <!-- google map -->
    <div class="goolge-map">
        <div class="container mx-auto px-5">
            <div class=" shape   my-8 lg:mx-auto px-5 bottom-underline">
                <h4 class=" mt-5 m-auto uppercase text-lg md:text-2xl md:tracking-widest font-bold  block ">Find us on google map</h4>
            </div>
            <div class="map  py-4">
                <iframe src="{{ get_setting('company_map') }}" width="100%" height="500" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
        </div>
    </div>


    <!-- contact information -->
    <div class="contact-information bg-[#f7f6f2] px-5">
        <div class="container mx-auto px-5">
            <div class="grid grid-cols md:grid-cols-2 py-8 ">
                <div class="footer-single-item text-md">
                    <h3 class="mb-5 text-sm font-bold text-primary after_underline">Need Help?</h3>
                    <p class="mb-1">Call us <span class="font-bold">{{ get_setting('company_mobile') }}</span></p>
                    <p class="mb-1">Email us <span class="font-bold underline">{{ get_setting('company_email') }}</span></p>
                    <p class="mb-1">Address <span class="font-bold underline">{{ get_setting('company_address') }}</span></p>
                    <p class="mb-5">website <span class="font-bold underline">{{ env('APP_URL') }}</span></p>
                    <div class="wh-footer-social-icon mb-10 flex items-center gap-2">

                        <div class="bg-[#13A0F9] hover:bg-[#13A0F9]/80 transition w-8 h-8 text-center leading-8 rounded-full">
                            <a href="{{ get_setting('company_facebook') }}" class="hover:!text-white" target="_blank">
                                <i class="bi bi-facebook text-lg"></i>
                            </a>
                        </div>
                        <div class="bg-[#188CD8] hover:bg-[#188CD8]/80 transition w-8 h-8 text-center leading-8 rounded-full">
                            <a href="{{ get_setting('company_twitter') }}" class="hover:!text-white" target="_blank">
                                <i class="bi bi-twitter text-lg"></i>
                            </a>
                        </div>
                        <div class="bg-[#0B65C2] hover:bg-[#0B65C2]/80 transition w-8 h-8 text-center leading-8 rounded-full">
                            <a href="{{ get_setting('company_linkedin') }}" class="hover:!text-white" target="_blank">
                                <i class="bi bi-linkedin text-md"></i>
                            </a>
                        </div>
                        <div class="bg-[#FF0000] hover:bg-[#FF0000]/80 transition w-8 h-8 text-center leading-8 rounded-full">
                            <a href="{{ get_setting('company_youtube') }}" class="hover:!text-white" target="_blank">
                                <i class="bi bi-youtube text-md"></i>
                            </a>
                        </div>
                        <div class="bg-[#1BD741] hover:bg-[#1BD741]/80 transition w-8 h-8 text-center leading-8 rounded-full">
							<a href="https://api.whatsapp.com/send/?phone={{ get_setting('company_mobile') }}&text=Is+anyone+available+to+chat%3F&type=phone_number&app_absent=0" class="hover:!text-white" target="_blank">
								<i class="bi bi-whatsapp text-md"></i>
							</a>
                        </div>
                        <div class="bg-[#FF0000] hover:bg-[#FF0000]/80 transition w-8 h-8 text-center leading-8 rounded-full">
                        <a href="https://www.pinterest.com/shoishobandfintusbd/" class="hover:!text-white" target="_blank">
                            <i class="bi bi-pinterest text-md"></i>
                        </a>
                    </div>
                    <div class="bg-[#FF0000] hover:bg-[#FF0000]/80 transition w-8 h-8 text-center leading-8 rounded-full">
                        <a href="https://www.pinterest.com/shoishobandfintusbd/" class="hover:!text-white" target="_blank">
                            <i class="bi bi-instagram text-md"></i>
                        </a>
                    </div>

                    </div>
                </div>
                <div class="news-latter">
                    <h3 class="mb-5 text-sm font-bold text-primary after_underline">send messeage</h3>
                   @if ($errors->any())
                    <div class="alert alert-danger">
                      <ul>
                        @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                        @endforeach
                      </ul>
                    </div>
                    @endif
                    @if(session()->has('message'))
                        <div class="alert alert-success">
                            {{ session()->get('message') }}
                        </div>
                    @endif
                    <form class="w-full max-w-lg" method="POST" action="{{ route('contact.us') }}">
                        @csrf
                        <div class="flex flex-wrap -mx-3 mb-6">
                            <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
                                <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-first-name">
                                    Name
                                </label>
                                <input class="appearance-none block w-full bg-gray-100 text-gray-700 border border-gray-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:border-gray-500" id="grid-first-name" type="text" name="name" placeholder="Jane">
                                {{-- <p class="text-red-500 text-xs italic d-none">Please fill out this field.</p> --}}
                            </div>
                            <div class="w-full md:w-1/2 px-3">
                                <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-last-name">
                                    Email
                                </label>
                                <input class="appearance-none block w-full bg-gray-100 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-last-name" type="email" name="email" placeholder="Doe">
                            </div>
                            <div class="w-full  px-3 mb-3">
                                <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-last-name">
                                    Message
                                </label>
                                <textarea name="msg" id="msg"  class=" focus:outline-none focus:bg-white w-full block p-2.5  text-sm text-gray-900 bg-gray-100 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Messeage" rows="5"></textarea>
                            </div>
                            <div class="w-full px-3">
                                <button type="submit" class="text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">Send messeage</button>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection