@extends('layouts.app')

@section('title')
Top Global Store
@endsection

@section('content')

<!-- Start Hero -->
 <section class="relative md:flex table w-full items-center md:h-screen py-36 bg-[url('/images/mall.jpg') ] bg-center bg-no-repeat bg-cover" style="background-image: url('{{ asset('images/mall.jpg') }}');">
    <div class="absolute inset-0 bg-gradient-to-t to-transparent via-slate-900/50 from-slate-900/90"></div>
    <div class="container relative">
        <div class="grid justify-center grid-cols-1">
            <div class="text-center">
                <span class="text-lg font-semibold text-white uppercase">Global Ecommerce Arbitrage</span>
                <h4 class="my-3 text-4xl font-bold leading-normal text-white md:text-6xl md:leading-normal">Top Global Store</h4>
                <p class="text-lg text-white/70">G.E.A.S is a C2C business that accommodates both novice and pro traders. Generate massive sales on autopilot by leveraging on cutting-edge technology which merges AI and ecommerce.</p>

                <div class="mt-6">
                    <a href="{{ route('bid-markets') }}" class="inline-block px-5 py-2 font-semibold tracking-wide text-center text-orange-500 align-middle bg-white rounded-md">Explore Market <i class="mdi mdi-arrow-right"></i></a>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End Hero -->


<!--<section class="relative md:flex table w-full items-center h-screen py-36">-->
<!--    <section id="showSection" class="absolute md:flex table w-full items-center md:h-screen py-36 bg-[url('/images/mall.jpg')] bg-center bg-no-repeat bg-cover" style="background-image: url('{{ asset('images/mall.jpg') }}');">-->
<!--        <div class="absolute inset-0 bg-gradient-to-t to-transparent via-slate-900/50 from-slate-900/90"></div>-->
<!--        <div class="container relative">-->
<!--            <div class="grid justify-center grid-cols-1">-->
<!--                <div class="text-center">-->
<!--                    <span class="text-lg font-semibold text-white uppercase">Global Ecommerce Arbitrage</span>-->
<!--                    <h4 class="my-3 text-4xl font-bold leading-normal text-white md:text-6xl md:leading-normal">Top Global Store</h4>-->
<!--                    <p class="text-lg text-white/70">G.E.A.S is a C2C business that accommodates both novice and pro traders. Generate massive sales on autopilot by leveraging on cutting-edge technology which merges AI and ecommerce.</p>-->

<!--                    <div class="mt-6">-->
<!--                        <a href="{{ route('bid-markets') }}" class="inline-block px-5 py-2 font-semibold tracking-wide text-center text-orange-500 align-middle bg-white rounded-md">Explore Market <i class="mdi mdi-arrow-right"></i></a>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </section>-->

    <!-- Second Section with fade-in effect -->
<!--    <section id="fadeSection" class="absolute md:flex table w-full items-center md:h-screen py-36 bg-center bg-no-repeat bg-cover hide" style="background-image: url('{{ asset('images/s-greeting.png') }}');">-->
<!--        <div class="absolute inset-0 bg-gradient-to-t to-transparent via-slate-900/50 from-slate-900/90"></div>-->
<!--        <div class="container relative">-->
<!--            <div class="grid justify-center grid-cols-1">-->
<!--                <div class="text-center">-->
<!--                    <span class="text-lg font-semibold text-white uppercase">Global Ecommerce Arbitrage</span>-->
<!--                    <h4 class="my-3 text-4xl font-bold leading-normal text-white md:text-6xl md:leading-normal">Top Global Store</h4>-->
<!--                    <p class="text-lg text-white/70">G.E.A.S is a C2C business that accommodates both novice and pro traders. Generate massive sales on autopilot by leveraging on cutting-edge technology which merges AI and ecommerce.</p>-->

<!--                    <div class="mt-6">-->
<!--                        <a href="{{ route('bid-markets') }}" class="inline-block px-5 py-2 font-semibold tracking-wide text-center text-orange-500 align-middle bg-white rounded-md">Explore Market <i class="mdi mdi-arrow-right"></i></a>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </section>-->
<!--</section>-->

