@extends('User.layout')

@section('navlink')
    <a href="{{ route('user.dashboard') }}" class="link-secondary text-decoration-none">Home</a>
    / <span>Offline Deposit</span>
@endsection

@section('content')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
<style>
    .deposit-page {
        --gold: #c99a3b;
        --gold-hi: #e4be63;
        --card: #1c1710;
        --muted: #a69b83;
        color: #f6f1e4;
    }

    .deposit-tabs {
        display: flex;
        justify-content: center;
        gap: 10px;
        width: fit-content;
        max-width: 100%;
        margin: 0 auto 25px;
        padding: 6px;
        border: 1px solid rgba(201, 154, 59, .25);
        border-radius: 13px;
        background: #17130d;
    }

    .deposit-tab {
        min-width: 145px;
        padding: 11px 22px;
        border: 1px solid transparent;
        border-radius: 9px;
        color: #aaa08d;
        background: transparent;
        text-decoration: none;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        transition: .25s;
    }

    .deposit-tab i {
        margin-right: 6px;
        font-size: 17px;
        vertical-align: -2px;
    }

    .deposit-tab.active {
        color: #17130d;
        background: linear-gradient(135deg, #e4be63, #c99a3b);
        border-color: var(--gold-hi);
    }

    .deposit-tab:not(.active):hover {
        color: var(--gold-hi);
        background: rgba(201, 154, 59, .08);
    }

    .payment-card {
        max-width: 450px;
        margin: 0 auto 30px;
        padding: 22px;
        border: 1px solid var(--gold);
        border-radius: 20px;
        background: linear-gradient(145deg, #262015, #17130d);
        box-shadow: 0 15px 35px rgba(0, 0, 0, .25);
    }

    .payment-title {
        display: flex;
        align-items: center;
        gap: 9px;
        padding-bottom: 13px;
        border-bottom: 1px solid rgba(201, 154, 59, .2);
        color: var(--gold-hi);
        font-size: 14px;
        font-weight: 700;
    }

    .payment-title i {
        font-size: 20px;
    }

    .wallet-address {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 13px;
        padding: 10px;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 9px;
        background: rgba(255, 255, 255, .04);
    }

    .wallet-address code {
        flex: 1;
        min-width: 0;
        color: #eee;
        font-family: inherit;
        font-size: 12px;
        overflow-wrap: anywhere;
    }

    .copy-btn {
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        border: 1px solid rgba(201, 154, 59, .4);
        border-radius: 7px;
        color: var(--gold-hi);
        background: rgba(201, 154, 59, .08);
    }

    .copy-btn:hover {
        color: #17130d;
        background: var(--gold-hi);
    }

    .network-label {
        margin: 13px 0 7px;
        color: var(--muted);
        font-size: 12px;
        text-align: center;
    }

    .network-badge {
        display: inline-block;
        padding: 6px 17px;
        border-radius: 30px;
        color: #17130d;
        background: linear-gradient(135deg, #e4be63, #c99a3b);
        font-size: 12px;
        font-weight: 800;
    }

    .qr-wrapper {
        display: grid;
        place-items: center;
        width: 108px;
        height: 108px;
        margin: 15px auto 0;
        padding: 7px;
        border-radius: 11px;
        background: #fff;
        color: #111;
    }

    .qr-wrapper i {
        font-size: 85px;
    }

    .qr-note {
        margin-top: 9px;
        color: var(--muted);
        font-size: 11px;
        text-align: center;
    }

    .deposit-form .form-label {
        margin-bottom: 7px;
        color: #dedede;
        font-size: 12px;
        font-weight: 600;
    }

    .deposit-form .form-control {
        min-height: 43px;
        border: 1px solid rgba(201, 154, 59, .65);
        border-radius: 7px;
        background: #121212;
        color: #f3f3f3;
        font-size: 13px;
        box-shadow: none;
    }

    .deposit-form .form-control:focus {
        border-color: var(--gold-hi);
        box-shadow: 0 0 0 3px rgba(201, 154, 59, .1);
    }

    .deposit-form .form-control::placeholder {
        color: #929292;
    }

    .currency-options {
        display: flex;
        justify-content: center;
        gap: 28px;
        margin-bottom: 25px;
    }

    .currency-options .form-check {
        display: flex;
        align-items: center;
        gap: 7px;
        margin: 0;
        padding: 0;
    }

    .currency-options .form-check-input {
        float: none;
        margin: 0;
        background-color: #171717;
        border-color: #777;
    }

    .currency-options .form-check-input:checked {
        background-color: var(--gold);
        border-color: var(--gold);
    }

    .currency-options .form-check-label {
        color: #ddd;
        font-size: 13px;
    }

    .upload-box {
        min-height: 78px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        padding: 10px;
        border: 1px dashed rgba(201, 154, 59, .7);
        border-radius: 9px;
        color: #aaa;
        background: rgba(255, 255, 255, .015);
        cursor: pointer;
        transition: .2s;
    }

    .upload-box:hover {
        border-color: var(--gold-hi);
        background: rgba(201, 154, 59, .06);
    }

    .upload-box i {
        color: var(--gold-hi);
        font-size: 22px;
    }

    .upload-box span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 11px;
    }

    .upload-input {
        display: none;
    }

    .submit-wrapper {
        display: flex;
        justify-content: center;
        margin-top: 23px;
    }

    .deposit-submit {
        min-width: 170px;
        padding: 12px 25px;
        border: 1px solid var(--gold-hi);
        border-radius: 9px;
        color: #17130d;
        background: linear-gradient(135deg, #e4be63, #c99a3b);
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 2px;
        transition: .25s;
    }

    .deposit-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(201, 154, 59, .22);
    }

    @media(max-width: 767px) {
        .deposit-tabs {
            width: 100%;
        }

        .deposit-tab {
            flex: 1;
            min-width: 0;
        }

        .payment-card {
            max-width: 100%;
        }
    }

    @media(max-width: 575px) {
        .deposit-form .row {
            row-gap: 14px;
        }

        .deposit-submit {
            width: 100%;
        }
    }
</style>

<div class="deposit-page">
    <div class="d-flex flex-wrap justify-content-between align-items-end gap-3 mb-4">
        <div>
            <h1 class="h3 mb-1">Wallet Deposit</h1>
        </div>
    </div>

    <!-- PAGE TABS -->
    <div class="deposit-tabs">
        <a href="{{ route('user.online_transfer')}}" class="deposit-tab">
            <i class="ti ti-world"></i> Online
        </a>
        <a href="{{ route('user.offline_transfer')}}" class="deposit-tab active">
            <i class="ti ti-building-bank"></i> Offline
        </a>
    </div>

   <div class="card p-4">
        <form class="deposit-form" method="POST" action="#" enctype="multipart/form-data">
            @csrf

            <input type="hidden" name="payment_type" value="online">

            <div class="text-center">
                <label class="d-block small mb-2">Deposit Type</label>
                <div class="currency-options">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="currency"
                            id="currencyUsdt" value="USDT" checked>
                        <label class="form-check-label" for="currencyUsdt">USDT</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="currency"
                            id="currencyInr" value="INR">
                        <label class="form-check-label" for="currencyInr">INR</label>
                    </div>
                </div>
            </div>

            <div class="payment-card">
                <div class="payment-title">
                    <i class="ti ti-wallet"></i>
                    <span id="walletTitle">USDT Wallet Address</span>
                </div>

                <div class="wallet-address">
                    <code id="walletAddress">0xA3D35da6268C08E0d244E372b39db57502Bd4</code>
                    <button type="button" class="copy-btn" onclick="copyWalletAddress()">
                        <i class="ti ti-copy"></i>
                    </button>
                </div>

                <div class="text-center">
                    <div class="network-label">Network</div>
                    <span class="network-badge" id="networkName">BEP20</span>
                </div>

                <div class="qr-wrapper">
                    <!-- Replace with your actual QR image -->
                    <i class="ti ti-qrcode"></i>
                </div>
                <div class="qr-note">Scan the QR code to make your payment</div>
            </div>

            <div class="row g-3">
                <div class="col-md-4">
                    <label for="amount" class="form-label" id="amountLabel">USDT Amount</label>
                    <input type="number" class="form-control" id="amount"
                        name="amount" placeholder="0.00" min="0" step="0.01" required>
                </div>

                <div class="col-md-4">
                    <label for="transactionId" class="form-label">Enter Transaction ID</label>
                    <input type="text" class="form-control" id="transactionId"
                        name="transaction_id" placeholder="Enter Transaction ID" required>
                </div>

                <div class="col-md-4">
                    <label for="receipt" class="form-label">Upload Your Advance Receipt</label>
                    <label class="upload-box" for="receipt">
                        <i class="ti ti-cloud-upload"></i>
                        <span id="fileName">Upload receipt</span>
                    </label>
                    <input type="file" class="upload-input" id="receipt" name="receipt"
                        accept="image/*,.pdf" required>
                </div>
            </div>

            <div class="submit-wrapper">
                <button type="submit" class="deposit-submit">
                    <i class="ti ti-send"></i> SUBMIT
                </button>
            </div>
        </form>
    </div>
</div>


<script>
    document.querySelectorAll('input[name="currency"]').forEach(input => {
        input.addEventListener('change', function() {
            const isUsdt = this.value === 'USDT';

            document.getElementById('walletTitle').textContent =
                isUsdt ? 'USDT Wallet Address' : 'INR Payment Details';

            document.getElementById('networkName').textContent =
                isUsdt ? 'BEP20' : 'INR';

            document.getElementById('amountLabel').textContent =
                this.value + ' Amount';

            document.getElementById('amount').placeholder =
                isUsdt ? '0.00 USDT' : '0.00 INR';
        });
    });

    function copyWalletAddress() {
        const address = document.getElementById('walletAddress').textContent.trim();

        if (navigator.clipboard && window.isSecureContext) {
            navigator.clipboard.writeText(address)
                .then(() => alert('Wallet address copied!'))
                .catch(() => fallbackCopy(address));
        } else {
            fallbackCopy(address);
        }
    }

    function fallbackCopy(text) {
        const input = document.createElement('textarea');
        input.value = text;
        input.style.position = 'fixed';
        input.style.opacity = '0';
        document.body.appendChild(input);
        input.select();

        try {
            document.execCommand('copy');
            alert('Wallet address copied!');
        } catch (error) {
            alert('Unable to copy. Please copy manually.');
        }

        input.remove();
    }

    document.getElementById('receipt').addEventListener('change', function() {
        document.getElementById('fileName').textContent =
            this.files.length ? this.files[0].name : 'Upload receipt';
    });
</script>
@endsection