<div class="row"> <div class="col-xs-12"> <h4 class="text-uppercase"><?php echo trans('website.labels.shipping-address'); ?> &nbsp; <span class="info">(<?php echo trans('website.labels.select-shipping-postbox'); ?>)</span></h4> </div> </div> <div class="shipment-postbox"> <div class="row form-group <?php echo $errors->order->has('shipment_country') ? 'has-error' : ''; ?>"> <div class="col-xs-2"> <?php echo Form::label('shipment_country', trans('website.fields.country').":"); ?> <i class="required">*</i> </div> <div class="col-xs-4"> <?php echo Form::select('shipment_country', $shipment->orderCountries->map(function($orderCountry) use ($language) { return ['code' => $orderCountry->code, 'title' => $orderCountry->title($language->id)]; })->keyBy('code')->lists('title', 'code'), Session::get('order.shipment_country')); ?> </div> <?php echo $errors->order->first('shipment_country', '<div class="col-xs-6"><span class="help-block">:message</span></div>'); ?> </div> <div class="row form-group <?php echo $errors->order->has('shipment_city') ? 'has-error' : ''; ?>"> <div class="col-xs-2"> <?php echo Form::label('shipment_city', trans('website.fields.city').":"); ?> <i class="required">*</i> </div> <div class="col-xs-4"> <?php echo Form::select('shipment_city', $shipment_postbox_city_options, in_array(Session::get('order.shipment_city'), $shipment_postbox_city_options) ? Session::get('order.shipment_city') : null); ?> </div> <?php echo $errors->order->first('shipment_city', '<div class="col-xs-6"><span class="help-block">:message</span></div>'); ?> </div> <div class="row form-group <?php echo $errors->order->has('shipment_street') ? 'has-error' : ''; ?>"> <div class="col-xs-2"> <?php echo Form::label('shipment_street', trans('website.fields.street').":"); ?> <i class="required">*</i> </div> <div class="col-xs-4"> <?php echo Form::select('shipment_street', $shipment_postbox_street_options, in_array(Session::get('order.shipment_street'), $shipment_postbox_street_options) ? Session::get('order.shipment_street') : null); ?> <?php echo HTML::image('img/loading.gif', null, ['class' => 'loading streets']); ?> </div> <?php echo $errors->order->first('shipment_street', '<div class="col-xs-6"><span class="help-block">:message</span></div>'); ?> </div> <div class="row form-group"> <div class="col-xs-12"> <div id="map" style="width: 100%; height: 550px;"></div> <script src="https://maps.googleapis.com/maps/api/js?key=<?php echo Config::get('website.google.key'); ?>"></script> </div> </div> </div> <?php $__env->startSection('scripts'); ?> @parent var map = null; var post_box = null; var zoom = 16; var infos = []; var markers = []; var post_boxes = []; var url = '<?php echo route('postbox-streets'); ?>'; var labels = <?php echo json_encode(array_merge(range('A', 'Z'), range('0', '99'))); ?>; $(document).ready(function() { $('form select[name="shipment_city"]').on('change', function(event) { infos = []; markers = []; var city = $(this).val(); var street = null; $('.loading.streets').addClass('active'); $('form select[name=shipment_street]').attr('readonly', true); $.ajax({ url: url, type: 'GET', data: {city:city}, success: function(response) { post_boxes = response.post_boxes; street = $('form select[name=shipment_street]').val(); $('form select[name=shipment_street]').attr('readonly', false); $('form select[name=shipment_street]').find('option').remove(); $.each(post_boxes, function(index, value) { $('form .loading.streets').removeClass('active'); $('form select[name=shipment_street]').append($('<option></option>').val(value['street']).html(value['street'])); }); post_box = post_boxes.filter(function(post_box) { return post_box['street'] == street; }); if (!post_box.length) { post_box = Object.keys(post_boxes).length ? [post_boxes[Object.keys(post_boxes)[0]]] : []; } $('form select[name="shipment_street"]').val(post_box[0]['street']); if (post_box.length) { map = new google.maps.Map(document.getElementById('map'), { map: '1owC8dTxizmzd3fxkAm7VZRGiQ-E', center: {lat: parseFloat(post_box[0]['gpsn']), lng: parseFloat(post_box[0]['gpse'])}, zoom: 13, scrollwheel: false, mapTypeControl: false, zoomControl: true, zoomControlOptions: { position: google.maps.ControlPosition.RIGHT_BOTTOM }, streetViewControl: true, fullscreenControl: true }); $.each(post_boxes, function(key, value) { var info = new google.maps.InfoWindow({content: '<div id="content"><h6>' + value['name'] + '</h6><div id="bodyContent"><p>' + value['street'] + ', ' + value['postcode'] + ' ' + city + '</p><p>' + String(value['opening_hours']).replace(/;/g, '<br>') + '</p></div></div>'}); var marker = new google.maps.Marker({position: {lat: parseFloat(value['gpsn']), lng: parseFloat(value['gpse'])}, label: { text: String(labels[key]), color: "#ffffff", fontWeight: "bold"}, title: value['name'], map: map}); marker.addListener('click', function() { if (!$('form select[name="shipment_street"] option[value="' + value['street'] + '"]').is(':selected')) { $.each(infos, function(index, info) { info.close(); }); $('form select[name="shipment_street"]').val(value['street']).change(); } info.open(map, marker); }); infos.push(info); markers.push(marker); }); } } }); }); $('form select[name="shipment_street"]').on('change', function(event) { var city = $('form select[name="shipment_city"]').val(); var street = $('form select[name="shipment_street"]').val(); var post_box = post_boxes.filter(function(post_box) { return post_box['street'] == street; }); if (post_box.length) { map.setCenter({lat: parseFloat(post_box[0]['gpsn']), lng: parseFloat(post_box[0]['gpse'])}); map.setZoom(16); } }); if ($('form select[name="shipment_city"]').val()) { $('form select[name="shipment_city"]').trigger('change'); } }); <?php $__env->stopSection(); ?>