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

@section('style')
<style>

.modal-style .modal-content{
        max-width: 575px;
        margin: 0 auto;
    }
    .modal-style .modal-body{
        padding-left: 2rem;
        padding-right: 2rem;
    }

.closedd{
    @apply absolute;    
    top: -5px;
    right: 15px;
}
</style>

@endsection

@section('content')

    <main>
        <div class="bg-right">
            <div class="bg-asp"> </div>
        </div>
        <div class="bg-left">
            <div class="bg-asp"> </div>
        </div>
        <div class="container pt-[.5rem] lg:pt-8">
            <div class="bg-2nd rounded-2xl apply-border border-3rd px-6 py-[.75rem] lg:px-8 lg:mt-6">
                <div class="flex items-center justify-center -mx-3 mb-2 flex-wrap xs:flex-no-wrap xs:justify-between">
                    <div class="p-3 order-[1]">
                        <h1 class="text th-6 fs-30 uppercase">@lang('frontend::lang.map')</h1>
                    </div>
                    <div class="p-3 order-[3] xs:order-[2]">
                        <button class="flex items-center justify-center space-x-1 bg-1st rounded-lg pl-3 py-2 pr-4 full-url" type="button" style="width:200px">
                            <img class="w-8" src="{{ Module::asset('frontend:img/icon/pin-black.svg') }}" alt="Alternate Text" />
                            <p class="uppercase text fs-13 th-6 text-whiten">@lang('frontend::lang.get_direction')</p>
                            <a target="_blank" href="{{ !empty($data['contact']['google_map']) ? $data['contact']['google_map'] : '' }}"></a>
                        </button>
                    </div>
                    @if ($data['contact']['image_map'])
                        <div class="w-full order-[2] xs:p-[.75rem] xs:order-[3]">
                            {{-- Size 940px --}}
                            <img class="map-contact" src="{{ asset($data['contact']['image_map']) }}"
                                alt="Alternate Text" />
                        </div>
                    @endif

                </div>
            </div>
            <form id="contactus_frm" name="contactus_frm" method="POST" onsubmit="setSaveContact(); return false;"
                enctype="multipart/form-data">
                @csrf
                <div class="flex lg:space-x-6 flex-col lg:flex-row">
                    <div
                        class="bg-2nd rounded-2xl apply-border border-3rd w-full lg:w-1/2 xl:w-1/3 space-y-4 px-6 py-[.75rem] lg:p-8 mt-6">
                        <h1 class="text th-6 fs-24 uppercase">@lang('frontend::lang.contact_us')</h1>
                        <div class="space-y-4">
                            @if (!empty($data['contact']['fb_name']))
                                <div class="flex items-start space-x-2 full-url">
                                    <div class="icon-wrapper">
                                        <img class="ct-icon" src="{{ Module::asset('frontend:img/icon/cfb.svg') }}"
                                            alt="Alternate Text" />
                                    </div>
                                    <div class="h-[28px] flex items-center">
                                        <p class="text th-6 fs-13">
                                            {{ !empty($data['contact']['fb_name']) ? $data['contact']['fb_name'] : '' }}</p>
                                    </div>
                                    @if (!empty($data['contact']['fb']))
                                        <a href="{{ !empty($data['contact']['fb']) ? $data['contact']['fb'] : '' }}"></a>
                                    @endif
                                </div>
                            @endif

                            @if (!empty($data['contact']['ig_name']))
                                <div class="flex items-start space-x-2 full-url">
                                    <div class="icon-wrapper">
                                        <img class="ct-icon" src="{{ Module::asset('frontend:img/icon/cit.svg') }}"
                                            alt="Alternate Text" />
                                    </div>
                                    <div class="h-[28px] flex items-center">
                                        <p class="text th-6 fs-13">
                                            {{ !empty($data['contact']['ig_name']) ? $data['contact']['ig_name'] : '' }}</p>
                                    </div>
                                    @if (!empty($data['contact']['ig']))
                                        <a href="{{ !empty($data['contact']['ig']) ? $data['contact']['ig'] : '' }}"></a>
                                    @endif
                                </div>
                            @endif

                            @if ($data['contact']['line_name'])
                                <div class="flex items-start space-x-2 full-url">
                                    <div class="icon-wrapper">
                                        <img class="ct-icon" src="{{ Module::asset('frontend:img/icon/cln.svg') }}"
                                            alt="Alternate Text" />
                                    </div>
                                    <div class="h-[28px] flex items-center">
                                        <p class="text th-6 fs-13">
                                            {{ !empty($data['contact']['line_name']) ? $data['contact']['line_name'] : '' }}
                                        </p>
                                    </div>
                                    @if (!empty($data['contact']['line']))
                                        <a href="{{ !empty($data['contact']['line']) ? $data['contact']['line'] : '' }}"></a>
                                    @endif
                                </div>
                            @endif

                            @if (!empty($data['contact']['email']))
                                <div class="flex items-start space-x-2 full-url">
                                    <div class="icon-wrapper">
                                        <img class="ct-icon" src="{{ Module::asset('frontend:img/icon/cml.svg') }}"
                                            alt="Alternate Text" />
                                    </div>
                                    <div class="h-[28px] flex items-center">
                                        <p class="text th-6 fs-13">
                                            {{ !empty($data['contact']['email']) ? $data['contact']['email'] : '' }}</p>
                                    </div>
                                    <a href="mailto:{{ !empty($data['contact']['email']) ? $data['contact']['email'] : '' }}"></a>
                                </div>
                            @endif

                            @if (!empty($data['contact']['phone_office']) || !empty($data['contact']['phone']))
                                <div class="flex items-start space-x-2">
                                    <div class="icon-wrapper">
                                        <img class="ct-icon" src="{{ Module::asset('frontend:img/icon/ctl.svg') }}"
                                            alt="Alternate Text" />
                                    </div>
                                    <div>
                                        @if (!empty($data['contact']['phone_office']))
                                            <p class="text th-6 fs-13 full-url">{{ $data['contact']['phone_office'] }}
                                                <a href="tel:{{ $data['contact']['phone_office'] }}"></a>
                                            </p>
                                        @endif

                                        @if (!empty($data['contact']['phone']))
                                            <p class="text th-6 fs-13 full-url">{{ $data['contact']['phone'] }}
                                                <a href="tel:{{ $data['contact']['phone'] }}"></a>
                                            </p>
                                        @endif

                                    </div>
                                </div>
                            @endif
                        </div>
                        @if (!empty($data['contact']['description']))
                            <div class="market-info">
                                {!! !empty($data['contact']['description']) ? $data['contact']['description'] : '' !!}
                            </div>
                        @endif
                    </div>

                    <input type="hidden" name="lang" id="lang"
                        value="{{ !empty($page_init['lang']) ? $page_init['lang'] : 'th' }}">
                    <div
                        class="bg-2nd rounded-2xl apply-border border-3rd flex-grow space-y-4 px-6 py-[.75rem] lg:p-8 mt-6">
                        <div class="form-wrapper form-contact">
                            <div class="form-group">
                                <label class="uppercase" for="NM">@lang('frontend::lang.your_name')</label>
                                <input class="form-style" name='name' id='name' type="text"
                                    placeholder="@lang('frontend::lang.enter_name')" />
                            </div>
                            <div class="form-group">
                                <label class="uppercase" for="ML">@lang('frontend::lang.your_email')</label>
                                <input class="form-style" name='email' id="email" type="email" pattern=".+@globex\.com" placeholder="@lang('frontend::lang.contact_title_3')" />
                            </div>
                            <div class="form-group">
                                <label class="uppercase" for="SJ">@lang('frontend::lang.subject')</label>
                                <input class="form-style" name='subject' id="subject" type="text"
                                    placeholder="@lang('frontend::lang.contact_title_2')" />
                            </div>
                            <div class="form-group">
                                <label class="uppercase" for="MS">@lang('frontend::lang.msg')</label>
                                <textarea class="form-style" name='message' id="message" name="" rows="10"
                                    placeholder="@lang('frontend::lang.contact_title_1')"> </textarea>
                            </div>
                            <div class="form-group py-3">
                                <div class="label"></div>
                                <div class="flex items-start"><input type="checkbox" class="mr-2 mt-1" id="accept2"
                                        name="accept2" value="accept" readonly>
                                    <label class="pt-0 flex-grow" for="accept2" of="policy">@lang('frontend::lang.contact_title_4')
                                        <a class="nowrap"
                                            href="{{ !empty($page_init['pdpa']['url']) ? $page_init['pdpa']['url'] : '' }}">
                                            <u class="text-red">@lang('frontend::lang.contact_title_5')</u></a>
                                    </label>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="label"></div>
                                <div class="flex items-start">
                                <div class="robot-check">
                                    <p class="sub-detail m-b-10 ">@lang('frontend::lang.msg_4')</p>
                                      <div class="g-recaptcha" data-callback="makeaction" data-sitekey="6Lep_BskAAAAAIztT_wOnei0nYF2MFG1sQWtAMnO">
                                    </div>
                                </div>
                                </div>
                            </div>
                            

                            <div class="form-group">
                                <div class="label"></div>
                                <div class="flex items-start">
                                    {{-- disabled --}}
                                    <button id='btn_submit' disabled  onclick="setSaveContact();" class="text fs-12 th-6 bg-1st rounded-xl px-3 py-2 text-whiten text-center uppercase"
                                        type="button">@lang('frontend::lang.send_message')</button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="modal fade modal-style" id="thanksModal" tabindex="-1" aria-labelledby="thanksModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                                <div class="modal-content">
                                    <div class="modal-body space-y-6 py-12 text-center">
                                        <div class="flex flex-col items-center justify-center -mt-6 space-y-4 -mx-[.25rem] flex-wrap">
                                            <div class="p-[.25rem]">
                                                <img class="confirm-size" src="{{ Module::asset('frontend:img/icon/mod-ok.svg') }}" />
                                            </div>
                                            <div class="p-[.25rem]">
                                                <p class="font th-6 s-24 uppercase">@lang('frontend::lang.popup_title_1')</p>
                                                <p class="font s-16">@lang('frontend::lang.popup_title_2')</p>
                                            </div>
                                            <div class="p-[.25rem]">
                                                <button id="close" onclick="funcClose()" class="text fs-12 th-6 bg-1st rounded-xl px-3 py-2 text-whiten text-center uppercase" type="button" data-bs-dismiss="modal" aria-label="Close">OK</button>
                                            </div>
                                        </div>
                                        <button class="closedd" data-bs-dismiss="modal" aria-label="Close"><svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M1.26624 0.939209L12.6121 12.2852" stroke="black"></path>
                                                <path d="M1.26611 12.2852L12.6121 0.939331" stroke="black"></path>
                                            </svg>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </main>
