<?php
/**
 * Multi-step checkout timeline template.
 *
 * @package OceanWP WordPress theme
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}

// Vars
$i = 0;
$enable_login_reminder  = 'yes' == get_option( 'woocommerce_enable_checkout_login_reminder', 'yes' ) ? true : false;
$is_logged_in           = is_user_logged_in();
$show_login_step        = ! $is_logged_in && $enable_login_reminder;

// Style
$style  = get_theme_mod( 'ocean_woo_multi_step_checkout_timeline_style', 'arrow' );
$style  = $style ? $style : 'arrow';

// Define classes
$classes = array( 'owp-woo-checkout-timeline', 'clr' );

// Style
$classes[] = $style;

// If login
if ( $show_login_step ) {
    $classes[] = 'step-4';
}

// Turn classes into string
$classes = implode( ' ', $classes ); ?>

<ul id="owp-checkout-timeline" class="<?php echo esc_attr( $classes ); ?>">

    <?php if ( $show_login_step ) { ?>
        <li id="timeline-0" data-step="0" class="timeline login <?php echo ! $is_logged_in ? 'active' : ''; ?>">
            <div class="timeline-wrapper">
                <span class="timeline-step"><?php echo $i = $i + 1 ?>.</span>
                <span class="timeline-label"><?php esc_html_e( 'Login', 'oceanwp' ); ?></span>
            </div>
        </li>
    <?php } ?>

    <li id="timeline-1" data-step="1" class="timeline billing <?php echo ! $show_login_step ? 'active' : ''; ?>">
        <div class="timeline-wrapper">
            <span class="timeline-step"><?php echo $i = $i + 1 ?>.</span>
            <span class="timeline-label"><?php esc_html_e( 'Billing', 'oceanwp' ); ?></span>
        </div>
    </li>

    <li id="timeline-2" data-step="2" class="timeline shipping" >
        <div class="timeline-wrapper">
            <span class="timeline-step"><?php echo $i = $i + 1 ?>.</span>
            <span class="timeline-label"><?php esc_html_e( 'Shipping', 'oceanwp' ); ?></span>
        </div>
    </li>

    <li id="timeline-3" data-step="3" class="timeline payment">
        <div class="timeline-wrapper">
            <span class="timeline-step"><?php echo $i = $i + 1 ?>.</span>
            <span class="timeline-label"><?php esc_html_e( 'Payment Info', 'oceanwp' ); ?></span>
        </div>
    </li>

</ul>