<div>
    <h2 class="h2">Staking Calculator</h2>

    <div class="list" style="margin-top: 14px;">
        <div>
            <div class="muted" style="font-size:12px; margin-bottom:6px;">Select Asset</div>
            <select class="select" style="width:100%;" wire:model="assetId">
                @foreach($assets as $a)
                    <option value="{{ $a->id }}">{{ $a->symbol }} - {{ $a->name }}</option>
                @endforeach
            </select>
        </div>

        <div>
            <div class="muted" style="font-size:12px; margin-bottom:6px;">Amount to Stake</div>
            <input
                class="select"
                style="width:100%;"
                type="number"
                min="0"
                step="0.00000001"
                wire:model.debounce.500ms="stakeAmountCoin"
            >
        </div>

        <div>
            <div class="muted" style="font-size:12px; margin-bottom:6px;">Duration</div>
            <div style="display:flex; align-items:center; justify-content:space-between; gap:12px;">
                <input
                    type="range"
                    min="7"
                    max="365"
                    step="1"
                    wire:model="durationDays"
                    style="width:100%;"
                >
                <div style="min-width: 160px; text-align:right;">
                    <div style="font-weight:900; color: var(--text);">{{ $durationDays }} days</div>
                    <div class="muted" style="font-size:12px; margin-top:2px;">{{ number_format($durationDays/365, 4) }} years</div>
                </div>
            </div>
        </div>

        <div class="kpi-row" style="margin-top: 8px;">
            <div class="kpi" style="margin:0; flex: 1 1 180px;">
                <div class="value" style="font-size:18px;">
                    @if($estimatedReturnsUsd === null)
                        --
                    @else
                        ${{ number_format($estimatedReturnsUsd, 2) }}
                    @endif
                </div>
                <div class="label">Estimated Returns (simple interest)</div>
            </div>
        </div>

        <div style="margin-top: 12px;">
            @auth
                <button type="button" class="btn btn-primary" wire:click="startStakingNow" style="width:100%;">
                    Start Staking Now
                </button>
            @else
                <a class="btn btn-primary" href="{{ route('login') }}" style="width:100%; display:inline-flex; align-items:center; justify-content:center;">
                    Sign in to start Earning
                </a>
            @endauth
        </div>
    </div>

    {{-- Modal --}}
    @if($modalOpen)
        <div style="position:fixed; inset:0; background: rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:50; padding: 16px;">
            <div class="card" style="width: min(720px, 100%);">
                <div style="display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap;">
                    <div>
                        <h2 class="h2" style="margin:0;">Staking Payment</h2>
                        <div class="muted" style="font-size:13px; margin-top:6px; line-height:1.7;">
                            Send the staking amount to the wallet address below, then upload proof of payment.
                        </div>
                    </div>
                    <button type="button" class="btn btn-outline" wire:click="$set('modalOpen', false)" style="padding:8px 12px;">
                        Close
                    </button>
                </div>

                <div class="card" style="margin-top: 14px; background: rgba(255,255,255,.03);">
                    <div style="font-weight:900; font-size:13px;">Wallet Address</div>
                    <div style="margin-top:8px; display:flex; gap:10px; flex-wrap:wrap; align-items:center;">
                        <input class="select" style="flex:1; min-width: 260px;" type="text" readonly value="{{ $walletAddress }}">
                        <button
                            type="button"
                            class="btn btn-outline"
                            onclick="navigator.clipboard.writeText(document.querySelector('input[readonly]').value)"
                            style="padding:8px 12px;"
                        >
                            Copy
                        </button>
                    </div>

                    <div class="muted" style="font-size:13px; margin-top: 10px; line-height:1.7;">
                        <div><strong style="color:var(--text);">Amount to pay:</strong> {{ $stakeAmountCoin }} (coin)</div>
                        <div><strong style="color:var(--text);">Network:</strong> {{ $network }}</div>
                        <div><strong style="color:var(--text);">Provider:</strong> {{ $walletProviderName }}</div>
                    </div>
                </div>

                <div style="margin-top: 14px;">
                    <div style="font-weight:900; font-size:13px; margin-bottom:8px;">Upload Payment Proof</div>
                    <input
                        type="file"
                        class="select"
                        style="width:100%;"
                        accept="image/*,application/pdf"
                        wire:model="paymentProof"
                    >
                    @error('paymentProof')
                        <div style="margin-top:6px; color:#f43; font-size:13px;">{{ $message }}</div>
                    @enderror

                    <button type="button" class="btn btn-primary" wire:click="submitStaking" style="width:100%; margin-top:12px;">
                        Submit
                    </button>

                    @if(session()->has('success'))
                        <div class="muted" style="margin-top:10px; font-size:13px;">
                            {{ session('success') }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    @endif
</div>
