<div class="poc_steps" <?= !$poc_steps_status ? 'style="display:none;"' : '' ?>>
    <div data-effecttopanel="panel_identification" class="step identification <?= !empty($poc_is_logged) || (!empty($guest) || !empty($register)) ? 'completed' : ''; ?>">
        <span class="number">1</span>
        <div class="icon_container">
            <?php $icon = !empty($steps_identification_icon) ? str_replace('classIcon', $steps_identification_icon, $poc_icon_html) : ''; ?>
            <?= $icon ?>
        </div>
        <span class="text">
            <div class="title"><?= $steps_identification_title ?></div>
            <div class="description"><?= $steps_identification_subtitle ?></div>
        </span>
    </div>
    <div data-effecttopanel="panel_addresses" class="step addresses <?= !empty($poc_is_logged) ? 'completed' : ''; ?>">
        <span class="number">2</span>
        <div class="icon_container">
            <?php $icon = !empty($steps_addresses_icon) ? str_replace('classIcon', $steps_addresses_icon, $poc_icon_html) : ''; ?>
            <?= $icon ?>
        </div>
        <span class="text">
            <div class="title"><?= $steps_addresses_title ?></div>
            <div class="description"><?= $steps_addresses_subtitle ?></div>
        </span>
    </div>
    <div data-effecttopanel="panel_shipping" class="step shipping <?= !empty($shipping_method_choosed) ? 'completed': ''; ?>">
        <span class="number">3</span>
        <div class="icon_container">
            <?php $icon = !empty($steps_shipping_icon) ? str_replace('classIcon', $steps_shipping_icon, $poc_icon_html) : ''; ?>
            <?= $icon ?>
        </div>
        <span class="text">
            <div class="title"><?= $steps_shipping_title ?></div>
            <div class="description"><?= $steps_shipping_subtitle ?></div>
        </span>
    </div>
    <div data-effecttopanel="panel_payment" class="step payment">
        <span class="number">4</span>
        <div class="icon_container">
            <?php $icon = !empty($steps_payment_icon) ? str_replace('classIcon', $steps_payment_icon, $poc_icon_html) : ''; ?>
            <?= $icon ?>
        </div>
        <span class="text">
            <div class="title"><?= $steps_payment_title ?></div>
            <div class="description"><?= $steps_payment_subtitle ?></div>
        </span>
    </div>
    <div data-effecttopanel="panel_confirm" class="step confirm">
        <span class="number">5</span>
        <div class="icon_container">
            <?php $icon = !empty($steps_confirm_icon) ? str_replace('classIcon', $steps_confirm_icon, $poc_icon_html) : ''; ?>
            <?= $icon ?>
        </div>
        <span class="text">
            <div class="title"><?= $steps_confirm_title ?></div>
            <div class="description"><?= $steps_confirm_subtitle ?></div>
        </span>
    </div>
</div>

<script type="text/javascript">
    $(document).on('mouseenter', 'div.step', function(){
        var panel = $(this).data('effecttopanel');
        var continer_to_efect = $('div.perfect_one_checkout_main_container').find('div.'+panel).addClass('effect');
    });
    $(document).on('mouseleave', 'div.step', function(){
        var panel = $(this).data('effecttopanel');
        var continer_to_efect = $('div.perfect_one_checkout_main_container').find('div.'+panel).removeClass('effect');
    });
</script>