@include('layout.header')
@php
    $website = website_header();
@endphp

<style>
    iframe {
        height: 240px !important;
    }
</style>
<!-- HEADER START -->
<div class="header_container">
    <div class="page_container w-100">
        <div class="d-flex align-items-center justify-content-between">
            <div class="logo_box d-flex align-items-center">
                <img src="{{ asset($website->logo) }}" alt="" />
                <p class="mb-0 f18">Open with an app</p>
            </div>
            <div class="download_box">
                <a href="{{ url('/download/apk') }}"><img src="{{ asset('assets/img/download-icon.png') }}" /></a>
            </div>
        </div>
    </div>
</div>
<!-- HEADER END -->

<!-- UNDER HEADER START -->
<div class="under_header_container">
    <div class="page_container">
        <div class="d-flex flex-column justify-content-center align-items-center">
            <h6 class="mb-0 fw-bold" style="font-size: 25px;">{{ env('APP_NAME') }}</h6>
            <p class="mb-0">Quality Guarantee</p>
        </div>
    </div>
</div>
<!-- UNDER HEADER END -->

<!-- HERO START -->
<div class="hero_container">
    <div class="slider">
        @foreach ($banners as $banner)
            @if ($banner->type == 'image')
                <img style="object-fit: contain; height:350px !important;"
                    src="{{ asset('assets/img/' . $banner->path) }}" alt="{{ $banner->banner_title }}" />
            @else
                {!! $banner->path !!}
            @endif
        @endforeach
    </div>
</div>
<!-- HERO END -->

<!-- LISR START -->
@if (!env('NEW_HOME_PAGE', true))
    <!-- LISR START -->
    <div class="list_container mt-4">
        <div class="container-fluid">
            <div class="row gx-2 gy-2">
                @foreach ($products as $product)
                    <div class="col-6">
                        <div class="card_ py-2 px-3">
                            <a class="text-decoration-none text-dark" href="{{ url('/product/' . $product->id) }}">
                                <img class="w-100" style="object-fit: contain;"
                                    src="{{ asset('assets/img/' . $product->image) }}" alt="" />
                                <p class="mb-0 f14 mt-3">
                                    {{ $product->title }}
                                </p>
                                <p class="mb-0 f14 gray my-1">
                                    {{ $product->title }}
                                </p>
                                <p class="f14 fw500 mb-0">₹ {{ $product->price }}</p>
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    <!-- LISR END -->
@else
    <!-- LISR START -->
    <div class="list_container mt-4">
        <div class="container-fluid">
            <div class="row gx-2 gy-2">
                <div class="col-6">
                    <div class="card_ py-2 px-3">
                        <img class="w-100" style="object-fit: contain;"
                            src="{{ asset('assets/img/logos/aviator.png') }}" alt="" />
                        @if (env('ENABLE_AVIATOR', false))
                            <button id="play-now-btn" class="btn btn-primary mt-3 w-100"
                                style="font-size: 14px; background-color: #28a745; border-color: #28a745;">
                                Play Now
                            </button>
                        @else
                            <p class="mb-0 f14 mt-3">
                                Coming soon....
                            </p>
                        @endif
                        <script>
                            document.getElementById('play-now-btn').addEventListener('click', function() {
                                @if (Auth::check())
                                    let aviator_game_url = "{{ Auth::user()->aviator_game_url }}";

                                    if (!aviator_game_url) {
                                        toastShow("Loading Game...");
                                        // If token is null, make an AJAX request to get the token
                                        $.ajax({
                                            url: '{{ route('get.aviator.token') }}', // Route to get the aviator token
                                            method: 'GET',
                                            success: function(response) {
                                                if (response.success && response.gameUrl) {
                                                    gameUrl = response.gameUrl;
                                                    window.location.href = gameUrl;
                                                } else {
                                                    toastShow("Error From API: " + response.message);
                                                }
                                            },
                                            error: function() {
                                                toastShow("Error occurred while retrieving game token. Please try again.");
                                            }
                                        });
                                    } else {
                                        // If token exists, directly open the game URL
                                        window.location.href = aviator_game_url;
                                    }
                                @else
                                    toastShow("Please Login To Play The Game");
                                @endif
                            });
                        </script>
                    </div>
                </div>
                <div class="col-6">
                    <div class="card_ py-2 px-3">
                        <a href="{{ url('/user/gameDashboard') }}" class="text-decoration-none text-dark">
                            <img class="w-100" style="object-fit: contain;"
                                src="{{ asset('assets/img/logos/color.jpeg') }}" alt="" />
                            <button class="btn btn-primary mt-3 w-100"
                                style="font-size: 14px; background-color: #28a745; border-color: #28a745;">
                                Play Now
                            </button>
                        </a>
                    </div>
                </div>
                <div class="col-6">
                    <div class="card_ py-2 px-3">
                        <a target="_blank" href="{{ $website->whatsapp }}" class="text-decoration-none text-dark">
                            <img class="w-100" style="object-fit: contain;"
                                src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/WhatsApp.svg/640px-WhatsApp.svg.png"
                                alt="" />
                            <button class="btn btn-primary mt-3 w-100"
                                style="font-size: 14px; background-color: #28a745; border-color: #28a745;">
                                Contact us
                            </button>
                        </a>
                    </div>
                </div>
                <div class="col-6">
                    <div class="card_ py-2 px-3">
                        <a class="text-decoration-none text-dark">
                            <img class="w-100" style="object-fit: contain;"
                                src="{{ asset('assets/img/logos/dragon.png') }}" alt="" />
                            <p class="mb-0 f14 mt-3">
                                Coming soon....
                            </p>
                        </a>
                    </div>
                </div>
                <div class="col-6">
                    <div class="card_ py-2 px-3">
                        <a class="text-decoration-none text-dark">
                            <img class="w-100" style="object-fit: contain;"
                                src="{{ asset('assets/img/logos/andar.png') }}" alt="" />
                            <p class="mb-0 f14 mt-3">
                                Coming soon....
                            </p>
                        </a>
                    </div>
                </div>
                <div class="col-6">
                    <div class="card_ py-2 px-3">
                        <a class="text-decoration-none text-dark">
                            <img class="w-100" style="object-fit: contain;"
                                src="{{ asset('assets/img/logos/jhanda.png') }}" alt="" />
                            <p class="mb-0 f14 mt-3">
                                Coming soon....
                            </p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- LISR END -->
@endif
<!-- LISR END -->

@include('layout.footer')
