<?php

/**
 * Sublogo Block Template.
 *
 * @param   array $block The block settings and attributes.
 * @param   string $content The block inner HTML (empty).
 * @param   bool $is_preview True during AJAX preview.
 * @param   (int|string) $post_id The post ID this block is saved to.
 */

// Create id attribute allowing for custom "anchor" value.
$id = 'top-title-' . $block['id'];
if( !empty($block['anchor']) ) {
    $id = $block['anchor'];
}

// Create class attribute allowing for custom "className" and "align" values.
$className = 'top-title';
if( !empty($block['className']) ) {
    $className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
    $className .= ' align' . $block['align'];
}

// Load values and assign defaults.
$toptitle = get_field('top_title') ?: __('Title');
$topdescr = get_field('contacts') ?: __('Description');
$linked = get_field('linkedin_link') ? : __('#');
$location = get_Field('coordinates');
?>

<section class="block-half-circle">
    <div class="section-inner">
        <h1 class="bhc-heading"><?php echo $toptitle; ?></h1>
        <div class="bhc-text-contact"><?php echo $topdescr; ?></div>
        <a href="<?php echo $linked; ?>" class="linked-link"><svg xmlns="http://www.w3.org/2000/svg" width="31" height="29.583" viewBox="0 0 31 29.583">
                <path id="Path_103" data-name="Path 103" d="M146.172,162.406v19.977h6.662V162.406Zm6.059-8.632a3.686,3.686,0,0,0-2.683-.975,3.793,3.793,0,0,0-2.713.975,3.247,3.247,0,0,0-1.035,2.472,3.3,3.3,0,0,0,1,2.462,3.619,3.619,0,0,0,2.663.985h.04a3.832,3.832,0,0,0,2.733-.985,3.169,3.169,0,0,0,1.015-2.462A3.317,3.317,0,0,0,152.231,153.775ZM174.7,164.235a7.156,7.156,0,0,0-5.547-2.291,7.938,7.938,0,0,0-2.311.312,5.438,5.438,0,0,0-1.758.874,8.707,8.707,0,0,0-1.146,1.045,7.757,7.757,0,0,0-.824,1.125h.04v-2.9h-6.642l.02.965c.01.643.02,2.633.02,5.969s-.01,7.677-.04,13.043h6.642V171.219a4.878,4.878,0,0,1,.221-1.638,4.368,4.368,0,0,1,1.286-1.728,3.289,3.289,0,0,1,2.13-.693,2.881,2.881,0,0,1,2.552,1.2,5.864,5.864,0,0,1,.814,3.316v10.682H176.8V170.9C176.8,167.994,176.1,165.763,174.7,164.235Z" transform="translate(-145.8 -152.8)" fill="#45B6AD"></path>
            </svg></a>
        <?php
        if( $location ): ?>
            <div class="acf-map" data-zoom="16">
                <div class="marker" data-lat="<?php echo esc_attr($location['lat']); ?>" data-lng="<?php echo esc_attr($location['lng']); ?>"></div>
            </div>
        <?php endif; ?>
        <style type="text/css">
            .acf-map {
                width: 100%;
                height: 530px;
                border: #ccc solid 1px;
                margin: 20px 0;
            }

            // Fixes potential theme css conflict.
               .acf-map img {
                   max-width: inherit !important;
               }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?key=<?php echo acf_get_setting('google_api_key'); ?>"></script>
        <script type="text/javascript">
            (function( $ ) {

                /**
                 * initMap
                 *
                 * Renders a Google Map onto the selected jQuery element
                 *
                 * @date    22/10/19
                 * @since   5.8.6
                 *
                 * @param   jQuery $el The jQuery element.
                 * @return  object The map instance.
                 */
                function initMap( $el ) {

                    // Find marker elements within map.
                    var $markers = $el.find('.marker');

                    // Create gerenic map.
                    var mapArgs = {
                        zoom        : $el.data('zoom') || 16,
                        mapTypeId   : google.maps.MapTypeId.ROADMAP
                    };
                    var map = new google.maps.Map( $el[0], mapArgs );

                    // Add markers.
                    map.markers = [];
                    $markers.each(function(){
                        initMarker( $(this), map );
                    });

                    // Center map based on markers.
                    centerMap( map );

                    // Return map instance.
                    return map;
                }

                /**
                 * initMarker
                 *
                 * Creates a marker for the given jQuery element and map.
                 *
                 * @date    22/10/19
                 * @since   5.8.6
                 *
                 * @param   jQuery $el The jQuery element.
                 * @param   object The map instance.
                 * @return  object The marker instance.
                 */
                function initMarker( $marker, map ) {

                    // Get position from marker.
                    var lat = $marker.data('lat');
                    var lng = $marker.data('lng');
                    var latLng = {
                        lat: parseFloat( lat ),
                        lng: parseFloat( lng )
                    };

                    // Create marker instance.
                    var marker = new google.maps.Marker({
                        position : latLng,
                        map: map
                    });

                    // Append to reference for later use.
                    map.markers.push( marker );

                    // If marker contains HTML, add it to an infoWindow.
                    if( $marker.html() ){

                        // Create info window.
                        var infowindow = new google.maps.InfoWindow({
                            content: $marker.html()
                        });

                        // Show info window when marker is clicked.
                        google.maps.event.addListener(marker, 'click', function() {
                            infowindow.open( map, marker );
                        });
                    }
                }

                /**
                 * centerMap
                 *
                 * Centers the map showing all markers in view.
                 *
                 * @date    22/10/19
                 * @since   5.8.6
                 *
                 * @param   object The map instance.
                 * @return  void
                 */
                function centerMap( map ) {

                    // Create map boundaries from all map markers.
                    var bounds = new google.maps.LatLngBounds();
                    map.markers.forEach(function( marker ){
                        bounds.extend({
                            lat: marker.position.lat(),
                            lng: marker.position.lng()
                        });
                    });

                    // Case: Single marker.
                    if( map.markers.length == 1 ){
                        map.setCenter( bounds.getCenter() );

                        // Case: Multiple markers.
                    } else{
                        map.fitBounds( bounds );
                    }
                }

// Render maps on page load.
                $(document).ready(function(){
                    $('.acf-map').each(function(){
                        var map = initMap( $(this) );
                    });
                });

            })(jQuery);
        </script>
    </div>
</section>