System Manager v8.0

Editing: location-details.php

<?php
include '../admin/includes/db.php';

/* Get city and slug from URL parameters */
$city = isset($_GET['city']) ? ucwords(str_replace('-', ' ', $_GET['city'])) : '';
$slug = isset($_GET['slug']) ? $_GET['slug'] : '';

if (empty($city) || empty($slug)) {
    http_response_code(404);
    include '../404.php';
    exit;
}

$city = mysqli_real_escape_string($conn, $city);
$slug = mysqli_real_escape_string($conn, $slug);

/* Fetch published page */
$result = mysqli_query($conn, "SELECT * FROM pages WHERE city='$city' AND slug='$slug' AND status='published'");

if (mysqli_num_rows($result) == 0) {
    http_response_code(404);
    include '../404.php';
    exit;
}

$page = mysqli_fetch_assoc($result);
$services = json_decode($page['services'], true) ?? [];

/* SEO Meta Fallbacks */
$metaTitle = !empty($page['meta_title']) ? $page['meta_title'] : $page['title'];
$metaDesc = !empty($page['meta_description']) ? $page['meta_description'] : substr(strip_tags($page['content']), 0, 160);
$currentUrl = "https://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
$featuredImageUrl = '';
if (!empty($page['featured_image'])) {
    $featuredImageUrl = "https://" . $_SERVER['HTTP_HOST'] . "/admin/uploads/page-images/" . $page['featured_image'];
}
?>
<!DOCTYPE html>
<html lang="en">

<title><?php echo htmlspecialchars($metaTitle); ?></title>
  <meta name="description" content="<?php echo htmlspecialchars($metaDesc); ?>" />
  <meta name="robots" content="index, follow">
  <link rel="canonical" href="<?php echo htmlspecialchars($currentUrl); ?>">

<meta property="og:title" content="<?php echo htmlspecialchars($metaTitle); ?>">
  <meta property="og:description" content="<?php echo htmlspecialchars($metaDesc); ?>">
  <meta property="og:type" content="website">
  <meta property="og:url" content="<?php echo htmlspecialchars($currentUrl); ?>">
  <meta property="og:site_name" content="Glorious Service">
  <?php if (!empty($featuredImageUrl)): ?>
    <meta property="og:image" content="<?php echo htmlspecialchars($featuredImageUrl); ?>">
    <meta property="og:image:secure_url" content="<?php echo htmlspecialchars($featuredImageUrl); ?>">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
  <?php endif; ?>

<meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="<?php echo htmlspecialchars($metaTitle); ?>">
  <meta name="twitter:description" content="<?php echo htmlspecialchars($metaDesc); ?>">
  <?php if (!empty($featuredImageUrl)): ?>
    <meta name="twitter:image" content="<?php echo htmlspecialchars($featuredImageUrl); ?>">
  <?php endif; ?>

body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      color: #333;
    }

/* Hero Section */
    .hero-section {
      background: linear-gradient(135deg, var(--primary) 0%, #003fa8 100%);
      color: white;
      padding: 60px 0;
      text-align: center;
    }

.hero-section h1 {
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 15px;
    }

.hero-section .breadcrumb {
      background: transparent;
      margin-top: 20px;
      justify-content: center;
    }

.hero-section .breadcrumb a {
      color: rgba(255, 255, 255, 0.9);
      text-decoration: none;
    }

.hero-section .breadcrumb-item.active {
      color: rgba(255, 255, 255, 0.7);
    }

.city-badge {
      display: inline-block;
      background: rgba(255, 255, 255, 0.2);
      padding: 8px 16px;
      border-radius: 25px;
      margin-bottom: 20px;
      font-size: 0.95rem;
    }

/* Main Content */
    .content-wrapper {
      padding: 60px 0;
    }

.featured-image {
      width: 100%;
      max-width: 100%;
      border-radius: 12px;
      margin: 30px 0;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

.blog-content {
      font-size: 1.05rem;
      line-height: 1.9;
      color: #333;
    }

.blog-content h2,
    .blog-content h3 {
      color: var(--primary);
      margin-top: 30px;
      margin-bottom: 15px;
      font-weight: 700;
    }

.blog-content p {
      margin-bottom: 15px;
    }

/* Sidebar */
    .sidebar-box {
      background: var(--secondary);
      padding: 30px;
      border-radius: 12px;
      border-left: 4px solid var(--primary);
      margin-bottom: 20px;
    }

.sidebar-box h4 {
      color: var(--primary);
      margin-bottom: 20px;
      font-weight: 700;
    }

.sidebar-box p {
      margin: 10px 0;
      font-size: 0.95rem;
    }

.sidebar-box a {
      color: #898d95;
      text-decoration: none;
      font-weight: 600;
    }

.sidebar-box a:hover {
      text-decoration: underline;
    }

/* Services Grid */
    .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 25px;
      margin: 50px 0;
    }

.service-card {
      background: white;
      border: 1px solid #eee;
      border-radius: 12px;
      padding: 30px;
      text-align: center;
      transition: all 0.3s ease;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      height: 100%;
    }

.service-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 8px 20px rgba(0, 82, 218, 0.15);
      border-color: var(--primary);
    }

