@extends('layouts.frontend-member')
@section('title', __('message.product'))
@section('content')
    <div class="page-content" style="margin-bottom:70px;">
        <!-- <div class="page-content pb-0 mb-0 card" style="box-shadow: 0px 5px 9px 0px #000000;"> -->
        <div class="page-content pb-0 mb-0 card" >
            <div class="profile-img text-center text-bg-dark shadow" style="height: 45px !important;">
                <h5 class="text-white fw-bolder" style="margin-top:10px;">
                    {{__('message.home')}}
                    @include('frontend.inc.change-language')
                </h5>
            </div>
        </div>
        <div class="page-content py-0">
            <!-- <div class="banner-slider">
                @foreach ($slides as $slide)
                    <div class="banner-item">
                        <a href="#">
                            <img src="{{ asset($slide->image) }}" class="img-fluid rounded-2" alt="">
                        </a>
                    </div>
                @endforeach
            </div> -->
            <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-inner">
                    @foreach($slides as $index => $slide)
                    <div class="carousel-item @if($index==0) active @endif">
                      <img class="d-block w-100" src="{{ asset($slide->image) }}" alt="First slide">
                    </div>
                    @endforeach
              </div>
              <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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="#carouselExampleControls" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
              </button>
            </div>
        </div>
        <div style="border:2px solid #ccc;border-radius: 10px;padding:0px;margin-top:10px;margin-bottom: 10px;height:40px;background-color: white;margin-left:10px; margin-right: 10px;">
            <div style="width:20px;float: left;">
                <img src="{{asset('announce.png')}}" style="width:20px;margin-top:7px;">
            </div>
            <marquee style="float:left;margin-top:-20px;" scrolldelay='200'>
                ประกาศ：กิจกรรมใหม่ล่าสุด สะสม คะเเนนครบ 1,000 คะเเนน ลุ้นรับรางวัล มูลค่ามากกว่า 5,000,000 บาท
            </marquee>
        </div>
        <div class="row row-cols-3 row-cols-md-3 g-3"
            style="border-bottom: 2px solic #ccc;background-color: rgb(0,0,0,0.5);border-radius: 2px;font-weight: bold;height:40px;margin-bottom: 10px !important;margin-left:10px !important; margin-right: 10px !important;">
            <div class="col d-flex" style="text-align:left !important;color:white;margin-top:0px;line-height: 40px;">
                &nbsp; {{ __('message.product name') }}
            </div>
            <div class="col" style="text-align:center !important;color:white;margin-top:0px;line-height: 40px;">
                {{ __('message.market price') }}
            </div>
            <div class="col" style="text-align:right !important;color:white;margin-top:0px;line-height: 40px;">
                {{ __('message.status') }} &nbsp;
            </div>

        </div>
        <div style="background-color: #00000080;padding:10px;margin-left:10px; margin-right: 10px;"> 
        @foreach ($products as $index => $product)
            <a href="{{ route('member.product-trade', $product) }}" style="color:black;">
                <div class="row row-cols-3 row-cols-md-3 g-3" style="border-bottom: 2px solic #ccc;margin-bottom:700px;">
                    <div class="col d-flex" style="text-align:left !important;padding-left:15px;">
                        <div style="padding-left:10px;">
                            <h4 style="color:white">{{ $product->name }}</h4>
                            <!-- <div style="">
                                {!! $product->detail !!}
                            </div> -->
                        </div>
                    </div>
                    <div class="col credit" style="text-align:center !important;">
                        <button class="btn btn-danger btn-sm product-prices product-price-{{ $index }}"
                            data-price="{{ $product->current_price }}">
                            {{ number_format($product->current_price, 6) }}
                        </button>
                    </div>
                    <div class="col" style="text-align:right !important;padding-right:10px;">
                        <button class="btn btn-danger btn-sm" style="margin-right: 10px;">
                            {{ __('message.buy sell') }} &nbsp;
                        </button>
                    </div>
                </div>
                <hr style="color:white" />
            </a>
        @endforeach
        </div>
        <!--end Loan Form-->
    </div>
    @include('app.sweetAlert')
@endsection
@push('styles')
    <style type="text/css">
        .page-content {
            margin-bottom: 0px;
        }

        .btn-primary {
            background: rgb(38, 168, 72) !important;
            border: none;
        }
    </style>
@endpush
@push('styles')
    <script type="text/javascript">
        function getRandomFloat(min = 0.00123, max = 0.002, decimals = 6) {
            const str = (Math.random() * (max - min) + min);

            return parseFloat(str);
        }
        var old_price = [];
        var random = 0;
        setInterval(function() {
            $(".product-prices").each(function(index) {
                var current_price = $(this).attr('data-price');
                var price = current_price;
                random = Math.random();
                if (random < 0.5) {
                    current_price = parseFloat(price) - (price * (getRandomFloat()));
                } else {
                    current_price = (parseFloat(price) + price * (getRandomFloat()));
                }
                // console.log(old_price[index], current_price)

                $(this).attr('data-price', current_price);
                if (old_price[index] > current_price) {
                    $(this).removeClass('btn-primary');
                    $(this).addClass('btn-danger');
                } else {
                    $(this).removeClass('btn-danger');
                    $(this).addClass('btn-primary');
                }
                current_price = current_price.toFixed(6);
                old_price[index] = current_price;
                var openingPoint = current_price;
                $(this).html(current_price);
                // console.log(data);
                old_price[index] = current_price;
            });
        }, 1000);
    </script>
@endpush