<?php 
/* 
* Block Name: Gallery
* Post Type: page, post
*/
?>
<?php if (isset($block['data']['previewImage'])): ?>
    <?php do_action('block_image', __FILE__); ?>
<?php else: ?>
    <?php

    // Block helper
    require \get_template_directory() . '/template-parts/base/block-helper.php';
    if (isset($disable) && $disable) {
        return;
    }

    // Load values and assing defaults
    $gallery = get_field('gallery') ?: false;
    $imagesPerRow = get_field('images_per_row') ?: [];
    $cols = array_key_exists('value', $imagesPerRow) ? $imagesPerRow['value'] : 'col-sm-4';
    $count = array_key_exists('label', $imagesPerRow) ? $imagesPerRow['label'] : 4;
    $placeholderId = get_field('placeholder_image') ?: false;
    $moreBtnLabel = get_field('load_more_button_label') ?: false;
    $align = get_field('align') ?: '';

    // Set images
    $images = [];
    if ($gallery && is_array($gallery)) {
        $all = count($gallery);
        foreach ($gallery as $key => $image) {
            if (array_key_exists('image', $image) && is_array($image['image'])) {
                $images[] = [
                    'url' => $image['image']['url'],
                    'smallUrl' => wp_get_attachment_image_url($image['image']['id'], 'service'),
                    'width' => $image['image']['width'],
                    'height' => $image['image']['height'],
                    'alt' => $image['image']['alt'],
                    'caption' => $image['image']['caption'],
                    'description' => $image['image']['description'],
                    'selector' => "image-{$key}",
                    'prev' => ($key - 1) < 0 ? false : '.image-'.($key - 1),
                    'next' => ($key + 1) >= $all ? false : '.image-'.($key + 1)
                ];
            }
        }
    }
?>
    <section class="section gallery-section block <?php echo $className; ?>" 
        <?php if ($bgUrl): ?>
            style="background-image: url('<?php echo $bgUrl; ?>');"
            data-desktop-image="<?php echo $bgUrl; ?>"
        <?php endif; ?>
        <?php if ($mobileBgUrl): ?>
            data-mobile-image="<?php echo $mobileBgUrl; ?>"
        <?php endif; ?>
        <?php if ($sectionId): ?>
            id="<?php echo $sectionId; ?>"
        <?php endif; ?>
        data-count="<?php echo $count; ?>" 
        data-gallery='<?php echo str_replace('\'','`', json_encode($images)); ?>'
    >
        <div class="container">
            <?php if ($title): ?>
                <h2 class="h2"><?php echo $title; ?></h2>
            <?php endif; ?>
            <?php if ($text): ?>
                <div class="text"><?php echo $text; ?></div>
            <?php endif; ?>
            <div class="row g-3 pt-4 d-flex js-gallery <?php echo $align; ?>"></div>
            <div class="text-center js-more d-none"><button class="btn btn-primary mt-4 js-more-btn"><?php echo $moreBtnLabel; ?></button></div>
        </div>
        <div class="gallery-modal">
            <i class="fa fa-times gallery-modal-close"></i>
            <div class="gallery-modal-container d-flex justify-content-space-between align-items-center">
                <div class="prev js-control inactive"><i class="fa fa-chevron-left"></i></div>
                <div class="gallery-modal-body">
                    <div class="image-container">
                        <?php echo wp_get_attachment_image($placeholderId, 'full', false, ['class' => 'gallery-image']); ?>
                    </div>
                    <div class="description"></div>
                </div>
                <div class="next js-control inactive"><i class="fa fa-chevron-right"></i></div>
            </div>
        </div>
    </section>
<?php endif; ?>

