@extends('web.layouts.app')

@section('title', __('contact.seo_title'))

@section('wrapper-class', 'wp-page page-full-height wide')

@section('contact_active', 'active')

@section('extended_head')
  {!! NoCaptcha::renderJs() !!}
@endsection

@section('content')
    @include('web.layouts.header')
    <main class="main page-content my-auto">
        <div class="container-fluid">
            <span class="page-title">{{ __('contact.title') }}</span> 
        </div>
        <div class=" map-contact">
            @include('web.contact.form_contact')
            <div id="map"></div>
        </div>
    </main>
@endsection

@section('modals')
<div class="modal modal-global-msg" id="modal-result" tabindex="1" role="dialog" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header py-4">       
                <img class="logo-img" src="{{  asset('web/images/LogoSilkWires.svg') }}" alt="Silkwires" width="200">
            </div>
            <div class="modal-body text-center">
                <p class="mb-0 result-content">{{ __("Message envoyé ! Merci de nous rendre visite !") }}</p> 
            </div>
            <div class="modal-footer justify-content-center px-2">
                <button type="button" class="btn btn-sm btn-primary px-4" data-dismiss="modal">{{ __('labels.close') }}</button> 
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyAAq_3rBXv_JZgDNmNZMuIARuTCkkyf1VY'></script>
<script type="text/javascript">
    (function($, window, document) {
        google.maps.event.addDomListener(window, "load", initMapContact);
            window.onorientationchange = function() {
            window.location.reload();
        }

        $('input[name="phone"], input[name="mobile"]').on({
            'keypress': function(e) {
                var keyCode = e.which;
                if ((keyCode != 8 || keyCode == 32 ) && (keyCode < 48 || keyCode > 57)) { 
                    return false;
                }
            },
            'paste': function() {
                return false;
            },
        });

        $('#refresh-captcha').click(function(){
            var this_button = $(this);

            $.ajax({
                type:'GET',
                url: '{{ route('refresh_captcha') }}',
                beforeSend: function() {
                    this_button.html('<i class="fas fa-circle-notch fa-spin"></i>');
                },
                success: function(response) {
                    $(".captcha span").html(response);
                },
                complete: function() {
                    this_button.html('<i class="fas fa-sync"></i>');
                }
            });
        });

        $('.contact-form').on('submit', function(event) {
            // var submit_button = $(this).find('button[type="submit"]');
            // submit_button.prop('disabled', true);
            // submit_button.html('{{ __('contact.sending') }}');
            event.preventDefault();

            let $this_form = $(this);
            let data = $this_form.serialize();

            $.ajax({
                url: '{{ route('contact.send') }}',
                type: 'post',
                dataType: 'json',
                data: data,
                beforeSend: function () {
                    $('.contact-form').find('.border-red').removeClass('border-red');
                    $('.contact-form').find('.text-red').removeClass('text-red');
                    show_loading();
                }
            }).done(function(response) {
                console.log(response);

                if (response.status === 'success') {
                    $('#modal-result').modal('show');
                } else {
                    let errors = response.errors;
                    show_errors(response.errors);
                }
            }).always(function () {
                hide_loading();
            });
        });

         $('#modal-result').on('hidden.bs.modal', function () {
            window.location.reload();
         });

        @if ($errors->any())
            @foreach ($errors->getMessages() as $key => $message)
                $('[name="{{ $key }}"]').addClass('error');
                $('.invalid-feedback[for="{{ $key }}"]').html("{{ $message[0] }}").show();
            @endforeach
            toggleContact();
            $('.error:first').focus();
        @endif

        @if (session()->has('success') || session()->has('system_error'))
            var result_content = "{{ session()->has('success') ? session()->get('success') : session()->get('system_error') }}";
            $('#modal-result').find('.result-content').html(result_content);
            $('#modal-result').modal('show');
        @endif
    }(window.jQuery, window, document));

   //init Map Contact
    function initMapContact() {
        var usRoadMapType = new google.maps.StyledMapType([{
            featureType: 'all',
            elementType: 'all',
            stylers: [{
                invert_lightness: 'true'
            },
            {
                hue: '#283133'
            },
            {
                saturation: 40
            },
            {
                lightness: 30
            },
            {
                gamma: 0.5
            }]
        }], {
            name: 'Silkwires Style'
        });
        var uluru = {
            lat: 10.766300,
            lng: 106.699214
        };
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 16,
            center: uluru, 
            zoomControlOptions: {
                position: google.maps.ControlPosition.LEFT_TOP
            },
            streetViewControlOptions: {
                position: google.maps.ControlPosition.LEFT_TOP
            }
        });
        var contentString = '<div class="map-info-box">' +
        '<div class="map-head">' + '<h3><img src="{{ asset('web/images/LogoSilkWires.svg') }}" alt="Silkwires digital agency"></h3></div>' + '<div class="map-body">' + '<p class="map-address"><span class="lnr lnr-map-marker"></span>{!! __('contact.address') !!}</p> <p><span class="lnr lnr-phone-handset"></span>(+84-28) 3503 4588 </p><p class="map-email"><span class="lnr lnr-envelope"></span> info@silkwires.com </p>' + '<div><button onclick="toggleContact()" id="button-contact" class="btn btn-sm btn-outline-secondary">{{ mb_strtoupper(__('contact.title')) }}</button></div></div> </div>';
       
        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });
        var image = '{{ asset('web/images/icons/map-marker-icon.png') }}';
        var marker = new google.maps.Marker({
            position: uluru,
            map: map,
            icon: image,
            title: '{{ __('labels.company_name') }}'
        });
       
        // th custome
        google.maps.event.addListener(infowindow, 'load', function() {
            // Reference to the DIV which receives the contents of the infowindow using jQuery
            var iwOuter = $('.gm-style-iw'); 
            var iwBackground = iwOuter.prev(); 
         
            // Remove the background shadow DIV
            iwBackground.children(':nth-child(2)').css({'display' : 'none'});
         
            // Remove the white background DIV
            iwBackground.children(':nth-child(4)').css({'display' : 'none'});
         
            $('#map').find('.gm-style-iw').parent().addClass('style-iw-sw');
        }); 

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map, marker);
        });
        infowindow.open(map, marker); 
    }

    // OPEN CONTACT SIDEBAR
    function toggleContact() {
        var formContainer = $('#contactForm'); 
        $(formContainer).toggleClass('open'); 
    }

    function show_errors(errors) {
        var $contact_form = $('.contact-form');
        let error_fields = Object.keys(errors);

        console.log(error_fields);

        error_fields.forEach(function (field) {
            let $input = $contact_form.find('[name="' + field + '"]');
            let $label = $contact_form.find('label[for="contact-' + field + '"]');
            let $invalid_message = $contact_form.find('.invalid-feedback[for="' + field + '"]');

            console.log('current field: ' + field);

            $input.addClass('border-red');
            $label.addClass('text-red');

            if (field === 'g-recaptcha-response') {
                $contact_form.find('.invalid-message[for="captcha"]').show();
            }
        });

        let $first_error = $contact_form.find('.border-red:first');
        $first_error.focus();
    }
</script>
@endpush