@extends('new_app.game.header')

@section('new-game-content')
<style>
    /* Timer Banner */
    .timer-banner {
        background: #fabc02;
        color: #000000;
        padding: 8px;
        text-align: center;
        font-size: 1em;
        font-weight: 600;
    }

    .game-tab {
        padding: 0px 0px 0px 0px;
    }


    .head-fix-tap {
        width: 100% !important;
        position: fixed;
        margin-bottom: 20px;
    }

    .game-name {
        font-size: 20px;
        font-weight: 700;
        color: white;
    }

    .bg-theme {
        background-color: var(--primary);
        color: white;
    }

    .theme-border {
        border: 1px solid var(--primary);
    }

    .play-icon-div {
        display: flex;
        width: 70px;
        /* border: 2px solid red; */
        justify-content: end;
        align-items: center;
    }

    .play-icon {
        color: var(--primary);
        font-size: 20px;
    }
</style>

</div>

<section class="game-tab">

    <main class="content-wrapper game-content">
        <div class="game-container">

            <div class="game-buttons">
                <div class="game-buttons">
                 {{-- <button class="game-button w-100" id="payButton">
                        <div class="paybtn-div">
                            <span class="status-dot green"></span>
                            <span id="buttonText">Google Pay या Paytm से पैसा जोड़ें।</span>
                            <span id="loader" class="spinner-border text-light d-none" role="status"></span>
                        </div>
                        <div class="play-icon-div">
                           <i class="bi bi-stripe play-icon"></i>
                       </div>
                    </button> --}}

                    <!-- Loader Script -->
                    {{-- <script>
                        document.getElementById('payButton').addEventListener('click', function() {
                            let button = this;
                            let buttonText = document.getElementById('buttonText');
                            let loader = document.getElementById('loader');

                            // ✅ बटन को Disable करें
                            button.disabled = true;
                            button.style.opacity = "0.7";

                            // ✅ लोडर दिखाएँ और टेक्स्ट बदलें
                            buttonText.innerHTML = 'लोड हो रहा है...';
                            loader.classList.remove('d-none');

                            // ✅ 5 सेकंड बाद रीडायरेक्ट करें
                            setTimeout(function() {
                                window.location.href = "{{ route('make.payment2',['amount'=>$amount]) }}";
                            }, 2000);
                        });
                    </script> --}}

                    <!-- Stylish CSS -->
                    <style>
                        .paybtn-div {
                            display: flex;
                            align-items: center;
                            justify-content: n;
                            width: 100%;
                        }

                        #payButton {
                            background-color: #ffffff;
                            color: rgb(0, 0, 0);
                            font-size: 18px;
                            font-weight: bold;
                            border: none;
                            padding: 10px 15px;
                            border-radius: 8px;
                            transition: all 0.3s ease;
                            display: flex;
                            align-items: center;
                            justify-content: ;
                            width: 100%;
                            cursor: pointer;
                        }

                        #payButton:disabled {
                            cursor: not-allowed;
                            background-color: #dadada;
                        }

                        .spinner-border {
                            width: 20px;
                            height: 20px;
                        }
                        .text-manual{
                            background-color: #ffffff;
                            color: rgb(0, 0, 0);
                            font-size: 18px;
                            font-weight: bold;
                            border: none;
                            border-radius: 8px;
                            transition: all 0.3s ease;
                            display: flex;
                            align-items: center;
                            justify-content: ;
                            width: 100%;
                            cursor: pointer;
                        }
                    </style>


                </div>
            </div>

            <div class="game-buttons">
                <div class="game-buttons">
                    <a href="{{ route('pay.manual.payment', ['amount' => $amount]) }}" class="game-button ">
                        <div class="paybtn-div">
                            <span class="status-dot green"></span>
                            <span class="text-manual">मैनुअल QR से पैसा जोड़ें</span>
                        </div>
                        <div class="play-icon-div">
                            <i class="bi bi-stripe play-icon"></i>
                        </div>
                    </a>
                </div>
            </div>

            <style>
                .game-container {
                    background: var(--primary);
                    padding: 15px;
                    height: 45em;
                }

                .game-timer {
                    color: white;
                    text-align: center;

                    font-weight: bold;
                    font-size: 1.1em;
                }

                .game-buttons {
                    display: flex;
                    flex-direction: column;
                    gap: 8px;
                    margin-top: 20px;
                }

                .game-button {
                    background: white;
                    color: #333;
                    padding: 12px 15px;
                    text-decoration: none;
                    border-radius: 10px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-weight: 500;
                    font-size: 1em;
                    transition: all 0.3s ease;
                }

                .status-dot {
                    width: 24px;
                    height: 24px;
                    border-radius: 50%;
                    margin-right: 8px;
                    /* margin-left: 8px; */
                }

                .status-dot.green {
                    background-color: #4CAF50;
                }

                .status-dot.red {
                    background-color: #f44336;
                }

                .status-dot.gray {
                    background-color: #9e9e9e;
                }

                .game-button:hover {
                    transform: translateY(-1px);
                    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
                }
            </style>
    </main>


    <!-- bottom navigation end -->

    <style>
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            z-index: 40;
            /* background: white; */
            padding: 0px;
            display: flex;
            justify-content: center;
        }

        .text-theme {
            color: #2195f3 !important;
        }

        .dark-mode .footer-nav-p {
            color: var(--gray-40) !important;
        }

        .dark-mode .play-game-name {
            color: var(--gray-40) !important;
        }
    </style>

    <footer class="bottom-nav">
        <ul class="d-flex align-items-center justify-content-around w-100 h-100">
            <li>
                <div class="d-flex flex-column justify-content-center align-items-center">
                    <a href="{{ route('home.page') }}">
                        @if (request()->routeIs('home.page'))
                        <img src="{{ asset('new_app/assets/images/my_img/home-active.png') }}" alt="home" width="25">
                        @else
                        <img src="{{ asset('new_app/assets/images/my_img/home.png') }}" alt="play" width="25">
                        @endif
                    </a>
                    @if (request()->routeIs('home.page'))
                    <a href="{{ route('home.page') }}" class="text-theme footer-nav-p">Home</a>
                    @else
                    <a href="{{ route('home.page') }}" class="text-dark footer-nav-p">Home</a>
                    @endif
                </div>
            </li>
            <li>
                <div class="d-flex flex-column justify-content-center align-items-center">

                    <a href="{{ route('wallet.page') }}">
                        @if (request()->routeIs('wallet.page'))
                        <img src="{{ asset('new_app/assets/images/my_img/wallet-active.png') }}" alt="wallet"
                            width="25">
                        @else
                        <img src="{{ asset('new_app/assets/images/my_img/walletfo.png') }}" alt="wallet" width="25">
                        @endif
                    </a>

                    @if (request()->routeIs('wallet.page'))
                    <a href="{{ route('wallet.page') }}" class="text-theme footer-nav-p">Wallet</a>
                    @else
                    <a href="{{ route('wallet.page') }}" class="text-dark footer-nav-p">
                        Wallet</a>
                    @endif
                </div>
            </li>
            <li>
                <div class="d-flex flex-column justify-content-center align-items-center">

                    <a href="{{ route('play.page') }}">
                        @if (request()->routeIs('play.page'))
                        <img src="{{ asset('new_app/assets/images/my_img/video-game-active.png') }}" alt="play"
                            width="30">
                        @else
                        <img src="{{ asset('new_app/assets/images/my_img/video-game.png') }}" alt="play" width="30">
                        @endif

                    </a>
                    @if (request()->routeIs('play.page'))
                    <a href="{{ route('play.page') }}" class="text-theme footer-nav-p">Play</a>
                    @else
                    <a href="{{ route('play.page') }}" class="text-dark footer-nav-p">
                        Play</a>
                    @endif
                </div>
            </li>
            <li>
                <div class="d-flex flex-column justify-content-center align-items-center">

                    <a href="{{ route('play.history') }}">
                        @if (request()->routeIs('play.history'))
                        <img src="{{ asset('new_app/assets/images/my_img/history-active.png') }}" alt="history"
                            width="25">
                        @else
                        <img src="{{ asset('new_app/assets/images/my_img/history.png') }}" alt="history" width="25">
                        @endif
                    </a>
                    @if (request()->routeIs('play.history'))
                    <a href="{{ route('play.history') }}" class="text-theme footer-nav-p">History</a>
                    @else
                    <a href="{{ route('play.history') }}" class="text-dark footer-nav-p">
                        History</a>
                    @endif
                </div>
            </li>
            <li>
                <div class="d-flex flex-column justify-content-center align-items-center">
                    <a href="{{ route('user.profile.page') }}">
                        @if (request()->routeIs('user.profile.page'))
                        <img src="{{ asset('new_app/assets/images/my_img/user-active.png') }}" alt="history" width="25">
                        @else
                        <img src="{{ asset('new_app/assets/images/my_img/user.png') }}" alt="history" width="25">
                        @endif
                    </a>
                    @if (request()->routeIs('user.profile.page'))
                    <a href="{{ route('user.profile.page') }}" class="text-theme footer-nav-p">Profile</a>
                    @else
                    <a href="{{ route('user.profile.page') }}" class="text-dark footer-nav-p">
                        Profile</a>
                    @endif

                </div>
            </li>
        </ul>
    </footer>
    <!-- bottom navigation end -->
    <style>
        .bottom-nav {
            border-top: 2px solid #2195f39a;
            /* border-radius: 34px 34px 0px 0px; */
        }

        .text-theme {
            color: #2195f3 !important;
        }

        .dark-mode .footer-nav-p {
            color: var(--gray-40) !important;
        }

        .dark-mode .play-game-name {
            color: var(--gray-40) !important;
        }
    </style>


    <!-- bootstrap -->
    <script src="{{ asset('new_app/assets/js/bootstrap.bundle.min.js') }}">
    </script>

    <!-- jquery ui -->
    <script src="{{ asset('new_app/assets/js/jquery-ui.js') }}"></script>

    <!-- mixitup -->
    <script src="{{ asset('new_app/assets/js/mixitup.min.js') }}"></script>

    <!-- gasp -->
    <script src="{{ asset('new_app/assets/js/cdnjs.cloudflare.com/ajax/libs/gsap/3.12.3/gsap.min.js') }}"></script>

    <!-- draggable -->
    <script src="{{ asset('new_app/assets/js/cdnjs.cloudflare.com/ajax/libs/gsap/3.12.3/Draggable.min.js') }}"></script>

    <!-- swiper -->
    <script src="{{ asset('new_app/assets/js/swiper-bundle.min.js') }}"></script>

    <!-- datepicker -->
    <script src="{{ asset('new_app/assets/js/jquery.datetimepicker.full.js') }}"></script>

    <!-- script -->
    <script src="{{ asset('new_app/assets/js/script.js') }}"></script>
    </body>

    </html>
    @endSection