@extends('User.layout')

@section('navlink')
    <a href="{{ route('user.dashboard') }}" class="link-secondary text-decoration-none">Home</a>
    / <span>Online 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: 500px;
        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;
    }

    .bank-details {
        display: grid;
        gap: 10px;
        margin-top: 15px;
    }

    .bank-detail {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        padding: 11px 12px;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 9px;
        background: rgba(255,255,255,.035);
    }

    .bank-detail span {
        color: var(--muted);
        font-size: 12px;
    }

    .bank-detail strong {
        color: #eee;
        font-size: 12px;
        text-align: right;
        overflow-wrap: anywhere;
    }

    .offline-note {
        margin-top: 15px;
        padding: 11px 12px;
        border: 1px solid rgba(201,154,59,.2);
        border-radius: 9px;
        background: rgba(201,154,59,.06);
        color: #cbbd9f;
        font-size: 11px;
        line-height: 1.7;
    }

    .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;
    }

    .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 active">
            <i class="ti ti-world"></i> Online
        </a>
        <a href="{{ route('user.offline_transfer')}}" class="deposit-tab">
            <i class="ti ti-building-bank"></i> Offline
        </a>
    </div>

        <div class="payment-card">
            <div class="payment-title">
                <i class="ti ti-building-bank"></i>
                <span>Bank Transfer Details</span>
            </div>

            <div class="bank-details">
                <div class="bank-detail">
                    <span>Wallet Address</span>
                    <strong>0x3f41d03d70c9a85a0df6a01d0c1d1865d20e1242</strong>
                </div>

                <div class="bank-detail">
                    <span>Current Wallet Balance</span>
                    <strong>0.00</strong>
                </div>

                <div class="bank-detail">
                    <span>Current BNB Balance</span>
                    <strong>00</strong>
                </div>

                <div class="col-md-12">
                <input type="text" class="form-control" id="transactionId"
                       name="transaction_id" placeholder="Enter Amount to transfer" required>
            </div>
             <div class="submit-wrapper">
            <button type="submit" class="deposit-submit">
                <i class="ti ti-send"></i> SUBMIT
            </button>
        </div>
            </div>

            <div class="offline-note">
                <i class="ti ti-info-circle me-1"></i>
                Transfer the deposit amount to the bank account above.
                Enter the transaction ID and upload your payment receipt.
            </div>
        </div>
</div>


@endsection