@extends('layouts.game')

@section('content')
    <main>
        <div class="container align-items-center justify-content-center" style=" margin-top: 80px;">
            <div class="wallet-container">
                <div class="wallet-header">Wallet</div>
                <div class="wallet-balance">
                    <div>
                        <p class="fw-bold">Money</p>
                        <p class="fs-5"><strong>
                                {{ App\Models\Wallet::where('user_id', auth()->user()->id)->sum('main_balance') }}
                            </strong></p>
                    </div>
                    <div style="border-left: 1px solid gray;"></div>
                    <div>
                        <p class="fw-bold">Bonus</p>
                        <p class="fs-5">
                            <strong>0</strong>
                        </p>
                    </div>
                </div>

                <div class="amount-buttons">
                    <button class="amountbtn" id="btn100">100</button>
                    <button class="amountbtn" id="btn500">500</button>
                    <button class="amountbtn" id="btn1000">1000</button>
                    <button class="amountbtn" id="btn2000">2000</button>
                    <button class="amountbtn" id="btn5000">5000</button>
                    <button class="amountbtn" id="btn10000">10000</button>
                </div>

                <div class="input-group">
                    <!-- Button trigger modal -->
                    <input type="number" class="form-control" value="100" id="amount" name="amount">
                    <button type="button" class="history-button" data-bs-toggle="modal" data-bs-target="#rightModal">
                        🔄 History
                    </button>

                    <!-- Right Side Modal -->
                    <div class="modal right fade" id="rightModal" tabindex="-1" aria-labelledby="rightModalLabel"
                        aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="rightModalLabel"
                                        style="justify-content: center; align-items: center; text-align: center; font-weight: 600; margin-top: 50px;">
                                        <i class="fa-solid fa-stopwatch-20"></i> Last 50 transactions
                                    </h5>
                                    <button type="button" class="btn btn-warning" data-bs-dismiss="modal"
                                        aria-label="Close">
                                        <i class="fa-solid fa-xmark"></i>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <!-- Main Tabs -->
                                    <div class="tab-container">
                                        <div class="tab active" onclick="switchTab('overview')" style="gap: 10px;">
                                            <i class="fa-solid fa-arrow-down"></i>
                                            <span>Deposit</span>
                                        </div>
                                        <div class="tab inactive" onclick="switchTab('transactions')" style="gap: 10px;">
                                            <i class="fa-solid fa-arrow-up"></i>
                                            <span>Withdraw</span>
                                        </div>
                                    </div>

                                    <!-- Tab Content Areas -->
                                    <div id="overview-content" class="tab-content active mt-3">
                                        <div class="container-fluid">
                                            <div class="table-responsive">
                                                <table class="table table-dark table-borderless">
                                                    <thead>
                                                        <tr>
                                                            <th class="ps-4">SR No.</th>
                                                            <th>Type</th>
                                                            <th>Amount</th>
                                                            <th>Status</th>
                                                            <th>Date & Remark</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($deposit as $item)
                                                            <tr>
                                                                <td class="ps-4 py-3">{{ $loop->iteration }}</td>
                                                                <td class="py-3">
                                                                    <span class="deposit-badge">DEPOSIT</span>
                                                                </td>
                                                                <td class="py-3">{{ $item->amount }}</td>
                                                                <td class="py-3">
                                                                    @if ($item->status == 'pending')
                                                                        <span class="pending-badge">INITIATED</span>
                                                                    @elseif ($item->status == 'completed')
                                                                        <span class="success-badge">PGS_SUCCES</span>
                                                                    @elseif ($item->status == 'failed')
                                                                        <span class="deposit-badgi">PGS_FAILED</span>
                                                                    @endif
                                                                </td>
                                                                <td class="py-3">
                                                                    <p class="date-info creation-date">
                                                                        {{ $item->created_at->diffForHumans() }}</p>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- transaction areas -->
                                    <div id="transactions-content" class="tab-content  mt-3">
                                        <div class="container-fluid">
                                            <div class="table-responsive">
                                                <table class="table table-dark table-borderless">
                                                    <thead>
                                                        <tr>
                                                            <th class="ps-4">SR No.</th>
                                                            <th>Type</th>
                                                            <th>Amount</th>
                                                            <th>Status</th>
                                                            <th>Date & Remark</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($withdraw as $item)
                                                            <tr>
                                                                <td class="ps-4 py-3">{{ $loop->iteration }}</td>
                                                                <td class="py-3">
                                                                    <span class="deposit-badge">WITHDRAW</span>
                                                                </td>
                                                                <td class="py-3">{{ $item->amount }}</td>
                                                                <td class="py-3">
                                                                    @if ($item->status == 'pending')
                                                                        <span class="pending-badge">INITIATED</span>
                                                                    @elseif ($item->status == 'completed')
                                                                        <span class="success-badge">PGS_SUCCES</span>
                                                                    @elseif ($item->status == 'failed')
                                                                        <span class="deposit-badgi">PGS_FAILED</span>
                                                                    @endif
                                                                </td>
                                                                <td class="py-3">
                                                                    <p class="date-info creation-date">
                                                                        {{ $item->created_at ?? '-' }}</p>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="action-buttons">
                    <button class="deposit-button">⬇Deposit</button>
                    @if ($usertransaction > $wagerining)
                        <button class="withdraw-button">⬆ Withdraw</button>
                    @else
                        <button class="withdraw-button-disabled" id="withdraw-button-disabled">⬆Withdraw</button>
                    @endif
                </div>
            </div>
        </div>
    </main>
