<?php 
/* 
* Block Name: Compare
* 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.
    $packagesTitle = get_field('packages_title') ?: false;
    $packagesDescription = get_field('packages_description') ?: false;
    $relatedForm = get_field('related_form') ?: 'packageOrder';
    $monthly = get_field('monthly_text') ?: false;
    $yearly = get_field('yearly_text') ?: false;
    $packages = get_field('packages') ?: [];
    $cols = get_field('packages_per_row') ?: false;
    $align = get_field('packages_align') ?: '';
    $compareTitle = get_field('compare_title') ?: false;
    $compare = get_field('compare') ?: [];
?>
    <section class="section compare-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 ($relatedForm): ?>
            data-related-form="<?php echo $relatedForm; ?>"
        <?php endif; ?>
        <?php if ($sectionId): ?>
            id="<?php echo $sectionId; ?>"
        <?php endif; ?>
    >
        <div class="container">
            <div class="row">
                <div class="col-lg-8 offset-lg-2">
                    <?php if ($packagesTitle): ?>
                        <h2 class="<?php echo $packagesDescription ? 'pb-2' : 'pb-4'; ?> d-block text-center"><?php echo $packagesTitle; ?></h2>
                    <?php endif; ?>
                    <?php if ($packagesDescription): ?>
                        <div class="pb-5"><?php echo $packagesDescription; ?></div>
                    <?php endif; ?>
                    <div class="text-center">
                        <div class="package-switcher d-inline-flex justify-content-center">
                            <div class="item active" data-selector="yearly"><?php echo $yearly; ?></div>
                            <div class="item" data-selector="monthly"><?php echo $monthly; ?></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row d-flex <?php echo $align; ?> pb-5 pt-5 py-5">
                <?php foreach ($packages as $package): ?>
                    <div class="<?php echo $cols; ?>">
                        <div class="package p-4 h-100 <?php echo $package['background_color']; ?>">
                            <div class="label"><b><?php echo $package['title']; ?></b></div>
                            <h2 class="h0 price">
                                <span class="changable monthly d-none"><?php echo $package['regular_price']; ?></span>
                                <span class="changable yearly"><?php echo $package['subscription_price']; ?></span>
                            </h2>
                            <div class="text"><small><?php echo $package['short_description']; ?></small></div>
                            <?php if (is_array($package['link']) && !empty($package['link'])): ?>
                                <div class="cta">
                                    <a href="<?php echo $package['link']['url']; ?>" target="<?php echo $package['link']['target']; ?>" data-choose="<?php echo $package['title']; ?>" class="js-choose btn btn-silent w-100"><?php echo $package['link']['title']; ?></a>
                                </div>
                            <?php endif; ?>
                            <div class="text pt-3"><small><?php echo $package['description']; ?></small></div>
                            <div class="features">
                                <?php foreach ($package['features'] as $feature): ?>
                                    <div><i class="fa fa-check"></i> <?php echo $feature['label']; ?></div>
                                <?php endforeach; ?>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>

            <?php if ($compareTitle): ?>
                <h2><?php echo $compareTitle; ?></h2>
            <?php endif; ?>
            <div class="row py-3">
                <div class="col-12 col-md"></div>
                <?php foreach ($packages as $package): ?>
                    <div class="col-12 col-md text-center">
                        <b><?php echo $package['title']; ?></b>
                    </div>
                <?php endforeach; ?>
            </div>
            <?php foreach ($compare as $arr): ?>
                <?php if (is_array($arr) && array_key_exists('type', $arr) && $object = $arr[$arr['type']]):  ?>
                    <?php if($arr['type'] == 'label'): ?>
                        <div class="text py-3"><b><?php echo $object; ?></b></div>
                    <?php elseif($arr['type'] == 'feature'): ?>
                        <?php foreach ($object as $k => $feature): ?>
                            <div class="row py-3 <?php echo !($k%2) ? 'bg-default' : 'bg-light'; ?>">
                                <div class="col-12 col-md text"><?php echo $feature['label']; ?></div>
                                <?php foreach ($feature['values'] as $value): ?>
                                    <div class="col">
                                        <div class="text-center"><?php echo isset($value['includes']) && $value['includes'] ? '<i class="fa fa-check" style="color: green"></i>' : '<i class="fa fa-times" style="color: #999;"></i>'; ?></div>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                        <?php endforeach; ?>
                    <?php endif; ?>
                <?php endif; ?>
            <?php endforeach; ?>
                <div class="row py-3">
                <div class="col-12 col-md"></div>
                <?php foreach ($packages as $package): ?>
                    <div class="col-12 col-md">
                            <div class="cta">
                                <a href="<?php echo $package['link']['url']; ?>" target="<?php echo $package['link']['target']; ?>" data-choose="<?php echo $package['title']; ?>" class="js-choose btn <?php echo $package['background_color'] == 'bg-gradient' ? 'btn-primary' : 'btn-silent'; ?>"><?php echo $package['link']['title']; ?></a>
                            </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>
<?php endif; ?>

