@extends('layouts.customer_template')

	@section('title')
		Profit 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/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);
            }

            /* 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 class="container-sm content-section">
            <div class="mx-auto">
                <h1>Withdraw Profit</h1>
                <!--<p>Select Coin</p>-->

              <div class="deposit-container">

                <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->id}}">
{{--                              {{strtoupper($network->currency)}}--}}
                              <span >{{$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>

{{--                <p class="text-disabled">--}}
{{--                  CAUTION: Ensure the recipient address has been activated;--}}
{{--                </p>--}}
{{--                <p class="text-disabled">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">Profit 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 Profit Withdraw</p>
                        <p>$ {{round($availableBalance,2) ?? 0}}</p>
						<!--<div class="text-secondary" id="feeAmount">Network Fee 1.00 USDT</div>-->
					</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 Profit 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))
                                          <img src="{{ asset('customer/assets/coins/usdt.png') }}" alt="" />
                                      @endif

                                  </div>
                                  <div class="">
                                    <p class="pb-3">USDT</p>
                                  </div>
                                </div>
                                <span class="text-secondary"> Date {{ $withdraw->created_at ?? '' }}</span>
                              </span>
                              <span class="font-small" style="width: 280px">{{ round($withdraw->amount,2) ?? '' }}</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">Profit 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>


        $(document).ready(function () {

            $("#dropdownBtn2").on("click", function () {
                $("#dropdownMenu2").toggle();
            });
            // 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);
            });

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

        document.getElementById('amount').addEventListener('input', function () {

            //var currency    = $("#currency").val();
            var currency    = "USDT";
            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;
            }

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

            document.getElementById('feeAmount').textContent = `Network Fee ${fee} ${currency}`;
            //document.getElementById('remAmount').textContent = `${remaining.toFixed(2)} ${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();
                if (!selectedcurrency || selectedcurrency === "Select Coin") {
                    $("#responseMessage").html("<span style='color:white'>Please select a currency.</span>");
                    return;
                }
                */
                let selectednetwork = $("#network").val();
                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)+ "&withdraw_type=" + encodeURIComponent("Profit");

                $.ajax({
                    url: "{{ route('save_withdrawal_request') }}",
                    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