@extends('views.layouts.master')
@section('content')

<!-- page-title -->
    <section class="page-title" style="background-image: url(/themes/kbgolf/pro/resources/images/background/pagetitle-bg.png);">
        <div class="anim-icons">
            <div class="icon icon-1"><img src="/themes/kbgolf/pro/resources/images/icons/anim-icon-17.png" alt=""></div>
            <div class="icon icon-2 rotate-me"><img src="/themes/kbgolf/pro/resources/images/icons/anim-icon-18.png" alt=""></div>
            <div class="icon icon-3 rotate-me"><img src="/themes/kbgolf/pro/resources/images/icons/anim-icon-19.png" alt=""></div>
            <div class="icon icon-4"></div>
        </div>
        <div class="container">
            <div class="content-box clearfix">
                <div class="title-box pull-left">
                    <h1>영업 문의</h1>
                    <p>다보리솔루션에 문의하여 주셔서 감사합니다.</p>
                </div>
            </div>
        </div>
    </section>
    <!-- page-title end -->


    <!-- contact-section -->
    <section class="contact-section contact_us" id="contact_us">
        <div class="container">
            <div class="row">
                <div class="col-lg-10 col-md-12 col-sm-12 offset-lg-1 big-column">
                    <div class="info-content centred">
                        <div class="row">
                            <div class="col-lg-4 col-md-6 col-sm-12 info-column">
                                <div class="single-info-box">
                                    <figure class="icon-box"><img src="/themes/kbgolf/pro/resources/images/icons/info-icon-1.png" alt=""></figure>
                                    <h2>영업 핫라인</h2>
                                    <div class="phone"><a href="tel:01052609961">Mobile: 010-5260-9961</a></div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6 col-sm-12 info-column">
                                <div class="single-info-box">
                                    <figure class="icon-box"><img src="/themes/kbgolf/pro/resources/images/icons/info-icon-2.png" alt=""></figure>
                                    <h2>E-mail</h2>
                                    <div class="phone"><a href="mailto:kimhi65@gmail.com">kimhi65@gmail.com</a></div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6 col-sm-12 info-column">
                                <div class="single-info-box">
                                    <figure class="icon-box"><img src="/themes/kbgolf/pro/resources/images/icons/info-icon-3.png" alt=""></figure>
                                    <h2>강남 사무실</h2>
                                    <div class="text">서울특별시 강남구 강남대로92길 31 민석빌딩 6층<br>(강남역 12번 출구 1분거리)</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="contact-form-area">
                        <div class="sec-title center"><h2>영업 문의</h2></div>
                        <div class="form-inner">
                            <form id="contact-us-form" class="input_f form-prevent-multiple-submits" method="POST" action="{{ route('contact-us.store') }}">
                                @csrf
                            <div class="row">
                                    <div class="col-lg-6 col-md-12 col-sm-12 column">
                                        <div class="form-group">
                                            <i class="fas fa-user"></i>
                                            <input type="text" name="Pc1" placeholder="작성자 *" value="{{ old('Pc1') }}" required>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-12 col-sm-12 column">
                                        <div class="form-group">
                                            <i class="fas fa-envelope"></i>
                                            <input type="email" name="Pc10" placeholder="이메일 *" value="{{ old('Pc10') }}" required>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-12 col-sm-12 column">
                                        <div class="form-group">
                                            <i class="fas fa-file"></i>
                                            <input type="text" name="PostTitle" placeholder="제목 *" value="{{ old('PostTitle') }}" required>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-12 col-sm-12 column">
                                        <div class="form-group">
                                            <i class="fas fa-phone"></i>
                                            <input type="text" name="Pc4" placeholder="모바일 번호 *" value="{{ old('Pc4') }}" required>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-md-12 col-sm-12 column">
                                        <div class="form-group">
                                            <textarea name="PostContents" placeholder="내용 *" required>{{ old('PostContents') }}</textarea>
                                        </div>
                                    </div>

                                <div class="mb-4 w-100 ">
                                    <h3 class="text-danger text-center font-weight-bold">모든 항목을 올바르게 입력하셔야 문의하기 버튼이 활성화 됩니다.</h3>
                                </div>


                                <div class="captcha_wrap btn_wrap d-flex align-items-center flex-column justify-content-between">
                                    {{--            <div id="captcha" class="g-recaptcha mb-3 mb-md-0" data-sitekey="6LeOP1wkAAAAAKp2uLahTyy3ID6Sp4F3CgcOI0u0"></div>--}}

                                    <div class="btn_wrap">
                                        <div class="d-flex modal-body px-0 m-auto py-3">
                                            <div class="form-group mb-1">
                                                <div class="captcha text-center">
                                                    <span>{!! captcha_img() !!}</span>
                                                </div>
                                            </div>
                                            <div class="form-group d-flex mb-0">
                                                <input id="captcha" type="text"
                                                       class="form-control col h-auto radius-r0 mb-3" required
                                                       style="min-height: 50px;"
                                                       placeholder="문자열 입력" name="captcha">
                                                <button type="button" class="btn reload rounded col w-100 mx-0" style="max-width: 100%; min-height: 50px;" id="reload">
                                                    새로고침
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-12 col-md-12 col-sm-12 column">
                                        <div class="form-group message-btn centred">
                                            <button type="submit" class="theme-btn-two contact-us-btn" disabled name="submit-form">
                                                <i class="spinner fa fa-spinner fa-spin" style="position: unset;"></i>
                                                문의하기
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- contact-section end -->


    <!-- map-section -->
    <section class="map-section">
        <div class="google-map-area">
            <div
                class="google-map"
                id="contact-google-map"
                data-map-lat="40.712776"
                data-map-lng="-74.005974"
                data-icon-path="/themes/kbgolf/pro/resources/images/icons/map-marker.png"
                data-map-title="Brooklyn, New York, United Kingdom"
                data-map-zoom="12"
                data-markers='{
                    "marker-1": [40.712776, -74.005974, "<h4>Branch Office</h4><p>77/99 New York</p>","/themes/kbgolf/pro/resources/images/icons/map-marker.png"]
                }'>

            </div>
        </div>
    </section>
    <!-- map-section end -->

@endsection

@push('js')
    <script>
        $('#contact-us-form input').on('input', function() {
            input_check()

        });

        $('#contact-us-form textarea').on('input', function() {
            input_check()
        });

        function input_check() {
            let check = true
            $('#contact-us-form input').each(function () {
                if ($(this).val() == '') {
                    check = false
                    return false
                }
            })

            $('#contact-us-form textarea').each(function () {
                if ($(this).val() == '') {
                    check = false
                    return false
                }
            })

            $('.contact-us-btn').prop('disabled', ! check)

            return check
        }

        $('input[name=Pc4]').on('input', function() {
            let phoneNumber = $(this).val();
            // Remove any non-numeric characters
            phoneNumber = phoneNumber.replace(/\D/g, '');
            // Limit input to 11 digits
            phoneNumber = phoneNumber.substring(0, 11);
            // Update the input value
            $(this).val(phoneNumber);
        });

        $('#reload').click(function () {
            $.ajax({
                type: 'GET',
                url: '{{ url('reload-captcha') }}',
                success: function (data) {
                    $('#captcha').val('')
                    $(".captcha span").html(data.captcha);
                }
            });
        });

    </script>
@endpush