@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>
    <!-- Header -->
    <x-utils.header />
    <br>
    <br>
    <div class="container" style="margin-bottom: 120px">
        <div class="header-img-panel">
        </div>

        <!-- Sliders -->
        <div class="swiper header-panel-lg">
            <div class="swiper-wrapper">
                @foreach ($sliders as $key => $slider)
                    <div class="swiper-slide">
                        <img class="img-fluid header-img h-100" src="{{ asset('/storage/' . $slider->image) }}"
                            alt="7">
                        <div class="banner-content position-absolute">
                            <h6 class="fw-medium text-white error-bg px-2 py-1 rounded-pill d-inline-flex">
                                {{ $slider->headline }}
                            </h6>
                            <h3 class="fw-bold text-uppercase mt-1">{{ $slider->title }}</h3>
                            <h6 class="content-color fw-normal mt-1">{{ $slider->description }}</h6>
                            <a href="{{ $slider->link }}" class="btn theme-btn p-1 px-2 mt-4">Book Now</a>
                        </div>
                        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample"
                            data-bs-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Previous</span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#carouselExample"
                            data-bs-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Next</span>
                        </button>
                    </div>
                @endforeach
            </div>
        </div>

        <br>
        <div class="custom-container">
            <div class="title">
                <h2>CATEGORY TRANS</h2>
                <a href="/categories" wire:navigation>View all</a>
            </div>
            <br>
            <div class="row g-3">
                @foreach ($categories as $category)
                    <div class="col-3">
                        <a href="/category/{{ $category->slug }}" wire:navigation>
                            <div class="categories-box">
                                <img class="categories-icon" src="{{ asset('/storage/' . $category->icon) }}"
                                    height="35" width="35">
                            </div>
                            <h5 class="categories-name mt-2 text-center title-color">{{ $category->name }}</h5>
                        </a>
                    </div>
                @endforeach
            </div>
            <br>

            <!-- units Latest -->

            {{-- <div class="custom-container">
                <div class="title">
                    <h2>LATEST UNIT</h2>
                    <a href="/units">View all</a>
                </div>

                @foreach ($latestUnits as $unit)
                    <div class="swiper blog-slider">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="blog-box ratio2_3">
                                    <a href="/units/{{ $unit->slug }}" class="blog-box-img">
                                        <img class="bg-img blog-img" src="{{ asset('/storage/' . $unit->thumbnail) }}"
                                            alt="1">
                                    </a>
                                    <div class="blog-details">
                                        <a href="/units/{{ $unit->slug }}">
                                            <h4>{{ $unit->name }}</h4>
                                        </a>
                                        <h6>Palangka Raya - Buntok</h6>

                                        <div class="d-flex align-items-center justify-content-between mt-3">
                                            <div class="message">
                                                <img class="img-fluid star" src="../../assets/images/svg/star-fill.svg"
                                                    alt="star">
                                                <h6>{{ number_format($unit->ratings_avg_rating, 1) }}</h6>
                                            </div>

                                            <h6 class="mt-0 theme-color">{{ $unit->operator->name }}</h6>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div> --}}
            <!-- blog section starts -->
            <section class="section-b-space">
                <div class="custom-container">
                    <div class="title">
                        <h2>LATEST UNIT</h2>
                        <a href="/units" wire:navigation>View all</a>
                    </div>

                    <div class="swiper blog-slider">
                        <div class="swiper-wrapper">

                            @foreach ($latestUnits as $unit)
                                <div class="swiper-slide">
                                    <div class="blog-box ratio2_3">
                                        <a href="/units/{{ $unit->slug }}" class="blog-box-img" wire:navigation>
                                            <img class="bg-img blog-img"
                                                src="{{ asset('/storage/' . $unit->thumbnail) }}" alt="1">
                                        </a>
                                        <div class="blog-details">
                                            <a href="/units/{{ $unit->slug }}" wire:navigation>
                                                <h4>{{ $unit->name }}</h4>
                                            </a>
                                            <h6>Palangka Raya - Buntok</h6>

                                            <div class="d-flex align-items-center justify-content-between mt-3">
                                                <div class="message">
                                                    <img class="img-fluid star"
                                                        src="../../assets/images/svg/star-fill.svg" alt="star">
                                                    <h6>{{ number_format($unit->ratings_avg_rating, 1) }}</h6>
                                                </div>

                                                <h6 class="mt-0 theme-color">{{ $unit->operator->name }}</h6>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            @endforeach

                        </div>
                    </div>
                </div>
            </section>
            <!-- blog section starts -->
            <!-- panel-space start -->
            <div class="panel-space"></div>
            <!-- panel-space end -->
            <x-menus.bottom />
        </div>
    </div>
</div>