<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
    {% include "theme::partials/metadata" %}
    {{ asset_add("storeLocator.css", "theme::css/scroll.css") }}
    {{ asset_add("storeLocator.css", "theme::css/chosen.css") }}
    {{ asset_style("storeLocator.css", ["min"]) }}

    <link rel="stylesheet" media="screen and (min-device-width: 320px) and (max-device-width: 860px)" href="{{ asset_url("theme::css/hamburgers.css") }}">
</head>
<body>

{% include "theme::partials/navigation" %}

<section class="grid-container full columns">
	<section class="cell studio-event storeBanner fujiInspiring no-padding columns">
        <section class="grid-x">
           <div class="specialBanner bannerStore nopaci heightMid columns small-12 cell">
              <img src="{{ image('theme::img/remove/storeLocatorBanner.jpg').fit(1920, 364).url() }}" alt=""/><!-- 1366 × 352 -->
              
              <div class="caption">
                 <div class="sizeCenterElm">
                    <div class="boxSize">
                       <h1 class="titleCaption">
                          {{ trans('theme::store_locator.where_to_buy') }}
                       </h1>
                       <span class="titlefeature">{{ trans('theme::store_locator.find_dealer') }}</span>
                    </div>
                 </div>
              </div>
           </div><!-- END specialBanner // satu Banner Besar -->
        </section>
    </section>
    <section class="grid-x">

        <section class="storeLocator cell">
            <div class="grid-x">
                <div class="small-12 medium-5 large-3 cell storeLeftBlock">
                  <div class="alamatStore"></div>
                  {# <h3>Head Office</h3>
                  <span class="address">
                  	88 @KASABLANKA building <br>
        						Tower A, 36th Floor, Unit A, B &amp; C <br>
        						Jl. Casablanca Kav.88 <br>
        						Jakarta Selatan 12870 <br>
        						Indonesia <br>
        					</span>
        					<span class="address">
        						<strong>Phone</strong> <br>
        						+62-21 2128 2182 <br>
        						<strong>Fax</strong> <br>
        						+62-21 2128 2183 <br>
        					</span>
        					<span class="address">
        						<strong>Operational Hour</strong> <br>
        						10.00–22.00
        					</span> #}
        					<div class="searchLocator">
                    <h2 class="namehighlight">{{ trans('theme::store_locator.city') }}</h2>
                    <p>{{ trans('theme::store_locator.sub_city') }}</p>
        						<form action="" id="wrapper">
                      {# <div id="jqxWidget">
                        <label for="cityLocation">City</label>
                        <div id="cityLocation" class="combobox">
                        </div>
                        <label for="storeLocation">Store</label>
                        <div id="storeLocation" class="combobox">
                        </div>
                      </div> #}
                      {# <input type="text" name="city" list="city" placeholder="City" data-list-focus="true">
                      <datalist id="city">
                        <select>
                          <option value="Jakarta">Jakarta</option>
                          <option value="Bandung">Bandung</option>
                        </select>
                      </datalist>
                      <input type="text" name="store" list="store" placeholder="store" data-list-focus="true">
                      <datalist id="store">
                        <select>
                          <option value="Fuji Mart">Fuji Mart</option>
                          <option value="Warung Fuji">Warung Fuji</option>
                          <option value="Alfa Fuji">Alfa Fuji</option>
                        </select>
                      </datalist> #}

                      <select data-placeholder="{{ trans('theme::store_locator.choose_city') }}" class="chosen-select provinsidealer" tabindex="2">
                        <option value=""></option>
                          {% for city in entries('master', 'city').orderBy('name', 'asc').get() %}
                              <option value="{{ city.id }}">{{ city.name }}</option>
                          {% endfor %}
                      </select>

                    <h2 class="namehighlight">{{ trans('theme::store_locator.dealer') }}</h2>
                    <p>{{ trans('theme::store_locator.sub_dealer') }}</p>
                      <select data-placeholder="{{ trans('theme::store_locator.choose_dealer') }}" class="kotadealer" tabindex="2">
                        <option value="">------</option>
                      </select>
        						</form>
        					</div>
                </div>
                <div class="small-12 medium-7 large-9 cell">
                    {#<img src="{{ image('theme::img/remove/map.jpg').url() }}" alt="">#}
                    <div id="map" style="height: 100%; width: 100%"></div>
                </div>

            </div>
        </section><!-- END homeNewsEvent -->

    </section>
</section>

{% include "theme::partials/footer" %}
{% include "theme::partials/scripts" %}

<script src="{{ asset_url("theme::js/combobox/chosen.jquery.js") }}"></script>
<script src="{{ asset_url("theme::js/combobox/prism.js") }}"></script>
<script src="{{ asset_url("theme::js/combobox/init.js") }}"></script>

<script type="text/javascript">
    global();
    $('.provinsidealer').change(function() {
        var propnya = $(this).val();
         $.ajax({
            url: '{{ url("city") }}/' + propnya + '/dealer', 
            type: 'GET',
            dataType: 'json',
            success: function(data) {
               var cities = data;
               $('.kotadealer').html('');
               $('.kotadealer').append($('<option>', {
                  value: '',
                  text: '{{ trans("theme::store_locator.choose_dealer") }}'
               }));
               for (var i = 0; i < cities.length; i++) {
                  $("<option />")
                     .text(cities[i]['name'])
                     .attr('value', cities[i]['id'])
                     .appendTo($('.kotadealer'));
               }
               

            },
            error: function(xhr, options, error) {
                var data = jQuery.parseJSON(xhr.responseText);
                alert(data.error.message);
             }
         });
      });

    $('.kotadealer').change(function() {
        var kotanya = $(this).val();
        $.ajax({
           url: '{{ url("dealer") }}/' + kotanya ,
           type: 'GET',
           dataType: 'json',
           success: function(data) {
              var cities = data;
              var $this = $('.alamatStore')
              var latLng = cities['maps_latitude'] + ', ' + cities['maps_longitude'] ;
              initialize(latLng);

              $this.html('');
              $this.append($(
              '<h3>' +
                cities['name'] +
              '</h3>' +
              '<span class="address">' +
                $(document.createElement('div')).html(cities['address']).text() +
              '</span> <br>' +
              '<span class="address">' +
                '<strong>{{ trans('theme::store_locator.phone') }}</strong> <br>' +
                cities['phone'] +
                '<br><br>' +
                '<strong>{{ trans('theme::store_locator.website') }}</strong> <br>' +
                cities['website'] +
                '<br>' +
              '</span>'  
              ));
           },
           error: function(xhr, options, error) {
               var data = jQuery.parseJSON(xhr.responseText);
               alert(data.error.message);
            }
        });
      });
    // <strong>Phone</strong> <br>
    // +62-21 2128 2182 <br>
    // <strong>Fax</strong> <br>
    // +62-21 2128 2183 <br>


</script>
<script>
      function initMap() {
        var marker;
        locationDealer();
        google.maps.event.addDomListener(window, 'load', locationDealer);
        initialize(latLng);
        google.maps.event.addDomListener(window, 'load', initialize);
      }

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAz6xRk2FkVbcyJkMHeaDmfEDZheBFpnXQ&callback=initMap" async defer></script>


</body>
</html>