.service-card .icon {
      font-size: 3rem;
      margin-bottom: 15px;
    }

.service-card h3 {
      color: var(--primary);
      font-weight: 600;
      margin: 15px 0;
    }

.service-card p {
      color: #666;
      font-size: 0.95rem;
      margin-bottom: 15px;
    }

.cta-button {
      background: var(--primary);
      color: white;
      padding: 12px 30px;
      border-radius: 6px;
      text-decoration: none;
      display: inline-block;
      margin-top: 20px;
      transition: all 0.3s ease;
      border: none;
      cursor: pointer;
    }

.cta-button:hover {
      background: #003fa8;
      color: white;
      transform: translateY(-2px);
      box-shadow: 0 6px 15px rgba(0, 82, 218, 0.3);
    }

/* Map Container */
    .map-container {
      border-radius: 12px;
      overflow: hidden;
      margin: 40px 0;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

.map-container iframe {
      width: 100%;
      height: 400px;
      border: none;
    }

.services-section {
      background: var(--secondary);
      padding: 60px 0;
      margin-top: 40px;
    }

.services-section h2 {
      color: var(--primary);
      font-weight: 700;
      text-align: center;
      margin-bottom: 40px;
    }

/* Gallery Section */
    .gallery-section {
      padding: 60px 0;
      background: white;
    }

.gallery-section h2 {
      color: var(--primary);
      font-weight: 700;
      text-align: center;
      margin-bottom: 40px;
    }

.gallery-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      margin: 0;
    }

.gallery-item {
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      transition: all 0.3s ease;
      cursor: pointer;
      background: white;
    }

.gallery-item:hover {
      transform: translateY(-8px);
      box-shadow: 0 8px 25px rgba(0,82,218,0.2);
    }

.gallery-item-image {
      width: 100%;
      height: 250px;
      object-fit: cover;
      transition: transform 0.3s ease;
      display: block;
    }

.gallery-item:hover .gallery-item-image {
      transform: scale(1.05);
    }

.gallery-item-caption {
      padding: 12px 15px;
      background: white;
      text-align: center;
      color: var(--primary);
      font-weight: 600;
      font-size: 0.9rem;
      border-top: 1px solid #f0f0f0;
    }

.gallery-item-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 82, 218, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s ease;
      border-radius: 12px 12px 0 0;
    }

.gallery-item:hover .gallery-item-overlay {
      opacity: 1;
    }

.gallery-item-overlay i {
      color: white;
      font-size: 2rem;
    }

/* Lightbox Modal */
    .lightbox {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.95);
      z-index: 10000;
      align-items: center;
      justify-content: center;
    }

.lightbox.active {
      display: flex;
    }

.lightbox-content {
      position: relative;
      max-width: 90%;
      max-height: 90vh;
      animation: zoomIn 0.3s ease;
    }

@keyframes zoomIn {
      from {
        transform: scale(0.8);
        opacity: 0;
      }
      to {
        transform: scale(1);
        opacity: 1;
      }
    }

.lightbox-content img {
      width: 100%;
      height: auto;
      max-height: 80vh;
      object-fit: contain;
      border-radius: 8px;
    }

.lightbox-close {
      position: absolute;
      top: -40px;
      right: 0;
      color: white;
      font-size: 2rem;
      cursor: pointer;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.5);
      border-radius: 50%;
      transition: all 0.3s ease;
    }

.lightbox-close:hover {
      background: rgba(0,0,0,0.8);
      transform: scale(1.1);
    }

.lightbox-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 2rem;
      color: white;
      cursor: pointer;
      background: rgba(0,0,0,0.5);
      padding: 10px 15px;
      border-radius: 6px;
      transition: all 0.3s ease;
      user-select: none;
    }

.lightbox-nav:hover {
      background: rgba(0,0,0,0.8);
      transform: translateY(-50%) scale(1.2);
    }

.lightbox-prev {
      left: 20px;
    }

.lightbox-next {
      right: 20px;
    }

.lightbox-caption {
      position: absolute;
      bottom: -40px;
      left: 0;
      right: 0;
      color: white;
      text-align: center;
      font-size: 1rem;
    }

.lightbox-counter {
      position: absolute;
      top: 20px;
      right: 20px;
      color: white;
      background: rgba(0,0,0,0.5);
      padding: 8px 15px;
      border-radius: 20px;
      font-size: 0.9rem;
    }

/* Floating Buttons */
    .floating-btn {
      position: fixed;
      width: 55px;
      height: 55px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: white;
      z-index: 9999;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
      transition: all 0.3s ease;
    }

.whatsapp-btn {
      background: #25D366;
      bottom: 20px;
      left: 20px;
    }

.call-btn {
      background: var(--primary);
      bottom: 20px;
      right: 20px;
    }

.floating-btn:hover {
      transform: scale(1.08);
    }

footer {
      background: #ffffff;
      border-top: 1px solid #eaeaea;
      padding: 60px 0 30px;
      font-size: 15px;
    }

.footer-title {
      color: var(--primary);
      margin-bottom: 15px;
      font-weight: 600;
    }

.footer-text {
      color: #333;
      line-height: 1.7;
    }

.footer-links,
    .footer-contact {
      list-style: none;
      padding: 0;
      margin: 0;
    }

.footer-links li,
    .footer-contact li {
      margin-bottom: 8px;
    }

.footer-links a {
      color: #333;
      text-decoration: none;
    }

.footer-links a:hover {
      color: var(--primary);
    }

.footer-contact i {
      color: var(--primary);
      margin-right: 8px;
    }

.footer-social a {
      display: inline-block;
      margin-right: 12px;
      color: var(--primary);
      font-size: 18px;
    }

.footer-divider {
      margin: 30px 0;
    }

.footer-copy {
      margin: 0;
      color: #333;
    }

@media (max-width: 768px) {
      .hero-section h1 {
        font-size: 1.8rem;
      }

.services-grid {
        grid-template-columns: 1fr;
      }

.gallery-grid {
        grid-template-columns: repeat(2, 1fr);
      }

.floating-btn {
        width: 50px;
        height: 50px;
        font-size: 20px;
      }

.lightbox-nav {
        padding: 8px 12px;
        font-size: 1.5rem;
      }

.lightbox-prev {
        left: 10px;
      }

.lightbox-next {
        right: 10px;
      }
    }

@media (max-width: 480px) {
      .gallery-grid {
        grid-template-columns: 1fr;
      }

.lightbox-content {
        max-width: 95%;
      }
    }
  </style>
</head>

<header class="header header-layout1">
      <div class="header-topbar">
        <div class="container-fluid">
          <div class="row align-items-center">
            <div class="col-12 d-flex align-items-center justify-content-between">
              <span class="topbar__text">
                <span class="colored__text"><i class="icon-alert"></i> Enjoy Our Hot Offers!</span>
                <span>Call for Free Estimate: +919760422337</span>
              </span>
              <div class="d-flex">
                <ul class="contact__list d-flex flex-wrap align-items-center list-unstyled mb-0">
                  <li>
                    <i class="icon-email"></i>
                    <a href="#">
                      <span>Email: </span> <span>enquiry@gloriousservice.com</span>
                    </a>
                  </li>
                </ul>
                <ul class="social-icons list-unstyled mb-0 ml-30">
                  <li><a href="https://www.facebook.com/share/1DRuo9siWB/"><i class="fab fa-facebook-f"></i></a></li>
                  <li><a href="https://www.instagram.com/gloriousservice"><i class="fab fa-instagram"></i></a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>

<nav class="navbar navbar-expand-lg sticky-navbar">
        <div class="container-fluid">
          <a class="navbar-brand" href="https://gloriousservice.com/index.php">
            <img src="https://gloriousservice.com/assets/images/logo/logo-light.png" class="logo-light" alt="logo">
            <img src="https://gloriousservice.com/assets/images/logo/logo-dark.png" class="logo-dark" alt="logo">
          </a>
          <button class="navbar-toggler" type="button">
            <span class="menu-lines"><span></span></span>
          </button>
          <div class="collapse navbar-collapse" id="mainNavigation">
            <ul class="navbar-nav mr-auto">
              <li class="nav__item">
                <a href="https://gloriousservice.com/index.php" class="nav__item-link">Home</a>
              </li>
              <li class="nav__item">
                <a href="https://gloriousservice.com/about-us.php" class="nav__item-link">About Us</a>
              </li>
              <li class="nav__item has-dropdown">
                <a href="#" data-toggle="dropdown" class="dropdown-toggle nav__item-link">Services</a>
                <ul class="dropdown-menu">
                  <li class="nav__item">
                    <a href="https://gloriousservice.com/cleaning.php" class="nav__item-link">Cleaning Service</a>
                  </li>
                  <li class="nav__item">
                    <a class="nav__item-link" href="https://gloriousservice.com/carpenter.php">Carpenter Service</a>
                  </li>
                  <li class="nav__item">
                    <a class="nav__item-link" href="https://gloriousservice.com/electrician.php">Electrician Service</a>
                  </li>
                  <li class="nav__item">
                    <a class="nav__item-link" href="https://gloriousservice.com/furniture.php">Furniture Service</a>
                  </li>
                  <li class="nav__item">
                    <a class="nav__item-link" href="https://gloriousservice.com/interior-design.php">Interior Design</a>
                  </li>
                  <li class="nav__item">
                    <a class="nav__item-link" href="https://gloriousservice.com/kitchen.php">Modular Kitchen</a>
                  </li>
                  <li class="nav__item">
                    <a class="nav__item-link" href="https://gloriousservice.com/painter.php">Painter Service</a>
                  </li>
                  <li class="nav__item">
                    <a class="nav__item-link" href="https://gloriousservice.com/plumber.php">Plumber Service</a>
                  </li>
                  <li class="nav__item">
                    <a class="nav__item-link" href="https://gloriousservice.com/waterprofing.php">Waterproofing Service</a>
                  </li>
                  <li class="nav__item">
                    <a class="nav__item-link" href="https://gloriousservice.com/web-development.php">Web Development</a>
                  </li>
                  <li class="nav__item">
                    <a class="nav__item-link" href="https://gloriousservice.com/welder.php">Welder Service</a>
                  </li>
                </ul>
              </li>
              <li class="nav__item">
                <a href="https://gloriousservice.com/location/" class="nav__item-link">Location</a>
              </li>
              <li class="nav__item">
                <a href="https://gloriousservice.com/blogs/index.php" class="nav__item-link">Blog</a>
              </li>
              <li class="nav__item">
                <a href="https://gloriousservice.com/contact-us.php" class="nav__item-link">Contact Us</a>
              </li>
            </ul>
            <button class="close-mobile-menu d-block d-lg-none"><i class="fas fa-times"></i></button>
          </div>
        </div>
      </nav>
    </header>

<section class="hero-section">
      <div class="container">
        <div class="city-badge">
          <i class="fas fa-map-marker-alt"></i> <?php echo htmlspecialchars($page['city']); ?>
        </div>
        <h1><?php echo htmlspecialchars($page['title']); ?></h1>
        <?php if (!empty($page['heading'])): ?>
          <p class="lead" style="font-size: 1.2rem;"><?php echo htmlspecialchars($page['heading']); ?></p>
        <?php endif; ?>

<nav aria-label="breadcrumb">
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="https://gloriousservice.com/">Home</a></li>
            <li class="breadcrumb-item"><a href="/location/">Location</a></li>
            <li class="breadcrumb-item"><a href="/location/<?php echo strtolower(str_replace(' ', '-', $page['city'])); ?>/"><?php echo htmlspecialchars($page['city']); ?></a></li>
            <li class="breadcrumb-item active"><?php echo htmlspecialchars($page['title']); ?></li>
          </ol>
        </nav>
      </div>
    </section>

<?php if (!empty($page['featured_image'])): ?>
      <div class="container" style="margin-top: 40px;">
        <img src="https://<?php echo $_SERVER['HTTP_HOST']; ?>/admin/uploads/page-images/<?php echo $page['featured_image']; ?>" alt="<?php echo htmlspecialchars($page['title']); ?>" class="featured-image">
      </div>
    <?php endif; ?>

<section class="content-wrapper">
      <div class="container">
        <div class="row">
          <div class="col-lg-8">
            <div class="blog-content">
              <?php echo $page['content']; ?>
            </div>
          </div>

<div class="col-lg-4">
            
            <div class="sidebar-box">
              <h4><i class="fas fa-phone-alt"></i> Get in Touch</h4>
              <p><strong>Phone:</strong></p>
              <a href="tel:+917906068123">+91 79060 68123</a>

<p style="margin-top: 15px;"><strong>Email:</strong></p>
              <a href="mailto:enquiry@gloriousservice.com">enquiry@gloriousservice.com</a>

<p style="margin-top: 15px;"><strong>Location:</strong></p>
              <p><?php echo htmlspecialchars($page['city']); ?> & surrounding areas</p>

<a href="https://wa.me/917906068123" class="cta-button" style="width: 100%; text-align: center; margin-top: 20px;">
                <i class="fab fa-whatsapp"></i> Chat on WhatsApp
              </a>
            </div>

<?php if (!empty($services)): ?>
              <div class="sidebar-box">
                <h4><i class="fas fa-check-circle"></i> Services Available</h4>
                <ul style="list-style: none; padding: 0; margin: 0;">
                  <?php
                  $service_names = [
                    'carpenter' => 'Carpenter',
                    'plumber' => 'Plumber',
                    'electrician' => 'Electrician',
                    'cleaning' => 'Cleaning',
                    'welder' => 'Welder',
                    'interior_designer' => 'Interior Design',
                    'cctv' => 'CCTV',
                    'furniture_assembly' => 'Furniture Assembly',
                    'painter' => 'Painter',
                    'waterproofing' => 'Waterproofing',
                    'kitchen' => 'Modular Kitchen',
                    'web_development' => 'Web Development'
                  ];

foreach ($services as $service):
                    if (isset($service_names[$service])):
                  ?>
                    <li style="margin-bottom: 8px;">
                      <i class="fas fa-check" style="color: #25D366;"></i>
                      <?php echo $service_names[$service]; ?>
                    </li>
                  <?php
                    endif;
                  endforeach;
                  ?>
                </ul>
              </div>
            <?php endif; ?>
          </div>
        </div>
      </div>
    </section>

<?php if (!empty($services)): ?>
      <section class="services-section">
        <div class="container">
          <h2>Our Professional Services in <?php echo htmlspecialchars($page['city']); ?></h2>

<div class="services-grid">
            <?php
            $service_info = [
              'carpenter' => ['🪛', 'Carpenter Services', 'Furniture repair, custom woodwork and installation services.'],
              'plumber' => ['🚰', 'Plumber Services', 'Leak repairs, pipe fitting, bathroom and kitchen plumbing.'],
              'electrician' => ['⚡', 'Electrician Services', 'Wiring, electrical repairs and appliance installation.'],
              'cleaning' => ['🧹', 'Cleaning Services', 'Home, office and deep cleaning solutions.'],
              'welder' => ['🔥', 'Welder Services', 'On site welding, metal fabrication and repairs.'],
              'interior_designer' => ['🎨', 'Interior Designer', 'Modern interior design for homes and offices.'],
              'cctv' => ['📹', 'CCTV Technician', 'CCTV installation, setup and maintenance.'],
              'furniture_assembly' => ['🛋️', 'Furniture Assembly', 'Assembly and installation of all furniture types.'],
              'painter' => ['🎭', 'Painter Services', 'Interior and exterior painting services.'],
              'waterproofing' => ['💧', 'Waterproofing', 'Roof, wall and bathroom waterproofing solutions.'],
              'kitchen' => ['🍳', 'Modular Kitchen', 'Customized modular kitchen design and installation.'],
              'web_development' => ['💻', 'Web Development', 'Website design and development services.']
            ];

foreach ($services as $service):
              if (isset($service_info[$service])):
                $info = $service_info[$service];
            ?>
              <div class="service-card">
                <div class="icon"><?php echo $info[0]; ?></div>
                <h3><?php echo $info[1]; ?></h3>
                <p><?php echo $info[2]; ?></p>
                <a href="tel:+917906068123" class="cta-button">Book Service</a>
              </div>
            <?php
              endif;
            endforeach;
            ?>
          </div>
        </div>
      </section>
    <?php endif; ?>

<?php if (!empty($page['gallery_images'])): 
      $gallery_images = json_decode($page['gallery_images'], true);
      if (!empty($gallery_images)):
    ?>
      <section class="gallery-section">
        <div class="container">
          <h2>
            <i class="fas fa-images"></i> Our Work Gallery
          </h2>
          
          <div class="gallery-grid">
            <?php
            $result = mysqli_query($conn, "SELECT * FROM page_gallery WHERE page_id=" . $page['id'] . " ORDER BY sort_order ASC");
            $gallery_index = 0;
            while ($gallery = mysqli_fetch_assoc($result)):
              $gallery_index++;
            ?>
              <div class="gallery-item" onclick="openLightbox(<?php echo $gallery_index; ?>)">
                <div style="position: relative;">
                  <img src="https://<?php echo $_SERVER['HTTP_HOST']; ?>/admin/uploads/page-images/<?php echo $gallery['image']; ?>" 
                       alt="<?php echo htmlspecialchars($gallery['caption']); ?>"
                       class="gallery-item-image"
                       data-full-src="https://<?php echo $_SERVER['HTTP_HOST']; ?>/admin/uploads/page-images/<?php echo $gallery['image']; ?>"
                       data-caption="<?php echo htmlspecialchars($gallery['caption']); ?>">
                  <div class="gallery-item-overlay">
                    <i class="fas fa-search-plus"></i>
                  </div>
                </div>
                <?php if (!empty($gallery['caption'])): ?>
                  <div class="gallery-item-caption"><?php echo htmlspecialchars($gallery['caption']); ?></div>
                <?php endif; ?>
              </div>
            <?php endwhile; ?>
          </div>
        </div>
      </section>

<div class="lightbox" id="lightbox">
        <div class="lightbox-content">
          <span class="lightbox-close" onclick="closeLightbox()">&times;</span>
          <img id="lightboxImage" src="" alt="Gallery" style="border-radius: 8px;">
          <span class="lightbox-nav lightbox-prev" onclick="prevGallery()">❮</span>
          <span class="lightbox-nav lightbox-next" onclick="nextGallery()">❯</span>
          <span class="lightbox-counter"><span id="currentSlide">1</span> / <span id="totalSlides">1</span></span>
          <div class="lightbox-caption" id="lightboxCaption" style="color: white; margin-top: 15px;"></div>
        </div>
      </div>

function openLightbox(index) {
          currentGalleryIndex = index - 1;
          const lightbox = document.getElementById('lightbox');
          const lightboxImage = document.getElementById('lightboxImage');
          const lightboxCaption = document.getElementById('lightboxCaption');
          
          const img = galleryImages[currentGalleryIndex];
          lightboxImage.src = img.getAttribute('data-full-src');
          lightboxCaption.textContent = img.getAttribute('data-caption') || '';
          document.getElementById('currentSlide').textContent = index;
          
          lightbox.classList.add('active');
          document.body.style.overflow = 'hidden';
        }

function closeLightbox() {
          document.getElementById('lightbox').classList.remove('active');
          document.body.style.overflow = 'auto';
        }

function nextGallery() {
          currentGalleryIndex = (currentGalleryIndex + 1) % totalSlides;
          updateLightbox();
        }

function prevGallery() {
          currentGalleryIndex = (currentGalleryIndex - 1 + totalSlides) % totalSlides;
          updateLightbox();
        }

function updateLightbox() {
          const img = galleryImages[currentGalleryIndex];
          document.getElementById('lightboxImage').src = img.getAttribute('data-full-src');
          document.getElementById('lightboxCaption').textContent = img.getAttribute('data-caption') || '';
          document.getElementById('currentSlide').textContent = currentGalleryIndex + 1;
        }

// Keyboard navigation
        document.addEventListener('keydown', function(e) {
          if (document.getElementById('lightbox').classList.contains('active')) {
            if (e.key === 'ArrowRight') nextGallery();
            if (e.key === 'ArrowLeft') prevGallery();
            if (e.key === 'Escape') closeLightbox();
          }
        });

// Close lightbox on background click
        document.getElementById('lightbox').addEventListener('click', function(e) {
          if (e.target === this) {
            closeLightbox();
          }
        });
      </script>
    <?php endif; endif; ?>

<?php if (!empty($page['google_map_link'])): ?>
  <section style="padding: 80px 0; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); position: relative; overflow: hidden;">
    
    
    <div style="position: absolute; top: -50px; right: -50px; width: 200px; height: 200px; background: rgba(0, 82, 218, 0.1); border-radius: 50%; z-index: 0;"></div>
    <div style="position: absolute; bottom: -80px; left: -80px; width: 300px; height: 300px; background: rgba(0, 82, 218, 0.05); border-radius: 50%; z-index: 0;"></div>

