<?php

/**
 * Sublogo Block Template.
 *
 * @param   array $block The block settings and attributes.
 * @param   string $content The block inner HTML (empty).
 * @param   bool $is_preview True during AJAX preview.
 * @param   (int|string) $post_id The post ID this block is saved to.
 */

// Create id attribute allowing for custom "anchor" value.
$id = 'tools-' . $block['id'];
if( !empty($block['anchor']) ) {
    $id = $block['anchor'];
}

// Create class attribute allowing for custom "className" and "align" values.
$className = 'tools';
if( !empty($block['className']) ) {
    $className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
    $className .= ' align' . $block['align'];
}

// Load values and assign defaults.
$tools = get_field('tools') ?: [];
$tools_title = get_field('tools_title') ?: '';
$newTools = [];
foreach($tools as $key => $tool) {
    if (isset($newTools[$tool['order']])) {
        $newTools[count($newTools) + 1] = $tool;
    } else {
        $newTools[$tool['order']] = $tool;
    }

}
ksort($newTools);
?>
<?php if (!empty($tools)) {  ?>
    <section class="block-tools initial">
        <div class="tools-top">
            <header class="tools-top-header">
                <div class="tools-top-title">
                    <h2><?php echo $tools_title; ?></h2>
                </div>
                <div class="tools-top-nav owl-nav" id="sliderNav"></div>
            </header>

            <div class="icon-carousel" id="sliderDots">
                <div class="icon-carousel-wrapper">
                    <div class="icon-carousel-dragger" id="icon-carousel-dragger">
                        <?php $i = 0; foreach($newTools as $key => $tool) {
                            $color = (!isset($tool['tab']['background_color']) || $tool['tab']['background_color'] == false) ? '#ffffff00' : $tool['tab']['background_color'];
                            $colorclass = (!isset($tool['tab']['background_color']) || $tool['tab']['background_color'] == false) ? 'not_colored' : 'colored';
                            ?>
                        <div class="icon-carousel-block <?php echo $i == 0 ? 'active' : ''; ?> <?php echo $colorclass; ?>" data-color="<?php echo $color; ?>" data-key="<?php echo $i; ?>" style=" background-color: <?php echo $color; ?>">
                            <div class="icon-carousel-icon"><?php echo displaySVG($tool['tab']['icon']); ?></div>
                            <div class="icon-carousel-tab-title"><?php echo $tool['tab']['title']; ?></div>
                        </div>
                        <?php $i++; } ?>
                    </div>
                </div>
            </div>
        </div>
        <div class="tools-carousel owl-carousel">
            <?php $i = 0; foreach($newTools as $key => $tool) { ?>
            <div class="tool-block"  data-key="<?php echo $i; ?>">
                <?php if (empty($tool['tool_content']['media'] )) {} else { ?>
                <div class="tool-image">
                    <?php foreach ($tool['tool_content']['media'] as $media) { ?>
                    <div class="tool-image-block">
                        <?php if ($media['media_type'] == 'image') { ?>
                            <img src="<?php echo $media['image']['url']; ?>">
                        <?php } else if ($media['media_type'] == 'video') { ?>
                            <svg class="video-over" xmlns="http://www.w3.org/2000/svg" width="58" height="58" viewBox="0 0 58 58"><g transform="translate(-413.578 -2213.578)"><g transform="translate(413.578 2213.578)" fill="#a43853" stroke="#a43853" stroke-width="4"><circle cx="29" cy="29" r="29" stroke="none"/><circle cx="29" cy="29" r="27" fill="none"/></g><path d="M15.29,2.816a2,2,0,0,1,3.419,0L32.156,24.962A2,2,0,0,1,30.446,28H3.554a2,2,0,0,1-1.71-3.038Z" transform="translate(460.578 2225.578) rotate(90)" fill="#fff"/></g></svg>
                            <img src="<?php echo $media['video_placeholder']['url']; ?>" data-video="<?php echo $media['video_link']; ?>">
                        <?php } ?>
                    </div>
                    <?php } ?>

                </div>
                <?php } ?>
                <div class="tool-content">
                    <?php if (isset($tool['tool_content']['subtitle']) && $tool['tool_content']['subtitle'] != '') {  ?>
                        <h2 class="bcl-subtitle"><?php echo $tool['tool_content']['subtitle']; ?></h2>
                    <?php } ?>
                    <?php if (isset($tool['tool_content']['title']) && $tool['tool_content']['title'] != '') {?>
                        <h1 class="bcl-title"><?php echo $tool['tool_content']['title']; ?></h1>
                    <?php } ?>
                    <?php if (isset($tool['tool_content']['description']) && $tool['tool_content']['description'] != '') {?>
                        <p class="bcl-content-text"><?php echo strip_tags($tool['tool_content']['description']); ?></p>
                    <?php } ?>
                    <?php if (!empty($tool['tool_content']['rm'])) { ?>
                        <div class="bcl-read-more">
                            <a style="color:#45b6ad;" target="<?php echo $tool['tool_content']['rm']['target']; ?>" href="<?php echo $tool['tool_content']['rm']['url']; ?>">
                                <span class="link-title"><?php echo isset($tool['tool_content']['rm']['title']) && $tool['tool_content']['rm']['title'] != '' ? $tool['tool_content']['rm']['title'] : 'meer info'; ?></span>
                                <span class="link-arrow"><svg xmlns="http://www.w3.org/2000/svg" width="37.816" height="15.72" viewBox="0 0 37.816 15.72"><g id="Group_285" data-name="Group 285" transform="translate(0 0.592)"><line id="Line_23" data-name="Line 23" x2="36" transform="translate(0 7.433)" fill="none" stroke="#45b6ad" stroke-width="2"/><path id="Path_110" data-name="Path 110" d="M2676.622,2826l5.213,7.1-5.213,7.458" transform="translate(-2645.249 -2826)" fill="none" stroke="#45b6ad" stroke-width="2"/></g></svg></span>
                            </a>
                        </div>
                    <?php } ?>
                </div>
            </div>
            <?php $i++; } ?>
        </div>

    </section>
<?php } ?>