<?php
/* Smarty version 5.4.2, created on 2025-01-06 18:33:48
  from 'file:../default/contacts_map_view.tpl' */

/* @var \Smarty\Template $_smarty_tpl */
if ($_smarty_tpl->getCompiled()->isFresh($_smarty_tpl, array (
  'version' => '5.4.2',
  'unifunc' => 'content_677c685cd274f1_44954560',
  'has_nocache_code' => false,
  'file_dependency' => 
  array (
    '98ebc0f3f71d9d4df16d230cfc9bfbdcfd4720a1' => 
    array (
      0 => '../default/contacts_map_view.tpl',
      1 => 1736206426,
      2 => 'file',
    ),
  ),
  'includes' => 
  array (
  ),
))) {
function content_677c685cd274f1_44954560 (\Smarty\Template $_smarty_tpl) {
$_smarty_current_dir = '/Users/razib/Herd/suite/ui/theme/default';
$_smarty_tpl->getInheritance()->init($_smarty_tpl, true);
?>


<?php 
$_smarty_tpl->getInheritance()->instanceBlock($_smarty_tpl, 'Block_1475614154677c685cd21458_17950482', "head");
?>




<?php 
$_smarty_tpl->getInheritance()->instanceBlock($_smarty_tpl, 'Block_1062030404677c685cd255f4_31004817', "content");
?>


<?php 
$_smarty_tpl->getInheritance()->instanceBlock($_smarty_tpl, 'Block_422640371677c685cd26228_51613532', "script");
?>



<?php $_smarty_tpl->getInheritance()->endChild($_smarty_tpl, ((string)$_smarty_tpl->getValue('layouts_admin')), $_smarty_current_dir);
}
/* {block "head"} */
class Block_1475614154677c685cd21458_17950482 extends \Smarty\Runtime\Block
{
public function callBlock(\Smarty\Template $_smarty_tpl) {
$_smarty_current_dir = '/Users/razib/Herd/suite/ui/theme/default';
?>

    <?php if (!empty($_smarty_tpl->getValue('config')['google_maps_api_key'])) {?>
        <?php echo '<script'; ?>
>
            (g => {
                var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__",
                    m = document, b = window;
                b = b[c] || (b[c] = { });
                var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams,
                    u = () => h || (h = new Promise(async (f, n) => {
                        await (a = m.createElement("script"));
                        e.set("libraries", [...r] + "");
                        for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]);
                        e.set("callback", c + ".maps." + q);
                        
                        a.src = `https://maps.${c}apis.com/maps/api/js?` + e;
                        


                        d[q] = f;
                        a.onerror = () => h = n(Error(p + " could not load."));
                        a.nonce = m.querySelector("script[nonce]")?.nonce || "";
                        m.head.append(a)
                    }));
                d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n))
            })({
                key: "<?php echo $_smarty_tpl->getValue('config')['google_maps_api_key'];?>
",
                v: "weekly",
            });
        <?php echo '</script'; ?>
>
        <style>
            #map {
                height: calc(100vh - 66px);
                width: 100%;
            }

            .map-container {
                width: 100%;
                margin: 20px auto;
                padding: 0 20px;
            }

            .customer-info {
                padding: 4px;
                max-width: 200px;
            }
            #clx-page-content{
                padding: 0;
            }
        </style>
    <?php }
}
}
/* {/block "head"} */
/* {block "content"} */
class Block_1062030404677c685cd255f4_31004817 extends \Smarty\Runtime\Block
{
public function callBlock(\Smarty\Template $_smarty_tpl) {
$_smarty_current_dir = '/Users/razib/Herd/suite/ui/theme/default';
?>

    <div class="p-0" id="map">

    </div>
<?php
}
}
/* {/block "content"} */
/* {block "script"} */
class Block_422640371677c685cd26228_51613532 extends \Smarty\Runtime\Block
{
public function callBlock(\Smarty\Template $_smarty_tpl) {
$_smarty_current_dir = '/Users/razib/Herd/suite/ui/theme/default';
?>

    <?php echo '<script'; ?>
>
        document.addEventListener('DOMContentLoaded', function () {

            const mapElement = document.getElementById('map');

            mapElement.innerHTML = '<div class="p-3 text-center"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div></div>';

            axios.get(base_url + 'contacts/map-data').then(response => {
                const contacts = response.data;

                async function initMap() {
                    // Request needed libraries.
                    const { Map } = await google.maps.importLibrary("maps");
                    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

                    // Create map centered on US
                    const map = new Map(mapElement, {
                        zoom: 4,
                        center: { lat: 39.8283, lng: -98.5795 },
                        mapId: 'APP_MAP_ID',
                    });

                    // Add markers for each customer
                    contacts.forEach(contact => {

                        const lat = parseFloat(contact.lat);
                        const lng = parseFloat(contact.lon);

                        const marker = new AdvancedMarkerElement({
                            map: map,
                            position: { lat: lat, lng: lng },
                            title: contact.account
                        });

                        // Create info window content
                        
                        const infoWindow = new google.maps.InfoWindow({
                            content: `
                        <div class="customer-info">
                            <h3>${contact.account}</h3>
                            <div class="mb-2">${contact.email}</div>
                            <div class="mb-2">${contact.phone}</div>
                            <div class="mb-2">${contact.address}</div>
                        </div>
                    `
                        });
                        

                        // Add click listener to show info window
                        marker.addListener('click', () => {
                            infoWindow.open(map, marker);
                        });
                    });
                }

                initMap();

            });


        });
    <?php echo '</script'; ?>
>
<?php
}
}
/* {/block "script"} */
}
