@extends('layouts.frontend-member')
@section('title', __('message.product'))
@section('content')
    <div class="page-content" style="margin-bottom:50px;">
        <!-- <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')
                    <!-- top icon -->
                    @include('frontend.inc.list-icon')
                </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> --}}

                <!-- Swiper -->
                <div class="swiper mySwiper w100 ">
                    <div class="swiper-wrapper uni-swiper-wrapper">
                        @foreach ($slides as $slide)
                            <div class="swiper-slide ">
                                <img src="{{ asset($slide->image) }}"
                                        style="width: 100%; height: 100%; object-fit: fill;">    
                            </div>
                        @endforeach

                    </div>
                    <div class="swiper-pagination"></div>
                </div>
        </div>

        <div class="row mt-2">
            <div class="input-group pb-2 ">
                <span class="input-group-text bg-light" id="basic-addon1"><i class="fal fa-volume-up"
                        style="color: #838383;"></i></span>
                <div id="textShow" class="text-dark form-control shadow-sm">
                    <marquee direction="left" behavior="scroll" onMouseOver="this.stop()" onMouseOut="this.start()">
                        ยินดีต้อนรับสู่ Finanasia ตลาดแพลตฟอร์มแห่งใหม่ของพ่อค้าแม่ค้าออนไลน์สู่โลกแห่งการตลาดแบบ Realtime
                        เวลาเปิดทำการ 10:00-22:00น.
                    </marquee>
                </div>
            </div>
        </div>
        <div class="card shadow-sm" style="padding: -11px 10px 10px 0px !important; background-color: #fafafa !important;">
            <div class="row">
                <div class="col-sm-6 col-xs-12 w-50" style="padding-right:0rem;">
                    <button type="button" class="btn btn-light w-100 rounded-pill my-2  shadow"
                        style=" padding: 15px 40px 15px 2px !important ; border: 1px solid transparent;"><span
                            class="text-center" style="margin: 10px 10px 10px 0px; vertical-align: middle;"><i
                                class="fal fa-chart-line" style="color: #919191; font-size: 1.4rem;"></i>
                            <b>แบ่งปัน</b></span>
                        {{-- <i class="fal fa-angle-double-right" style=""></i> --}}
                    </button>
                    <button type="button" class="btn btn-light w-100 rounded-pill my-2 shadow"
                        style="  padding: 15px 40px 15px 2px; border: 1px solid transparent;"><span class="text-center"
                            style="margin: 10px 10px 10px 0px; vertical-align: middle;"> <i class="fal fa-analytics"
                                style="color: #919191; font-size: 1.4rem;"></i>
                            <b>คำคม</b></span>
                    </button>
                    <button type="button" class="btn btn-light w-100 rounded-pill my-2 shadow"
                        style="padding: 15px 14px 15px 16px; border: 1px solid transparent;"><span class="text-center"
                            style="margin: -2rem; vertical-align: middle;"> <i class="fal fa-sliders-h"
                                style="color: #919191; font-size: 1.4rem;"></i>
                            <b>การชุดสภาพคล่อง</b></span>
                    </button>
                </div>
                <div class="col-sm-6 col-xs-12 w-50" style="padding-left:0 rem;">
                    <button type="button" class="btn btn-light w-100 rounded-pill my-2 shadow"
                        style="  padding: 15px 40px 15px 2px; border: 1px solid transparent;"><span class="text-center"
                            style="margin: 10px 10px 10px 12px; vertical-align: middle;"> <i class="fal fa-gift"
                                style="color: #919191; font-size: 1.4rem;"></i> <b>สวัสดิการ</b> </span>
                    </button>
                    <button type="button" class="btn btn-light w-100 rounded-pill my-2 shadow"
                        style="  padding: 15px 50px 15px 2px; border: 1px solid transparent;"><span class="text-center"
                            style="margin: 10px 10px 10px 0px; "><i class="fal fa-calendar-check"
                                style="color: #919191; font-size: 1.4rem;"></i>
                            <b>เข้าสู่ระบบ</b></span>
                    </button>
                    <button type="button" class="btn btn-light w-100 rounded-pill my-2 shadow"
                        style="  padding: 15px 50px 15px 2px; border: 1px solid transparent;"><span class="text-center"
                            style="margin: 10px 10px 10px 0px;"><i class="fal fa-comment-alt-minus"
                                style="color: #919191; font-size: 1.4rem;"></i> <b>ล็อกอัพเหมืองแร่</b> </span>
                    </button>
                </div>
            </div>
        </div>
        <div class="card shadow-sm mr-2 ml-2">
            <div class="row row-cols-3 row-cols-md-3 g-3 mt-1"
                style="border-bottom: 2px solic #ccc;background-color: rgb(0,0,0,0.5);border-radius: 4px;font-weight: bold;height:40px;margin-bottom: 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.price') }}
                </div>
                <div class="col" style="text-align:right !important;color:white;margin-top:0px;line-height: 40px;">
                    {{ __('message.status') }} &nbsp;
                </div>

            </div>
            @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>{{ $product->name }}/USDT</h4>
                                {{-- <img src="{{ asset($product->image?? 'images/no_image.png') }}" style="width: 20px" alt="" > --}}
                            </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> --}}
                            <button class="btn btn-sm" id="price_show{{ $product->id }}">
                                <i class="fal fs-fw fa-lg fa-spinner fa-spin"></i>
                            </button>

                        </div>
                        <div class="col" style="text-align:right !important;padding-right:10px;">
                            <button class="btn btn-sm" style="margin-right: 10px;" id="rise_down_change{{ $product->id }}">
                                {{-- {{ __('message.buy sell') }} &nbsp; --}}
                                Loading...
                            </button>
                        </div>
                    </div>
                    <hr />
                 <!--Start Check IsCryto OR NOT-->
                 {{-- @if ($product->is_crypto == true) --}}
                 <script>
                     async function fetchCryptoData() {
                         
                         const url =  `https://min-api.cryptocompare.com/data/pricemultifull?fsyms={{ strtoupper($product->detail ?? '') }}&tsyms=usd`;
                         
                         try {
                             const response = await fetch(url)
                                 .then(response => response.json())
                                 .then(data => {
                                     const crypto = data.RAW.{{ strtoupper($product->detail) }}.USD;
                                     // const price = data.RAW.BTC.USD;
                                     const price = crypto.PRICE.toFixed(4);
                                     const change = crypto.CHANGEPCT24HOUR.toFixed(2);
                                     const priceElement = document.querySelector('#price_show{{ $product->id }}');
                                     const changeElement = document.querySelector('#rise_down_change{{ $product->id }}');

                                     // document.getElementById('name_show{{ $product->id }}').innerHTML = `
                                     //           <strong>${crypto.FROMSYMBOL}</strong>
                                     //       `;
                                                         //   document.getElementById('price_show{{ $product->id }}').innerHTML = `
                                     //             <div> ${crypto.PRICE.toFixed(4)}</div>
                                     //         `;
                                     console.log(priceElement.innerHTML);
                                     console.log(changeElement.innerHTML);

                                     priceElement.innerText = ` ${price}`;
                                     
                                     if (change >= 0) {
                                         priceElement.classList.add('btn-primary');
                                     } else {
                                         priceElement.classList.add('btn-danger');
                                     }

                                     changeElement.innerText = ` ${change}%`;

                                     if (change >= 0) {
                                         changeElement.classList.add('btn-primary');
                                     } else {
                                         changeElement.classList.add('btn-danger');
                                     }

                                 })


                         } catch (error) {
                             console.error('Error fetching data:', error);
                             // document.getElementById('crypto-loaing').innerHTML = 'Please try again loading...';
                         }
                         // if (!response.ok) {
                         //     throw new Error(
                         //       "Network response was not ok " + response.statusText
                         //     );
                         // }
                     }

                     // Set interval to fetch new data every 10 seconds (10000 milliseconds)
                       setInterval(fetchCryptoData, 1500);
                     //   clearInterval(fetchCryptoData,500);
                     // load function
                     document.addEventListener("DOMContentLoaded", fetchCryptoData);
                 </script>
                 {{-- @else --}}
                     {{-- <script>
                         async function fetchCryptoData() {
                             
                             const url =  `https://min-api.cryptocompare.com/data/pricemultifull?fsyms=BTC&tsyms=usd`;
                             
                             try {
                                 const response = await fetch(url)
                                     .then(response => response.json())
                                     .then(data => {
                                         const crypto = data.RAW.BTC.USD;
                                         // const price = data.RAW.BTC.USD;
                                         const price = crypto.PRICE.toFixed(4);
                                         const change = crypto.CHANGEPCT24HOUR.toFixed(2);
                                         const priceElement = document.querySelector('#price_show{{ $product->id }}');
                                         const changeElement = document.querySelector('#rise_down_change{{ $product->id }}');

                                         // document.getElementById('name_show{{ $product->id }}').innerHTML = `
                                         //           <strong>${crypto.FROMSYMBOL}</strong>
                                         //       `;
                                                             //   document.getElementById('price_show{{ $product->id }}').innerHTML = `
                                         //             <div> ${crypto.PRICE.toFixed(4)}</div>
                                         //         `;
                                         console.log(priceElement.innerHTML);
                                         console.log(changeElement.innerHTML);

                                         priceElement.innerText = ` ${price}`;
                                         
                                         if (change >= 0) {
                                             priceElement.classList.add('btn-primary');
                                         } else {
                                             priceElement.classList.add('btn-danger');
                                         }

                                         changeElement.innerText = ` ${change}%`;

                                         if (change >= 0) {
                                             changeElement.classList.add('btn-primary');
                                         } else {
                                             changeElement.classList.add('btn-danger');
                                         }

                                     })


                             } catch (error) {
                                 console.error('Error fetching data:', error);
                                 // document.getElementById('crypto-loaing').innerHTML = 'Please try again loading...';
                             }
                             // if (!response.ok) {
                             //     throw new Error(
                             //       "Network response was not ok " + response.statusText
                             //     );
                             // }
                         }

                         // Set interval to fetch new data every 10 seconds (10000 milliseconds)
                        //  setInterval(fetchCryptoData, 2500);
                         //   clearInterval(fetchCryptoData,500);
                         // load function
                         document.addEventListener("DOMContentLoaded", fetchCryptoData);
                     </script> --}}
                 {{-- @endif --}}
                 <!--End Check IsCryto OR NOT-->

                </a>
            @endforeach
            <!--end Loan Form-->
        </div>
    </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;
        }
        .btn-danger{
            background-color: #db543c !important;
            /* background-color: #ff5f56 !important; */
            border: none;
        }
        .rounded-pill {
            border-radius: 15px !important;

        }
        a:hover{
            text-decoration: none;
            color: #5d7577 !important; 
            /* background-color: #fafafa; */
        }
        /* button:hover{
            border: none;
        } */

    </style>
@endpush
@push('scripts')
@endpush