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

@section('style')

@endsection

@section('content')

    <main>
        <section class="section-page">
            <div class="container d-contact">
                <p class=" th-5 fs-36 uppercase text-center mb-3r">{{__('frontend::lang.index_msg_14')}}</p>
                <div class="layout layouy-contact">
                    <div class="lg:w-2/3">
                        <div class="map-wrapper">{!!$data['contact']['gmaps']!!}</div>
                    </div>
                    <div class="lg:w-1/3 box-contact">
                        <div class="w-full lg:pt-6 space-y-2">
                            <h4 class="th-2"> <span class="th-5">{{__('frontend::lang.index_msg_8')}}: </span>
                                <br>
                                <a href="{{ url('#') }}"> </a>{{$data['contact']['office']}}
                            </h4>
                            <h4 class="th-2"> <span class="th-5">{{__('frontend::lang.index_msg_10')}}: </span>
                                <br>
                                <a href="{{ url('#') }}"> </a>{{$data['contact']['email']}}
                            </h4>
                            <h4 class="th-2"> <span class="th-5">{{__('frontend::lang.index_msg_9')}}: </span>
                                <br>
                                <a href="{{ url('#') }}"> </a>{{$data['contact']['phone']}}
                            </h4>
                            <h4 class="th-2"> <span class="th-5">Facebook Private Group: </span>
                                <br>
                                <a href="{{ url($data['contact']['facebook']) }}">{{$data['contact']['facebook']}} </a>
                            </h4>
                        
                        </div>
                    </div>
                </div>
                <div class="px-6 w-full" >
                    <form id="contactus_frm" name="contactus_frm" method="POST" onsubmit="setSaveContact(); return false;" enctype="multipart/form-data">
                         @csrf
                        <div class="form-wrapper rounded-md line-form ">
                            <div class="flex flex-wrap">
                                <div class="w-full md:px-6 py-[.85rem] 2xl:pr-20 overflow-x-hidden">
                                    <h1 class="th-5 fs-22 lg:fs-32 xl:leading-12">{{__('frontend::lang.contact_msg_17')}}</h1>
                                    <div class="flex items-center space-x-4">
                                        <p class="th-3 fs-16">{{__('frontend::lang.contact_msg_18')}}</p>
                                    </div>
                                </div>
                                <div class="w-full md:px-8">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="row mb-3 mx-0">
                                                <label class="th-3">{{__('frontend::lang.contact_msg_1')}}</label><input type="text" class="form-style font-weight-semibold px-1 py-3" name="name" placeholder="* {{__('frontend::lang.contact_msg_7')}}" data-msg-required="This field is required." id="name" required="">
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="row mx-0 mb-3">
                                                <label class="th-3">{{__('frontend::lang.contact_msg_3')}}</label><input type="email" class="form-style font-weight-semibold px-1 py-3" name="email" placeholder="* {{__('frontend::lang.contact_msg_8')}}" data-msg-required="This field is required." id="email" required="">
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="mx-0 mb-3">
                                                <div class="form-group col">
                                                    <label class="form-label th-3 pl-2">{{__('frontend::lang.contact_msg_2')}}</label>
                                                    <input type="text" class="form-style font-weight-semibold px-1 py-3" name="tel" placeholder="* {{__('frontend::lang.contact_msg_9')}}" data-msg-required="This field is required." id="tel" required="">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="mx-0 mb-3">
                                                <div class="form-group col">

                                                    <label class="form-label th-3 pl-2" for="cars">{{__('frontend::lang.contact_msg_4')}}
                                                    </label>
                                                    <select id="cars" name="subject" class="cars">
        
                                                    <option  label="{{__('frontend::lang.contact_msg_11')}}" value="">{{__('frontend::lang.contact_msg_11')}}</option>
                                                    @foreach ($data['contact_subject'] as $subject)
                                                    <option  label="{{$subject['subject']}}" value="{{$subject['subject']}}">{{$subject['subject']}}</option>
                                                    @endforeach
                                                        
                                                    {{-- <option   label="Saab">Saab (Swedish Aeroplane AB)</option>
                                                    <option   label="Mercedes">Mercedes (Mercedes-Benz)</option>
                                                    <option   label="Audi">Audi (Auto Union Deutschland Ingolstadt)</option> --}}
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="row mx-0 mb-3">
                                                <label class="th-3">{{__('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="* {{__('frontend::lang.contact_msg_15')}}"></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">{{__('frontend::lang.contact_msg_16')}}
                                                <a class="text-1st" href="{{ url('/policy') }}">
                                                    <u>{{__('frontend::lang.index_msg_4')}}</u></a>
                                            </label>
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <div id="recaptcha"></div>
                                            
                                            {{-- <img src="{{ Module::asset('frontend:img/home/PDPA.png') }}" > --}}
                                            <div class="pt-6">
                                                <button id='btn_submit' class="bg-dark rounded-md  py-2 text-whiten mx-auto btn-dark btn-contact" type="submit" data-bs-toggle="modal" data-bs-target="#notic" disabled>{{__('frontend::lang.contact_msg_6')}}</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </main>
@endsection

@section('script')
  
<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?onload=onloadCallback&render=explicit" async defer>
</script>

<script>
     var verifyCallback = function(response) {
        $('#btn_submit').removeAttr('disabled');
      };
    var onloadCallback = function(callback) {
      grecaptcha.render('recaptcha', {
        'sitekey' : '6LeKY5EnAAAAADp8Ylfk3GQy_crs4ZQ43W33dEzR',
        'callback' : verifyCallback,
      });
      
    };
  </script>
<script>
  makeaction = function() {
    document.getElementById('btn_submit').disabled = false;
}

        setSaveContact = function() {
            event.preventDefault(); 
            var frm_data = new FormData($('#contactus_frm')[0]);
            var data_tel = $("#tel").val();
            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($("#cars").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