@extends('views.layouts.master')
@section('content')
    <!--inner Title Start -->
    <div class="sms_title_main_wrapper">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="sms_inner_title_heading full_width">
                        <h2>Contact Us</h2>
                        <ul>
                            <li><a href="#">Home</a> &nbsp;&nbsp;&nbsp;/</li>
                            <li>Contact Us</li>
                        </ul>

                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- inner Title End -->
    <!-- contact Wrapper start -->
    <div class="contact_wrapper full_width">
        <div class="container">
            <div class="row">

                <div class="col-lg-6 col-md-6 col-12 col-sm-12">
                    <div class="sms_contact_box_wrapper full_width">
                        <i class="flaticon-support"></i>
                        <div class="sms_contact_info_box">
                            <h1>Dabory 기술 지원 센터</h1>
                            <p>010-5260-9961</p>
                            <a href="#">support@dabory.com</a>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 col-md-6 col-12 col-sm-12">
                    <div class="sms_contact_box_wrapper full_width">
                        <i class="flaticon-contact-book"></i>
                        <div class="sms_contact_info_box">
                            <h1>Dabory 영업 지원 센터</h1>
                            <p>010-5260-9961</p>
                            <a href="#">sales@dabory.com</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- contact Wrapper end -->
    <!-- contact form Wrapper start -->
    <div class="contact_form_wrapper full_width">
        <div class="container">
            <div class="row">

                <div class="col-lg-6 col-md-6 col-12 col-sm-12">
                    <div class="sms_contact_form_box full_width">
                        <form action="{{ route('contact-us.store') }}" method="POST" class="form-prevent-multiple-submits">
                            @csrf
                            <div class="form-pos">
                                <div class="form-group i-name">
                                    <label>성함 </label>
                                    <input type="text" class="form-control require" name="full_name" id="namTen-first" placeholder="성함*">
                                    <i class="fas fa-user-alt"></i>
                                </div>
                            </div>

                            <div class="form-e">
                                <div class="form-group i-email">
                                    <label>이메일 주소</label>
                                    <input type="email" class="form-control require" name="email" id="emailTen" placeholder="이메일 주소*" data-valid="email" data-error="Email should be valid.">
                                    <i class="fas fa-envelope"></i>
                                </div>
                            </div>

                            <div class="form-pos">
                                <div class="form-group i-name">
                                    <label> 모바일 번호 </label>
                                    <input type="text" class="form-control require" name="contact_no" id="phone_number" placeholder="모바일 번호*">
                                    <i class="fas fa-phone"></i>
                                </div>
                            </div>
                            <div class="form-pos">
                                <div class="form-group i-name">
                                    <label>질의 종류 </label>
                                    <select name="country" class="require">
                                        <option value="sales">영업지원</option>
                                        <option value="technical">기술지원</option>
                                    </select>

                                </div>
                            </div>
                            <div class="form-pos">
                                <div class="form-group i-name">
                                    <label>현재 Dabory 고객인가요 ?</label>
                                    <select name="customer" class="require">
                                        <option value="1">예</option>
                                        <option value="0">아니요</option>

                                    </select>

                                </div>
                            </div>

                            <div class="form-pos">
                                <div class="form-group i-name">
                                    <label>제목 </label>
                                    <input type="text" class="form-control require" name="title" placeholder="제목*">
                                    <i class="fas fa-exclamation"></i>
                                </div>
                            </div>

                            <div class="form-m">
                                <div class="form-group i-message">
                                    <label>요청 내용 </label>
                                    <textarea class="form-control require" name="message" rows="5" id="messageTen" placeholder="요청 내용"></textarea>
                                    <i class="fas fa-comment"></i>
                                </div>
                            </div>
                            <div class="captch_box">
                                <div class="captchaWrapper">
                                    <button type="button" class="captchaBox boxHover"></button>
                                </div>
                                <input type="checkbox" name="hiddenCaptcha" id="hiddenCaptcha" disabled="disabled" />
                                <label for="hiddenCaptcha" class="captchaLabel">나는 로봇이 아닙니다.</label>
                                <img src="{{ asset('/themes/pro/ssohost/resources/images/caps.png') }}" alt="img">
                            </div>

                            <div class="contact_btn full_width">
                                <div class="response"></div>
                                <div class="js_btn_wrapper full_width">
                                    <input type="hidden" name="form_type" value="contact" />
                                    <button type="button" class="submitForm button-prevent-multiple-submits">
                                        <i class="spinner fa fa-spinner fa-spin"></i>
                                        보내기
                                    </button>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-12 col-sm-12">
                    <div class="visiting_Wrapper full_width">
                        <div class="sms_heading_wrapper">
                            <h4>본사 방문</h4>
                            {{--                            <h3>Street Name 50, Building 85,--}}
                            {{--                                12345 SoHo, New York</h3>--}}
                            <h3>남부순환로 2606 (금정빌딩 8층)</h3>
                        </div>
                        <ul class="visitors_contact full_width">
                            <li>
                                <i class="fas fa-map-marker-alt"></i>
                                {{--                                <p>123 City Avenue, Floor 10,--}}
                                {{--                                    <br> malbourne, Australia.--}}
                                {{--                                </p>--}}
                                <p>3호선 양재역 5번출구에서 20m
                                    <br> 주차: 양재역 환승 주자창
                                </p>
                            </li>
                            <li>
                                <i class="fas fa-phone"></i>
                                <p>(02)871-4134
                                    <br> 010-5260-9961</p>
                            </li>
                            <li class="d-flex align-items-center">
                                <i class="fas fa-envelope"></i>
                                <a href="#">kimhi65@gmail.com </a>
                            </li>

                        </ul>

                        <div id='map'>
                            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3165.9982495010727!2d127.0337193517894!3d37.484367679714246!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca14beb1777a7%3A0x72a7ad0e2ddbe097!2z7ISc7Jq47Yq567OE7IucIOyEnOy0iOq1rCDrgqjrtoDsiJztmZjroZwgMjYwNg!5e0!3m2!1sko!2skr!4v1653032287859!5m2!1sko!2skr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- contact form Wrapper end -->
@endsection

@push('js')
    <script src="{{ csset('/themes/pro/ssohost/resources/js/captcha.js') }}"></script>
    <script src="{{ csset('/themes/pro/ssohost/resources/js/contact_form.js?').date('YmdHis') }}"></script>
    {{--    <script>--}}
    {{--        function initMap() {--}}
    {{--            var uluru = {--}}
    {{--                lat: -36.742775,--}}
    {{--                lng: 174.731559--}}
    {{--            };--}}
    {{--            var map = new google.maps.Map(document.getElementById('map'), {--}}
    {{--                zoom: 15,--}}
    {{--                scrollwheel: false,--}}
    {{--                center: uluru--}}
    {{--            });--}}
    {{--            var marker = new google.maps.Marker({--}}
    {{--                position: uluru,--}}
    {{--                map: map--}}
    {{--            });--}}
    {{--        }--}}
    {{--    </script>--}}
    {{--    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBctr8WYTfFDi_oGbPEolSDzn4VZaAKVK0&callback=initMap"></script>--}}
@endpush