<?php $themeHelper = $this->helper('MGS\StoreLocator\Helper\Data'); ?>
<?php if($themeHelper->getStoreConfig('locator/general/store_api_key')){
	$apikey = $themeHelper->getStoreConfig('locator/general/store_api_key');
}else{
	$apikey = 'AIzaSyD11c9ZFjYyFvKmbp2eKkpRuiqkjkAUIG0';
}
?>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<?php echo $apikey ?>&libraries=places&sensor=false"></script>
<?php
$markers = array();
$countries = $this->getCountries();
$agruments = [];
if($curPage = $this->getRequest()->getParam('p', false)) {
    $agruments['p'] = $curPage;
}
$country = $this->getRequest()->getParam('country', '');
$state = $this->getRequest()->getParam('state', '');
$city = $this->getRequest()->getParam('city', '');
$zipcode = $this->getRequest()->getParam('zipcode', '');
?>
<?php echo $block->getLayout()->getMessagesBlock()->getGroupedHtml() ?>
<div class="store-list-container">
    <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-12">
            <div class="search-form">
                <form action="<?php echo $block->getUrl('locator/index/search', $agruments) ?>" method="GET" id="search_by_area" >
					<div class="block-title">
						<h3 class="title"><span><?php echo __('Search by Area') ?></span></h3>
					</div>
                    <div class="content-block">
						<div class="row">
							<?php if (count($countries)): ?><div class="col-xs-6">
								<div class="form-group">
									<label class="control-label" for="country"><?php echo __('Country') ?></label>
									<select name="country" id="country" class="input-text"
											title="<?php echo __('Country') ?>">
										<?php foreach ($countries as $_country): ?>
											<option value="<?php echo $_country['value'] ?>" <?php echo $_country['value'] == $country ? 'selected' : ''; ?>>
												<?php echo $_country['label'] ?>
											</option>
										<?php endforeach; ?>
									</select>
								</div>
							</div><?php endif; ?>
							<div class="col-xs-<?php if (count($countries)): ?>6<?php else: ?>12<?php endif ?>">
								<div class="form-group">
									<label class="control-label" for="state"><?php echo __('State') ?></label>
									<input type="text" name="state" id="state" value="<?php echo $state ?>" title="<?php echo __('state') ?>"
										   class="input-text"/>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-xs-6">
								<div class="form-group">
									<label class="control-label" for="city"><?php echo __('City') ?></label>
									<input type="text" name="city" id="city" value="<?php echo $city ?>" title="<?php echo __('City') ?>"
										   class="input-text"/>
								</div>
							</div>
							<div class="col-xs-6">
								<div class="form-group">
									<label class="control-label" for="zipcode"><?php echo __('Zipcode') ?></label>
									<input type="text" name="zipcode" id="zipcode" value="<?php echo $zipcode ?>"
										   title="<?php echo __('Zipcode') ?>" class="input-text"/>
								</div>
							</div>
						</div>
						<div class="form-action">
							<button class="action btn btn-primary" title="<?php echo __('Search') ?>" type="submit">
								<span><?php echo __('Search') ?></span></button>
						</div>
                    </div>

                   
                </form>
            </div>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-12">
			<div class="search-form">
				<form action="<?php echo $block->getUrl('locator/index/searchbydistance', $agruments) ?>" method="GET"
					  id="search_by_distance" data-mage-init='{"validation":{}}'>
					<div class="block-title">
						<h3 class="title"><span><?php echo __('Search by Distance') ?></span></h3>
					</div>
					<div class="content-block">
						<div class="form-group">
							<label class="control-label" for="location"><?php echo __('Location') ?></label>
							<input type="text" name="location" id="location"
								   value="<?php echo $this->getRequest()->getParam('location') ?>"
								   title="<?php echo __('Location') ?>" class="input-text"
								   placeholder="<?php echo __('Street, City, State, Zipcode, Country') ?>"
								   data-validate="{required:true}"/>
							<input type="hidden" id="lat_search" value="" name="lat_search"/>
							<input type="hidden" id="long_search" value="" name="long_search"/>
						</div>
						<div class="form-group">
							<label class="control-label" for="radius"><?php echo __('Radius') ?></label>
							<input type="text" name="radius" id="radius"
								   value="<?php echo $this->getRequest()->getParam('radius') ?>"
								   title="<?php echo __('Radius') ?>" class="input-text"
								   placeholder="<?php echo __('Kilomet') ?>"
								   data-validate="{required:true}"/>
						</div>
						<div class="form-action">
							<button class="action btn btn-primary" title="<?php echo __('Search') ?>" id="search_radius" type="button"><span><?php echo __('Search') ?></span></button>
						</div>
					</div>
				</form>
			</div>
		</div>
    </div>
