
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
    
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Hello, world!</title>
</head>
<body>

<div class="container">
    <div class="col-lg-6 col-sm-6 col-md-6 mx-auto my-auto" style="">
        <div class="card">
            <div class="card-header" style="padding:20px;">
               
                <div class="div_header" style="display:flex;align-items:center;justify-content:space-between;color:#96abb5">
                    <div class="div_top_left" style="">
                        <p class="first">Withdraw USDT</p>
                        
  
                        
                        {{-- <p class="second">Withdraw USDT</p> --}}
                    </div>
                    
                  
                    <a href="{{route('list_of_with')}}">
                        <div class="div_top_right" id="openModalIcon" style="cursor: pointer;">
                  
                                <div>
                                    <i class="fas fa-file"></i>
                                </div>
                                <div class="right_div">
                                    <p>History</p>
                                </div>
                     
                            
                            
                            
                        </div>
                    </a>
                   
                </div>

              <form action="{{route('withdraw.request')}}" method="POST">
                @csrf
                @if (session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif
            @if (session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif
           
         
                <div class="div_after_header  py-0" style="">
                    <div class="mb-3">
                        <label for="" class="form-label" style="  color:#96abb5;">Select Way</label>
                        <select name="" id="" class="form-control" style="background-color:#16202d;color:white;">
                            
                            <option value="">USDT TRC 20</option>
                         </select>
                    </div>
                    <div class="mb-3">
                        <label for="" class="form-label" style="  color:#96abb5;">Select Withdraw</label>
                        <select name="wallettypes" id="walletType" class="form-control" style="background-color:#16202d;color:white;">
                            <option value="select_option">-------------Select Option-------------</option>
                            <option value="deposit">Deposit Wallet</option>
                            <option value="balance">Balance Wallet</option>
                         </select>
                    </div>
                    <div class="mb-3">
                        <label for="" class="form-label" style="  color:#96abb5;">Enter Address</label>
                        <input type="text" name="email" class="form-control" placeholder="Enter Address" style="background-color:#16202d;color:white;">
                    </div>
                    <div class="mb-0">
                        <label for="" class="form-label" style="  color:#96abb5;">Enter Amount</label>
                        <input type="number" id="amountInput" name="ammount" class="form-control" placeholder="0" style="background-color: #16202d; color: white;">
                       
                    </div>
                    <div class="div_bottom mb-2" style="display: flex;flex-direction:row;justify-content:space-between;align-items:center;">
                        <p style="color:#6d7e8a" id="balance">Available <span style=" color:#96abb5;">0.00</span> </p>
                        <p style="color:#6d7e8a">Minimum Ammount <span style=" color:#96abb5;">30 </span> </p>

                    </div>
                    <div class="div_bottom mb-2" style="display: flex;flex-direction:row;justify-content:space-between;align-items:center;">
                        <p style="color:#6d7e8a">Withdrawal time <span style=" color:#96abb5;"> 24 hour 72 hour </span></p>
                        {{-- <p style="color:#6d7e8a"> </p> --}}

                    </div>
                  

                 
                    <hr style="color:white;">
                </div>
                <div class="mb-0 first_mb text-white" style="display: flex;flex-direction:row;justify-content:space-between;align-items:center;">
                    
                    <div class="div_last" style="display: flex;flex-direction:column;line-height:7px;">
                        <p style="color:#6d7e8a;letter-spacing:0.012px;">Receive Amount</p>
                        <p class="us" style="color:#96abb5;font-weight:600;letter-spacing:1px;">0.00 USDT</p>
                        <p style="color:#6d7e8a;letter-spacing:0.5px;">processing fee: 5%</p>
                    </div>
                    <div class="div" style="width:50%;">
                        <button class="btn" style="" data-bs-toggle="modal" data-bs-target="#myModal">Confirm</button>
                    </div>
                    
                   
                 
                   
                 </div>
                 
                
              
                
            </div>
        </form>
        </div>
    </div>

   
</div>
<script>
    // Use jQuery to wait for document ready
    $(document).ready(function() {
        // Attach an event handler to the input field
        $("#amountInput").on("input", function() {
            // Get the entered amount
            var enteredAmount = parseFloat($(this).val());

            // Check if the entered value is a valid number
            if (!isNaN(enteredAmount)) {
                // Deduct 5% from the entered amount
                var deductedAmount = enteredAmount * 0.05;

                // Calculate the remaining amount
                var remainingAmount = enteredAmount - deductedAmount;

                // Display the remaining amount in the paragraph
                $(".us").text(remainingAmount.toFixed(2) + " USDT");
            } else {
                // If the entered value is not a valid number, display an error message
                // alert("Please enter a valid number.");
            }
        });
    });
</script>

<script>
    $(document).ready(function () {
        // Set up the CSRF token for all future AJAX requests
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        // AJAX request when selecting wallet type
        $('#walletType').on('change', function () {
            var selectedWalletType = $(this).val();

            $.ajax({
                type: 'POST',
                url: '{{ route("getWalletBalance") }}',
                data: {
                    'wallet_type': selectedWalletType
                },
                success: function (data) {
                    // Check if the response has a 'balance' property
                    if ('balance' in data) {
                        // Update the content of the p element with the balance
                        $('#balance').html('Available <span style="color: #96abb5;">' + data.balance + '</span> USDT');
                    } else {
                        // Display the default message if 'balance' is not present in the response
                        alert('Unexpected response format. Please try again.');
                    }
                },
                error: function (error) {
                    console.log(error);

                    // Display an alert for the error
                    alert('Error retrieving balance. Please try again.');
                }
            });
        });
    });
</script>
@include('user.script')

<!-- Bootstrap JS and Popper.js scripts -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>

<style>
    .div .btn{
        width:100%; background:#fbc02d; font-size:17px; font-weight:500;
    }
    .div_last p{
        font-size:14px;
    }
    .div_bottom p{
        font-size: 14px;
    }
    .div_bottom span{
        font-size:18px;
    }
    .div_last .us{
        font-size: 18px;
    }
    
    
      input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"] {
        -webkit-appearance: none;
        margin: 0;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }
    body {
        margin: 0;
        padding: 0;
        box-sizing:border-box;
        background: #181a20;
    }

    .container {
        position: relative;
        min-height: 100vh;
        display: flex;
        align-items: center;
        background: #181a20;
    }
  
   

    .div_header .div_top_right{
          display: flex;
          flex-direction: row;
          justify-content: center;
          gap:5px;
    }
    .div_header .div_top_right i{
        font-size:14px;
        text-align: center;
    }
    .div_header .div_top_right .right_div p{
        color:#96abb5;
       font-size: 14px;
       font-weight:400;
      letter-spacing: 1px;
     text-align: center;
     
    }
   
    a{
        text-decoration: none;
    }
.div_header .div_top_left{
    display: flex;
    flex-direction: column;
  line-height: 10px;
  padding-top:15px;
    
    
}

.div_header .div_top_left .first{
  color:white;
  font-size: 19px;
  font-weight:700;
  letter-spacing: 1px;
}
.div_header .div_top_left .second{
  color:#96abb5;
  font-size: 14px;
  font-weight:400;
  letter-spacing: 1px;
}

@media (max-width: 600px) {
    .div .btn{
        width:100%; background:#fbc02d; font-size:13px; font-weight:500;
    }
    .div_last .us{
        font-size: 14px;
      line-height: 0.05px;
    }
       .div_header .div_top_right{
         display: flex;
         flex-direction: row;
        
        
         gap:5px;
   }
       .div_header .div_top_right .right_div p{
       color:#96abb5;
      font-size: 12px;
      font-weight:400;
     letter-spacing: 1px;
   }
   
   .div_header .div_top_left .first{
 color:white;
 font-size: 12px;
 font-weight:700;
 letter-spacing: 1px;
}
.div_header .div_top_left .second{
  color:#96abb5;
  font-size: 10px;
  font-weight:400;
  letter-spacing: 1px;
}
.div_after_header select{
    width:100%;
    height:20%;
    font-size: 10px;
}
.div_after_header input{
    width:100%;
    height:20%;
    font-size: 10px;
}
.div_bottom span{
        font-size:12px;
    }
   }
    .col-lg-6 {
        position: absolute;
        top: 30%;
        left: 30%;
        transform: translate(-30%, -30%);
        width:100%;
        background: #181a20;
        height:51%;
    }

    .card {
        width:70%;
        margin: 0 auto;
        background:#16202d;
    }

    .div_after_header .div_af_img img {
        width:26%;
    }

    .div_header h4 {
        font-size:25px;
        font-weight:300;
    }

    p {
        font-size:18px;color:#96abb5;font-weight:400;
    }

    .before_button {
        background: #1f2e3d;
    }

    .before_button .bbb {
        display:flex;
        flex-direction:row;
        justify-content:space-between;
        background: #1f2e3d;
        height:30px;
    }

    @media (max-width: 768px) {
        .div_header h4 {
            font-size:16px;
            font-weight:300;
        }

        .div_after_header .div_of_p p {
            font-size: 14px;
        }

        .div_after_header .div_af_img img {
            width:36%;
            object-fit: cover;
        }
        .div_header .div_top_left .first{
            font-size:13px;
        }
        .div_header .div_top_left .second{
            font-size:10px;
        }
        .div_header .div_top_right i{
            font-size: 15px;
        }
        .div_header .div_top_right .right_div p{
                font-size:14px;
        }
        .div_after_header label{
            font-size: 12px;
        }
        .div_after_header .div_bottom p{
            font-size:10px;
        }
        .div_last p{
        font-size:10px;
    }
    }

    @media (max-width: 600px) {
        .div_header h4 {
            font-size:15px;
            font-weight:300;
        }
    }
    @media (max-width: 430px) {
        .div_header .div_top_left{
            
            
        }
        .div_header .div_top_left .first{
            font-size:10px;
        }
        .div_header .div_top_left .second{
            font-size:8px;
        }
        .div_header .div_top_right i{
            font-size: 12px;
        }
        .div_header .div_top_right .right_div p{
                font-size:10px;
        }
    }

    /* Fix for modal backdrop visibility */
    .modal {
        z-index: 1050;
    }
    .custom-modal.show .modal-backdrop {
        z-index: 1050; /* Adjust the value as needed */
        background-color: rgba(0, 0, 0, 0.5); /* Adjust the background color and transparency as needed */
    }
</style>


    
<script>
    // JavaScript to handle the click event and show the modal
    document.getElementById('openModalIcon').addEventListener('click', function () {
        var myModal = new bootstrap.Modal(document.getElementById('myModals'));
        myModal.show();
    });
</script>