@extends('User.layout')

@section('content')
    <style>


        .copy-btn {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            border: none;
            background: transparent;
            color: #222;
            cursor: pointer;
            padding: 0;
        }

        .upload-box {
            border: 2px solid #e3e6ef;
            border-radius: 10px;
            height: 95px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            cursor: pointer;
            background: #fff;
            transition: 0.2s;
        }

        .upload-box:hover {
            background: #f8f9ff;
        }

        .upload-box i {
            font-size: 22px;
            margin-bottom: 5px;
            color: #000;
        }

        .upload-text {
            font-size: 12px;
            color: #777;
            margin: 0;
        }
    </style>
    <div class="row align-items-center justify-content-between mb-3">
        <div class="col-auto">
            <h5>Deposit</h5>
        </div>
        <div class="col-auto">
            <a href="{{ route('user.deposit_history') }}"><button class="btn btn-primary">Deposit History</button> </a>
        </div>
    </div>

            <div class="card p-5">

                <h6>Deposit</h6>

                <form action="#" enctype="multipart/form-data">
                    @csrf

                  <div class="row">
                      <div class="col-lg-6 mb-3">
                        <label class="form-label">Select Network</label>
                        <select class="form-select">
                            <option selected>Select</option>
                            <option value="TRC20">TRC20</option>
                            <option value="ERC20">ERC20</option>
                            <option value="BEP20">BEP20</option>
                        </select>
                    </div>

                    <div class="col-lg-6 mb-3">
                        <label class="form-label">Wallet Address</label>

                        <div class="position-relative">
                            <input type="text" readonly class="form-control wallet-input" id="walletAddress"
                                value="0x859AA4525c19829034CbbFD916F46c068F116310">

                            <button type="button" class="copy-btn" onclick="copyWallet()">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none"
                                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <rect x="9" y="9" width="13" height="13" rx="2"></rect>
                                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                                </svg>
                            </button>
                        </div>
                    </div>

                    <div class="col-lg-6 mb-3">
                        <label class="form-label">Select Year for Deposit</label>
                        <select class="form-select">
                            <option selected>Select</option>
                            <option value="1">1 Year</option>
                            <option value="3">3 Year</option>
                        </select>
                    </div>

                    <div class="col-lg-6 mb-3">
                        <label class="form-label">Per Year Deposit USDT</label>
                        <input type="text" class="form-control" placeholder="Deposit USDT">
                    </div>

                    <div class="col-lg-4 mb-3">
                        <label class="form-label">Total Deposit USDT</label>
                        <input type="text" class="form-control wallet-input" placeholder="Total Deposit USDT" readonly>
                    </div>

                    <div class="col-lg-4 mb-3">
                        <label class="form-label">Enter Transaction Hash</label>
                        <input type="text" class="form-control" placeholder="Enter Transaction Hash">
                    </div>

                    <div class="col-lg-4 mb-3">
                        <label class="form-label">Upload Your Advance Receipt</label>

                        <label class="upload-box w-100">
                            <input type="file" class="d-none" name="receipt">
                            <i class="ti tabler-upload"></i>
                            <p class="upload-text">Upload</p>
                        </label>
                    </div>

                    <div class="d-flex justify-content-center gap-3 mt-4">
                        <button type="reset" class="btn btn-label-secondary">Discard</button>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                  </div>

                </form>
            </div>

    <script>
        function copyWallet() {
            let copyText = document.getElementById("walletAddress");
            copyText.select();
            copyText.setSelectionRange(0, 99999);
            navigator.clipboard.writeText(copyText.value);
        }
    </script>
@endsection