@endsection
@section('css')
    <style>
        .wallet-container {
            max-width: 600px;
            margin: auto;
            border-radius: 12px;
            padding: 25px;
            text-align: center;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
            background-color: #232936;
            border-radius: 15px;
            margin-top: 30px;
            margin-bottom: 30px;
            border-bottom: #4a5568 4px solid;
        }

        .wallet-header {
            font-size: 26px;
            font-weight: bold;
            margin-bottom: 20px;
            color: white;
        }

        .wallet-balance {
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid gray;
            padding: 12px;
            margin-bottom: 20px;
            color: white;
        }

        .wallet-balance div {
            text-align: center;
        }

        .amount-buttons {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-bottom: 20px;
        }

        .amount-buttons button {
            background-color: white;
            color: black;
            font-weight: bold;
            border-radius: 6px;
            padding: 12px;
            border: none;
            transition: 0.3s;
        }

        .amount-buttons button:hover {
            background-color: #f57c00;
            color: white;
        }

        .amount-input-group {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .history-button {
            background-color: #f57c00;
            color: white;
            font-weight: bold;
            border-radius: 6px;
            padding: 10px 16px;
            border: none;
            transition: 0.3s;
        }

        .history-button:hover {
            background-color: #d66b00;
        }

        .action-buttons {
            display: flex;
            gap: 12px;
            justify-content: center;
            margin-top: 18px;
        }

        .deposit-button {
            background-color: #28a745;
            color: white;
            font-weight: bold;
            padding: 12px 20px;
            border-radius: 6px;
            border: none;
            transition: 0.3s;
        }

        .deposit-button:hover {
            background-color: #218838;
        }

        .withdraw-button {
            background-color: #dc3545;
            color: white;
            font-weight: bold;
            padding: 12px 20px;
            border-radius: 6px;
            border: none;
            transition: 0.3s;
        }
        .withdraw-button-disabled{
          background-color: #dc3545;
            color: white;
            font-weight: bold;
            padding: 12px 20px;
            border-radius: 6px;
            border: none;
            transition: 0.3s;
        }
        .withdraw-button-disabled:hover {
            background-color: #c82333;
        }
        .withdraw-button:hover {
            background-color: #c82333;
        }

        .input-group input {
            background-color: #21262d;
            color: white;
            border: 1px solid #444c56;
            border-radius: 6px;
            padding: 10px;
        }

        .modal.right .modal-dialog {
            position: fixed;
            right: 0;
            top: 0;
            margin: auto;
            height: 100%;
            max-width: 85%;
        }

        .modal.right .modal-content {
            height: 100%;
            border-radius: 0;
        }

        .modal.right .modal-body {
            overflow-y: auto;
        }

        .modal.right.fade .modal-dialog {
            transform: translateX(100%);
            transition: transform 0.3s ease-out;
        }

        .modal.right.show .modal-dialog {
            transform: translateX(0);
        }

        .main-container {
            max-width: 1200px;
            margin: 30px auto;
            background-color: #1e2738;
            border-radius: 8px;
            overflow: hidden;
        }

        .tab-header {
            background-color: #1e2738;
            padding: 5px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #2c3547;
        }

        .tab-header h4 {
            margin: 0;
            display: flex;
            align-items: center;
        }

        .tab-header h4 i {
            margin-right: 5px;
            color: #adb5bd;
        }

        .tab-container {
            display: flex;
            width: 100%;
            border-bottom: 1px solid #2c3547;
        }

        .tab {
            flex: 1;
            padding: 5px;
            text-align: center;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.3s;
        }

        .tab i {
            margin-right: 10px;
        }

        .tab.active {
            background-color: #f8f9fa;
            color: #1a2332;
        }

        .tab.inactive {
            background-color: #1e2738;
            color: white;
        }

        .section-container {
            display: flex;
            width: 100%;
        }

        .section {
            flex: 1;
            padding: 5px;
            text-align: center;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.3s;
            border-bottom: 2px solid transparent;
        }

        .section.active {
            color: #3498db;
            border-bottom: 2px solid #3498db;
        }

        .content-area {
            padding: 10px;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        .section-content {
            display: none;
        }

        .section-content.active {
            display: block;
        }

        /* Example content styling */
        .card {
            background-color: #2c3547;
            border: none;
            margin-bottom: 20px;
            border-radius: 8px;
        }

        .card-header {
            background-color: #252f44;
            border-bottom: 1px solid #384258;
            padding: 15px;
        }

        .card-body {
            padding: 20px;
        }

        .info-box {
            background-color: #252f44;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
        }

        .info-box h5 {
            margin-bottom: 15px;
            color: #3498db;
        }

        .info-box p {
            margin-bottom: 0;
            color: #e9ecef;
        }


        .table {
            background-color: #1e293b !important;
            color: white;
            margin-bottom: 0;
        }

        .table thead {
            background-color: #1e293b !important;
        }

        .table tbody tr {
            background-color: #1e293b !important;
            border-bottom: 1px solid #334155;
        }

        .table-responsive {
            background-color: #1e293b !important;
        }

        .container-fluid {
            padding: 0;
        }



        .deposit-badge {
            background-color: #22c55e;
            color: white;
            padding: 6px 12px;
            border-radius: 5px;
            font-size: 10px;
            text-transform: uppercase;
        }

        .deposit-badgi {
            background-color: #e90e0e;
            color: white;
            padding: 6px 12px;
            border-radius: 5px;
            font-size: 10px;
            text-transform: uppercase;
        }

        .failed-badge {
            background-color: #251dbc;
            color: white;
            padding: 6px 12px;
            border-radius: 30px;
            font-size: 10px;
        }

        .pending-badgi {
            background-color: #e90e0e;
            color: white;
            padding: 6px 12px;
            border-radius: 30px;
            font-size: 10px;
        }

        .pending-badge {
            background-color: #e9910e;
            color: white;
            padding: 6px 12px;
            border-radius: 30px;
            font-size: 10px;
        }

        .success-badge {
            background-color: #22c55e;
            color: white;
            padding: 6px 12px;
            border-radius: 30px;
            font-size: 10px;
        }

        .date-info {
            margin: 0;
            padding: 0;
            font-size: 10px;
            line-height: 1.5;
        }

        .creation-date {
            color: white;
        }

        .update-date {
            color: #94a3b8;
        }

        .container-fluid {
            padding: 0;
        }
    </style>
@endsection
@section('js')
    <script>
        (function(w, d, s, l, i) {
            w[l] = w[l] || [];
            w[l].push({
                "gtm.start": new Date().getTime(),
                event: "gtm.js",
            });
            var f = d.getElementsByTagName(s)[0],
                j = d.createElement(s),
                dl = l != "dataLayer" ? "&l=" + l : "";
            j.async = true;
            j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
            f.parentNode.insertBefore(j, f);
        })(window, document, "script", "dataLayer", "GTM-WL7JTZKS");
    </script>
    <script type="text/javascript">
        function googleTranslateElementInit() {
            new google.translate.TranslateElement({
                    pageLanguage: "en"
                },
                "google_translate_element"
            );
        }
    </script>
    <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
    </script>

    <script>
        var flags = document.getElementsByClassName("flag_link");
        Array.prototype.forEach.call(flags, function(e) {
            e.addEventListener("click", function() {
                var lang = e.getAttribute("data-lang");
                var languageSelect = document.querySelector("select.goog-te-combo");
                languageSelect.value = lang;
                languageSelect.dispatchEvent(new Event("change"));
            });
        });
    </script>

    <!-- login flag -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var input = document.querySelector("#mobile");
            var iti = window.intlTelInput(input, {
                initialCountry: "in",
                separateDialCode: true,
                preferredCountries: ["in", "us", "gb"],
                utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
            });
            document.querySelector(".login_form").addEventListener("submit", function(e) {
                e.preventDefault();
                var phoneNumber = iti.getNumber();
                alert("Submitted Phone Number: " + phoneNumber);
            });
        });
    </script>
    <!-- JavaScript for tab and section switching -->
    <script>
        function switchTab(tabName) {
            // Hide all tab contents
            document.querySelectorAll('.tab-content').forEach(function(content) {
                content.classList.remove('active');
            });
            // Show selected tab content
            document.getElementById(tabName + '-content').classList.add('active');
            // Update tab styling
            document.querySelectorAll('.tab').forEach(function(tab) {
                tab.classList.remove('active');
                tab.classList.add('inactive');
            });
            // Make the clicked tab active
            event.currentTarget.classList.remove('inactive');
            event.currentTarget.classList.add('active');
        }

        function switchSection(tabName, sectionName) {
            // Hide all section contents for this tab
            document.querySelectorAll('#' + tabName + '-content .section-content').forEach(function(content) {
                content.classList.remove('active');
            });
            // Show selected section content
            document.getElementById(tabName + '-' + sectionName + '-content').classList.add('active');
            // Update section styling
            document.querySelectorAll('#' + tabName + '-content .section').forEach(function(section) {
                section.classList.remove('active');
            });
            // Make the clicked section active
            event.currentTarget.classList.add('active');
        }
        $(".amountbtn").click(function() {
            var amount = $(this).text();
            $("#amount").val(amount);
        });
        $(".deposit-button").click(function() {
            amount = $("#amount").val();
            console.log(amount);
            location = `{{ url('/deposit/${amount}') }}`
        })
        $(".withdraw-button").click(function() {
            amount = $("#amount").val();
            console.log(amount);
            location = `{{ url('/withdraw/${amount}') }}`
        })
        $("#withdraw-button-disabled").click(function(e) {
          e.preventDefault();
          var amount = "{{ $usertransaction }}";
          var wagerining = "{{ $wagerining }}";
          console.log(amount);
          alert(`${amount} is your current playing balance and ${wagerining} is your wagerining balance`);
        })
    </script>
    <script>

</script>
@endsection