</div>

<?php $_StoreCollection = $this->getStoreCollection(); ?>
<?php $totalStoreCount = count($_StoreCollection); ?>
<div class="store-list-container">
    <div class="row">
        <div class="col-md-4 col-sm-12 col-xs-12">
            <div class="store-list">
                <div class="block-title">
					<h3 class="title"><span><?php echo __('Store List') ?></span></h3>
				</div>
                <div class="items">
                    <?php if (!$totalStoreCount): ?>
                        <div class="message warning"><div><?php echo __('There are no stores.') ?></div></div>
                    <?php else: ?>
                        <ul class="stores">
                            <?php $i = 0;
                            foreach ($_StoreCollection as $store): $i++; ?>
                                <?php $storeNameMarker = str_replace("'","-therearenostores-",$store->getName()); ?>
                                <?php $markers[$i]['name'] = '<div class="map-short-info"><h3>' . $storeNameMarker . '</h3><p>'; ?>
                                <?php $markers[$i]['lat'] = $store->getLat(); ?>
                                <?php $markers[$i]['long'] = $store->getLng(); ?>
                                <li>
									<div class="store-infor">
										<div class="store-content">
											<a class="store-logo" title="<?php echo $store->getName(); ?>" href="<?php echo $block->getUrl('locator/index/view', ['id' => $store->getId()]); ?>">
												<img class="img-responsive" src="<?php echo $this->getImageUrl($store->getImage()) ?>" alt="<?php echo $store->getName(); ?>"/>
											</a>
											<div class="description">
												<h4>
													<a href="<?php echo $block->getUrl('locator/index/view', ['id' => $store->getId()]); ?>"><?php echo $store->getName() ?></a>
												</h4>

												<p>
													<?php echo $store->getStreetAddress() ?>, <?php echo $store->getCity() ?>, <?php echo $store->getState(); ?>, <?php echo __('Zip Code: %1', $store->getZipcode()) ?>, <?php echo $store->getCountry(); ?>
													<?php $markers[$i]['name'] .= $store->getStreetAddress(); ?>
													<?php $markers[$i]['name'] .= ' ' . $store->getCity(); ?>
													<?php $markers[$i]['name'] .= ' ' . $store->getState(); ?>
													<?php $markers[$i]['name'] .= ' ' . $store->getZipcode(); ?>
													<?php $markers[$i]['name'] .= ' ' . $store->getCountry(); ?>
												</p>

												<?php $markers[$i]['name'] .= '</p>'; ?>

												<?php if ($store->getPhoneNumber()): ?>
													<p><?php echo __('Phone: %1', $store->getPhoneNumber()) ?></p>

													<?php $markers[$i]['name'] .= '<p>' . __('Phone: ') . '<a href="tel:' . $store->getPhoneNumber() . '">' . $store->getPhoneNumber() . '</a></p>'; ?>
												<?php endif; ?>

												<?php $markers[$i]['name'] .= '<p><a href="' . $block->getUrl('locator/index/view', ['id' => $store->getId()]) . '">' . __('Details') . '</a></p>'; ?>

												<?php $markers[$i]['name'] .= '</div>'; ?>

												<?php $storeName = $store->getName(); ?>
												<?php $storeLat = $store->getLat(); ?>
												<?php $storeLong = $store->getLng(); ?>
												<?php $storeRadius = $this->getRadius($store); ?>
												<?php $storeZoomLevel = $this->getZoomLevel($store); ?>
												<?php if ($storeLat && $storeLong): ?>
													<button
														onclick="initializeMap(<?php echo $storeLat; ?>, <?php echo $storeLong; ?>, <?php echo $storeRadius; ?>,'<?php echo str_replace('"', '-quotation-', $markers[$i]['name']); ?>', 'store-list-map');"
														class="action btn btn-primary btn-xs" title="<?php echo __('View Map') ?>" type="button">
														<span>
														<?php echo __('View Map') ?>
														</span>
													</button>
												<?php endif; ?>
											</div>
										</div>
									</div>
                                </li>
                            <?php endforeach ?>
                        </ul>
                    <?php endif ?>
                </div>
            </div>
			<?php if($this->getPager()): ?>
				<div class="bottom-pagination">
					<div class="toolbar">
						<?php echo $this->getPager() ?>
					</div>
				</div>
			<?php endif ?>
        </div>
        <div class="col-md-8 col-sm-12 col-xs-12">
            <?php if ($totalStoreCount): ?>
                <div>
                    <div id="store-list-map">&nbsp;</div>
                </div>
            <?php if (is_array($markers) && count($markers) > 0) : ?>
                <script>
                    //<![CDATA[
                    var markers = [
                        <?php foreach ($markers as $marker) : ?>
                        ['<?php echo $marker['name'];?>', <?php echo $marker['lat'];?>, <?php echo $marker['long'];?>],
                        <?php endforeach ?>
                        <?php if($this->getRequest()->getParam('lat_search') && $this->getRequest()->getParam('long_search')): ?>
                        //['<?php echo __('Your Location');?>',<?php echo $this->getRequest()->getParam('lat_search'); ?>,<?php echo $this->getRequest()->getParam('long_search') ;?>],
                        <?php endif ?>
                    ];
                    //]]>
                </script>
            <?php endif ?>
                <div id="show-all-store" class="text-right padding-top30">
                    <button onclick="drawMap(markers, googleMapDivId);" class="btn btn-lg btn-secondary"
                            title="<?php echo __('Show All Stores') ?>" type="button">
                    <span>
                        <?php echo __('Show All Stores') ?>
                    </span>
                    </button>
                </div>
            <?php endif ?>
        </div>
    </div>
