@extends('layouts.customer_template')

	@section('title')
		Bitbance Exchange Balance
	@endsection

	@section('style')
        {{--<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')}}" />

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

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

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

        </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>Exchange Balance</h1>

              <div class="deposit-container">

                  <div id="currencyDropdownMenu">
                      <p>Select Sell Coin</p>

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

                          <ul
                              id="dropdownMenu"
                              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>

                  </div>


                  <div id="currencyDropdownMenu1">
                      <p>Select Buy Coin</p>

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

                          <ul id="dropdownMenu2" 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="FillUSDT2()">
                              <img src="{{asset('customer/assets/images/USDT.png')}}" alt="USDT" /> USDT
                          </button>
                          <button class="crypto-button" onclick="FillUSDC2()">
                              <img src="{{asset('customer/assets/images/usdc.png')}}" alt="USDC" /> USDC
                          </button>
                          <button class="crypto-button" onclick="FillBTC2()">
                              <img src="{{asset('customer/assets/images/bcoin.png')}}" alt="BTC" /> BTC
                          </button>
                          <button class="crypto-button" onclick="FillSOL2()">
                              <img src="{{asset('customer/assets/images/sol.png')}}" alt="SOL" /> SOL
                          </button>
                      </div>

                  </div>


				<form id="trades_form">
					@csrf
					<input type="hidden" name="currency" id="currency"/>
					<input type="hidden" name="trade_exchange_currency" id="trade_exchange_currency"/>
					<p class="pt-3">Buy/Sell Amount</p>

					<div class="position-relative">
						<label for="" class="coin-label">Amount</label>
						<input type="text" id="amount" name="amount" placeholder="Minimum 10" class="input-field" />
					</div>

					<div class="d-flex justify-content-between" style="line-height: 0px" >
						<p class="text-secondary">Available Balance : $ <span id="usdBalance">0</span></p>
						<p id="avilbalance">$ 0.00 </p>
					</div>

					<hr />
                    <div class="d-flex justify-content-end">
                        <button type="submit" class="btn-main">Exchange</button>
                    </div>

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

            <div class="mt-5">Recent Exchange Balance History</div>
              <div class="scroll-container mb-5">
                <div class="child">

                  <div class="box shadow-none">
                    <div class="trade-details mt-2">
                      <span class="text-secondary text-left" style="font-size: 16px; width: 150px; text-align: left">
                         Currency
                      </span>
                      <span class="text-secondary" style="width: 280px; font-size: 16px">Amount</span>
                      <span class="text-secondary" style="width: 280px; font-size: 16px">
                        Buy/Sell Type
                      </span>
{{--                        <span class="text-secondary" style="width: 250px; font-size: 16px">PType</span>--}}
                      <span class="text-secondary" style="width: 250px; font-size: 16px">
                        Exchange Date
                      </span>

                    </div>
                      @if(isset($allTrades))
                          @foreach($allTrades as $exchange)
                              <div class="trade-details">
                                  <span class="font-small" style="width: 150px">
                                    <div class="currency" style="padding-left: 0px">
                                      <div class="">

                                          @if(isset($exchange->currency))
                                              @php
                                                  $path = "customer/assets/coins/" . strtolower($exchange->currency).".png";
                                              @endphp
                                              <img src="{{ asset($path) }}" alt="" />
                                          @endif

                                      </div>
                                      <div class="">

                                        <p class="pb-3">{{ $exchange->currency ?? '' }}</p>
                                      </div>
                                    </div>
{{--                                    <span class="text-secondary"> Date {{ $exchange->created_at ?? '' }}</span>--}}
                                  </span>
                                     @if($exchange->currency == "USDT" || $exchange->currency == "USDC" )

                                      <span class="font-small" style="width: 280px">{{ round($exchange->amount,2) ?? 0 }}</span>
                                     @else
                                      <span class="font-small" style="width: 280px">{{ round($exchange->amount,8) ?? 0  }}</span>
                                     @endif

                                      @if(isset($exchange->type) && strtoupper($exchange->type) == "DEBIT")
                                      <span class="font-small" style="width: 280px">Buy</span>
                                      @else
                                              <span class="font-small" style="width: 280px"> Sell</span>
                                      @endif

{{--                                  <span class="font-small" style="width: 280px">{{ $exchange->payment_type ?? '' }}</span>--}}

                                      <span class="font-small" style="width: 250px">
                                  {{ $exchange->created_at ?? '' }}
                                  </span>
                              </div>
                          @endforeach
                      @endif
                  </div>
                    <div class="mt-4">
                        {{ $allTrades->links() }}
                    </div>
                </div>
              </div>
            </div>

           @include('layouts.includes.footer')

       </div>

        <!-- Custom Confirmation Modal -->
        <div class="modal fade body" id="messageModal" 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="error-icon">
                            <span id="erroricon"><i class="bi-exclamation-triangle-fill"></i></span>
                            <span id="successicon" style="display:none;"><i class="bi bi-check-lg"></i></span>
                        </div>
                    </div>
                    <div class="modal-body">
                        <h5 class="modal-title" id="customConfirmModalLabel">Message</h5>
                        <p id="modelMessageBody">
                        </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 Exchange History</button>
                    </div>
                </div>
            </div>
        </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(
                    "selectedOption"
                ).innerHTML = `<img src="{{asset('customer/assets/images/USDT.png')}}" alt="" />USDT
                    <span class="text-secondary"> USD Coin </span>`;
                $("#currency").val('USDT');
                //console.log("Currency: USDT");
                fetch_details();
            }
            function FillUSDC() {
                document.getElementById(
                    "selectedOption"
                ).innerHTML = `<img src="{{asset('customer/assets/images/usdc.png')}}" alt="" />USDC
                    <span class="text-secondary"> USD Coin </span>`;
                $("#currency").val('USDC');
                //console.log("Currency: USDC");
                fetch_details();
            }
            function FillSOL() {
                document.getElementById(
                    "selectedOption"
                ).innerHTML = `<img src="{{asset('customer/assets/images/sol.png')}}" alt="" />SOL
                    <span class="text-secondary"> Solana </span>`;
                $("#currency").val('SOL');
                //console.log("Currency: SOL");
                fetch_details();
            }
            function FillBTC() {
                document.getElementById(
                    "selectedOption"
                ).innerHTML = `<img src="{{asset('customer/assets/images/bcoin.png')}}" alt="" />BTC
                    <span class="text-secondary"> Bitcoin </span>`;
                $("#currency").val('BTC');
                //console.log("Currency: BTC");
                fetch_details();
            }

            function FillUSDT2() {
                document.getElementById(
                    "selectedOption2"
                ).innerHTML = `<img src="{{asset('customer/assets/images/USDT.png')}}" alt="" />USDT
                    <span class="text-secondary"> USD Coin </span>`;
                $("#trade_exchange_currency").val('USDT');
                //console.log("Currency: USDT");
                //fetch_details();
            }

            function FillUSDC2() {
                document.getElementById(
                    "selectedOption2"
                ).innerHTML = `<img src="{{asset('customer/assets/images/usdc.png')}}" alt="" />USDC
                    <span class="text-secondary"> USD Coin </span>`;
                $("#trade_exchange_currency").val('USDC');
                //console.log("Currency: USDC");
                //fetch_details();
            }

            function FillSOL2() {
                document.getElementById(
                    "selectedOption2"
                ).innerHTML = `<img src="{{asset('customer/assets/images/sol.png')}}" alt="" />SOL
                    <span class="text-secondary"> Solana </span>`;
                $("#trade_exchange_currency").val('SOL');
                //console.log("Currency: SOL");
                //fetch_details();
            }

            function FillBTC2() {
                document.getElementById(
                    "selectedOption2"
                ).innerHTML = `<img src="{{asset('customer/assets/images/bcoin.png')}}" alt="" />BTC
                    <span class="text-secondary"> Bitcoin </span>`;
                $("#trade_exchange_currency").val('BTC');
                //console.log("Currency: BTC");
                //fetch_details();
            }

            function fetch_details() {
                var currency = $("#currency").val(); // Get the selected currency

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

                                let balance = parseFloat(response.balance.toFixed(6)).toString(); // Convert to float then string
                                let balanceAmount = balance.replace(/(\.\d*?[1-9])0+$/, '$1');

                                if(currency === "USDT" || currency === "USDC"){
                                    $('#amount').val(response.balance.toFixed(2));
                                    $('#avilbalance').text(`${response.balance.toFixed(2)} ${currency}`);
                                }else{
                                    $('#amount').val(balanceAmount);
                                    $('#avilbalance').text(`${balanceAmount} ${currency}`);
                                }

                                $('#usdBalance').text(`${response.balance_usd.toFixed(2)} USDT`);
                            }
                        },
                        error: function () {
                            console.error("Error fetching wallet balance.");
                        }
                    });
                }
            }


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

                $("#dropdownBtn").on("click", function () {
                    $("#dropdownMenu").toggle();
                });

                // Handle selection for the Coin dropdown
                $("#dropdownMenu li").on("click", function () {
                    var currencyFullName = "";
                    //var selectedText = $(this).text().trim();
                    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
                    //console.log(formattedText);
                    var selectedValue = $(this).data("value");
                    //console.log("Val " + selectedValue);
                    var selectedImg = $(this).find("img").attr("src"); // Get image src
                    //$("#selectedOption3").text(selectedText); // Update button text
                    $("#selectedOption").html(`<img src="${selectedImg}" alt="" class="selected-img"> ${formattedText}`);
                    $("#dropdownMenu").hide();

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

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

                // Handle selection for the Network dropdown
                $("#dropdownMenu2 li").on("click", function () {
                    var currencyFullName = "";
                    //var selectedText = $(this).text().trim();
                    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
                    $("#selectedOption2").html(`<img src="${selectedImg}" alt="" class="selected-img"> ${formattedText}`);
                    //$("#selectedOption2").text(selectedText); // Update button text
                    $("#dropdownMenu2").hide(); // Hide dropdown
                    $("#trade_exchange_currency").val(selectedValue);
                    //fetch_details();
                    //console.log("Selected Wallet Type:" + selectedValue);
                });

                // Close dropdown when clicking outside
                $(document).on("click", function (e) {
                    if (!$(e.target).closest("#dropdownBtn, #dropdownMenu").length) {
                        $("#dropdownMenu").hide();
                    }
                    if (!$(e.target).closest("#dropdownBtn2, #dropdownMenu2").length) {
                        $("#dropdownMenu2").hide();
                    }
                });
            });


            $(document).ready(function() {

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

                    e.preventDefault(); // Prevent form from submitting normally
                    // Get selected currency and network
                    var selected_currency = $("#dropdownMenu .selected").data("value") || $("#selectedOption").text().trim();
                    var selected_trade_currency = $("#dropdownMenu2 .selected").data("value") || $("#selectedOption2").text().trim();
                    //console.log("currency =" + selected_currency + "trade_value" + selected_trade_value);
                    var trade_exchange_currency = $("#trade_exchange_currency").val();
                    //console.log(trade_exchange_value +" Test : "+selected_trade_value);
                    if (!trade_exchange_currency || selected_trade_currency === "Please Select Balance Exchange Type") {
                        $("#responseMessage").html("<span style='color:white'>Please select a Buy Currency.</span>");
                        return false;
                    }
                    var currency = $("#currency").val();
                    // Ensure selected values are valid
                    if (!currency || selected_currency === "Select Coin") {
                        $("#responseMessage").html("<span style='color:white'>Please select a Sell currency.</span>");
                        return false;
                    }

                    if (currency === trade_exchange_currency) {
                        $("#responseMessage").html("<span style='color:white'>Please select a different Buy/Sell currencies.</span>");
                        return false;
                    }

                    var amount = $("#amount").val();
                    if (!amount || amount <= 0 || amount === "") {
                        $("#responseMessage").html("<span style='color:white'>Amount must be greater than 0 .</span>");
                        return false;
                    }

                    //var formData = $(this).serialize() + "&trade_value=" + encodeURIComponent(trade_exchange_value);
                    $.ajax({
                        url: "{{ route('save_trades_wallet_amount') }}",
                        type: "POST",
                        //data: formData,
                        data: $(this).serialize(),
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            if (response.status === 'success') {
                                $("#erroricon").hide();
                                $("#successicon").show();

                                $('#modelMessageBody').text(response.message);
                                showCustomConfirm();

                                //$("#responseMessage").html("<span style='color:white'>" + response.success + "</span>");
                               // $("#trades_form")[0].reset(); // Reset form//

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

                            }else{
                                $("#successicon").hide();
                                $("#erroricon").show();
                                $('#modelMessageBody').text(response.message);
                                showCustomConfirm();
                            }
                        },
                        error: function(xhr) {


                            let errors = xhr.responseJSON.errors;
                            let errorMessage = "";
                            $.each(errors, function(key, value) {
                                errorMessage += value + "<br>";
                            });

                            $('#modelMessageBody').text(errorMessage);
                            showCustomConfirm();
                            //$("#responseMessage").html("<span style='color:white'>" + errorMessage + "</span>");
                        }
                    });
                });


            });



            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("messageModal"));
                confirmModal.show();
            }

            document.addEventListener("DOMContentLoaded", function () {
                var modalElement = document.getElementById("messageModal");
                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!");
                        }
                        $("#trades_form")[0].reset();
                        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