<!-- Start -->
<section class="relative py-16 md:py-24">
    <div class="container relative">
        <div class="grid justify-center grid-cols-1">
            <div class="relative z-2 duration-500 sm:-mt-[200px] -mt-[140px] m-0">
                <div class="grid grid-cols-1 gap-6 lg:grid-cols-2 md:grid-cols-2">
                    <div class="relative overflow-hidden text-center rounded-md shadow-md">
                        <div class="p-6" style="background-color: #660066;">
                            <span class="text-white bg-orange-500 font-bold px-2.5 py-0.5 rounded-full h-5">Bid On</span>

                            <h5 class="mt-2 font-medium text-white">Lower Value</h5>

                            <p class="mt-2 text-white/70">Bid for products of lower value on one market</p>
                        </div>

                        <div class="p-6 bg-white dark:bg-slate-900">
                            <p class="text-sm font-medium uppercase">Bid Windows</p>
                            <h5 class="mt-1 text-xl font-semibold uppercase">3 Daily Sessions</h5>
                        </div>
                    </div>

                    <div class="relative overflow-hidden text-center rounded-md shadow-md">
                        <div class="p-6" style="background-color: #660066;">
                            <span class="text-white bg-orange-500 font-bold px-2.5 py-0.5 rounded-full h-5">Sell Off</span>

                            <h5 class="mt-2 font-medium text-white">Higher Value</h5>

                            <p class="mt-2 text-white/70">Sell the products for higher value on another market</p>
                        </div>

                        <div class="p-6 bg-white dark:bg-slate-900">
                            <p class="text-sm font-medium uppercase">Sell Evaluation</p>
                            <h5 class="mt-1 text-xl font-semibold uppercase">24 Hours</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container relative mt-16 md:mt-24">
        <div class="grid justify-center grid-cols-1 mb-6 text-center">
            <h5 class="mb-4 text-3xl font-semibold leading-normal">Latest Offers</h5>
            <p class="max-w-xl mx-auto text-slate-400">Bid on the latest products from the most popular markets</p>
        </div><!--end grid-->
        <div class="grid grid-cols-2 gap-6 pt-6 lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2">

            @foreach($products as $p)
            <div class="group">
                <div class="relative overflow-hidden duration-500 rounded-md shadow dark:shadow-gray-800 group-hover:shadow-lg group-hover:dark:shadow-gray-800">
                    <img src="{{ asset('storage/products/'.$p->image1) }}" class="duration-500 group-hover:scale-110" alt="">

                    <div class="absolute duration-500 -bottom-20 group-hover:bottom-3 start-3 end-3">
                        <a href="{{ route('product-details', $p->slug) }}" class="inline-block w-full px-5 py-2 text-base font-semibold tracking-wide text-center text-white align-middle duration-500 rounded-md bg-slate-900">Place Bid</a>
                    </div>

                    <ul class="list-none absolute top-[10px] end-4 opacity-0 group-hover:opacity-100 duration-500 space-y-1">
                        <li class="mt-1"><a href="{{ route('product-details', $p->slug) }}" class="inline-flex items-center justify-center tracking-wide text-center align-middle duration-500 bg-white rounded-full shadow size-10 text-slate-900 hover:bg-slate-900 hover:text-white"><i data-feather="eye" class="size-4"></i></a></li>
                    </ul>

                    <ul class="list-none absolute top-[10px] start-4">
                        <li><a href="{{ route('product-details', $p->slug) }}" class="bg-orange-600 text-white text-[10px] font-bold px-2.5 py-0.5 rounded h-5 flex items-center">{{ $p->market->name }} <i data-feather="shopping-bag" class="m-2 size-4"></i></a></li>
                    </ul>
                </div>

                <div class="mt-4">
                    <a href="{{ route('product-details', $p->slug) }}" class="text-lg font-medium hover:text-orange-500">{{ $p->name }} </a>
                    <div class="mt-1">
                        <p class="">Auction Value: ${{ number_format($p->value, 2) }}</p>
                        <p class="text-red-600"><del>${{ number_format($p->old_value, 2) }}</del></p>
                        <ul class="font-medium list-none text-amber-400">
                            @if($p->rating == 1)
                            <li class="inline"><i class="mdi mdi-star"></i></li>
                            <li class="inline text-slate-500">{{ number_format($p->rating, 1) }} rating</li>
                            @elseif($p->rating == 1.5)
                            <li class="inline"><i class="mdi mdi-star"></i></li>
                            <li class="inline"><i class="mdi mdi-star-half"></i></li>
                            <li class="inline text-slate-500">{{ number_format($p->rating, 1) }} rating</li>
                            @elseif($p->rating == 2)
                            <li class="inline"><i class="mdi mdi-star"></i></li>
                            <li class="inline"><i class="mdi mdi-star"></i></li>
                            <li class="inline text-slate-500">{{ number_format($p->rating, 1) }} rating</li>
                            @elseif($p->rating == 2.5)
                            <li class="inline"><i class="mdi mdi-star"></i></li>
                            <li class="inline"><i class="mdi mdi-star"></i></li>
                            <li class="inline"><i class="mdi mdi-star-half"></i></li>
                            <li class="inline text-slate-500">{{ number_format($p->rating, 1) }} rating</li>
                            @elseif($p->rating == 3)
                            <li class="inline"><i class="mdi mdi-star"></i></li>
                            <li class="inline"><i class="mdi mdi-star"></i></li>
                            <li class="inline"><i class="mdi mdi-star"></i></li>
                            <li class="inline text-slate-500">{{ number_format($p->rating, 1) }} rating</li>
                            @elseif($p->rating == 3.5)
                            <li class="inline"><i class="mdi mdi-star"></i></li>
                            <li class="inline"><i class="mdi mdi-star"></i></li>
                            <li class="inline"><i class="mdi mdi-star"></i></li>
                            <li class="inline"><i class="mdi mdi-star-half"></i></li>
                            <li class="inline text-slate-500">{{ number_format($p->rating, 1) }} rating</li>
                            @elseif($p->rating == 4)
                            <li class="inline"><i class="mdi mdi-star"></i></li>
                            <li class="inline"><i class="mdi mdi-star"></i></li>
                            <li class="inline"><i class="mdi mdi-star"></i></li>
                            <li class="inline"><i class="mdi mdi-star"></i></li>
                            <li class="inline text-slate-500">{{ number_format($p->rating, 1) }} rating</li>
                            @elseif($p->rating == 4.5)
                            <li class="inline"><i class="mdi mdi-star"></i></li>
                            <li class="inline"><i class="mdi mdi-star"></i></li>
                            <li class="inline"><i class="mdi mdi-star"></i></li>
                            <li class="inline"><i class="mdi mdi-star"></i></li>
                            <li class="inline"><i class="mdi mdi-star-half"></i></li>
                            <li class="inline text-slate-500">{{ number_format($p->rating, 1) }} rating</li>
                            @elseif($p->rating == 5)
                            <li class="inline"><i class="mdi mdi-star"></i></li>
                            <li class="inline"><i class="mdi mdi-star"></i></li>
                            <li class="inline"><i class="mdi mdi-star"></i></li>
                            <li class="inline"><i class="mdi mdi-star"></i></li>
                            <li class="inline"><i class="mdi mdi-star"></i></li>
                            <li class="inline text-slate-500">{{ number_format($p->rating, 1) }} rating</li>
                            @endif
                        </ul>
                    </div>
                </div>
            </div><!--end content-->
            @endforeach

        </div><!--end grid-->

        <div class="mt-6">
            {{ $products->links() }}
        </div>

        <div class="flex justify-center mt-20">
            <a href="{{ route('bid-markets') }}" class="inline-block px-5 py-2 font-semibold tracking-wide text-center text-orange-500 align-middle rounded-md" style="background-color: #660066;">
                Explore All Products
                <i class="mdi mdi-arrow-right"></i>
            </a>
        </div>
    </div><!--end container-->

    <div class="container relative mt-16 md:mt-24">
        <div class="grid items-center grid-cols-1 md:grid-cols-12">
            <div class="lg:col-span-5 md:col-span-6">
                <img src="assets/images/envelope.svg" class="mx-auto d-block" alt="">
            </div>

            <div class="lg:col-span-7 md:col-span-6">
                <h4 class="my-4 text-3xl font-semibold leading-normal">Wanna reach Out?</h4>

                <div class="inline-block">
                    <div class="flex items-center pt-4 border-t border-gray-100 dark:border-gray-700">
                        <i data-feather="smartphone" class="w-10 h-10 text-orange-500 me-2"></i>
                        <div class="content">
                            <h6 class="mb-0 text-base font-medium">Send Us A Mail To Reach Out, We're Quick To Reply</h6>
                            <a href="mailto: support@ge-as.com" class="text-orange-500">Contact Us <i class="mdi mdi-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div><!--end gird-->
    </div><!--end container-->
</section><!--end section-->
<!-- End -->

<!--<script>-->
<!--    let fadeSection = document.getElementById('fadeSection');-->
<!--    let showSection = document.getElementById('showSection');-->
<!--    let currentOpacity = 0;-->
<!--    let fadeTimer;-->

    <!--// Function to toggle fade in and out for both sections-->
<!--    function fadeInOut() {-->
<!--        fadeSection.classList.toggle('fadeIn');-->
<!--        fadeSection.classList.toggle('hide');-->

<!--        showSection.classList.toggle('hide')-->
<!--    }-->

    <!--// Initialize and start the slider-->
    <!--fadeInOut(); // Call immediately for the first fade-in effect-->

    <!--// Call the fade function every 4 seconds (2 seconds fade-in + 2 seconds fade-out)-->
<!--    setInterval(fadeInOut, 4000);-->
<!--</script>-->

@include('components/kyc-bonus-modal')
@endsection