{{--
    Topup Modal — single instance, opened by any [data-action="topup"]
    button on the listing page. Fields populated dynamically via JS
    from the trigger button's data-* attributes.

    Requires:
      $mainBalance : float — passed from PilotController@index

    Triggered from:
      partials/pilot/follow-card.blade.php → button data-action="topup"
--}}
<div class="pt-modal" id="topup-modal" hidden role="dialog" aria-modal="true" aria-labelledby="topup-title">
    <div class="pt-modal__overlay" data-modal-close></div>

    <div class="pt-modal__dialog" role="document">
        <button class="pt-modal__close" type="button" data-modal-close aria-label="Close">
            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                <path stroke-linecap="round" d="M6 6l12 12M18 6L6 18"/>
            </svg>
        </button>

        <header class="pt-modal__head">
            <div class="pt-modal__avatar" id="topup-avatar">--</div>
            <div class="pt-modal__head-text">
                <p class="pt-modal__eyebrow">Top up wallet</p>
                <h2 class="pt-modal__title" id="topup-title">--</h2>
            </div>
        </header>

        <div class="pt-modal__body">
            <div class="pt-modal__current">
                <span class="pt-modal__current-label">Current wallet</span>
                <span class="pt-modal__current-value" id="topup-current">$0.00</span>
            </div>

            <label class="pt-modal__field">
                <span class="pt-modal__field-label">Amount to add</span>
                <div class="pt-modal__field-wrap">
                    <span class="pt-modal__field-prefix">$</span>
                    <input type="number"
                           id="topup-amount"
                           inputmode="decimal"
                           step="0.01"
                           min="0.01"
                           placeholder="0.00"
                           autocomplete="off">
                </div>
            </label>

            <div class="pt-modal__chips">
                <button type="button" class="pt-modal__chip" data-topup-amount="20">$20</button>
                <button type="button" class="pt-modal__chip" data-topup-amount="50">$50</button>
                <button type="button" class="pt-modal__chip" data-topup-amount="100">$100</button>
                <button type="button" class="pt-modal__chip" data-topup-amount="500">$500</button>
                <button type="button" class="pt-modal__chip" data-topup-amount="max">Max</button>
            </div>

            <p class="pt-modal__avail">
                Available in main balance: <strong id="topup-avail">${{ number_format((float) $mainBalance, 2) }}</strong>
            </p>

            <p class="pt-modal__error" id="topup-error" hidden></p>
        </div>

        <footer class="pt-modal__foot">
            <button type="button" class="pt-modal__btn pt-modal__btn--ghost" data-modal-close>Cancel</button>
            <button type="button" class="pt-modal__btn pt-modal__btn--primary" id="topup-submit">
                <span class="pt-modal__btn-text">Top up wallet</span>
            </button>
        </footer>
    </div>
</div>