@extends('website.layout.app')
@section('css')
    <style>
        #map {
            height: 100%;
        }
    </style>
@endsection
@section('content')
    {{-- Contact us --}}
    {{-- <div id="googleMap" style="width:100%;height:400px;"></div> --}}
    {{-- <iframe width="600" height="450" style="border:0" loading="lazy" allowfullscreen
        referrerpolicy="no-referrer-when-downgrade"
        src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBkw-DRgqv_TsnMV0Sloght5LmQZ9d1NXs
    &q=Space+Needle,Seattle+WA">
    </iframe> --}}
    <div class="mt-20 md:mt-40 mb-14 flex flex-col items-center">
        <div>
            <h1 class="text-3xl text-white">Contact Us</h1>
            <div class="flex gap-1 mt-1 w-full">
                <div class="parallelogram w-full"></div>
                <div class="parallelogram w-[5px]"></div>
                <div class="parallelogram w-[5px]"></div>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-10 w-[90%] md:w-[70%]">
            <div class="text-white">
                <form action="{{ route('website.sendMail') }}" method="POST">
                    @csrf
                    <div class="flex flex-col gap-2 mb-6">
                        <div class="flex gap-3">
                            <div class="w-[2.5px] bg-yellow-500 h-[30px]">&nbsp;</div>
                            <label class="text-xl mb-2" for="name">Name</label>
                        </div>
                        <input type="text" name="name" id="name" placeholder="Your Name" required
                            class="bg-transparent w-[350px] md:w-[450px] h-[50px] rounded-xl ps-4 p-2 border-2 border-yellow-500 focus:outline-none">
                    </div>
                    <div class="flex flex-col gap-2 mb-6">
                        <div class="flex gap-3">
                            <div class="w-[2.5px] bg-yellow-500 h-[30px]">&nbsp;</div>
                            <label class="text-xl mb-2" for="email">Email</label>
                        </div>
                        <input type="text" name="email" id="email" placeholder="Your Email" required
                            class="bg-transparent w-[350px] md:w-[450px] h-[50px] rounded-xl ps-4 p-2 border-2 border-yellow-500 focus:outline-none">
                    </div>
                    <div class="flex flex-col gap-2 mb-6">
                        <div class="flex gap-3">
                            <div class="w-[2.5px] bg-yellow-500 h-[30px]">&nbsp;</div>
                            <label class="text-xl mb-2" for="message">What can we help with you?</label>
                        </div>
                        <textarea name="message" id="message" cols="30" rows="7"
                            class="bg-transparent w-[350px] md:w-[450px] rounded-xl ps-4 p-2 border-2 border-yellow-500 focus:outline-none"
                            placeholder="Type a message"></textarea>
                    </div>
                    <button class="w-[150px] h-[40px] rounded-lg bg-yellow-500 flex justify-center items-center text-black">
                        Submit
                    </button>
                </form>
            </div>
            <div class="flex justify-center items-center">
                <img src="{{ asset('assets/images/office.jpg') }}" alt="office" class="rounded-xl">
            </div>
        </div>
    </div>
@endsection
{{-- @section('script')
    <script>
        function myMap() {
            var mapProp = {
                center: new google.maps.LatLng(51.508742, -0.120850),
                zoom: 5,
            };
            var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
        }
    </script>

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBkw-DRgqv_TsnMV0Sloght5LmQZ9d1NXs&callback=myMap">
    </script>
@endsection --}}