@extends('new_app.game.header')

@section('new-game-content')


<section class="game-tab">
    <form action="{{ route('add.manual.money.post') }}" method="POST" id="add-money-from">
        @csrf
        @php
        $amount=base64_decode($amount);
        @endphp
        <input type="hidden" name="point" value="{{ $amount }}">
        <main class="content-wrapper game-content">
            <div class="container mt-5">
                <div class="card shadow-lg border-0 p-4">
                    <div class="text-center">
                        @if ($qr)
                        <div class="row justify-content-center align-items-center">
                            <!-- QR Code Section (Centered) -->
                            <div class="col-md-12 col-12 d-flex justify-content-center">
                                <div class="card p-3 shadow-sm text-center w-100">
                                    @if (!empty($qr->image))
                                    <img id="qrImage" src="{{ asset($qr->image) }}" alt="QR Code"
                                        class="img-fluid rounded shadow-sm mx-auto d-block" width="170">
                                    <button id="downloadQrBtn" class="btn btn-success mt-2">Download QR</button>
                                    @else
                                    <p>No QR image available</p>
                                    @endif
                                </div>
                            </div>

                            <!-- UPI ID Section -->
                            <div class="col-md-6 mt-2">
                                <div class="card p-3 shadow-sm text-center">
                                    <p class="mb-1 text-muted">UPI ID:</p>
                                    <h5 class="fw-bold text-primary" id="upiId">{{ $qr->upi_id ?? 'N/A' }}</h5>
                                    <button class="btn btn-success btn-sm mt-3" onclick="copyUPI()">
                                        <i class="fas fa-copy me-2"></i> Copy UPI
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- UTR Number Input -->
                        <div class="mt-2">
                            <input type="number" name="utr_number" class="form-control shadow-sm text-center" required
                                id="utr" placeholder="Enter UTR Number">
                        </div>
                        @error('utr_number')
                        <p class="text-danger">{{ $message }}</p>
                        @enderror
                        <div class="mt-2">
                            <button type="submit" class="btn  btn-success btn-sub">Submit</button>
                        </div>
                        @else
                        <p class="text-danger fw-bold">No QR data found!</p>
                        @endif
                    </div>
                </div>
            </div>
        </main>
    </form>

    <!-- ✅ लोडिंग पॉपअप -->
    <div id="loadingPopup" class="popup-overlay" style="display: none;">
        <div class="popup-content">
            🔄 कृपया इंतजार करें... <span id="loadingTimer">5</span> सेकंड
        </div>
    </div>
    <!-- JavaScript -->
    <script>
        function copyUPI() {
            var upiText = document.getElementById("upiId").textContent;
            var tempInput = document.createElement("input");
            tempInput.value = upiText;
            document.body.appendChild(tempInput);
            tempInput.select();
            document.execCommand("copy");
            document.body.removeChild(tempInput);
            alert("UPI ID copied: " + upiText);
        }

        document.getElementById("downloadQrBtn").addEventListener("click", function() {
            var imageUrl = document.getElementById("qrImage").src;
            fetch(imageUrl)
                .then(response => response.blob())
                .then(blob => {
                    var link = document.createElement("a");
                    link.href = URL.createObjectURL(blob);
                    link.download = "QR_Code.png"; // Forces download
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                })
                .catch(error => console.error('Error downloading image:', error));
        });



    </script>
    <script>
        $(document).ready(function () {
            $(".btn-sub").click(function (event) {
                event.preventDefault(); // फॉर्म को तुरंत सबमिट होने से रोकें
        $("#loadingPopup").fadeIn(); // लोडिंग पॉपअप दिखाएं
            let timeLeft = 5;
            $("#loadingTimer").text(timeLeft);

            let countdown = setInterval(function () {
                timeLeft--;
                $("#loadingTimer").text(timeLeft);
                if (timeLeft <= 0) {
                    clearInterval(countdown);
                    $("#loadingPopup").fadeOut(); // लोडिंग पॉपअप हटाएं
                    $("#add-money-from").submit(); // फॉर्म सबमिट करें
                }
            }, 1000);

        });
        });
    </script>
    <style>
        /* लोडिंग पॉपअप स्टाइल */
        .popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }

        .popup-content {
            background: white;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
        }
    </style>






    <!-- bottom navigation end -->


    <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 {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            z-index: 40;
            /* background: white; */
            padding: 0px;
            display: flex;
            justify-content: center;
        }

        .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