@section('title')
    BAJUAL - Transfortation
@stop

@section('keywords')
    bajual, tiket travel, tiket bus
@stop

@section('description')
    BAJUAL - Transportasi adalah perusahaan yang bergerak di bidang transportasi yang menyediakan tiket bus dan tiket
    travel.
@stop

@section('image')
    {{ asset('images/logo.png') }}
@stop

<div>
    <div class="container" style="margin-bottom: 120px">
        <header class="main-header">
            <div class="custom-container">
                <div class="header-panel">
                    <a href="/" wire:navigate>
                        <img class="img-fluid icon-btn" src="../../assets/images/svg/left-arrow-32.svg" alt="left-arrow">
                    </a>
                    <h3>Featured Units</h3>

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

        <section class="section-lg-t-space section-b-space">
            <div class="custom-container">
                <form class="auth-form mt-0 p-0 bg-transparent">
                    <div class="form-group mt-0">
                        <div class="form-input">
                            <input type="search" class="form-control search wo-filter" id="inputusername"
                                placeholder="Search destinations">
                            <i class="iconsax search-icon" data-icon="search-normal-2"></i>
                        </div>
                    </div>
                </form>

                <ul class="service-list mt-4">

                    @foreach ($units as $unit)
                        <li class="service-box">
                            <div class="service-head">
                                <div class="service-profile">
                                    <img class="img-fluid profile-img"
                                        src="{{ asset('/storage/' . $unit->operator->logo) }}" alt="p4">
                                    <h5>{{ $unit->operator->name }}</h5>
                                </div>
                                <h6 class="rating"> <img class="img-fluid star"
                                        src="../../assets/images/svg/star-fill.svg" alt="star">
                                    {{ number_format($unit->ratings_avg_rating, 1) }}</h6>
                            </div>
                            <img class="img-fluid w-100" src="{{ asset('/storage/' . $unit->thumbnail) }}"
                                alt="">
                            <div class="service-details">
                                <div class="d-flex align-items-center justify-content-between">
                                    <a href="/units/{{ $unit->slug }}">
                                        <h5>{{ $unit->name }}</h5>
                                    </a>
                                    <h4 class="fw-semibold title-color d-flex align-items-center gap-1">$30 <span
                                            class="content-color fw-normal"><del> $40.50 </del> </span></h4>
                                </div>

                                <div class="service-content">
                                    <div class="d-flex align-items-center mt-2">
                                        <h5 class="timing">
                                            <i class="iconsax" data-icon="clock"></i>
                                            {{ \Carbon\Carbon::parse($unit->started_time)->format('H:i') }}
                                            {{ $unit->timezone->code }}
                                        </h5>
                                        <h6 class="fw-normal title-color ps-2">Klik Detail utk Booking
                                        </h6>
                                    </div>
                                </div>
                                <div class=" d-flex align-items-center justify-content-between gap-1 mt-2">
                                    <p>{{ $unit->timezone->description }}</p>
                                    <a href="/units/{{ $unit->slug }}" class="btn-sm theme-btn">Detail</a>
                                </div>
                            </div>
                        </li>
                    @endforeach
                </ul>

                <!-- Navigasi Pagination -->
                {{ $units->links('vendor.pagination.simple-default') }}
            </div>
        </section>
        <!-- panel-space start -->
        <div class="panel-space"></div>
        <!-- panel-space end -->
        <x-menus.bottom />
    </div>
</div>