@extends('user.layout')

@section('content')
<style>
    .depositcard.shadow-sm.p-4 {
        max-width: 500px;
        height: auto;
        background: #fff;
        border-radius: 10px;
    }


    .wallet.card {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 80%;
        background: #000B58;
        border-radius: 10px;
        color: #fff;
    }

    .wallet.fw-regular {
        font-family: Poppins, sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 21px;
        letter-spacing: 0.5px;
        text-align: center;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
    }

    
.copy-btn {
  padding: 10px 15px;
  border: none;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
  .toggle-container {
    position: relative;
    width: 100%;
    height: 50px;
    background-color: #ffffff00;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}
    .toggle-switch {
    position: relative;
    width: 150px;
    height: 40px;
    border-radius: 20px;
    background-color: #000b58;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
}

    .toggle-slider {
        position: absolute;
        top: 3px;
        left: 3px;
        width: 70px;
        height: 34px;
        background-color: #007bff;
        border-radius: 17px;
        transition: all 0.3s ease-in-out;
    }

    .toggle-text-left,
    .toggle-text-right {
        font-size: 14px;
        color: #fff;
        z-index: 1;
    }
</style>



<div class="row d-flex justify-content-center mb-4">
        <div class="card shadow-sm p-3" style="max-width: 300px; text-align: center;">
            <div class="toggle-container">
                <div class="toggle-switch" id="toggleSwitch" onclick="toggleDepositSections()">
                    <span class="toggle-text-left ms-2">Auto</span>
                    <span class="toggle-text-right">Manual</span>
                    <div class="toggle-slider" id="toggleSlider"></div>
                </div>
            </div>
        </div>
    </div>


<div id="Autodeposit" style="display: block;">
<div class="row mb-3">
    <div class="col">
        <h4 class="page-top-heading">Deposit</h4>
    </div>
</div>

<p class="card-title mb-4">Auto Deposit</p>
<div class="row d-flex justify-content-center">
    <div class="depositcard  shadow-sm p-4">


        <!-- Wallet Information Section -->
        <div class="row d-flex justify-content-center">
            <div class="wallet card p-2">
                <div class="col-6 text-center">
                    <p class="wallet fw-regular">TRON Wallet</p>
                    <p class="text-white">50.00 TRX</p>
                </div>
                <div class="col-6 text-center">
                    <p class="wallet fw-regular">USDT Wallet</p>
                    <p class="text-white">50.23 USDT</p>
                </div>
            </div>
        </div>

        <!-- QR Code Section -->
        <div class="text-center my-4">
            <img src="{{ asset('/assets/images/pages/qr.svg') }}" alt="QR Code" style="max-width: 300px; height: auto;">
        </div>


        <div class="mb-4">
            <label for="inviteLink" class="form-label fw-bold">Wallet Address </label>
            <div class="input-group">
                <input
                    type="text"
                    id="inviteLink"
                    class="form-control"
                    value="0x32Be343B94f860124dC4fEe278FDCBD38C102D88"
                    readonly />
                <button class="copy-btn" onclick="copyToClipboard()"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M6 11C6 8.172 6 6.757 6.879 5.879C7.757 5 9.172 5 12 5H15C17.828 5 19.243 5 20.121 5.879C21 6.757 21 8.172 21 11V16C21 18.828 21 20.243 20.121 21.121C19.243 22 17.828 22 15 22H12C9.172 22 7.757 22 6.879 21.121C6 20.243 6 18.828 6 16V11Z" stroke="#494949" stroke-width="1.5" />
                        <path d="M6 19C5.20435 19 4.44129 18.6839 3.87868 18.1213C3.31607 17.5587 3 16.7956 3 16V10C3 6.229 3 4.343 4.172 3.172C5.344 2.001 7.229 2 11 2H15C15.7956 2 16.5587 2.31607 17.1213 2.87868C17.6839 3.44129 18 4.20435 18 5" stroke="#494949" stroke-width="1.5" />
                    </svg>
                </button>
            </div>
        </div>
    </div>
</div>

</div>


<div id="manualdeposit"  style="display: none;">
<div class="row mb-3 d-flex justify-content-between">
    <div class="col">
        <h3 class="page-top-heading">Deposit</h3>
    </div>
    <div class="col d-flex justify-content-end">
    <a href="{{ route('user.manual_deposit_history') }}" class="btn btn-primary p-3">History</a>
    </div>
</div>

<p class="card-title mb-4">Manual Deposit</p>
<div class="row d-flex justify-content-center">
<div class="depositcard shadow-sm p-4">
    <label for="selectNetwork" class="form-label fw-bold">Select Network</label>
    <select id="selectNetwork" class="form-select">
        <option value="TRC20">TRC 20</option>
    </select>

    <!-- QR Code Section -->
    <div class="text-center my-4">
            <img src="{{ asset('/assets/images/pages/qr.svg') }}" alt="QR Code" style="max-width: 300px; height: auto;">
        </div>



    <div class="my-4">
        <label for="walletAddress" class="form-label fw-bold">Wallet Address</label>
        <input
            type="text"
            id="walletAddress"
            class="form-control"
            value="0x32Be343B94f860124dC4fEe278FDCBD38C102D88"
            readonly />
    </div>

    <div class="mb-4">
        <label for="usdtToPay" class="form-label fw-bold">USDT to Pay</label>
        <input
            type="text"
            id="usdtToPay"
            class="form-control"
            value="50.23 USDT"
            readonly />
    </div>

    <button class="btn btn-primary w-100 p-3" data-bs-toggle="modal" data-bs-target="#confirmationModal">Submit</button>

</div>

</div>
</div>



<!-- Confirmation Modal -->
<div class="modal fade" id="confirmationModal" tabindex="-1" aria-labelledby="confirmationModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-body text-center p-5">
        <h4 class="mb-3 fw-bold">Are you sure</h4>
        <hr>
        <h6 class="mb-4 fw-regular mt-3">Are you sure you want to Deposit?</h6>
        <div class="d-flex justify-content-center gap-3 mt-4">
        <button type="button" class="btn btn-outline-primary py-3 w-50" data-bs-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary py-3 w-50">Yes, Proceed</button>
        </div>
      </div>
    </div>
  </div>
</div>



<script>
    function copyToClipboard() {
  const copyText = document.getElementById("inviteLink");
  copyText.select();
  copyText.setSelectionRange(0, 99999); // For mobile compatibility
  navigator.clipboard.writeText(copyText.value).then(() => {
    alert("Link copied to clipboard!");
  });
}

</script>


<script>
    let isAuto = true;

    function toggleDepositSections() {
        const autoDeposit = document.getElementById('Autodeposit');
        const manualDeposit = document.getElementById('manualdeposit');
        const toggleSlider = document.getElementById('toggleSlider');

        if (isAuto) {
            autoDeposit.style.display = 'none';
            manualDeposit.style.display = 'block';
            toggleSlider.style.left = '75px';
            isAuto = false;
        } else {
            autoDeposit.style.display = 'block';
            manualDeposit.style.display = 'none';
            toggleSlider.style.left = '3px';
            isAuto = true;
        }
    }
</script>
@endsection