<?php if (!defined('ABSPATH')) exit; ?>
<?php 
    if( isset( $options['group_panel'] ) && $options['group_panel'] == 'on' ): 
        $no_group = 0;
        $nbo_groups = array();
        foreach( $options['groups'] as $group ){
            if( isset( $group['fields'] ) && count( $group['fields'] ) > 0 ){
                $no_group++;
                $nbo_groups[] = $group;
            }
        }
?>
<div class="nbo-group-timeline-container" ng-class="totalGroupPage > 1 ? 'paged' : ''">
    <div class="nbo-group-timeline-wrap">
        <div class="nbo-group-timeline-line" ng-style="{'width': <?php echo ( $no_group + 1 ) * 150; ?> + 'px', transform: 'translateX(' + groupTimeLineTranslate + ')'}">
            <?php foreach( $nbo_groups as $g_index => $nbo_group ): ?>
                <div class="nbo-group-timeline-step" 
                    ng-class="{ 'active': current_group_panel == <?php echo $g_index; ?>, 'over': current_group_panel > <?php echo $g_index; ?>}" 
                    ng-style="{'left': <?php echo ( $g_index + 1 ) * 150; ?> + 'px'}"
                    ng-click="changeGroupPanel($event, <?php echo $g_index; ?>)" >
                    <div class="nbo-group-timeline-step-inner">
                        <span class="nbo-group-timeline-tooltip"><?php echo $nbo_group['title']; ?></span>
                    </div>
                </div>
            <?php endforeach; ?>
            <div class="nbo-group-timeline-fill-line" ng-style="{transform: 'scaleX(' + ( current_group_panel + 1 ) / ( no_of_group + 1 ) + ')'}"></div>
        </div>
    </div>
    <div class="nbo-group-timeline-paged nbo-group-timeline-paged-prev" ng-click="changeGroupPage($event, 'prev')" ng-class="currentGroupPage == 0 ? 'nbo-disabled' : ''">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
            <path d="M16.594 8.578l1.406 1.406-6 6-6-6 1.406-1.406 4.594 4.594z"/>
        </svg>
    </div>
    <div class="nbo-group-timeline-paged nbo-group-timeline-paged-next" ng-click="changeGroupPage($event, 'next')" ng-class="currentGroupPage == ( totalGroupPage - 1 ) ? 'nbo-disabled' : ''">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
            <path d="M16.594 8.578l1.406 1.406-6 6-6-6 1.406-1.406 4.594 4.594z"/>
        </svg>
    </div>
</div>
<div class="nbo_group_panel_wrap">
    <div class="nbo_group_panel_wrap_inner" ng-init="no_of_group=<?php echo $no_group; ?>" ng-style="{'width': <?php echo $no_group * 100; ?> + '%', transform: 'translateX(-' + current_group_panel * 100 / no_of_group + '%)'}">
<?php endif; ?>
<?php 
    foreach( $options['groups'] as $group ): 
        if( isset( $group['fields'] ) && count( $group['fields'] ) > 0 ):
            $cols = (int) $group['cols'];
            if( count( $group['fields'] ) < $cols ) $cols = count( $group['fields'] );
?>
<div class="nbo-group-type2-wrap nbo-float-col-<?php echo $cols; ?>"<?php if( isset( $options['group_panel'] ) && $options['group_panel'] == 'on' ): ?>ng-style="{width: 100 / no_of_group + '%'}"<?php endif; ?> >
    <div class="nbo-group-type2-header">
        <span class="group-type2-title">
            <span><?php echo $group['title']; ?></span>
            <span class="nbo-group-type2-toggle" ng-click="toggle_group($event)">
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
                    <path d="M16.594 8.578l1.406 1.406-6 6-6-6 1.406-1.406 4.594 4.594z"/>
                </svg>
            </span>
        </span>
    </div>
    <div class="nbo-group-type2-body">
        <?php 
            foreach( $group['fields'] as $f ){
                $f_index    = get_field_index_by_id( $f, $options["fields"] );
                $field      = $options["fields"][$f_index];
                $class      = $field['class'];
                if( $field['general']['enabled'] == 'y' && $field['need_show'] ) include( $field['template'] );
            }
        ?>
    </div>
</div>
<?php endif; endforeach;
    if( isset( $options['group_panel'] ) && $options['group_panel'] == 'on' ): ?>
        </div>
    </div>
    <div>
        <span class="nbo_group_panel_prev" ng-click="changeGroupPanel($event, 'prev')" ng-class="current_group_panel == 0 ? 'nbo-disabled' : ''">
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
                <path d="M16.594 8.578l1.406 1.406-6 6-6-6 1.406-1.406 4.594 4.594z"/>
            </svg>
            <span><?php _e('Prev', 'web-to-print-online-designer'); ?></span>
        </span>
        <span class="nbo_group_panel_next" ng-click="changeGroupPanel($event, 'next')" ng-class="current_group_panel == ( no_of_group - 1 ) ? 'nbo-disabled' : ''">
            <span><?php _e('Next', 'web-to-print-online-designer'); ?></span>
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
                <path d="M16.594 8.578l1.406 1.406-6 6-6-6 1.406-1.406 4.594 4.594z"/>
            </svg>
        </span>
    </div>
<?php endif;