<!doctype html>
<html
        xmlns:th="http://www.thymeleaf.org"
        xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        layout:decorate="~{kr/iotdoor/comn/site/layout/cmmnSiteLayout.html}" >

<th:block layout:fragment="content">

    <!-- Contact Start -->
    <div class="container-fluid bg-light overflow-hidden px-lg-0" style="margin: 6rem 0;">
        <div class="container contact px-lg-0">
            <div class="row g-0 mx-lg-0">
                <div class="col-lg-6  p-lg-5 " style="min-height: 300px;">
                    <div class="position-relative h-100">
                        <div id="map" style="width:100%;height:500px;"></div>
                        <code id="snippet" class="snippet"></code>
                    </div>
                </div>
                <div class="col-lg-6 contact-text wow fadeIn" data-wow-delay="0.5s">
                    <div class="p-lg-5 ps-lg-0">
                        <h6 class="text-primary">Contact Us</h6>
                        <p class="mb-4">내용을 자세하게 입력해주시면 상담진행시에 좀 더 원활하게 상담이 가능합니다. 연중무휴 24시간 주저말고 남겨주세요. </p>
                        <form id="contactForm">
                            <input type="hidden" name="title" value="국제오토텍 문의 접수">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="name" name="name" placeholder="Your Name">
                                        <label for="name">Name</label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-floating">
                                        <input type="email" class="form-control" id="email" name="email" placeholder="Your Email" >
                                        <label for="email">Email</label>
                                    </div>
                                    <div id="emailError" style="color:red; font-size:13px; display:none;">
                                        올바른 이메일 형식이 아닙니다.
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="phone" name="phone" placeholder="Phone" >
                                        <label for="subject">Phone</label>
                                    </div>
                                    <div id="phoneError" style="color:red; font-size:13px; display:none;">
                                        올바른 휴대폰 형식이 아닙니다.
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="subject" name="subject" placeholder="Subject">
                                        <label for="subject">Subject</label>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-floating">
                                        <textarea class="form-control" placeholder="Leave a message here" id="message" name="message" style="height: 100px"></textarea>
                                        <label for="message">Message</label>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <button id="btnSendMail" class="btn btn-primary rounded-pill py-3 px-5" type="submit">Send Message</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Contact End -->

    <!-- <?php include_once './common/footer.php'?> -->

    <!-- Template Javascript -->
</th:block>

<th:block layout:fragment="script">
    <script th:src="@{|https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=${siteInfo.mapClientId}|}"></script>
    <script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
    <script th:inline="javascript">
        var map = null;
        const mapLatitude = /*[[${siteInfo.mapLatitude}]]*/ 36.2980733;
        const mapLongitude = /*[[${siteInfo.mapLongitude}]]*/ 127.3814560;
        const companyName = /*[[${siteInfo.name}]]*/ '국제오토텍';

        function initMap() {
            map = new naver.maps.Map('map', {
                center: new naver.maps.LatLng(mapLatitude, mapLongitude),
                title: companyName,
                zoom: 18
            });
            var marker = new naver.maps.Marker({
                position: new naver.maps.LatLng(mapLatitude, mapLongitude),
                title: companyName,
                map: map,
                icon: {
                    url: '/resources/kr/iotdoor/comn/site/layout/image/template/marker-logo.png',
                    size: new naver.maps.Size(200, 96),         // 원본 또는 표시 기준 크기
                    scaledSize: new naver.maps.Size(200, 96),   // 실제 화면 표시 크기
                    origin: new naver.maps.Point(0, 0),
                    anchor: new naver.maps.Point(100, 96)       // 가로 중앙, 세로 맨 아래
                }
            });

        }
        $(document).ready(function(){
            initMap();
        });
    </script>
    <script th:src="@{/resources/kr/iotdoor/boot/contact/contact.js}"></script>
</th:block>
</html>
