<div class="section-content" >
    <div class="list-property-cards">
        <div class="list-row">

            @foreach($hostels as $hostel)
                <div class="list-col">
                    <div class="single-property-card single-property-card--size-lg ht-card ht-depth-1">
                        <a href="{{ url('nha-tro/'.str_slug($hostel->name).'-'.$hostel->id) }}" data-id="{{ $hostel->id }}" class="block">
                            <div class="card-header">
                                <div class="property__photo ht-rectangle ratio-43">
                                    <div class="ht-inner bg-color-grey-300">
                                        <img src="{{ $hostel->image }}" alt="">
                                    </div>
                                </div>
                                <div class="property__badges">
                                    <div class="single-badge single-badge--verified">
                                        <i class="single-badge__icon ion-checkmark-circled"></i>
                                        <span class="single-badge__text">{{ $hostel->number_empty_rooms}} phòng còn trống</span>
                                    </div>
                                    {{--                    <div class="single-badge single-badge--featured">--}}
                                    {{--                        <i class="single-badge__icon ion-android-star"></i>--}}
                                    {{--                        <span class="single-badge__text">Nổi bật</span>--}}
                                    {{--                    </div>--}}
                                </div>


                                @if($hostel->greatest_price == $hostel->smallest_price)
                                    <div class="property__prices">
                                        <div class="single-price">
                                            <span class="single-price__number">{{ number_format($hostel->greatest_price, 0, '.', '.') }}</span>
                                            <span class="single-price__currency on-right">₫</span>
                                        </div>
                                    </div>
                                @else
                                    <div class="property__prices">
                                        <div class="single-price">
                                            <span class="single-price__number">{{ number_format($hostel->smallest_price, 0, '.', '.') }}</span>
                                            <span class="single-price__currency on-right">₫</span>
                                        </div>
                                        <div class="divider">−</div>
                                        <div class="single-price">
                                            <span class="single-price__number">{{ number_format($hostel->greatest_price, 0, '.', '.') }}</span>
                                            <span class="single-price__currency on-right">₫</span>
                                        </div>
                                    </div>
                                @endif


                            </div>
                            <div class="card-content">
                                <div class="property__intro">
                                    <h4 class="property__title">{{ $hostel->name }}</h4>
                                    <div class="property__address">{{ $hostel->address }}
                                    </div>
                                </div>
                                <div class="property__infos">
                                    <div class="single-info">
                                                    <span class="single-info__icon"><img
                                                                src="/frontend3/stock/icons/electricity.svg"></span>
                                        <span class="single-info__data">{{ \App\Components\Functions::getElectric($hostel) }}</span>
                                    </div>
                                    <div class="single-info">
                                                    <span class="single-info__icon"><img
                                                                src="/frontend3/stock/icons/water.svg"></span>
                                        <span class="single-info__data">{{ \App\Components\Functions::getWater($hostel) }}</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                        <div class="property__quickview">
                            <div class="ht-rectangle ratio-43">
                                <div class="ht-inner">
                                    <div class="actions-wrapper">
                                        <a href="#" class="single-action"><i
                                                    class="ion-ios-search-strong"></i></a>
                                        <a href="#" class="single-action"><i class="ion-link rotate45"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="property__actions">
                            <a href="#" class="single-action single-action--like" title=""
                               data-toggle="tooltip"
                               data-placement="top" data-original-title="Thích"><i
                                        class="ion-android-favorite-outline"></i></a>
                        </div>
                    </div>
                </div>
            @endforeach

        </div>
    </div>
</div>
