@extends('layouts.customer_template')

	@section('title')
	Bitbance Deposits
	@endsection

	@section('style')
        <!-- Bootstrap CSS -->
       {{-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">--}}
        <link rel="stylesheet" href="{{asset('customer/assets/css/deposit.css')}}" />
        <link rel="stylesheet" href="{{asset('customer/assets/css/deposite-responsive.css')}}" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
        <style>
            /* Custom Modal Size */
            .custom-modal-size {
                max-width: 400px; /* Adjust width as needed */
            }

            /* Modal Background */
            .modal-content {
                background: #7A5AF8; /* Purple background */
                border-radius: 15px;
                text-align: center;
                padding: 20px;
                color: white;
                border: none;
            }

            /* Modal Header */
            .modal-header {
                border-bottom: none;
                display: flex;
                justify-content: center;
            }

            /* Close Button */
            .btn-close {
                position: absolute;
                right: 15px;
                top: 15px;
                filter: invert(1);
            }

            /* Modal Title */
            .modal-title {
                font-size: 24px;
                font-weight: bold;
            }

            /* Modal Body */
            .modal-body p {
                font-size: 16px;
                opacity: 0.9;
            }

            /* Modal Footer */
            .modal-footer {
                border-top: none;
                display: flex;
                flex-direction: column;
                gap: 10px;
            }

            /* Buttons */
            .btn-main2 {
                width: 100%;
                padding: 12px;
                background: transparent;
                border: 2px solid white;
                border-radius: 10px;
                color: white;
                font-size: 16px;
                font-weight: bold;
                transition: 0.3s;
            }

            .btn-main2:hover {
                background: rgba(255, 255, 255, 0.2);
            }

            /* Success Icon */
            .success-icon {
                width: 50px;
                height: 50px;
                margin: 10px auto;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 3px solid white;
                border-radius: 50%;
            }

            .success-icon i {
                font-size: 28px;
            }

            .address-wrap {
                margin-left: 20px;
                word-break: break-all;
                display: block;
            }

        </style>


	@endsection


    @section('header-menu')

        <div class="header-menu-display">

            <div class="header-menu">

                <a href="{{ route('deposits') }}">
                    <button class="btn-main">Deposit Crypto</button>
                </a>
                <a href="{{ route('withdraw') }}">
                    <button class="btn-main">Withdraw Crypto</button>
                </a>
                <a href="{{ route('bonus_withdraw') }}">
                    <button class="btn-main">Bonus Withdraw</button>
                </a>
                <a href="{{ route('profit_withdraw') }}">
                    <button class="btn-main">Profit Withdraw </button>
                </a>
                <a href="{{ route('trades_wallet') }}">
                    <button class="btn-main">Exchange</button>
                </a>

            </div>
        </div>

    @endsection

	@section('content')
       {{-- <div id="loadingOverlay">
            <div class="spinner"></div>
        </div>--}}

    <div class="container-sm content-section">

        <div class="mx-auto">
            <h1>Deposit Balance</h1>
            <div class="deposit-container">
              <p>Select Coin</p>

              <div class="position-relative w-100">

               <button style="margin: 0" id="dropdownBtn3" class="px-4 py-3 text-left text-white d-flex justify-content-between items-center w-100 input-field">
                  <span id="selectedOption3" class="selectedOptionContainer">Select Coin</span>
                  <i class="fa-solid fa-chevron-down"></i>
                </button>

                <ul
                  id="dropdownMenu3"
                  class="absolute bg-purple-800 mt-2 rounded-lg shadow-lg z-10"
                >
                 @foreach($currencies as $currency)
                  <li class="dropdown-item" data-value="{{strtoupper($currency->symbol)}}">
                    <img src="{{asset($currency->image)}}" alt="" />{{strtoupper($currency->symbol ?? "")}}
                    <span class="text-secondary"> {{$currency->name}} </span>
                  </li>
                 @endforeach

                </ul>
              </div>

              <div class="crypto-container">
                <button class="crypto-button" onclick="FillUSDT()">
                  <img src="{{asset('customer/assets/images/USDT.png')}}" alt="USDT" /> USDT
                </button>
                <button class="crypto-button" onclick="FillUSDC()">
                  <img src="{{asset('customer/assets/images/usdc.png')}}" alt="USDC" /> USDC
                </button>
                <button class="crypto-button" onclick="FillBTC()">
                  <img src="{{asset('customer/assets/images/bcoin.png')}}" alt="BTC" /> BTC
                </button>
                <button class="crypto-button" onclick="FillSOL()">
                  <img src="{{asset('customer/assets/images/sol.png')}}" alt="SOL" /> SOL
                </button>
              </div>
              <p>Select Network</p>

              <div class="position-relative w-100">
                <button
                  id="dropdownBtn4"
                  class="px-4 py-3 text-left text-white rounded-lg d-flex justify-content-between items-center w-100 input-field"
                  style="margin: 0"
                >
                  <span id="selectedOption4">Select Network</span>
                  <i class="fa-solid fa-chevron-down"></i>
                </button>

                <ul
                  id="dropdownMenu4"
                  class="absolute bg-purple-800 mt-2 rounded-lg shadow-lg z-10"
                >

                  {{--@foreach($networks as $network)
                  <li class="dropdown-item" data-value="{{$network->symbol}}">
                      {{strtoupper($network->symbol)}} <span class="text-secondary">{{$network->name}}</span>
                  </li>
                  @endforeach--}}

                </ul>
              </div>
                <p>Deposit Address</p>
                <div id="old_address_div" class="deposit-address">

                </div>
              {{--<div id="old_address_div" class="deposit-address">
                  <div>
                      <div style="float:left;">
                          <img src="{{asset('customer/assets/images/qrcode.png')}}" alt="" />
                      </div>
                      <div style="float:right; margin-left : 10px;">
                          <p>Address </p>
                          <p>
                            TmVfti6HJGF5t0SERILGHTRXV54fcvgdf 
                            <i
                              class="fa-solid fa-copy"
                              onclick="copyToClipboard('TmVfti6HJGF5t0SERILGHTRXV54fcvgdf')"
                            ></i>
                          </p>
                      </div>
                </div>
              </div>--}}
            <div id="new_address_div" class="deposit-address" style="display:none;">

            </div>
              <div class="d-flex justify-content-between">
                <p class="text-secondary m-0 mb-3">Minimum Deposit</p>
                <p class="m-0 mb-3">More Then 10.00 USDT</p>
              </div>

              <form id="deposits_form">
                  @csrf
                  <div class="d-flex align-items-center justify-content-between gap-3">
                      <input type="hidden" name="currency" id="currency"/>
                      <input type="hidden" name="network" id="network"/>
                      <input type="hidden" name="network_address" id="network_address"/>

                    <input
                      type="text"
                      name="amount"
                      id="deposit_amount"
                      placeholder="Deposit Amount"
                      class="input-field m-0"
                    />
                    <button
                      style="
                        margin: 0;
                        width: 210px;
                        height: 52px;
                        border-radius: 5px;
                        font-size: 16px;
                      "
                      class="btn-main"
                    >
                      Deposit Amount
                    </button>
                  </div>

              </form>

                <p id="responseMessage"></p>
            </div>

            <div class="mt-5 mb-3">Recent Deposit</div>

            <div class="scroll-container">


              <div class="child">
               @if(isset($deposits))
                @foreach($deposits as $deposit)
                <div class="box shadow-none">
                  <div class="currency">
                    <div class="">
                        @if(isset($deposit->currency))
                            @php
                                $path = "customer/assets/coins/" . strtolower($deposit->currency).".png";
                            @endphp
                            <img src="{{ asset($path) }}" alt="" />
                        @endif
                    </div>
                      <div class="">
                          <p class="pb-3">
                              {{ $deposit->amount ?? '' }}
                              {{ $deposit->currency ?? '' }}
                              {{ $deposit->status ?? '' }}
                          </p>
                      </div>
                  </div>
                  <div class="trade-details">
                    <span class="font-small">Date {{ $deposit->created_at ?? '' }}</span>
                    <span class="font-small" style="width: 280px"
                      >Network : <span style="margin-left: 10px">{{ strtoupper($deposit->network ?? "" )}}</span></span
                    >
                    <span class="font-small" style="width: 280px">
                      <p><span style="text-align: center">Address :</span>
                          @if($deposit->network_address && $deposit->network_address != null)
                              <i class="fa-solid fa-copy" onclick="copyToClipboard('{{$deposit->network_address}}')"></i>
                          @endif
                      </p>
                      <span class="address-wrap">
                          {{ $deposit->network_address ?? '' }}

                      </span>
                    </span>
                    <span class="font-small" style="width: 250px">
                      TxID
                      <span style="margin-left: 20px"
                        >TRAN-00{{$deposit->id}}
                        <i
                          class="fa-solid fa-copy"
                          onclick="copyToClipboard('TRAN-00{{$deposit->id}}')"
                        ></i
                      ></span>
                    </span>
                    <span class="font-small" style="width: 300px">
                      Deposit Wallet
                      <span style="margin-left: 90px"> Wallet </span>
                    </span>
                  </div>
                </div>
                @endforeach
                @endif

              </div>
                <div class="mt-4">
                    {{ $deposits->links() }}
                </div>
            </div>
        </div>


        <!-- Custom Confirmation Modal -->
        <div class="modal fade body" id="successModal" tabindex="-1" aria-labelledby="customConfirmModalLabel" aria-hidden="true">
            <div class="modal-dialog custom-modal-size">
                <div class="modal-content">
                    <div class="modal-header">
                        <div class="success-icon">
                            <i class="bi bi-check-lg"></i>
{{--                            <i class="fa fa-check"></i>--}}
                        </div>
                    </div>
                    <div class="modal-body">
                        <h5 class="modal-title" id="customConfirmModalLabel">Deposit Successful!</h5>
                        <br>Your funds have been added to your account successfully. </br>
                            In process. Please head to the Assets page to check the status.
                        </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn-main2" id="close" data-bs-dismiss="modal">OK</button>
                        <button type="button" class="btn-main2" id="gotoNext">View Deposit History</button>
                    </div>
                </div>
            </div>
        </div>


        @include('layouts.includes.footer')
    </div>

	@endsection

	@section('script')
       {{-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>--}}
{{--        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>--}}
        <script>

            function FillUSDT() {
                document.getElementById(
                    "selectedOption3"
                ).innerHTML = `<img src="{{asset('customer/assets/images/USDT.png')}}" alt="" />USDT
                    <span class="text-secondary"> USD Coin </span>`;
                $("#currency").val('USDT');
                fetch_networks();
                //fetch_details();
            }
            function FillUSDC() {
                document.getElementById(
                    "selectedOption3"
                ).innerHTML = `<img src="{{asset('customer/assets/images/usdc.png')}}" alt="" />USDC
                    <span class="text-secondary"> USD Coin </span>`;
                $("#currency").val('USDC');
                fetch_networks();
                //fetch_details();
            }
            function FillSOL() {
                document.getElementById(
                    "selectedOption3"
                ).innerHTML = `<img src="{{asset('customer/assets/images/sol.png')}}" alt="" />SOL
                    <span class="text-secondary"> Solana </span>`;
                $("#currency").val('SOL');
                fetch_networks();
                //fetch_details();
            }
            function FillBTC() {
                document.getElementById(
                    "selectedOption3"
                ).innerHTML = `<img src="{{asset('customer/assets/images/bcoin.png')}}" alt="" />BTC
                    <span class="text-secondary"> Bitcoin </span>`;
                $("#currency").val('BTC');
                fetch_networks();
                //fetch_details();
            }


    </script>
    <script>


       $(document).ready(function () {
            // Toggle dropdown visibility when button is clicked
            $("#dropdownBtn3").on("click", function () {
                $("#dropdownMenu3").toggle();
            });

            $("#dropdownBtn4").on("click", function () {
                $("#dropdownMenu4").toggle();
            });

            // Handle selection for the Coin dropdown
            $("#dropdownMenu3 li").on("click", function () {
                //var selectedText = $(this).text().trim();
                var currencyFullName = "";
                var selectedText = $(this).text().trim().replace(/\s+/g, " "); // Replace multiple spaces with a single space
                var words = selectedText.split(" "); // Split text by space
                var firstWord = words[0] || ""; // Get the first word (or empty string if undefined)
                var secondWord = words[1] || ""; // Get the second word (or empty string if undefined)
                if (words[2] !== undefined && words[2] !== "") {
                    currencyFullName = secondWord + " " + words[2];
                } else {
                    currencyFullName = secondWord;
                }

                var formattedText = firstWord + " <span class='text-secondary'>" + currencyFullName + "</span>"; // Join with a single space

                var selectedValue = $(this).data("value");
                var selectedImg = $(this).find("img").attr("src"); // Get image src
                //$("#selectedOption3").text(selectedText); // Update button text
                $("#selectedOption3").html(`<img src="${selectedImg}" alt="" class="selected-img"> ${formattedText}`);

                $("#dropdownMenu3").hide();
                $("#currency").val(selectedValue);

                fetch_networks();
                //fetch_details();
                //console.log("Selected Coin:", selectedValue);
            });

            // Handle selection for the Network dropdown
            $("#dropdownMenu4 li").on("click", function () {
                var selectedText = $(this).text().trim();
                var selectedValue = $(this).data("value");

                $("#selectedOption4").text(selectedText); // Update button text
                $("#dropdownMenu4").hide(); // Hide dropdown
                $("#network").val(selectedValue);

                fetch_details();
                console.log("Selected Network:", selectedValue);
            });

            // Close dropdown when clicking outside
            $(document).on("click", function (e) {
                if (!$(e.target).closest("#dropdownBtn3, #dropdownMenu3").length) {
                    $("#dropdownMenu3").hide();
                }
                if (!$(e.target).closest("#dropdownBtn4, #dropdownMenu4").length) {
                    $("#dropdownMenu4").hide();
                }
            });
        });



        $(document).ready(function() {

            $("#deposits_form").on("submit", function(e) {

                e.preventDefault(); // Prevent form from submitting normally
                // Get selected currency and network
                var currency = $("#dropdownMenu3 .selected").data("value") || $("#selectedOption3").text().trim();
                var network = $("#dropdownMenu4 .selected").data("value") || $("#selectedOption4").text().trim();

                var selectedcurrency = $("#currency").val();
                var selectednetwork = $("#network").val();

                // Ensure selected values are valid
                if (!selectedcurrency || currency === "Select Coin") {
                    $("#responseMessage").html("<span style='color:white'>Please select a currency.</span>");
                    return;
                }
                if (!selectednetwork || network === "Select Network") {
                    $("#responseMessage").html("<span style='color:white'>Please select a network.</span>");
                    return;
                }

                var deposit_amount = $("#deposit_amount").val();
                if (!deposit_amount || deposit_amount <= 0 || deposit_amount === "") {
                    $("#responseMessage").html("<span style='color:white'>Deposit amount must be greater than 0 .</span>");
                    return;
                }
                //console.log(currency + " Network : " + network + "Amount : " + deposit_amount);
                //console.log(selectedcurrency + " Network : " + selectednetwork);

                //var formData = $(this).serialize() + "&currency=" + encodeURIComponent(currency) + "&network=" + encodeURIComponent(network);

                $.ajax({
                url: "{{ route('save_deposits') }}",
                type: "POST",
                //data: formData,
                data: $(this).serialize(),
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {

                    showCustomConfirm();
                    // $("#responseMessage").html("<span style='color:white'>" + response.success + "</span>");
                    // $("#deposits_form")[0].reset(); // Reset form//
                    //
                    // setTimeout(function() {
                    //     location.reload();
                    // }, 3500); // Reload page after 3.5 seconds
                },
                error: function(xhr) {
                    let errors = xhr.responseJSON.errors;
                    let errorMessage = "";
                    $.each(errors, function(key, value) {
                        errorMessage += value + "<br>";
                    });
                    //$("#responseMessage").html("<span style='color:white'>" + errorMessage + "</span>");
                }
            });
        });


    });

       function fetch_networks() {
           var currency = $("#currency").val();
           // Only proceed if both values are valid
           if (currency) {
               $.ajax({
                   url: "{{ route('network_details') }}",
                   type: "POST",
                   data: { currency: currency},
                   headers: {
                       "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                   },
                   beforeSend: function () {
                       $("#new_address_div").show().html("<p>Loading...</p>");
                   },
                   success: function (response) {
                       $("#selectedOption4").text('');
                       //console.log(response);
                       $("#new_address_div").hide();
                       const $dropdownMenu = $("#dropdownMenu4");
                       $dropdownMenu.empty(); // Clear existing list items

                       if (response.networks && response.networks.length > 0) {
                           response.networks.forEach(function (network) {
                               const listItem = `
                                <li class="dropdown-item" data-value="${network.id}">
                                    ${network.name}
                                </li>`;
                               $dropdownMenu.append(listItem);
                           });
                           /*response.networks.forEach(function (network) {
                               const listItem = `
                                <li class="dropdown-item" data-value="${network.symbol}">
                                    ${network.symbol.toUpperCase()} <span class="text-secondary">${network.name}</span>
                                </li>`;
                               $dropdownMenu.append(listItem);
                           });*/
                       } else {
                           $dropdownMenu.append('<li class="dropdown-item text-secondary">No networks available</li>');
                       }
                   },
                   error: function () {
                       //$("#new_address_div").hide();
                       //$("#old_address_div").show();
                   }
               });
           } else {
               //$("#new_address_div").hide();
               //$("#old_address_div").show();
           }
       }


       $(document).on('click', '#dropdownMenu4 .dropdown-item', function () {
           const selectedText = $(this).text();
           const selectedValue = $(this).data("value");

           $("#selectedOption4").text(selectedText);
           $("#dropdownMenu4").hide(); // Hide dropdown
           $("#network").val(selectedValue);
           console.log("Network :" + selectedValue);
           // Optionally set a hidden input value
           //$("#selectedNetworkSymbol").val(selectedValue);
           fetch_details();
       });



       function fetch_details() {
           var currency = $("#currency").val();
           var network = $("#network").val();

           //console.log("Currency:", currency, "Network:", network);
           // Only proceed if both values are valid
           if (currency && network) {
               $.ajax({
                   url: "{{ route('network_currency_details') }}",
                   type: "POST",
                   data: { currency: currency, network: network },
                   headers: {
                       "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                   },
                   beforeSend: function () {
                       $("#old_address_div").hide();
                       $("#new_address_div").show().html("<p>Loading...</p>");
                   },
                   success: function (response) {
                       if (response.crypto_address) {
                           $("#network_address").val(response.crypto_address);

                           let imageUrl = response.image ? response.image : "path/to/default-image.png"; // Default image if missing

                           $("#new_address_div").html(`
                                <div>
                                    <div>
                                        <img style="float:left;" src="${imageUrl}" alt="Crypto Image" onerror="this.onerror=null;this.src='path/to/default-image.png';"/>

                                    </div>
                                    <div style="float:right; margin-left:10px;">
<!--                                        <p margin-left:10px;"> Address: </p>-->
                                        <p class="address-wrap">
                                        Address: ${response.crypto_address}
                                            <span margin-left:40px;"><i class="fa-solid fa-copy" onclick="copyToClipboard('${response.crypto_address}')"></i></span>
                                         </p>
                                    </div>
                                </div>
                            `);
                       } else {
                           $("#new_address_div").hide();
                           $("#old_address_div").show();
                       }
                   },
                   error: function () {
                       $("#new_address_div").hide();
                       $("#old_address_div").show();
                   }
               });
           } else {
               $("#new_address_div").hide();
               $("#old_address_div").show();
           }
       }


       // Clipboard copy function with improved compatibility
       function copyToClipboard(text) {
           if (navigator.clipboard && window.isSecureContext) {
               navigator.clipboard.writeText(text).then(() => {
                   alert("Address copied to clipboard!");
               }).catch(err => {
                   console.error("Failed to copy: ", err);
               });
           } else {
               // Fallback for older browsers
               let textarea = document.createElement("textarea");
               textarea.value = text;
               document.body.appendChild(textarea);
               textarea.select();
               try {
                   document.execCommand("copy");
                   alert("Address copied to clipboard!");
               } catch (err) {
                   console.error("Fallback failed: ", err);
               }
               document.body.removeChild(textarea);
           }
       }

       function toggleBg(button) {
           button.classList.toggle("bg-main");
       }





       function toggleSidebar() {
           var sidebar = document.getElementById("sm-sidebar");
           var burgerMenu = document.querySelector(".burger-menu");

           if (sidebar.style.left === "0px") {
               sidebar.style.left = "-40%";
               burgerMenu.innerHTML = "&#9776;";
           } else {
               sidebar.style.left = "0px";
               burgerMenu.innerHTML = "&#10006;";
           }
       }



    </script>

    <script>
        // Function to show the modal
        function showCustomConfirm() {
            console.log("Opening modal...");
            var confirmModal = new bootstrap.Modal(document.getElementById("successModal"));
            confirmModal.show();
        }

        document.addEventListener("DOMContentLoaded", function () {
            var modalElement = document.getElementById("successModal");
            if (!modalElement) {
                console.error("Modal element not found!");
                return;
            }
            // "Go Back" button
            var goBackButton = document.getElementById("close");
            if (goBackButton) {
                console.log("Go Back Button Found");
                goBackButton.addEventListener("click", function () {
                    console.log("Closing modal...");
                    var confirmModal = bootstrap.Modal.getInstance(modalElement);
                    if (confirmModal) {
                        confirmModal.hide();
                    } else {
                        console.error("No Bootstrap modal instance found!");
                    }
                    $("#responseMessage").html("<span style='color:white'> Deposit Save Successfully </span>");
                    $("#deposits_form")[0].reset(); // Reset form//

                    setTimeout(function() {
                        location.reload();
                    }, 3500); // Reload page after 3.5 seconds

                });
            }
            // "Continue Without Buying" button
            var continueWithoutBuyButton = document.getElementById("gotoNext");
            if (continueWithoutBuyButton) {
                continueWithoutBuyButton.addEventListener("click", function () {
                    console.log("Closing modal and going to next page...");
                    var confirmModal = bootstrap.Modal.getInstance(modalElement);
                    if (confirmModal) {
                        confirmModal.hide();
                    } else {
                        console.error("No Bootstrap modal instance found!");
                    }

                    setTimeout(function () {
                        location.replace("{{route('transaction')}}");
                    }, 1000);
                    // Replace with your actual function
                    //gotoNextPage(); // Ensure this function exists
                });
            }
        });

    </script>



	@endsection