<?php 
/* 
* Block Name: Features
* 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-md-6 col-lg-3';
        $count = array_key_exists('label', $imagesPerRow) ? ((int) $imagesPerRow['label'] * 2) : 8;
        $placeholderId = get_field('placeholder_image') ?: false;
        $moreBtnLabel = get_field('load_more_button_label') ?: __('Load more', 'eatfruit');
        $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; ?>" 
        id="<?php echo $sectionId; ?>" 
        data-count="<?php echo $count; ?>" 
        data-cols="<?php echo $cols; ?>" 
        data-gallery='<?php echo str_replace('\'','`', json_encode($images)); ?>'
    >
        <div class="text-center 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="js-more d-none"><button class="btn btn-first mt-4 js-more-btn"><?php echo apply_filters('add_icon', 'arrow-down', $moreBtnLabel); ?></button></div>
        </div>
        <div class="gallery-modal">
            <svg class="svg-inline--fa fa-xmark gallery-modal-close" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="xmark" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-fa-i2svg=""><path class="gm-close" fill="currentColor" d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"></path></svg>
            <div class="gallery-modal-container d-flex justify-content-space-between align-items-center">
                <div class="prev js-control inactive">
                    <svg class="svg-inline--fa fa-chevron-left" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-left" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg=""><path fill="currentColor" d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"></path></svg>
                </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">
                    <svg class="svg-inline--fa fa-chevron-right" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg=""><path fill="currentColor" d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"></path></svg>
                </div>
            </div>
        </div>
    </section>
<?php endif; ?>
