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

@section('style')
<style>
    .default-bg-cover.relative{background-size:contain;background-position:left}
</style>

@endsection

@section('content')

    <main>
        @includeIf('frontend::banner')
        <div class="container pt-8">
            <div class="text-center pb-8">
                <h2 class="uppercase text-whiten th-6 fs-32">{{ !empty($data['contact_data']['name']) ? $data['contact_data']['name'] : "" }}</h2>
            </div>
            <div class="flex flex-wrap">
                <div class="w-full md:w-1/2">
                    <div class="flex flex-wrap -mx-4 mt-4">
                        @if (!empty($data['contact']['office']))
                            <div class="w-full p-[.5rem] space-y-2">
                                <div class="flex items-center space-x-3">
                                    <img src="{{ Module::asset('frontend:img/icon/pin.svg') }}" />
                                    <p class="text-whiten th-6 fs-20">@lang('frontend::lang.index_msg_8')</p>
                                </div>
                                <p class="text-whiten text-base-lg">{{ $data['contact']['office'] }}</p>
                            </div>
                        @endif
                       
                        @if (!empty($data['contact']['phone']))
                            <div class="w-full p-[.5rem] space-y-2">
                                <div class="flex items-center space-x-3">
                                    <img src="{{ Module::asset('frontend:img/icon/tel2.svg') }}" />
                                    <p class="text-whiten th-6 fs-20">@lang("frontend::lang.index_msg_9")</p>
                                </div>
                                <p class="text-whiten text-base-lg full-url">{{$data['contact']['phone']}}<a href="tel:{{$data['contact']['phone']}}"> </a></p>
                            </div>
                        @endif
                        
                        @if (!empty($data['contact']['email']))
                            <div class="w-full p-[.5rem] space-y-2">
                                <div class="flex items-center space-x-3">
                                    <img src="{{ Module::asset('frontend:img/icon/mail.svg') }}" />
                                    <p class="text-whiten th-6 fs-20">@lang("frontend::lang.index_msg_10")</p>
                                </div>
                                <p class="text-whiten text-base-lg full-url">{{$data['contact']['email']}}<a href="mailto:{{$data['contact']['email']}}"> </a></p>
                            </div>
                        @endif

                        <div class="w-full p-[.5rem] space-y-2">
                            <p class="text-whiten th-6 fs-20">@lang("frontend::lang.index_msg_11")</p>
                            <div class="flex items-center justify-start space-x-4">
                                @if (!empty($data['contact']['facebook']))
                                    <div class="full-url">
                                        <img src="{{ Module::asset('frontend:img/icon/fac.svg') }}" /><a target="_blank" href="{{$data['contact']['facebook']}}"> </a>
                                    </div>
                                @endif
                                
                                @if (!empty($data['contact']['youtube']))
                                    <div class="full-url">
                                        <img src="{{ Module::asset('frontend:img/icon/you.svg') }}" /><a target="_blank" href="{{$data['contact']['youtube']}}"> </a>
                                    </div>
                                @endif
                                
                                @if (!empty($data['contact']['line']))
                                    <div class="full-url">
                                        <img src="{{ Module::asset('frontend:img/icon/lin.svg') }}" /><a target="_blank" href="{{ $data['contact']['line'] }}"> </a>
                                    </div>
                                @endif
                               
                                @if (!empty($data['contact']['tiktok']))
                                    <div class="full-url">
                                        <img src="{{ Module::asset('frontend:img/icon/tik.svg') }}" /><a target="_blank" href="{{ $data['contact']['tiktok'] }}"> </a>
                                    </div>
                                @endif
                               
                                @if (!empty($data['contact']['ig']))
                                    <div class="full-url">
                                        <img src="{{ Module::asset('frontend:img/icon/ins.svg') }}" /><a target="_blank" href="{{  $data['contact']['ig'] }}"> </a>
                                    </div>
                                @endif
                                
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-full md:w-1/2">
                    <img src="{{ Module::asset('frontend:img/blog4.png') }}" />
                </div>
            </div>
        </div>
        <div class="map-wrapper mt-8">
            {!! !empty($data['contact']['gmaps']) ? $data['contact']['gmaps'] : "" !!}
            </div>
        <form id="contactus_frm" name="contactus_frm" method="POST" onsubmit="setSaveContact(); return false;" enctype="multipart/form-data"
            class="form-wrapper line-form rounded-xl shadow-lg contact-form  bg-whiten">
            @csrf
            <div class="default-bg-cover relative py-8 lg:py-16" style="background-image:url({{ Module::asset('frontend:img/contact-bg.png') }});background-size: cover;">
                <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="text-whiten fs-36 text-whiten th-6">@lang('frontend::lang.contact_msg_17')</p>
                            <p class="text-whiten fs-30 text-whiten th-3"><i>@lang('frontend::lang.contact_msg_18')</i></p>
                        </div>
                    
                            <div class="p-3 lg:w-1/2">
                                <div class="form-wrapper line-form bg-whiten px-6 py-12 rounded-xl shadow-lg">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="row mb-3 mx-0">
                                                <label>@lang("frontend::lang.contact_msg_1")</label><input type="text" class="form-style font-weight-semibold px-1 py-3" name="name" placeholder=@lang("frontend::lang.contact_msg_1") data-msg-required="This field is required." id="name"/>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="row mb-3 mx-0">
                                                <label>@lang("frontend::lang.contact_msg_2")</label><input type="text" class="form-style font-weight-semibold px-1 py-3" name="tel" placeholder=@lang("frontend::lang.contact_msg_2") data-msg-required="This field is required." id="tel" minlength="10" maxlength="10" onkeypress="InputValidateString();"/>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="row mx-0 mb-3">
                                                <label>@lang("frontend::lang.contact_msg_3")</label><input type="email" class="form-style font-weight-semibold px-1 py-3" name="email" placeholder=@lang("frontend::lang.contact_msg_3") data-msg-required="This field is required." id="email"/>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="row mx-0 mb-3">
                                                <div class="form-group -mx-2 col">
                                                    <label class="form-label">@lang("frontend::lang.contact_msg_4")</label>
                                                    <input type="text" class="form-style font-weight-semibold px-1 py-3" name="subject" placeholder=@lang("frontend::lang.contact_msg_4") data-msg-required="This field is required." id="subject" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="row mx-0 mb-3">
                                                <label>@lang("frontend::lang.contact_msg_5")</label>
                                                <textarea name="message" id="message" rows="4" class="form-style form-style font-weight-semibold text-color-light px-1" placeholder=@lang("frontend::lang.contact_msg_5")></textarea>
                                            </div>
                                        </div>
                                        <div class="col-12 py-6 flex">
                                            <input type="checkbox" class="mr-2" id="accept" name="accept" value="accept">
                                            <label for="accept" of="policy">@lang('frontend::lang.contact_msg_19')
                                                <a class="text-1st" href="{{ !empty($page_init['policy_url']) ? $page_init['policy_url'] : "" }}">
                                                    <u>@lang('frontend::lang.index_msg_4')</u></a>
                                            </label>
                                        </div>

                                        <div class="col-12">
                                            <div class="robot-check">
                                                <div class="g-recaptcha" data-callback="makeaction"
                                                    data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12 pt-6">
                                            <div class="py-6">
                                                <button id='btn_submit' disabled class="butn-loadm butn-w-2h mx-auto" type="submit">@lang("frontend::lang.contact_msg_6")</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </div>
                </div>
                <div class="fil-bd-darken"></div>
            </div>
        </form>
    </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='https://www.google.com/recaptcha/api.js?hl={{ app()->getLocale() }}'></script>

