@extends('frontend::layouts.master')

@section('content')
    <div class="bg-top-sub-gradient py-12">
        <h1 class="text-center text-24 lg:text-36 font-bold text-primary leading-10">Contact us</h1>
        <div class="container">
            <div class="pt-12">
                <div class="flex -mx-6 gap-y-6 flex-wrap">
                    <div class="w-full md:w-2/3 px-6">
                        <div class="iframe-wrapper">
                            <iframe
                                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3875.3453041640914!2d100.56256667589511!3d13.758038197147453!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30e29d4918d39f69%3A0x7c82b5cfabbf1f4a!2z4Lif4Lit4Lij4LmM4LiI4Li54LiZ4LiX4Liy4Lin4LiZ4LmM!5e0!3m2!1sth!2sth!4v1726308277824!5m2!1sth!2sth"
                                width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
                                referrerpolicy="no-referrer-when-downgrade"></iframe>
                        </div>
                    </div>
                    <div class="w-full md:w-1/3 px-6 flex flex-col gap-y-5">
                        <div class="flex gap-x-3">
                            <div class="contact-icon">
                                <svg width="40" height="40" viewBox="0 0 40 40" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <mask id="mask0_6222_18866" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0"
                                        y="0" width="40" height="40">
                                        <rect width="40" height="40" fill="#D9D9D9" />
                                    </mask>
                                    <g mask="url(#mask0_6222_18866)">
                                        <path
                                            d="M19.4604 19.7525C17.8846 19.7525 16.5953 18.5148 16.5953 17.002C16.5953 15.4892 17.8846 14.2515 19.4604 14.2515C21.0362 14.2515 22.3255 15.4892 22.3255 17.002C22.3255 18.5148 21.0362 19.7525 19.4604 19.7525ZM28.0557 17.277C28.0557 12.2849 24.2594 8.7505 19.4604 8.7505C14.6614 8.7505 10.8651 12.2849 10.8651 17.277C10.8651 20.4951 13.6586 24.7584 19.4604 29.8468C25.2622 24.7584 28.0557 20.4951 28.0557 17.277ZM19.4604 6C25.4771 6 30.9208 10.4283 30.9208 17.277C30.9208 21.8429 27.0959 27.2476 19.4604 33.505C11.8249 27.2476 8 21.8429 8 17.277C8 10.4283 13.4437 6 19.4604 6Z"
                                            fill="#225EC4" />
                                    </g>
                                </svg>
                            </div>
                            <div class="pt-2">
                                <p class="font-bold text-16 lg:text-20">Address</p>
                                <p>Kanchanaphisek Road, Tha Raeng Bang Khen Bangkok 10220</p>
                            </div>
                        </div>
                        <div class="flex gap-x-3">
                            <div class="contact-icon">
                                <svg width="41" height="41" viewBox="0 0 41 41" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M20.5599 33.4307C13.2963 33.4307 7.38437 27.5188 7.38437 20.2552C7.38437 12.9916 13.2963 7.07969 20.5599 7.07969C27.8235 7.07969 33.7354 12.9916 33.7354 20.2552C33.7354 27.5188 27.8235 33.4307 20.5599 33.4307Z"
                                        stroke="#225EC4" stroke-width="2.3" />
                                    <path
                                        d="M21.8976 23.2425L22.8844 22.2552C23.0174 22.1239 23.1855 22.034 23.3685 21.9965C23.5515 21.9589 23.7415 21.9753 23.9153 22.0437L25.1181 22.5241C25.2938 22.5954 25.4444 22.7172 25.551 22.8741C25.6577 23.0309 25.7155 23.2159 25.7172 23.4056V25.6092C25.7162 25.7383 25.6891 25.8658 25.6375 25.9841C25.5859 26.1023 25.511 26.2089 25.4171 26.2975C25.3233 26.386 25.2125 26.4546 25.0914 26.4992C24.9704 26.5438 24.8416 26.5634 24.7128 26.5568C16.2849 26.0323 14.5843 18.8924 14.2627 16.1598C14.2478 16.0257 14.2614 15.8898 14.3027 15.7613C14.344 15.6328 14.4121 15.5144 14.5024 15.4141C14.5927 15.3138 14.7032 15.2337 14.8267 15.1792C14.9502 15.1246 15.0838 15.0968 15.2187 15.0977H17.3466C17.5365 15.0982 17.7219 15.1556 17.8789 15.2624C18.0359 15.3693 18.1574 15.5206 18.2277 15.6971L18.7079 16.9003C18.7785 17.0735 18.7966 17.2637 18.7597 17.4472C18.7229 17.6306 18.6329 17.7991 18.5009 17.9316L17.514 18.9189C17.514 18.9189 18.0823 22.7665 21.8976 23.2425Z"
                                        fill="#225EC4" />
                                </svg>
                            </div>
                            <div class="pt-2">
                                <p class="font-bold text-16 lg:text-20">Phone</p>
                                <a class="hover:text-secondary" href="tel:234423563">064-4491958</a>
                            </div>
                        </div>
                        <div class="flex gap-x-3">
                            <div class="contact-icon">
                                <svg width="41" height="41" viewBox="0 0 41 41" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M20.5599 34.0108C13.2963 34.0108 7.38437 28.0989 7.38437 20.8353C7.38437 13.5717 13.2963 7.65977 20.5599 7.65977C27.8235 7.65977 33.7354 13.5717 33.7354 20.8353C33.7354 28.0989 27.8235 34.0108 20.5599 34.0108Z"
                                        stroke="#225EC4" stroke-width="2.3" />
                                    <path d="M13.6836 25.3783V16.709L20.5598 21.5224L27.4361 16.709V25.3783"
                                        stroke="#225EC4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </div>
                            <div class="pt-2">
                                <p class="font-bold text-16 lg:text-20">E-mail</p>
                                <a class="hover:text-secondary" href="mailto:5sjdfjs@gmail.com">websitesom5959@gmail.com</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div>
    {{-- <div class="pb-48"> --}}
        <div class="contact-bg">
            <div class="container py-12">
                <div class="flex flex-wrap items-center gap-y-6">
                    <div class="w-full lg:w-1/2">
                        <h1 class="font-bold text-primary">We'd love to help</h1>
                        <h3>Thank you for getting in touch kindly!</h3>
                        <h3>Fill the form, have a great day!</h3>
                    </div>
                    <div class="w-full lg:w-1/2">
                        <form action="" class="relative bg-white rounded-2xl contact-label shadow-lg py-4 px-8">
                            <div class="flex flex-wrap -mx-4">
                                <div class="w-full xl:w-1/2 px-2 py-2">
                                    <x-frontend::form.input type='text' id='fname' title='First Name' class="line-style"></x-frontend>
                                </div>
                                <div class="w-full xl:w-1/2 px-2 py-2">
                                    <x-frontend::form.input type='text' id='lname' title='Last Name' class="line-style"></x-frontend>
                                </div>
                                <div class="w-full px-2">
                                    <x-frontend::form.input type='email' id='email' title='Email' class="line-style"></x-frontend>
                                </div>
                                <div class="w-full px-2">
                                    <x-frontend::form.input type='text' id='phone' title='Phone No.' class="line-style"></x-frontend>
                                </div>
                                <div class="w-full px-2">
                                    <x-frontend::form.select id='subj' title='Subject' class="line-style"></x-frontend>
                                </div>
                                <div class="w-full px-2 mb-6 form-style">
                                    <div class="com-form-basic float form-style line-style">
                                        <textarea id="message" placeholder="Write your question here" class="bg-transparent" rows="6"></textarea>
                                        <label for="phone">
                                            Write your question here
                                        </label>
                                    </div>
                                </div>
    
                                <div class="w-full px-4 mb-6 ">
                                    <div class="flex items-start gap-x-4 mt-4">
                                        <input type="checkbox" name="policy" class="checkbox-default" id="policy-checkbox">
                                        <label for="policy-checkbox">
                                            <p>
                                                I acknowledge that I have read and agree&nbsp;<a href="policy"><u>Privacy Policy</u></a>
                                            </p>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <img src="{{ Module::asset('frontend:img/captcha.jpg') }}">
                            </div>
                            <div class="mt-6 pb-2">
                                <x-frontend::overlays.modal.modal-button name="thankyou" class="button-secondary">
                                    <x-slot:button>
                                        <div>ส่งข้อความ</div>
                                    </x-slot>
                                </x-frontend>
                                <x-frontend::overlays.modal.template name="thankyou" title="">
                                    <x-slot:content>
                                        <p class="text-24 font-semibold -mt-4 leading-6 text-center">
                                            Thank you
                                        </p>
                                        <p class="text-16 mt-2 font-light mb-6 w-full md:w-2/5 xl:w-3/5 mx-auto text-center">
                                            Your message has been sent successfully.
                                        </p>
                                        <button type="button" class="button-secondary mx-auto w-[130px] justify-center mb-3" aria-label="Close" data-hs-overlay="#thankyou">
                                            <div>ตกลง</div>
                                        </button>
                                    </x-slot>
                                </x-frontend>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection