<?php
  $post_id = get_the_id();
// echo print_r(get_vehicle_gallery_images()); 
$image_urls = get_post_meta($post_id, 'pictures', true);

if (is_string($image_urls)) {
    $images = explode(',', $image_urls);
} elseif (is_array($image_urls)) {
    $images = $image_urls;
} else {
    $images = [];
}

if (!empty($images)): ?>
    <div class="vehicle-gallery">
        <?php foreach ($images as $index => $img_url): ?>
            <a href="<?php echo esc_url(trim($img_url)); ?>" class="glightbox" data-gallery="vehicle-gallery">
                <?php if ($index === 0): ?>
                    <img src="<?php echo esc_url(trim($img_url)); ?>" alt="Vehicle Image" class="gallery-main-image" />
                <?php else: ?>
                    <img src="<?php echo esc_url(trim($img_url)); ?>" alt="Gallery Thumb" class="gallery-thumb"  />
                <?php endif; ?>
            </a>
        <?php endforeach; ?>
    </div>
<?php endif; ?>

document.addEventListener('DOMContentLoaded', function () {
    new Swiper('.vehicle-gallery', {
        slidesPerView: 5,
        spaceBetween: 10,
        loop: true,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        breakpoints: {
            768: {
                slidesPerView: 3,
            },
            480: {
                slidesPerView: 2,
            }
        }
    });
});