<script type="text/javascript">
makeaction = function() {
    document.getElementById('btn_submit').disabled = false;
}
InputValidateString = function(evt) {
  var theEvent = evt || window.event;

  if (theEvent.type === "paste") {
    key = event.clipboardData.getData("text/plain");
  } else {
    var key = theEvent.keyCode || theEvent.which;
    key = String.fromCharCode(key);
  }

  var regex = /[0-9]|\./;
  if (!regex.test(key)) {
    theEvent.returnValue = false;
    if (theEvent.preventDefault) theEvent.preventDefault();
  }
};

        setSaveContact = function() {
            event.preventDefault(); 
            var frm_data = new FormData($('#contactus_frm')[0]);
            var data_tel = $("#tel").val();
            var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
            if($("#name").val() == ''){
                front_mwz_noti('error',"{{__('frontend::lang.contact_msg_7')}}");
            }else if($("#tel").val() == ''){
                front_mwz_noti('error', "{{__('frontend::lang.contact_msg_9')}}");
            }else if(data_tel.length < 10 || data_tel.length > 10){
                front_mwz_noti('error',"{{__('frontend::lang.contact_msg_10')}}");
            }else if($("#email").val() == ''){
                front_mwz_noti('error',"{{__('frontend::lang.contact_msg_8')}}");
            }else if(!$("#email").val().match(validRegex)){
                front_mwz_noti('error',"{{__('frontend::lang.contact_alert_msg_10')}}");
            }else if($("#subject").val() == ''){
                front_mwz_noti('error',"{{__('frontend::lang.contact_msg_11')}}");
            }else if($("#message").val() == ''){
                front_mwz_noti('error',"{{__('frontend::lang.contact_msg_15')}}");
            }else{
                // Swal.fire({
                // title: "{{__('frontend::lang.career_msg_25')}}",
                // html: "{{__('frontend::lang.career_msg_26')}}",
                // allowEscapeKey: false,
                // allowOutsideClick: false,
                // didOpen: () => {
                //     Swal.showLoading()
                // }
                // });
                $.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) {
                    if (resp.success) {
                        // swal.close();
                        sendmessage();
                    } else {
                        front_mwz_noti('error',resp.msg);
                        if (resp.focus == 'accept') {
                            $("#accept").addClass("border border-danger");
                        }
                    }
                }
            });
            }
        };
        

         // When the user clicks on div, open the popup
         function sendmessage() {
            Swal.fire({
                imageUrl: '{{Module::asset("frontend:img/icon/mod-ok.svg")}}',
                title: '{{ __("frontend::lang.popup_title_1") }}',
                html: '{{ __("frontend::lang.popup_title_2") }}',
                showCloseButton: true,
                confirmButtonColor: '#111',
                confirmButtonText: '{{ __("frontend::lang.lang_title_147") }}',
            }).then((result) => {
                if (result.isConfirmed) {
                    funcClose();
                }
            })
        }

        function funcClose() {
            setTimeout(function() {
                top.window.location.reload();
            }, 1500);
        }
</script>

@endsection