</div>
<script type="text/javascript">
    var googleMapDivId = 'store-list-map';
    require(['jquery', 'MGS_StoreLocator/js/storelocator'], function ($) {
        $(window).load(function () {
            <?php if($totalStoreCount): ?>
				<?php if($this->getRequest()->getParam('lat_search') && $this->getRequest()->getParam('long_search')): ?>
					google.maps.event.addDomListener(window, 'load', drawMapWithCircle(markers, googleMapDivId, <?php echo $this->getRequest()->getParam('lat_search') ?>, <?php echo $this->getRequest()->getParam('long_search') ?>, <?php echo $this->getRequest()->getParam('radius') ?>));
				<?php else: ?>
					google.maps.event.addDomListener(window, 'load', drawMap(markers, googleMapDivId, false, false));
				<?php endif ?>
			<?php endif ?>

            $('#search_radius').click(function(){
                var $form = $('#search_by_distance');
                if ($form.valid()) {
                    $.ajax({
                        type: "GET",
                        dataType: "json",
                        url: "https://maps.googleapis.com/maps/api/geocode/json",
                        data: {'address': $('#location').val(),'sensor':false},
                        success: function(data){
                            if(data.results.length){
                                latitude = data.results[0].geometry.location.lat;
                                longitude = data.results[0].geometry.location.lng;
                                $('#lat_search').val(latitude);
                                $('#long_search').val(longitude);

                                $("#search_by_distance").submit();
                            }
                        }
                    });
                }
            });
        });

    });
</script>

