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

@section('style')

@endsection

@section('content')

    <main>
        <div class="blog-highlight-banner">
            <div class="flex items-center">
                <div class="container lg:px-24 text-center">
                    <p class="th-5 text-black fs-22 xs:fs-28 md:fs-32 leading-6 md:leading-8">CONTACT US</p>
                </div>
            </div>
        </div>
        <div class="container pb-8">
            <div class="flex flex-wrap">
                <div class="w-full px-4">
                    <div class="flex flex-wrap flex-col mt-4">
                        <div class="w-full md:w-1/2 p-[.5rem] space-y-2 lg:py-2">
                            <div class="flex items-center space-x-3">
                                <img src="{{ Module::asset('frontend:img/pin.svg') }}" alt="pin">
                                <p class="th-6 fs-20">ที่อยู่</p>
                            </div>
                            <p class="text-base-lg">92 ถ.ปากน้ำกระโจมทอง แขวง บางพรม เขต ตลิ่งชัน กรุงเทพมหานคร 10170</p>
                        </div>
                        <div class="w-full md:w-1/2 p-[.5rem] space-y-2 lg:py-2">
                            <div class="flex items-center space-x-3">
                                <img src="{{ Module::asset('frontend:img/tel2.svg') }}" alt="tele">
                                <p class="th-6 fs-20">เบอร์โทร </p>
                            </div>
                            <p class="text-base-lg full-url">02 409 5299 <a href="tel:1209384719280374"> </a></p>
                        </div>
                        <div class="w-full md:w-1/2 p-[.5rem] space-y-2 lg:py-2">
                            <div class="flex items-center space-x-3">
                                <img src="{{ Module::asset('frontend:img/mail.svg') }}" alt="mail">
                                <p class="th-6 fs-20">อีเมล</p>
                            </div>
                            <p class="text-base-lg full-url">mail@hotmail.com<a href="mailto:1209384719280374"> </a></p>
                        </div>
                        <div class="w-full md:w-1/2 p-[.5rem] space-y-2 lg:py-2">
                            <div class="contact-info">
                                <p class="font-semibold mb-2">FOLLOW US</p>
                                <div class="flex items-center space-x-2 mt-2">
                                    <div class="icon-wrapper">
                                        <a href="#">
                                            <a href="#"><img class="m-2 lg:ml-0 w-14 h-12"
                                                    src="{{ Module::asset('frontend:img/l.svg') }}" /></a>
                                        </a>
                                    </div>
                                    <div class="icon-wrapper">
                                        <a href="#">
                                            <a href="#"><img class="m-2 lg:ml-0 w-14 h-12"
                                                    src="{{ Module::asset('frontend:img/f.svg') }}" /></a>
                                        </a>
                                    </div>
                                    <div class="icon-wrapper">
                                        <a href="#">
                                            <a href="#"><img class="m-2 lg:ml-0 w-14 h-12"
                                                    src="{{ Module::asset('frontend:img/y.svg') }}" /></a>
                                        </a>
                                    </div>
                                    <div class="icon-wrapper">
                                        <a href="#">
                                            <a href="#"><img class="m-2 lg:ml-0 w-14 h-12"
                                                    src="{{ Module::asset('frontend:img/x.svg') }}" /></a>
                                        </a>
                                    </div>
                                    <div class="icon-wrapper">
                                        <a href="#">
                                            <a href="#"><img class="m-2 lg:ml-0 w-14 h-12 "
                                                    src="{{ Module::asset('frontend:img/i.svg') }}" /></a>
                                        </a>
                                    </div>
                                    <div class="icon-wrapper">
                                        <a href="#">
                                            <a href="#"><img class="m-2 lg:ml-0 w-14 h-12 "
                                                    src="{{ Module::asset('frontend:img/t.svg') }}" /></a>
                                            </>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex flex-wrap">
            <div class="w-full md:w-full">
                <div class="map-wrapper"><iframe
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3875.5858054463697!2d100.45523159999999!3d13.743508400000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30e299cc1fc737fd%3A0xdc0dcfaeca4629df!2s92%20Pak%20Nam%20Krachom%20Thong%20Rd%2C%20Khwaeng%20Bang%20Phrom%2C%20Khet%20Taling%20Chan%2C%20Krung%20Thep%20Maha%20Nakhon%2010170!5e0!3m2!1sen!2sth!4v1663234514464!5m2!1sen!2sth"
                        width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
                        referrerpolicy="no-referrer-when-downgrade"></iframe></div>
            </div>
        </div>
        <div class="default-bg-cover relative py-8 lg:py-16"
            style="background-image:url({{ Module::asset('frontend:img/contact-bg.jpg') }})">
            <div class="container relative z-1">
                <div class="flex items-center -mx-4 flex-wrap">
                    <div class="p-3 w-full lg:w-1/2 flex flex-col items-center justify-center">
                        <p class="fs-36 text-white th-6">ส่งข้อความถึงเรา</p>
                        <p class="fs-30 text-white th-3"><i>เราจะติดต่อกลับโดยเร็วที่สุด!</i></p>
                    </div>
                    <div class="p-5 w-full  lg:w-1/2">
                        <div class="form-wrapper line-form bg-white p-6 rounded-xl shadow-lg">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="row mb-3 mx-0">
                                        <label>ชื่อ-นามสกุล</label><input type="text"
                                            class="form-style font-weight-semibold px-1 py-3" name="name"
                                            placeholder="* Full Name" data-msg-required="This field is required."
                                            id="name" required="" />
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="row mx-0 mb-3">
                                        <label>Email</label><input type="email"
                                            class="form-style font-weight-semibold px-1 py-3" name="email"
                                            placeholder="* Email Address" data-msg-required="This field is required."
                                            id="email" required="" />
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="row mb-3 mx-0">
                                        <label>Telephone</label><input type="text"
                                            class="form-style font-weight-semibold px-1 py-3" name="tel"
                                            placeholder="* Telephone" data-msg-required="This field is required."
                                            id="tel" required="" />
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="row mx-0 mb-3">
                                        <div class="form-group -mx-2 col">
                                            <label class="form-label">เรื่องที่ต้องการติดต่อ</label>
                                            <input type="text" class="form-style font-weight-semibold px-1 py-3"
                                                name="tel" placeholder="* Telephone"
                                                data-msg-required="This field is required." id="tel"
                                                required="" />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="row mx-0 mb-3">
                                        <label>รายละเอียด</label>
                                        <textarea name="message" id="message" rows="4"
                                            class="form-style form-style font-weight-semibold text-color-light px-1" placeholder="* Message"></textarea>
                                    </div>
                                </div>
                                <div class="col-12 pt-6 flex form-wrapper">
                                    <div class="w-full flex mb-6 form-style basic-check-radio border-none">
                                        <label class="static space-x-1 leading-6 ml-2" for="policy">
                                            I have carefully read and agree the terms and conditions of the  
                                            <a href="#pdf"><u>Privacy Policy</u></a>
                                        </label>
                                        <input id="policy" type="checkbox" class="bg-transparent mt-[6px]">
                                    </div>
                                </div>
                                <div class="col-12">
                                    <img src="{{ Module::asset('frontend:img/captcha.jpg') }}" />
                                </div>
                                <div class="item-center col-12 flex form-wrapper ">                          
                                    <div class="p-6 w-full flex justify-center lg:w-full">
                                        <button class="butn-loa     dm butn-w-2h " type="submit">SEND MESSAGE</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="fil-bd-dark"></div>
        </div>
    </main>
@endsection

@section('script')


@endsection