@endsection

@section('script')
    <!-- Notifications js -->
    <link href="{{ URL::asset('assets/plugins/notify-growl/css/jquery.growl.css') }}" rel="stylesheet" />
    <link href="{{ URL::asset('assets/plugins/notify-growl/css/notifIt.css') }}" rel="stylesheet" />
    <script src="{{ URL::asset('assets/plugins/bootbox/bootbox.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/notify-growl/js/rainbow.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/notify-growl/js/jquery.growl.js') }}"></script>

    <script src="{{ mix('js/contactus.js') }}"></script>
    <!-- mwz master js css -->
    <link rel="stylesheet" href="{{ mix('css/mwz.css') }}">
    <script src="{{ mix('js/mwz.js') }}"></script>
    <!--ckeditor js-->
    <script src="{{ URL::asset('assets/plugins/tinymce/tinymce.min.js') }}"></script>
    <!-- <script src="{{ URL::asset('assets/js/formeditor.js') }}"></script> -->
    <script src='https://www.google.com/recaptcha/api.js?hl={{ app()->getLocale() }}'></script>
    <script type="text/javascript">
        function funcClose() {
            var element = document.getElementById("thanksModal");
            element.classList.remove("show");
            setTimeout(function() {
                top.window.location.reload();
            }, 1500);
        }
        makeaction = function() {
            document.getElementById('btn_submit').disabled = false;
        }

        setSaveContact = function() {
            var lang = $("#lang").val();
            event.preventDefault();
            var frm_data = new FormData($('#contactus_frm')[0]);

            //    msg error 
            if (lang == 'th') {
                msg_error_1 = 'กรุณากรอกชื่อ-นามสกุล';
                msg_error_2 = 'กรุณาระบุหัวเรื่องที่ต้องการติดต่อ';
                msg_error_3 = 'Please enter Your Email';
                msg_error_4 = 'กรุณาระบุข้อความ';
                msg_error_5 = 'โปรดใส่ "@" ในที่อยู่อีเมลที่ไม่มี "@"';
            } else {
                msg_error_1 = 'Please enter First Name - Last Name';
                msg_error_2 = 'Please enter subject';
                msg_error_3 = 'กรุณากรอกอีเมล์ของคุณ';
                msg_error_4 = 'Please enter message';
                msg_error_5 = 'Please include an "@" in the email address is missing an "@"';
            }

            // check validate 
            if (!valNoBlank(["name"])) {
                mwz_noti('error', msg_error_1);
            } else if (!valNoBlank(["subject"])) {
                mwz_noti('error', msg_error_2);
            } else if (!valEmail(["email"])) {
                mwz_noti('error', msg_error_5);
            }else if(!valNoBlank(["email"])){
                mwz_noti('error', msg_error_3);
            }else if(!valNoBlank(["message"])){
                mwz_noti('error', msg_error_4);
            } else {

                // connect data
                $.ajax({
                    url: "{{mwz_route('frontend.send_contact')}}",
                    type: "POST",
                    contentType: false,
                    data: frm_data,
                    processData: false,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function success(resp) {
                        console.log(resp.success);
                        if (resp.success) {
                            sendmessage();
                        } else {
                            mwz_noti('error', resp.msg);
                            if (resp.focus == 'accept2') {
                                $("#accept2").css("border", "1px solid red");
                            }
                            return $("#contactus_frm").valid();
                        }
                    }
                });
            }

        };

        /** ส่งเป็น array เข้ามาได้ */
        function valNoBlank(id) {
            function intV(ele) {
                if (ele.val() !== '') {
                    return validate_show(ele, true);
                } else {
                    return validate_show(ele, false);
                }
            }
            var result = false;
            if (typeof id == 'object') {
                var ck = 0;
                for (let i in id) {
                    ele = $("#" + id[i]);
                    ck += (intV(ele) ? 1 : 0);
                }
                result = (ck == id.length);
            } else {
                var ele = $("#" + id);
                result = intV(ele);
            }
            return result;
        }

        /** ใส่ขอบช่องที่ validate ไม่ผ่าน */
        function validate_show(ele, ok) {
            if (ele.attr("type") == 'hidden') {
                let id = ele.attr("id");
                var tg = ele.siblings("[id*='" + id + "']");
            } else {
                var tg = ele;
            }
            if (ok) {
                tg.css({
                    'border': '1px solid #ced4da'
                });
                return true;
            } else {
                tg.css({
                    'border': '1px solid red'
                });
                return false;
            }
        }

    function valEmail(id) {
    var email = $("#" + id);
    var email_filter = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
    if (email.val().search(email_filter) !== -1) {
        email.attr("placeholder", "");
        email.css({ 'border-color': "rgb(238,238,238)" });
        email.parent().css({ 'background-color': "initial" });
        return true;
    } else {
        email.val("");
        email.attr("placeholder", "example@gmail.com");
        email.css({ 'border-color': '#ff5b42' });
        // email.parent().css({ 'background-color': "#ff9282" });
        return false;
    }
}

        // When the user clicks on div, open the popup
      function sendmessage() {
        $("#thanksModal").modal('show');
      }
    </script>

@endsection