@extends('layouts.frontend-member')
@section('title', __('message.product'))
@section('content')
    <div id="app" data-v-app="">
        <div class="van-config-provider">
            <main class="pb-[60px]">
                <div class="van-nav-bar van-nav-bar--fixed van-hairline--bottom">
                    <div class="van-nav-bar__content"><!---->
                        <div class="van-nav-bar__title van-ellipsis">Iplusview</div>
                        <div class="van-nav-bar__right van-haptics-feedback"><i
                                class="van-badge__wrapper van-icon van-icon-service-o"
                                style="color: white; font-size: 24px;"><!----><!----><!----></i></div>
                    </div>
                </div>
                <div class="van-swipe h-[200px] pt-[46px]">

                    <!-- Swiper -->
                    <div class="swiper mySwiper">
                        <div class="swiper-wrapper">
                            @foreach ($slides as $slide)
                                {{-- <div class="carousel-item @if ($loop->first) active @endif ">
                            <img src="{{ asset($slide->image) }}" class="d-block w-100" style="width:100%;border-radius:5px;" />
                        </div> --}}
                                <div class="swiper-slide">
                                    <div class="van-swipe-item"><img src="{{ asset($slide->image) }}"
                                            style="width: 100%; height: 100%; object-fit: fill;"></div>
                                </div>
                            @endforeach

                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                    <div class="van-swipe__indicators"><i class="van-swipe__indicator"></i><i
                            class="van-swipe__indicator"></i><i
                            class="van-swipe__indicator van-swipe__indicator--active"></i><i
                            class="van-swipe__indicator"></i></div>
                </div>
                <div role="alert" class="van-notice-bar" style="color: rgb(229, 231, 235); background: rgb(0, 0, 0);">
                    <i
                        class="van-badge__wrapper van-icon van-icon-info-o van-notice-bar__left-icon"><!----><!----><!----></i>
                    <!-- <div role="marquee" class="van-notice-bar__wrap">
                                        <div class="van-notice-bar__content"
                                          style="transition-duration: 11.5482s; transform: translateX(-203.891px);">
                                          ยินดีต้อนรับเข้าสู่กิจกรรมสร้างรายได้</div>
                                      </div> -->
                    <marquee width="100%" direction="left" style="transition-duration: 11.5482s;">
                        ยินดีต้อนรับเข้าสู่กิจกรรมสร้างรายได้
                    </marquee>
                    <!---->
                </div>
                <div class="flex flex-col px-5 mt-4">
                    <div class="text-white font-bold">ราคา</div>
                    <ul class="flex flex-col h-[300px] overflow-scroll">
                        @foreach ($products as $product)
                            <a href="{{ route('member.product-trade', $product) }}" class="flex items-center mt-[10px]">
                                <div class="basis-1/2 font-bold flex flex-row"><img class="h-[20px] w-[20px] mr-2"
                                        style="display: none;">
                                    <h3>{{ $product->name }} <span class="text-xs text-gray-300">/USDT</span></h3>
                                </div>
                                <div class="basis-1/4 font-bold overflow-hidden">
                                    {{ number_format($product->current_price ?? 0, 6) }}
                                </div>
                                <div class="basis-1/4">
                                    {{-- percentage  --}}