File: /storage/v4513/ivenusin/public_html/wp-content/themes/ivenus/page-service-center-new.php
<?php
/* Template Name: Service Center new */
get_header();
global $post;
$page_title = $post->post_title;
$state_list = array(
'Gujarat' => array(
'Ahmedabad', 'Amreli District', 'Anand', 'Banaskantha', 'Bharuch', 'Bhavnagar', 'Dahod', 'The Dangs', 'Gandhinagar','Gandhidham','Jamnagar', 'Junagadh', 'Kutch', 'Kheda', 'Mehsana', 'Narmada', 'Navsari', 'Patan', 'Panchmahal', 'Porbandar', 'Rajkot', 'Sabarkantha', 'Surendranagar', 'Surat', 'Vadodara', 'Valsad','Vapi'
),
'Maharashtra' => array(
'Ahmednagar', 'Akola', 'Amrawati', 'Aurangabad', 'Bhandara', 'Beed', 'Buldhana', 'Chandrapur', 'Dhule', 'Gadchiroli', 'Gondiya', 'Hingoli', 'Jalgaon', 'Jalna', 'Kolhapur', 'Latur', 'Mumbai', 'Nandurbar', 'Nanded', 'Nagpur', 'Nashik', 'Osmanabad', 'Parbhani', 'Pune', 'Raigad', 'Ratnagiri', 'Sindhudurg', 'Sangli', 'Solapur', 'Satara', 'Thane', 'Wardha', 'Washim', 'Yavatmal'
)
);
$states_names_arr = array_keys($state_list);
global $post;
$scargs = array(
'posts_per_page' => -1,
'post_type' => 'service_center',
'orderby' => 'menu_order',
'post_status' => 'publish'
);
$scquery = new WP_Query($scargs);
if ( $scquery->have_posts() ) {
while ( $scquery->have_posts() ) : $scquery->the_post();
$sc_queried_object = get_queried_object();
$address = get_field( 'address',$post->ID );
$phone_number = get_field( 'phone_number',$post->ID );
$mobile_number = get_field( 'mobile_number',$post->ID );
$email_id = get_field( 'email_id',$post->ID );
$timings = get_field( 'timings',$post->ID );
$address_for_map = get_field( 'address_for_map',$post->ID );
$address_arr['store_name'][] = $post->post_title;
$address_arr['store_slug'][] = $post->post_name;
$address_arr['address'][] = $address_for_map['address'];
$address_arr['phone_number'][] = $phone_number;
$address_arr['mobile_number'][] = $mobile_number;
$address_arr['email_id'][] = $email_id;
$address_arr['timings'][] = $timings;
$address_arr['country'][] = $address_for_map['country'];
$address_arr['state'][] = $address_for_map['state'];
$address_arr['city'][] = $address_for_map['city'];
$address_arr['allcity'][] = $address_for_map['city'];
/*$address_arr['lat'][] = $address_for_map['lat'];
$address_arr['long'][] = $address_for_map['lng'];*/
endwhile;
wp_reset_postdata();
}
/*$address_arr['state'] = array_unique($address_arr['state']);
$address_arr['city'] = array_unique($address_arr['city']);
*/
/*echo '<pre>';
print_r($address_arr);
echo '</pre>';
*/
?>
<main class="main">
<nav aria-label="breadcrumb" class="breadcrumb-nav">
<div class="container d-flex align-items-center">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="<?php echo SITE_URL; ?>">Home</a></li>
<li class="breadcrumb-item active" aria-current="page"><?php echo $page_title; ?></li>
</ol>
</div><!-- End .container -->
</nav>
<div class="page-content">
<div class="cart store-locator">
<div class="row mb-4">
<div class="col-lg-12">
<img src="https://ivenus.in/wp-content/uploads/2022/03/Care-Header.jpg">
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-3">
<h1 class="mb-4">Authorised Service Center</h1>
<div id="accordion">
<div class="card">
<?php
$s = 1;
foreach($state_list as $key=>$value) {
if(in_array($key,$address_arr['state'])) { ?>
<div class="card-header" id="heading-<?php echo $s; ?>">
<h5 class="mb-0">
<a role="button" data-toggle="collapse" href="#collapse-<?php echo $s; ?>" aria-expanded="true" aria-controls="collapse-<?php echo $s; ?>">
<?php echo $key; ?>
</a>
</h5>
</div>
<div id="collapse-<?php echo $s; ?>" class="collapse show" data-parent="#accordion" aria-labelledby="heading-<?php echo $s; ?>">
<div class="card-body">
<div id="accordion-<?php echo $s; ?>">
<?php
$c = 1;
foreach($value as $city_val) {
if(in_array($city_val,$address_arr['city'])) { ?>
<div class="card">
<div class="card-header" id="heading-<?php echo $s; ?>-<?php echo $c; ?>">
<h5 class="mb-0">
<a class="collapsed" role="button" href="/service-center/apple-authorised-service-center-<?php echo $city_val; ?>">
<?php echo $city_val; ?>
</a>
</h5>
</div>
<div id="collapse-<?php echo $city_val; ?>" class="citycollapse collapse" data-parent="#accordion-<?php echo $s; ?>" aria-labelledby="heading-<?php echo $s; ?>-<?php echo $c; ?>">
<div class="card-body">
<div id="accordion-<?php echo $s; ?>-<?php echo $c; ?>">
<?php
$a = 0;
foreach($address_arr['store_name'] as $store_name) {
if( $address_arr['allcity'][$a] == $city_val ) { ?>
<div class="card">
<div class="card-header">
<h5 class="">
<a class="storeanchor" id="<?php echo $address_arr['store_slug'][$a]; ?>" href="javascript:void(0);"><?php echo $store_name; ?></a>
</h5>
</div>
</div>
<?php
}
$a++;
} ?>
</div>
</div>
</div>
</div>
<?php
$c++; }
} ?>
</div>
</div>
</div>
<?php
//$s++;
} } ?>
</div>
</div>
</div>
<?php
if ( $scquery->have_posts() ) {
$f = 0;
while ( $scquery->have_posts() ) : $scquery->the_post();
$sc_queried_object = get_queried_object();
$address = get_field( 'address',$post->ID );
$phone_number = get_field( 'phone_number',$post->ID );
$mobile_number = get_field( 'mobile_number',$post->ID );
$email_id = get_field( 'email_id',$post->ID );
$timings = get_field( 'timings',$post->ID );
$address_for_map = get_field( 'address_for_map',$post->ID );
$final_address = $address_for_map['address'];
$booking_form_id = get_field( 'booking_form_id',$post->ID );
$address_arr['store_name'][] = $post->post_title;
$store_image = get_field('store_image', $post->ID);
$team_image = get_field('team_image', $post->ID);
/*$address_arr['lat'][] = $address_for_map['lat'];
$address_arr['long'][] = $address_for_map['lng'];
*/
?>
<?php
if ( $phone_number == "9712005317" ) {
//echo "Amit";
?>
<div class="col-lg-9 map_parent_div" id="ivenus-apple-premium-reseller-sindhu-bhavan-road_div" style="display: none;">
<?php /* <div class="col-lg-9 map_parent_div" id="<?php echo $post->post_name; ?>_div" style="display: none;"> */ ?>
<!--<div class="map-section">
<div id="map<?php echo $f; ?>" class="location-map" style="height: 300px; width:100%;">
<iframe src="https://www.google.com/maps?q=<?php echo $final_address; ?>&output=embed" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</div>
</div>-->
<style>
#storeImg, #teamImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#storeImg:hover, #teamImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close1, .close2 {
position: absolute;
top: 75px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close1:hover,
.close1:focus,
.close2:hover,
.close2:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
<div class="map-section">
<?php if(!empty($team_image['url']) && !empty($store_image['url'])) { ?>
<div class="row">
<div class="col-sm-6 store-img-div mb-4 mb-md-0">
<img id="storeImg" src="<?php echo $store_image['url']; ?>">
<div id="storeImgModal" class="modal">
<span class="close1">×</span>
<img class="modal-content" id="storeimg01">
</div>
</div>
<div class="col-sm-6 team-img-div mb-4 mb-md-0">
<img id="teamImg" src="<?php echo $team_image['url']; ?>">
<div id="teamImgModal" class="modal">
<span class="close2">×</span>
<img class="modal-content" id="teamimg01">
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("storeImgModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("storeImg");
var modalImg = document.getElementById("storeimg01");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close1")[0];
console.log(span);
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// Get the modal
var teamModal = document.getElementById("teamImgModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var teamImg = document.getElementById("teamImg");
var teamModalImg = document.getElementById("teamimg01");
teamImg.onclick = function(){
teamModal.style.display = "block";
teamModalImg.src = this.src;
}
// Get the <span> element that closes the modal
var teamSpan = document.getElementsByClassName("close2")[0];
// When the user clicks on <span> (x), close the modal
teamSpan.onclick = function() {
teamModal.style.display = "none";
}
</script>
</div>
<?php } else { ?>
<div id="map<?php echo $f; ?>" class="location-map" style="height: 300px; width:100%;">
<iframe src="https://www.google.com/maps?q=<?php echo $final_address; ?>&output=embed" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</div>
<?php } ?>
</div>
<div class="store-details" style="margin-top: 20px;">
<div class="row">
<div class="col-sm-7">
<h5 class="mb-3"><?php echo $post->post_title; ?></h5>
<div class="address data"><i class="fal fa-map-marked"></i> <p><?php echo $address; ?></p></div>
<div class="phone data"><i class="fal fa-phone"></i> <p><a href="tel:<?php echo $phone_number; ?>"><?php echo$phone_number; ?></a></p></div>
<?php if($mobile_number != "") { ?><div class="phone data"><i class="fal fa-phone"></i> <p><a href="tel:<?php echo $mobile_number; ?>"><?php echo$mobile_number; ?></a></p></div> <?php } ?>
<div class="email data"><i class="fal fa-envelope"></i> <p><a href="mailto:<?php echo $email_id; ?>"><?php echo $email_id; ?></a></p></div>
<div class="time data"><i class="fal fa-clock"></i> <p><?php echo $timings; ?></p></div>
</div>
<div class="col-sm-4 ml-auto">
<!--<a href="https://www.google.com/maps/search/?api=1&query=<?php echo $address_for_map['lat']; ?>,<?php echo $address_for_map['lng']; ?>&query_place_id=<?php echo $address_for_map['place_id']; ?>" target="_blank" class="store-action">Get Direction</a>-->
<a href="https://www.google.com/maps/search/?api=1&query=<?php echo $post->post_title; ?><?php echo $final_address; ?>" target="_blank" class="store-action">Get Direction</a>
<?php if(!empty($booking_form_id)) { ?>
<a href="https://getsupport.apple.com/" class="store-action" target="_blank">Book an appointment</a>
<?php } else { ?>
<a href="https://getsupport.apple.com/" class="store-action" target="_blank">Book an appointment</a>
<?php /* <a href="<?php echo SITE_URL; ?>/book-an-appointment/" class="store-action" target="_blank">Book an appointment</a> */?>
<?php } ?>
<a href="tel:<?php echo $phone_number; ?>" class="store-action">Call now</a>
</div>
</div>
</div>
</div>
<?php } ?>
<script type="text/javascript">
jQuery(document).ready(function($) {
var show_anchor = '<?php echo $post->post_name; ?>';
var show_div = '<?php echo $post->post_name; ?>'+'_div';
$("#"+show_anchor).click(function() {
$("a.storeanchor").first().removeClass("active");
$("a.storeanchor").each(function() {
$(this).removeClass("active");
});
$("#"+show_anchor).addClass("active");
$('.map_parent_div').each(function() {
$(this).hide();
});
$("#"+show_div).show();
});
});
</script>
<?php
$f++;
endwhile;
wp_reset_postdata();
}
?>
</div>
<div class="row">
<dic class="col-md-12">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post();
the_content();
endwhile; else: ?>
<p>Sorry, no posts matched your criteria.</p>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>
</main>
<?php get_footer(); ?>
<script type="text/javascript">
jQuery(document).ready(function($) {
$("a.storeanchor").first().addClass("active");
var first_store_div = $("a.storeanchor").first().attr('id');
$("#"+first_store_div+"_div").show();
//$(".citycollapse").first().addClass("show");
$("[data-target]").click(function() {
window.history.pushState(
null,
null,
'?data-target=' + $(this).data('target').replace('#', '')
);
});
});
</script>
<?php
/* var lat_arr = JSON.parse("<?php echo json_encode($address_arr['lat']); ?>");
var long_arr = JSON.parse("<?php echo json_encode($address_arr['long']); ?>");
var store_arr = JSON.parse('<?php echo json_encode($address_arr["store_name"]); ?>');
function initialize() {
for(var i = 0; i<=lat_arr.length ; i++) {
var myLatlng = new google.maps.LatLng(lat_arr[i], long_arr[i]);
var myOptions = {
zoom: 17,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"+i), myOptions);
//console.log(store_arr[i]);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: store_arr[i]
});
var contentString = '<div id="content">'+store_arr[i]+'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
infowindow.open(map,marker);
}
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://maps.google.com/maps/api/js?key=AIzaSyDb-eEBgnRCrjero0g5PywtZMZIeTfmERQ&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
*/ ?>