@php
 $step = 7;
@endphp
<div class="col-xs-12 col-sm-4 mb-12">
    <div class="add-post__steps-section ht-depth-1 pa-12">
        <div class="section-header">
            <h2 class="section-header__title">Đăng tin tìm ở ghép</h2>
            <div class="section-header__percent flex flex-ai-center">
                <div class="flex-item flex-item-dw">
                    <div class="percent-line">
                        <div class="percent-line__track"></div>
                        @if($step >= 6)
                            <div class="percent-line__bar" style="width: 100%"></div>
                        @else
                            <div class="percent-line__bar" style="width: {{ ceil(100/6)*$step }}%"></div>
                        @endif
                    </div>
                </div>
                <div class="flex-item flex-item-tw ml-12">
                    @if($step >= 6)
                        <div class="percent-number">100%</div>
                    @else
                        <div class="percent-number">{{ ceil(100/6)*$step }}%</div>
                    @endif
                </div>
            </div>
        </div>
        <div class="section-content">
            <ul class="add-post-steps__menu list-unstyled">

                <li class="single-step @if($step > 1) single-step--passed @endif">
										<span class="single-step__wrap">
                                        {!! \App\Components\Functions::imageStep($step, 1) !!}

                                            <span class="single-step__label">Tiêu chí</span>
										</span>
                </li>
                <li class="single-step @if($step > 2) single-step--passed @endif">
										<span class="single-step__wrap">
											{!! \App\Components\Functions::imageStep($step, 2) !!}
                                            <span class="single-step__label">Địa chỉ</span>
										</span>
                </li>
                <li class="single-step @if($step > 3) single-step--passed @endif">
										<span class="single-step__wrap">
											{!! \App\Components\Functions::imageStep($step, 3) !!}
                                            <span class="single-step__label">Giá phòng & Ngày chuyển</span>
										</span>
                </li>
                <li class="single-step @if($step > 4) single-step--passed @endif">
										<span class="single-step__wrap">
											{!! \App\Components\Functions::imageStep($step, 4) !!}
                                            <span class="single-step__label">Tiện ích & Quy định</span>
										</span>
                </li>
                <li class="single-step @if($step > 5) single-step--passed @endif">
										<span class="single-step__wrap">
											{!! \App\Components\Functions::imageStep($step, 5) !!}
                                            <span class="single-step__label">Ảnh phòng</span>
										</span>
                </li>
                <li class="single-step @if($step >= 6) single-step--passed @endif">
										<span class="single-step__wrap">
											<span class="single-step__icon"><img src="/frontend3/assets/img/step/6_passed.png" alt=""></span>
                                            <span class="single-step__label">Mô tả phòng</span>
										</span>
                </li>
            </ul>
        </div>
    </div>
</div>