<h2 style="color: var(--primary); font-size: 2.2rem; font-weight: 700; margin: 0 0 15px 0;">
          Find Us in <?php echo htmlspecialchars($page['city']); ?>
        </h2>

<p style="color: #666; font-size: 1.05rem; margin: 0 0 40px 0; line-height: 1.6;">
          Click below to view our location on Google Maps
        </p>

<a href="<?php echo htmlspecialchars($page['google_map_link']); ?>" 
           target="_blank" 
           rel="noopener noreferrer"
           style="display: inline-block; padding: 16px 50px; background: linear-gradient(135deg, #0052da 0%, #003fa8 100%); color: white; text-decoration: none; border-radius: 50px; font-weight: 600; font-size: 1.1rem; box-shadow: 0 8px 25px rgba(0, 82, 218, 0.3); transition: all 0.3s ease; border: none; cursor: pointer; margin-bottom: 50px;">
          <i class="fas fa-directions" style="margin-right: 10px;"></i> View On Google Maps
        </a>

<div style="background: white; padding: 40px; border-radius: 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); margin-top: 30px;">
          
          
          <div style="display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 20px; flex-direction: column; text-align: center;">
            <div style="width: 40px; height: 40px; background: linear-gradient(135deg, #0052da 0%, #003fa8 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
              <i class="fas fa-map-marker-alt" style="color: white; font-size: 1.2rem;"></i>
            </div>
            <div>
              <p style="margin: 0; color: #999; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Location</p>
              <p style="margin: 4px 0 0 0; color: #333; font-size: 1.1rem; font-weight: 600;">
                <?php echo htmlspecialchars($page['city']); ?>, India
              </p>
            </div>
          </div>

<div style="height: 1px; background: #f0f0f0; margin: 20px 0;"></div>

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px;">
            
            <a href="tel:+917906068123" 
               style="display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; background: linear-gradient(135deg, #0052da 0%, #003fa8 100%); color: white; text-decoration: none; border-radius: 10px; font-weight: 600; font-size: 0.95rem; transition: all 0.3s ease; border: none; cursor: pointer;">
              <i class="fas fa-phone" style="font-size: 1rem;"></i> Call
            </a>

<a href="https://wa.me/917906068123?text=Hi%20I%20would%20like%20to%20know%20more%20about%20your%20services%20in%20<?php echo urlencode($page['city']); ?>" 
               target="_blank" 
               rel="noopener noreferrer"
               style="display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; background: linear-gradient(135deg, #25D366 0%, #128c7e 100%); color: white; text-decoration: none; border-radius: 10px; font-weight: 600; font-size: 0.95rem; transition: all 0.3s ease; border: none; cursor: pointer;">
              <i class="fab fa-whatsapp" style="font-size: 1rem;"></i> WhatsApp
            </a>
          </div>
        </div>
      </div>
    </div>

<style>
      @keyframes bounce {
        0%, 100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-20px);
        }
      }

@media (max-width: 768px) {
        h2 {
          font-size: 1.8rem !important;
        }
        
        a[rel="noopener noreferrer"] {
          padding: 14px 40px !important;
          font-size: 1rem !important;
        }

div[style*="grid-template-columns"] {
          grid-template-columns: 1fr !important;
        }
      }
    </style>
  </section>

<?php else: ?>
  
  <section style="padding: 80px 0; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);">
    <div class="container">
      <div style="text-align: center; max-width: 600px; margin: 0 auto;">
        
        
        <div style="display: flex; justify-content: center; margin-bottom: 30px;">
          <div style="width: 80px; height: 80px; background: linear-gradient(135deg, #0052da 0%, #003fa8 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0, 82, 218, 0.3);">
            <i class="fas fa-map-marker-alt" style="color: white; font-size: 2.5rem;"></i>
          </div>
        </div>

<h2 style="color: var(--primary); font-size: 2rem; font-weight: 700; margin: 0 0 15px 0;">
          Located in <?php echo htmlspecialchars($page['city']); ?>
        </h2>

<p style="color: #666; font-size: 1rem; margin: 0 0 40px 0;">
          Contact us for directions and more information
        </p>

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
          <a href="tel:+917906068123" 
             style="display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 20px; background: linear-gradient(135deg, #0052da 0%, #003fa8 100%); color: white; text-decoration: none; border-radius: 10px; font-weight: 600; font-size: 0.95rem; transition: all 0.3s ease; border: none; cursor: pointer;">
            <i class="fas fa-phone"></i> Call
          </a>

<a href="https://wa.me/917906068123?text=Hi%20I%20would%20like%20to%20know%20more%20about%20your%20services%20in%20<?php echo urlencode($page['city']); ?>" 
             target="_blank" 
             rel="noopener noreferrer"
             style="display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 20px; background: linear-gradient(135deg, #25D366 0%, #128c7e 100%); color: white; text-decoration: none; border-radius: 10px; font-weight: 600; font-size: 0.95rem; transition: all 0.3s ease; border: none; cursor: pointer;">
            <i class="fab fa-whatsapp"></i> WhatsApp
          </a>
        </div>
      </div>
    </div>
  </section>
<?php endif; ?>

<footer class="gs-footer">
      <div class="container">
        <div class="row">
          <div class="col-sm-12 col-md-6 col-lg-4 mb-30">
            <h4 class="footer-title">Glorious Service</h4>
            <p class="footer-text">
              Glorious Service provides trusted home and professional services including carpentry, plumbing, electrical work, interior design, waterproofing, modular kitchens and web development.
            </p>
            <div class="footer-social">
              <a href="https://www.facebook.com/share/1DRuo9siWB/" target="_blank">
                <i class="fab fa-facebook-f"></i>
              </a>
              <a href="https://www.instagram.com/gloriousservice" target="_blank">
                <i class="fab fa-instagram"></i>
              </a>
              <a href="https://youtube.com/@gloriousservice?si=CKxQKt_pum-osIC9" target="_blank">
                <i class="fab fa-youtube"></i>
              </a>
              <a href="https://www.reddit.com/u/Responsible-Hold4167/s/g5OTzWNx5Z" target="_blank">
                <i class="fab fa-reddit-alien"></i>
              </a>
              <a href="https://x.com/gloriousservic" target="_blank">
                <i class="fa-brands fa-x-twitter"></i>
              </a>
              <a href="https://gloriousservice.tumblr.com/?source=share" target="_blank">
                <i class="fab fa-tumblr"></i>
              </a>
            </div>
          </div>

<div class="col-sm-6 col-md-6 col-lg-2 mb-30">
            <h5 class="footer-title">Quick Links</h5>
            <ul class="footer-links">
              <li><a href="https://gloriousservice.com/index.php">Home</a></li>
              <li><a href="https://gloriousservice.com/about-us.php">About Us</a></li>
              <li><a href="https://gloriousservice.com/location/">Location</a></li>
              <li><a href="https://gloriousservice.com/contact-us.php">Contact Us</a></li>
              <li><a href="https://gloriousservice.com/blogs/index.php">Blog</a></li>
            </ul>
          </div>

<div class="col-sm-6 col-md-6 col-lg-3 mb-30">
            <h5 class="footer-title">Our Services</h5>
            <ul class="footer-links">
              <li><a href="#">Carpenter</a></li>
              <li><a href="#">Plumber</a></li>
              <li><a href="#">Electrician</a></li>
              <li><a href="#">Interior Designer</a></li>
              <li><a href="#">Waterproofing</a></li>
              <li><a href="#">Web Development</a></li>
            </ul>
          </div>

<div class="col-sm-12 col-md-6 col-lg-3 mb-30">
            <h5 class="footer-title">Contact Info</h5>
            <ul class="footer-contact">
              <li><i class="fas fa-phone"></i> +91 79060 68123</li>
              <li><i class="fas fa-envelope"></i> enquiry@gloriousservice.com</li>
              <li><i class="fas fa-map-marker-alt"></i> Dehradun • Rishikesh • Haridwar</li>
            </ul>
          </div>
        </div>

<div class="row align-items-center">
          <div class="col-md-6 text-center text-md-left">
            <p class="footer-copy">
              © <span id="year"></span> Glorious Service. All Rights Reserved.
            </p>
          </div>
          <div class="col-md-6 text-center text-md-right">
            Developed by <a href="https://gloriousservice.com/" target="_blank">Glorious Service</a>
          </div>
        </div>
      </div>
    </footer>

<a href="https://wa.me/917906068123" target="_blank" class="floating-btn whatsapp-btn">
      <i class="fab fa-whatsapp"></i>
    </a>
    <a href="tel:+917906068123" class="floating-btn call-btn">
      <i class="fas fa-phone-alt"></i>
    </a>
  </div>

</html>

Cancel