@section('title')
    BAJUAL - Transformation
@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('/storage/' . $category->icon) }}
@stop

<div>
    <!-- header starts -->
    <header class="main-header">
        <div class="custom-container">
            <div class="header-panel">
                <div class="d-flex align-items-center gap-2">
                    <a href="/" wire:navigate>
                        <img class="img-fluid icon-btn" src="../../assets/images/svg/left-arrow-32.svg" alt="left-arrow">
                    </a>
                    <h3>Category {{ strtoupper($category->name) }} ada {{ $category->units->count() }} Unit</h3>
                </div>
            </div>
        </div>
    </header>
    <!-- header end -->

    <!-- search section starts -->
    <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 with-filter" id="inputusername"
                            placeholder="Search destinations">
                        <i class="iconsax search-icon" data-icon="search-normal-2"> </i>
                        <a href="#filter" data-bs-toggle="offcanvas">
                            <i class="iconsax filter-icon" data-icon="setting-3"> </i>
                        </a>
                    </div>
                </div>
            </form>
        </div>

        <div class="custom-container">
            <ul class="service-list mt-3">
                @foreach ($category->units()->latest()->get() 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 class="fw-medium title-color service-name">{{ $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>
        </div>
    </section>
    <!-- search section starts -->

    <!-- filter offcanvas starts -->
    <div class="offcanvas offcanvas-bottom filter-offcanvas" tabindex="-1" id="filter">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasBottomLabel">Filter by (4)</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
        </div>
        <div class="custom-container">
            <ul class="nav nav-pills tab-style1 mt-3 mb-2" id="Default-tab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="home-tab" data-bs-toggle="pill" data-bs-target="#home"
                        type="button" role="tab">Provider</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="profile-tab" data-bs-toggle="pill" data-bs-target="#profile"
                        type="button" role="tab">Price & rate</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="distance-tab" data-bs-toggle="pill" data-bs-target="#distance"
                        type="button" role="tab">Distance</button>
                </li>
            </ul>
        </div>
        <div class="offcanvas-body pt-2">
            <div class="tab-content" id="myTabContent1">
                <div class="tab-pane fade show active" id="home" role="tabpanel" tabindex="0">
                    <div class="switch-part">
                        <h5 class="fw-normal title-color">Available provider only</h5>
                        <div class="switch-btn">
                            <input type="checkbox" checked>
                        </div>
                    </div>

                    <div class="d-flex align-items-center justify-content-between gap-1 mt-3">
                        <h5 class="content-color fw-normal">Provider List</h5>
                        <select class="form-select w-auto">
                            <option selected>Highest Experience</option>
                            <option value="1">Lowest Experience</option>
                            <option value="2">Highest Served</option>
                            <option value="3">Lowest Served</option>
                        </select>
                    </div>

                    <form class="auth-form mt-0 p-0 bg-transparent">
                        <div class="form-group">
                            <div class="form-input">
                                <input type="search" class="form-control search wo-filter"
                                    placeholder="Search here..">
                                <i class="iconsax search-icon" data-icon="search-normal-2"> </i>
                            </div>
                        </div>
                    </form>

                    <ul class="categories-listing provider-listing">
                        <li class="listing-categories">
                            <div class="form-check form-check-reverse text-start">
                                <label class="form-check-label" for="categories1">
                                    <span class="d-flex align-items-center">
                                        <img class="icon" src="../../assets/images/profile/p4.png" alt="p4">
                                        <span class="provider-content">
                                            <span class="categories-name">Templeton Peck <span class="fw-medium"> | 86
                                                    served</span></span>
                                            <span class="content-color fw-normal">8 years of experience</span>
                                        </span>
                                    </span>
                                </label>
                                <input class="form-check-input" type="checkbox" name="categories" id="categories1"
                                    checked>
                            </div>
                        </li>

                        <li class="listing-categories">
                            <div class="form-check form-check-reverse text-start">
                                <label class="form-check-label" for="categories2">
                                    <span class="d-flex align-items-center">
                                        <img class="icon" src="../../assets/images/profile/p5.png" alt="p5">
                                        <span class="provider-content">
                                            <span class="categories-name">Rhonda Rhodes <span class="fw-medium"> | 30
                                                    served</span></span>
                                            <span class="content-color fw-normal">3 years of experience</span>
                                        </span>
                                    </span>
                                </label>
                                <input class="form-check-input" type="checkbox" name="categories" id="categories2"
                                    checked>
                            </div>
                        </li>

                        <li class="listing-categories">
                            <div class="form-check form-check-reverse text-start">
                                <label class="form-check-label" for="categories4">
                                    <span class="d-flex align-items-center">
                                        <img class="icon" src="../../assets/images/profile/p9.png" alt="p9">
                                        <span class="provider-content">
                                            <span class="categories-name">Kurt Bates <span class="fw-medium"> | 22
                                                    served</span></span>
                                            <span class="content-color fw-normal">2 years of experience</span>
                                        </span>
                                    </span>
                                </label>
                                <input class="form-check-input" type="checkbox" name="categories" id="categories4">
                            </div>
                        </li>
                        <li class="listing-categories">
                            <div class="form-check form-check-reverse text-start">
                                <label class="form-check-label" for="categories5">
                                    <span class="d-flex align-items-center">
                                        <img class="icon" src="../../assets/images/profile/p10.png" alt="p10">
                                        <span class="provider-content">
                                            <span class="categories-name">Ricky Smith <span class="fw-medium"> | 50
                                                    served</span></span>
                                            <span class="content-color fw-normal">5 years of experience</span>
                                        </span>
                                    </span>
                                </label>
                                <input class="form-check-input" type="checkbox" name="categories" id="categories5">
                            </div>
                        </li>
                        <li class="listing-categories">
                            <div class="form-check form-check-reverse text-start">
                                <label class="form-check-label" for="categories6">
                                    <span class="d-flex align-items-center">
                                        <img class="icon" src="../../assets/images/profile/p17.png" alt="p17">
                                        <span class="provider-content">
                                            <span class="categories-name">Stella Milevski <span class="fw-medium"> |
                                                    50
                                                    served</span></span>
                                            <span class="content-color fw-normal">1.5 years of experience</span>
                                        </span>
                                    </span>
                                </label>
                                <input class="form-check-input" type="checkbox" name="categories" id="categories6">
                            </div>
                        </li>
                    </ul>
                </div>

                <div class=" tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab"
                    tabindex="0">
                    <div class="price-range">
                        <label class="form-label">Price Range</label>
                        <div class="range-slider">
                            <div class="range-container">
                                <div class="sliders-control">
                                    <input id="fromSlider" type="range" value="100" min="0"
                                        max="1000">
                                    <input id="toSlider" type="range" value="750" min="0"
                                        max="1000">
                                </div>
                                <div class="form_control">
                                    <div class="form-control-container">
                                        <span class="theme-color">$</span>
                                        <input class="form-control-container-time-input" type="number"
                                            id="fromInput" value="100" min="0" max="1000">
                                    </div>
                                    <div class="form-control-container">
                                        <span class="theme-color">$</span>
                                        <input class="form-control-container-time-input" type="number"
                                            id="toInput" value="750" min="0" max="1000">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <h5 class="content-color fw-normal mt-3">Ratings</h5>

                    <ul class="categories-listing">
                        <li class="listing-categories">
                            <div class="form-check form-check-reverse text-start">
                                <label class="form-check-label" for="rating5">
                                    <span class="rating-count">5 rate</span>
                                    <span class="d-flex align-items-center ps-2">
                                        <img class="star" src="../../assets/images/svg/star-fill.svg"
                                            alt="star">
                                        <img class="star" src="../../assets/images/svg/star-fill.svg"
                                            alt="star">
                                        <img class="star" src="../../assets/images/svg/star-fill.svg"
                                            alt="star">
                                        <img class="star" src="../../assets/images/svg/star-fill.svg"
                                            alt="star">
                                        <img class="star" src="../../assets/images/svg/star-fill.svg"
                                            alt="star">
                                    </span>
                                </label>
                                <input class="form-check-input" type="checkbox" name="rating" id="rating5"
                                    checked>
                            </div>
                        </li>
                        <li class="listing-categories">
                            <div class="form-check form-check-reverse text-start">
                                <label class="form-check-label" for="rating4">
                                    <span class="rating-count">4 rate</span>
                                    <span class="d-flex align-items-center ps-2">
                                        <img class="star" src="../../assets/images/svg/star-fill.svg"
                                            alt="star">
                                        <img class="star" src="../../assets/images/svg/star-fill.svg"
                                            alt="star">
                                        <img class="star" src="../../assets/images/svg/star-fill.svg"
                                            alt="star">
                                        <img class="star" src="../../assets/images/svg/star-fill.svg"
                                            alt="star">
                                    </span>
                                </label>
                                <input class="form-check-input" type="checkbox" name="rating" id="rating4"
                                    checked>
                            </div>
                        </li>
                        <li class="listing-categories">
                            <div class="form-check form-check-reverse text-start">
                                <label class="form-check-label" for="rating3">
                                    <span class="rating-count">3 rate</span>
                                    <span class="d-flex align-items-center ps-2">
                                        <img class="star" src="../../assets/images/svg/star-fill.svg"
                                            alt="star">
                                        <img class="star" src="../../assets/images/svg/star-fill.svg"
                                            alt="star">
                                        <img class="star" src="../../assets/images/svg/star-fill.svg"
                                            alt="star">
                                    </span>
                                </label>
                                <input class="form-check-input" type="checkbox" name="rating" id="rating3">
                            </div>
                        </li>
                        <li class="listing-categories">
                            <div class="form-check form-check-reverse text-start">
                                <label class="form-check-label" for="rating2">
                                    <span class="rating-count">2 rate</span>
                                    <span class="d-flex align-items-center ps-2">
                                        <img class="star" src="../../assets/images/svg/star-fill.svg"
                                            alt="star">
                                        <img class="star" src="../../assets/images/svg/star-fill.svg"
                                            alt="star">
                                    </span>
                                </label>
                                <input class="form-check-input" type="checkbox" name="rating" id="rating2">
                            </div>
                        </li>
                        <li class="listing-categories">
                            <div class="form-check form-check-reverse text-start">
                                <label class="form-check-label" for="rating1">
                                    <span class="rating-count">1 rate</span>
                                    <span class="d-flex align-items-center ps-2">
                                        <img class="star" src="../../assets/images/svg/star-fill.svg"
                                            alt="star">
                                    </span>
                                </label>
                                <input class="form-check-input" type="checkbox" name="rating" id="rating1">
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="tab-pane fade" id="distance" role="tabpanel" tabindex="0">
                    <ul class="categories-listing">
                        <li class="listing-categories">
                            <div class="form-check form-check-reverse text-start">
                                <label class="form-check-label" for="location1">
                                    <span class="d-flex align-items-center">
                                        <i class="iconsax icon pe-2" data-icon="route-1"> </i>
                                        <span class="categories-name">Near by Location</span>
                                    </span>
                                </label>
                                <input class="form-check-input" type="radio" name="location" id="location1">
                            </div>
                        </li>
                        <li class="listing-categories pb-4 flex-column">
                            <div class="form-check form-check-reverse text-start">
                                <label class="form-check-label" for="location2">
                                    <span class="d-flex align-items-center">
                                        <i class="iconsax icon pe-2" data-icon="globe"> </i>
                                        <span class="categories-name">Distance location</span>
                                    </span>
                                </label>
                                <input class="form-check-input" type="radio" name="location" id="location2"
                                    checked>
                            </div>

                            <div class="rating-wrapper">
                                <div class="progress-bar-wrap" id="progress-bar-wrap"
                                    onclick="progressBarClickHandler(event)" onmousedown="sliderOnChangeHandler()">
                                    <span class="progress-bar" id="progress-bar"></span>
                                    <div>
                                        <div class="slider" id="slider">
                                            <img class="emoji-img" id="image"
                                                src="../../assets/images/svg/user.svg" alt="">
                                        </div>
                                    </div>
                                    <div class="rating-count">
                                        <span class="d-block">10 <span>km</span> </span>
                                        <span class="d-block">20 <span>km</span> </span>
                                        <span class="d-block">30 <span>km</span> </span>
                                        <span class="d-block">40 <span>km</span> </span>
                                        <span class="d-block">50 <span>km</span> </span>
                                        <span class="d-block">60 <span>km</span> </span>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="grid-btn fixed-button position-relative">
            <div class="custom-container">
                <div class="d-flex align-items-center gap-3">
                    <a href="search.html" class="btn outline-btn w-50">Clear all</a>
                    <a href="search.html" class="btn theme-btn w-50">Apply</a>
                </div>
            </div>
        </div>
    </div>
    <!-- filter offcanvas end -->
    <!-- panel-space start -->
    <div class="panel-space"></div>
    <!-- panel-space end -->
    <x-menus.bottom />
</div>