@extends('layouts.customer_template')

	@section('title')
		Bitbance Withdraw
	@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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
        <link rel="stylesheet" href="{{asset('customer/assets/css/withdraw.css')}}" />
        <link rel="stylesheet" href="{{asset('customer/assets/css/withdraw-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);
            }

            /* 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;
            }

            .otp-subtext {
                font-size: 14px;
                /*color: #6c757d;  Light gray text */
                margin-top: 5px;
            }


        </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" style="overflow-x: hidden">
           <div class="header-menu">
               <a href="{{ route('deposits') }}">
                   <button class="btn-main">Deposit</button>
               </a>
               <a href="{{ route('bonus_withdraw') }}">
                   <button class="btn-main">Bonus</button>
               </a>
               <a href="{{ route('profit_withdraw') }}">
                   <button class="btn-main">Profit</button>
               </a>
           </div>

            <div class="mx-auto">
                <h1>Withdraw Balance</h1>
                <p>Select Coin</p>

              <div class="deposit-container">
                <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>

                <p>Wallet Address</p>
                <input
                    id="withdraw_address"
                    name="withdraw_address"
                  type="text"
                  placeholder="Enter Your Wallet Address"
                  class="input-field"
                />

                <div class="position-relative w-100">
                  <button
                    id="dropdownBtn2"
                    class="text-left text-white rounded-lg d-flex justify-content-between items-center w-100 input-field mt-2"
                    style="margin: 0"
                  >
                    <span id="selectedOption2">Select Network</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($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 class="text-disabled" style="line-height: 17px;"> CAUTION : Ensure the recipient address has been activated;
                otherwise, your withdraw will fail. </p>

                <form id="withdraw_form">
                    @csrf
                    <input type="hidden" name="currency" id="currency"/>
                    <input type="hidden" name="network" id="network"/>
                    <p class="pt-3">Withdraw Amount</p>
                    <div class="position-relative">
                      <label for="" class="coin-label">Amount</label>
                      <input type="text" id="amount" name="amount" placeholder="Minimum 30 USDT" class="input-field" />
                    </div>
                    <div class="d-flex justify-content-between" style="line-height: 0px" >
                      <p class="text-secondary">Available Withdraw</p>
                      <p id="avilbalance">0.01 USDT</p>
                    </div>
                    <div
                      class="d-flex justify-content-between"
                      style="line-height: 0px; margin-top: -20px"
                    >
                    <p class="text-secondary">24h Remaining Limit</p>
                    <p>
                      <span id="remaining_total"  class="text-secondary">{{$totalWithdrawAmount}} USDT</span> /
                      <span id="remaining_limit"  class="text-secondary">8,000,000.0 USDT </span>
                    </p>
                </div>

                <hr />

                <div class="d-flex align-items-center justify-content-between">
                  <div>
                    <div class="text-secondary">Received Amount</div>
                    <div id="remAmount">0.00 USDT</div>
                    <div class="text-secondary" id="feeAmount">Network Fee 1.00 USDT</div>
                  </div>
                  <button type="submit" class="btn-main">Withdraw</button>
                </div>
              </form>
              <p id="responseMessage"></p>
            </div>


            <div class="mt-5">Recent Withdraws</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"
                      >
                        Asset/Data
                      </span>
                      <span
                        class="text-secondary"
                        style="width: 280px; font-size: 16px"
                        >Amount</span
                      >
                      <span
                        class="text-secondary"
                        style="width: 280px; font-size: 16px"
                      >
                        Network
                      </span>
                      <span
                        class="text-secondary"
                        style="width: 250px; font-size: 16px"
                      >
                        Address
                      </span>
                      <span
                        class="text-secondary"
                        style="width: 250px; font-size: 16px"
                      >
                        TxID
                      </span>
                      <span
                        class="text-secondary"
                        style="width: 250px; font-size: 16px"
                      >
                        Status
                      </span>
                    </div>
                      @if(isset($withdrawals))
                          @foreach($withdrawals as $withdraw)
                            <div class="trade-details">
                              <span class="font-small" style="width: 150px">
                                <div class="currency" style="padding-left: 0px">
                                  <div class="">
                                      @if(isset($withdraw->currency))
                                          @php
                                              $path = "customer/assets/coins/" . strtolower($withdraw->currency).".png";
                                          @endphp
                                          <img src="{{ asset($path) }}" alt="" />
                                      @endif

                                  </div>
                                  <div class="">
                                    <p class="pb-3">{{ $withdraw->currency ?? '' }}</p>
                                  </div>
                                </div>
                                <span class="text-secondary"> Date {{ $withdraw->created_at ?? '' }}</span>
                              </span>
                              <span class="font-small" style="width: 280px">{{ $withdraw->amount ?? '' }}</span>
                              <span class="font-small" style="width: 280px">{{ strtoupper($withdraw->network ?? "" )}} </span>
                              <span style="margin-left: 20px">{{ $withdraw->withdraw_address ?? '' }}
                                <i class="fa-solid fa-copy" onclick="copyToClipboard('{{$withdraw->withdraw_address}}')"></i
                                ></span>

                              <span class="font-small" style="width: 250px">
                                W-00{{$withdraw->id}}
                                  <i class="fa-solid fa-copy" onclick="copyToClipboard('W-00{{$withdraw->id}}')"></i>
                              </span>
                              <span class="font-small" style="width: 250px">
                               {{ $withdraw->status ?? '' }}
                              </span>
                            </div>
                          @endforeach

                      @endif

                  </div>

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

           @include('layouts.includes.footer')

       </div>


       <!-- OTP Verification Modal -->
       <div class="modal fade" id="otpVerificationModal" tabindex="-1" aria-labelledby="otpModalLabel" aria-hidden="true">
           <div class="modal-dialog custom-modal-size">
               <div class="modal-content">
                   <div class="modal-header">
                       <h5 class="modal-title">Enter Verification Code</h5>
                   </div>
                   <div class="modal-body">
                       <p class="otp-subtext">Code will be sent to {{Auth::user()->email ?? "your email id."}}</p>
                       <input type="text" id="otp_code" class="input-field" placeholder="Enter OTP">
                       <span id="otpErrorMessage" style="color:white"></span>
                   </div>
                   <div class="modal-footer">
                       <button type="button" class="btn-main2" id="verifyOtp">Submit</button>
                       <p style="font-size: 12px; text-align:left !important;" id="resendOTP">Can't receive code? <span id="otpTimer"></span></p>
                   </div>
                   <div style="margin-top:100px;">
                       <p class="text-center">Protected by Bitbance Risk</p>
                   </div>
               </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>
                       </div>
                   </div>
                   <div class="modal-body">
                       <h5 class="modal-title" id="customConfirmModalLabel">Withdrawal Application Submitted</h5>
                       <p>In process. Please head to the Assets page to check the status. </p> </br>
                       <p>Recommended security verification Methods to Enhance your account security: Fund Password</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 Withdrawal History</button>

                   </div>
               </div>
           </div>
       </div>

	@endsection

	@section('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_networks();
                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_networks();
                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_networks();
                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_networks();
                fetch_details();
            }

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

                //console.log("selected Currency:" + currency);

                // Only proceed if both values are valid
                if (currency) {
                    $.ajax({
                        url: "{{ route('available_wallet_balance') }}",
                        type: "POST",
                        data: {currency: currency},
                        headers: {
                            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                        },
                        success: function (response) {
                            console.log(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"){
                                    //$("#avilbalance").text(response.balance.toFixed(2));
                                    //$("#amount").val(response.balance.toFixed(2));
                                    $('#amount').val(response.balance.toFixed(2));
                                    $('#avilbalance').text(`${response.balance.toFixed(2)} ${currency}`);
                                }else{
                                    $('#amount').val(balanceAmount);
                                    $('#avilbalance').text(`${balanceAmount} ${currency}`);
                                }

                                // Update the balance in the UI
                            }
                        },
                        error: function () {

                        }
                    });

                }
            }

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

                $("#dropdownBtn2").on("click", function () {
                    $("#dropdownMenu2").toggle();
                });

                // Handle selection for the Coin dropdown
                $("#dropdownMenu li").on("click", function () {
                    //var selectedText = $(this).text().trim();
                    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
                    $("#selectedOption").html(`<img src="${selectedImg}" alt="" class="selected-img"> ${formattedText}`);

                    $("#dropdownMenu").hide();
                    $("#currency").val(selectedValue);
                    fetch_networks();
                    fetch_details();
                    console.log("Selected Coin:" + selectedValue);
                });

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

                    $("#selectedOption2").text(selectedText); // Update button text
                    $("#dropdownMenu2").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("#dropdownBtn, #dropdownMenu").length) {
                        $("#dropdownMenu").hide();
                    }
                    if (!$(e.target).closest("#dropdownBtn2, #dropdownMenu2").length) {
                        $("#dropdownMenu2").hide();
                    }
                });
            });


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

                console.log("Currency:" + currency);

                // 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) {
                            $("#selectedOption2").text('');
                            $("#new_address_div").hide();
                            console.log(response);

                            const $dropdownMenu = $("#dropdownMenu2");
                            $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}">
                                       <span>${network.name}</span>
                                    </li>`;

                                    /*<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', '#dropdownMenu2 .dropdown-item', function () {
                const selectedText = $(this).text();
                const selectedValue = $(this).data("value");

                $("#selectedOption2").text(selectedText);
                $("#dropdownMenu2").hide(); // Hide dropdown
                $("#network").val(selectedValue);

                // Optionally set a hidden input value
                //$("#selectedNetworkSymbol").val(selectedValue);
                fetch_details();

            });

            document.getElementById('amount').addEventListener('input', function () {
                var currency    = $("#currency").val();
                let amount      = parseFloat(this.value) || 0;
                let minAmount   = 30; // Minimum required amount
                let baseFee     = 1.00; // Default base fee (1 USDT)

                if (amount <= 0) {
                    document.getElementById('feeAmount').textContent = "Network Fee 1.00 USDT";
                    document.getElementById('remAmount').textContent = "0.00 USDT";
                    return;
                }

                // Calculate the fee based on every 100 increment
                //let fee = parseFloat((Math.floor(amount / 100)) * 0.01 * amount);
                //let fee = parseFloat(Math.floor(amount / 100));
                let fee = Number(amount * 0.01);
                let remaining = amount - fee;

                fee = fee.toFixed(6).replace(/(\.\d*?[1-9])0+$/, '$1').replace(/\.$/, '');
                remaining = remaining.toFixed(6).replace(/(\.\d*?[1-9])0+$/, '$1').replace(/\.$/, '');
                //console.log(amount + " currency : "+ currency + "Withdraw Amount : " + remaining + " Fee Amount: "+ fee );

                if(currency === "USDT" || currency === "USDC"){
                    document.getElementById('feeAmount').textContent = `Network Fee ${fee} ${currency}`;
                    //document.getElementById('remAmount').textContent = `${remaining.toFixed(2)} ${currency}`;
                    document.getElementById('remAmount').textContent = `${remaining} ${currency}`;
                }else{
                    document.getElementById('feeAmount').textContent = `Network Fee ${fee} ${currency}`;
                    // document.getElementById('remAmount').textContent = `${remaining.toFixed(8)} ${currency}`;
                    document.getElementById('remAmount').textContent = `${remaining} ${currency}`;
                }

            });



            // 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>

            $(document).ready(function() {
                let withdrawId = null;

                $("#withdraw_form").on("submit", function(e) {
                    e.preventDefault();

                    let withdraw_address = $("#withdraw_address").val();
                    if (!withdraw_address || withdraw_address === "") {
                        $("#responseMessage").html("<span style='color:white'>Withdraw Address is required.</span>");
                        return;
                    }

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

                    console.log(selectednetwork);

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

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

                    let formData = $(this).serialize() + "&withdraw_address=" + encodeURIComponent(withdraw_address);
                    $.ajax({
                        url: "{{ route('save_withdraw') }}",
                        type: "POST",
                        data: formData,
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            console.log(response);
                            if (response.success && response.withdraw_id) {
                                withdrawId = response.withdraw_id;
                               // $('#otp_code').val('');
                                showOtpModal();
                            } else {
                                $("#responseMessage").html("<span style='color:white'>" + response.error + "</span>");
                            }
                        },
                        error: function(xhr) {
                            let errorMessage = "An unexpected error occurred.";

                            if (xhr.responseJSON && xhr.responseJSON.errors) {
                                let errors = xhr.responseJSON.errors;
                                errorMessage = "";
                                $.each(errors, function(key, value) {
                                    errorMessage += value + "<br>";
                                });
                            } else if (xhr.responseJSON && xhr.responseJSON.error) {
                                errorMessage = xhr.responseJSON.error; // Handling single error message
                            }

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

                // Show OTP modal
                function showOtpModal() {
                    //$('#otp_code').val('')
                    var otpModal = new bootstrap.Modal(document.getElementById("otpVerificationModal"));
                    otpModal.show();
                    $('#otp_code').val('')
                }

                // Verify OTP
                $("#resendOTP").on("click", function() {
                    let $this = $(this);

                    // Disable button after clicking & show timer
                    $this.css("pointer-events", "none").text("Resending OTP...");

                    console.log("Clicked on resend OTP email.");
                    $.ajax({
                        url: "{{ route('resend_otp') }}",
                        type: "POST",
                        headers: {
                            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                        },
                        success: function(response) {
                            if (response.success) {
                                alert("OTP sent to your email.");
                                startOtpTimer($this); // Start 30-sec cooldown timer
                            } else {
                                alert("Error: " + response.error);
                                $this.css("pointer-events", "auto").text("Can't receive code?");
                            }
                        },
                        error: function() {
                            alert("Something went wrong. Please try again.");
                            $this.css("pointer-events", "auto").text("Can't receive code?");
                        }
                    });
                });

                // Function to start OTP resend cooldown (30 seconds)
                function startOtpTimer($button) {
                    let timeLeft = 30; // 30 seconds countdown
                    $("#otpTimer").text(`(${timeLeft}s)`);

                    let timer = setInterval(function() {
                        timeLeft--;
                        $("#otpTimer").text(`(${timeLeft}s)`);
                        if (timeLeft <= 0) {
                            clearInterval(timer);
                            $button.css("pointer-events", "auto").text("Can't receive code?");
                            $("#otpTimer").text(""); // Remove timer text
                        }
                    }, 1000);
                }

                // Show success modal
                function showSuccessModal() {
                    var successModal = new bootstrap.Modal(document.getElementById("successModal"));
                    successModal.show();
                }

                // Redirect buttons
                $("#gotoNext").on("click", function() {
                    window.location.href = "{{ route('transaction') }}";
                });

                $("#close").on("click", function() {
                    location.reload();
                });

                // Verify OTP
                $("#verifyOtp").on("click", function() {
                    let otpCode = $("#otp_code").val();

                    if (!otpCode || otpCode.length !== 6) {
                        $("#otpErrorMessage").html("Invalid OTP. Please enter the correct 6-digit code.");
                        return;
                    }

                    $.ajax({
                        url: "{{ route('verify_withdraw_otp') }}",
                        type: "POST",
                        data: {
                            withdraw_id: withdrawId,
                            otp_code: otpCode
                        },
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            if (response.success) {
                                $("#otpVerificationModal").modal("hide");
                                showSuccessModal();
                            } else {
                                $("#otpErrorMessage").html(response.error);
                            }
                        },
                        error: function(xhr) {
                            $("#otpErrorMessage").html("Invalid OTP. Please try again.");
                        }
                    });
                });
            });

        </script>




	@endsection