@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">
    <div class="game-timer bg-danger p-3">
        60 जोड़ी या 6 हाफ़ से ज्यादा खेल न करें।

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

            <div class="game-timer mb-2">
                बाजार बंद समय &nbsp; &nbsp; &nbsp;
                {{ $game->close_time
                ? \Carbon\Carbon::createFromFormat('H:i:s', $game->close_time)->format('h:i A')
                : 'N/A' }}
            </div>


            <div class="game-buttons">
                <a href="{{ route('play.game', ['gameName' => $game->game_name]) }}" class="game-button"
                    onclick="showLoader()">
                    <div class="row">
                        <span class="status-dot green"></span>
                        Play Jodi
                    </div>
                    <div class="play-icon-div">
                        <i class="bi bi-play-circle-fill play-icon"></i>
                    </div>
                </a>
                <a href="{{ route('play.manual', ['gameName' => $game->game_name]) }}" class="game-button"
                    onclick="showLoader()">
                    <div class="row">
                        <span class="status-dot green"></span>
                        Play Manual
                    </div>
                    <div class="play-icon-div">
                        <i class="bi bi-play-circle-fill play-icon"></i>
                    </div>
                </a>
                <a href="{{ route('play.harraf', ['gameName' => $game->game_name]) }}" class="game-button"
                    onclick="showLoader()">
                    <div class="row">
                        <span class="status-dot green"></span>
                        Play Haroop
                    </div>
                    <div class="play-icon-div">
                        <i class="bi bi-play-circle-fill play-icon"></i>
                    </div>
                </a>
                <a href="{{ route('play.crossing', ['gameName' => $game->game_name]) }}" class="game-button"
                    onclick="showLoader()">
                    <div class="row">
                        <span class="status-dot green"></span>
                        Play Crossing
                    </div>
                    <div class="play-icon-div">
                        <i class="bi bi-play-circle-fill play-icon"></i>
                    </div>
                </a>
                <a href="{{ route('play.num-to-num', ['gameName' => $game->game_name]) }}" class="game-button"
                    onclick="showLoader()">
                    <div class="row">
                        <span class="status-dot green"></span>
                        Play Number to Number
                    </div>
                    <div class="play-icon-div">
                        <i class="bi bi-play-circle-fill play-icon"></i>
                    </div>
                </a>
                <a href="{{ route('play.copy', ['gameName' => $game->game_name]) }}" class="game-button"
                    onclick="showLoader()">
                    <div class="row">
                        <span class="status-dot green"></span>
                        Play Copy Paste
                    </div>
                    <div class="play-icon-div">
                        <i class="bi bi-play-circle-fill play-icon"></i>
                    </div>
                </a>
                <a href="{{ route('play.tap-play', ['gameName' => $game->game_name]) }}" class="game-button"
                    onclick="showLoader()">
                    <div class="row">
                        <span class="status-dot green"></span>
                        Play Tap Play
                    </div>
                    <div class="play-icon-div">
                        <i class="bi bi-play-circle-fill play-icon"></i>
                    </div>
                </a>
            </div>

        </div>
        <!-- Loader -->
        <div id="loader" style="display: none;" class="loader-overlay">
            <div class="loader"></div>
        </div>
        {{-- <script>
            function showLoader() {
        document.getElementById('loader').style.display = 'flex';

        // Simulate some loading time, remove loader after 3 seconds or on success
        setTimeout(function() {
            document.getElementById('loader').style.display = 'none';
        }, 3000); // Adjust time or condition as needed
    }
        </script> --}}
        <script>
            $(document).ready(function () {
                $("ul li a").on("click", function () {
                    if (navigator.vibrate) {
                        navigator.vibrate(100); // 100ms के लिए वाइब्रेशन
                    }
                });
            });
        </script>
        <style>
            .loader-overlay {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(0, 0, 0, 0.5);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 9999;
            }

            .loader {
                border: 5px solid #f3f3f3;
                /* Light gray */
                border-top: 5px solid #3498db;
                /* Blue */
                border-radius: 50%;
                width: 50px;
                height: 50px;
                animation: spin 1s linear infinite;
            }

            @keyframes spin {
                0% {
                    transform: rotate(0deg);
                }

                100% {
                    transform: rotate(360deg);
                }
            }

            .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;
            }

            .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: 15px;
                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>




    </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="nav-item">
                    <a href="{{ route('home.page') }}">
                        <i class="{{ request()->routeIs('home.page') ? 'fas fa-home text-theme' : 'fas fa-home text-success footer-icon-color' }}"
                            style="font-size: 25px;"></i>
                    </a>
                    <a href="{{ route('home.page') }}"
                        class="{{ request()->routeIs('home.page') ? 'text-theme' : 'text-success footer-icon-color' }}">Home</a>
                </div>
            </li>
            <li>
                <div class="nav-item">
                    <a href="{{ route('wallet.page') }}">
                        <i class="{{ request()->routeIs('wallet.page') ? 'fas fa-wallet text-theme' : 'fas fa-wallet text-success footer-icon-color' }}"
                            style="font-size: 25px;"></i>
                    </a>
                    <a href="{{ route('wallet.page') }}"
                        class="{{ request()->routeIs('wallet.page') ? 'text-theme' : 'text-success footer-icon-color' }}">Wallet</a>
                </div>
            </li>
            <li>
                <div class="nav-item play-btn-new">
                    <a href="{{ route('play.page') }}">
                        <i class="{{ request()->routeIs('play.page') ? 'fas fa-gamepad text-theme' : 'fas fa-gamepad text-white footer-icon-color' }}"
                            style="font-size: 25px;"></i>
                    </a>
                    <a href="{{ route('play.page') }}"
                        class="{{ request()->routeIs('play.page') ? 'text-theme' : 'text-white' }}">Play</a>
                </div>
            </li>
            <li>
                <div class="nav-item">
                    <a href="{{ route('play.history') }}">
                        <i class="{{ request()->routeIs('play.history') ? 'fas fa-history text-theme' : 'fas fa-history text-success footer-icon-color' }}"
                            style="font-size: 25px;"></i>
                    </a>
                    <a href="{{ route('play.history') }}"
                        class="{{ request()->routeIs('play.history') ? 'text-theme' : 'text-success footer-icon-color' }}">History</a>
                </div>
            </li>
            <li>
                <div class="nav-item">
                    <a href="{{ route('user.profile.page') }}">
                        <i class="{{ request()->routeIs('user.profile.page') ? 'fas fa-user text-theme' : 'fas fa-user text-success footer-icon-color' }}"
                            style="font-size: 25px;"></i>
                    </a>
                    <a href="{{ route('user.profile.page') }}"
                        class="{{ request()->routeIs('user.profile.page') ? 'text-theme' : 'text-success footer-icon-color' }}">Profile</a>
                </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;
        }

        /* Custom Footer Styling */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            width: 100%;
            background: #ffffff;
            color: rgb(0, 0, 0);
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 10px 0;
        }

        .bottom-nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
            width: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .bottom-nav li {
            flex: 1;
            text-align: center;
        }

        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .nav-item a {
            text-decoration: none;
            color: white;
            font-size: 14px;
            text-align: center;
        }

        .nav-item img {
            width: 25px;
        }

        .text-theme {
            color: var(--primary) !important;
        }

        .text-dark {
            color: #000000 !important;
        }

        /* Play Button Styling */
        .play-btn-new {
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(45deg, #6a11cb, #2575fc);
            color: rgb(255, 255, 255);
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
        }

        .dark-mode .footer-icon-color {
            color: white !important;
        }

        .dark-mode .modal-msg {
            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