<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="{{ url('nha-tro/'.str_slug($hostel->name).'-'.$hostel->id) }}" class="single-action"><i
                                    class="ion-ios-search-strong"></i></a>
                        <a href="{{ url('nha-tro/'.str_slug($hostel->name).'-'.$hostel->id) }}" 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>
<div class="section-footer mt-12 py-12">
<div class="text-center">
    {!! $hostels->links() !!}
</div>
</div>
