<?php


$isConnected = $isConnected ?? !empty($marketplaceConfigured);
?>

<?php if (empty($skipMpBanner)): ?>

<div class="bg-white rounded-xl border border-gray-200 px-4 py-2.5 mb-4 flex items-center justify-between">
    <div class="flex items-center gap-3">
        <div id="mpDot" class="w-2 h-2 rounded-full <?= $isConnected ? 'bg-green-500' : 'bg-gray-300' ?>"></div>
        <span id="mpLabel" class="text-xs <?= $isConnected ? 'text-green-600' : 'text-gray-500' ?>"><?= $isConnected ? 'Connected' : 'Not connected' ?></span>
        <span id="mpBalanceBadge" class="<?= $isConnected ? '' : 'hidden' ?> inline-flex items-center gap-1 px-2 py-0.5 bg-green-50 border border-green-200 rounded-full text-xs font-semibold text-green-700">
            <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            <span id="mpBalanceAmount">...</span>
        </span>
        <button type="button" id="mpTopUpBtn" onclick="MP.openTopUpModal()" class="<?= $isConnected ? '' : 'hidden' ?> inline-flex items-center gap-1 px-2.5 py-1 text-[11px] font-semibold text-primary-700 bg-primary-50 hover:bg-primary-100 border border-primary-200 rounded-lg transition-colors">
            <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
            Top Up
        </button>
    </div>
    <div class="flex items-center gap-2">
        <button type="button" id="mpConnectBtn" onclick="MP.autoConnect()" class="<?= $isConnected ? 'hidden' : '' ?> inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-white bg-primary-600 hover:bg-primary-700 rounded-lg transition-colors">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m9.86-2.54a4.5 4.5 0 00-1.242-7.244l-4.5-4.5a4.5 4.5 0 00-6.364 6.364L4.343 8.28"/></svg>
            Connect
        </button>
        <button type="button" id="mpDisconnectBtn" onclick="MP.disconnect()" class="<?= $isConnected ? '' : 'hidden' ?> inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-red-600 bg-red-50 hover:bg-red-100 border border-red-200 rounded-lg transition-colors">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
            Disconnect
        </button>
    </div>
</div>
<?php endif; ?>


<div id="mpTopUpOverlay" class="hidden fixed inset-0 bg-black/40 z-[60] transition-opacity"></div>
<div id="mpTopUpModal" class="hidden fixed inset-0 z-[60] flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-lg overflow-hidden flex flex-col" style="max-height:min(92vh, 720px)" onclick="event.stopPropagation()">
        <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between shrink-0">
            <div>
                <h3 class="text-base font-bold text-gray-900" id="mpTopUpTitle">Top Up Credits</h3>
                <p class="text-xs text-gray-500 mt-0.5">Current balance: <strong id="mpTopUpCurrentBalance" class="text-green-600">0</strong></p>
            </div>
            <button type="button" onclick="MP.closeTopUpModal()" class="p-1.5 text-gray-400 hover:text-gray-600 rounded-lg hover:bg-gray-100 transition-colors">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>
        <div class="px-6 py-5 overflow-y-auto flex-1 min-h-0">
            
            <div id="mpTopUpStep1">
                <div id="mpTopUpPacks" class="grid grid-cols-2 gap-3">
                    <div class="col-span-2 text-center py-8 text-gray-400 text-sm">
                        <svg class="w-6 h-6 mx-auto mb-2 animate-spin text-gray-300" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                        Loading packs...
                    </div>
                </div>
            </div>

            
            <div id="mpTopUpStep2" class="hidden">
                <p class="text-sm text-gray-600 mb-4">Please fill in your billing information before proceeding to payment.</p>
                <form id="mpBillingForm" class="space-y-3">
                    
                    <div class="flex rounded-lg overflow-hidden border border-gray-300">
                        <button type="button" onclick="MP.setBillingType('individual')" data-btype="individual"
                            class="mp-billing-toggle flex-1 py-2 text-xs font-semibold text-center transition-colors bg-primary-600 text-white">
                            <i class="fa-solid fa-user mr-1"></i> Individual
                        </button>
                        <button type="button" onclick="MP.setBillingType('business')" data-btype="business"
                            class="mp-billing-toggle flex-1 py-2 text-xs font-semibold text-center transition-colors bg-gray-100 text-gray-600">
                            <i class="fa-solid fa-building mr-1"></i> Business
                        </button>
                    </div>
                    <input type="hidden" name="billing_type" value="individual">

                    
                    <div id="mpBusinessFields" class="hidden space-y-3">
                        <label class="block">
                            <span class="text-xs font-medium text-gray-700">Company Name <span class="text-red-500">*</span></span>
                            <input type="text" name="company" placeholder="Acme Corp." class="mt-1 w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
                        </label>
                        <label class="block">
                            <span class="text-xs font-medium text-gray-700">VAT Number <span class="text-gray-400 font-normal">(optional)</span></span>
                            <input type="text" name="vat_number" placeholder="EU123456789" class="mt-1 w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
                        </label>
                    </div>

                    
                    <div class="flex gap-3">
                        <label class="flex-1">
                            <span class="text-xs font-medium text-gray-700">First Name <span class="text-red-500">*</span></span>
                            <input type="text" name="first_name" class="mt-1 w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500" required>
                        </label>
                        <label class="flex-1">
                            <span class="text-xs font-medium text-gray-700">Last Name <span class="text-red-500">*</span></span>
                            <input type="text" name="last_name" class="mt-1 w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500" required>
                        </label>
                    </div>

                    
                    <label class="block">
                        <span class="text-xs font-medium text-gray-700">Email <span class="text-red-500">*</span></span>
                        <input type="email" name="email" class="mt-1 w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500" required>
                    </label>

                    
                    <label class="block">
                        <span class="text-xs font-medium text-gray-700">Country <span class="text-red-500">*</span></span>
                        <select name="country" id="mpBillingCountry" onchange="MP.toggleStateField()" class="mt-1 w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-white" required>
                            <option value="">Select country...</option>
                            <option value="US">United States</option>
                            <option value="GB">United Kingdom</option>
                            <option value="CA">Canada</option>
                            <option value="FR">France</option>
                            <option value="DE">Germany</option>
                            <option value="ES">Spain</option>
                            <option value="IT">Italy</option>
                            <option value="NL">Netherlands</option>
                            <option value="BE">Belgium</option>
                            <option value="CH">Switzerland</option>
                            <option value="AT">Austria</option>
                            <option value="PT">Portugal</option>
                            <option value="IE">Ireland</option>
                            <option value="SE">Sweden</option>
                            <option value="NO">Norway</option>
                            <option value="DK">Denmark</option>
                            <option value="FI">Finland</option>
                            <option value="PL">Poland</option>
                            <option value="CZ">Czech Republic</option>
                            <option value="RO">Romania</option>
                            <option value="AU">Australia</option>
                            <option value="NZ">New Zealand</option>
                            <option value="JP">Japan</option>
                            <option value="SG">Singapore</option>
                            <option value="HK">Hong Kong</option>
                            <option value="BR">Brazil</option>
                            <option value="MX">Mexico</option>
                            <option value="IN">India</option>
                            <option value="ZA">South Africa</option>
                        </select>
                    </label>

                    
                    <label class="block">
                        <span class="text-xs font-medium text-gray-700">Address <span class="text-red-500">*</span></span>
                        <input type="text" name="address_line1" placeholder="Street address" class="mt-1 w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500" required>
                    </label>
                    <label class="block">
                        <input type="text" name="address_line2" placeholder="Apartment, suite, unit, etc. (optional)" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
                    </label>

                    
                    <div class="flex gap-3">
                        <label class="flex-1">
                            <span class="text-xs font-medium text-gray-700">City <span class="text-red-500">*</span></span>
                            <input type="text" name="city" class="mt-1 w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500" required>
                        </label>
                        <label class="w-28 hidden" id="mpStateGroup">
                            <span class="text-xs font-medium text-gray-700">State</span>
                            <input type="text" name="state" class="mt-1 w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
                        </label>
                        <label class="w-28">
                            <span class="text-xs font-medium text-gray-700">Postal Code <span class="text-red-500">*</span></span>
                            <input type="text" name="postal_code" class="mt-1 w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500" required>
                        </label>
                    </div>

                    <button type="submit" class="w-full mt-2 py-2.5 bg-primary-600 text-white text-sm font-semibold rounded-lg hover:bg-primary-700 transition-colors">
                        Continue to Payment
                    </button>
                </form>
            </div>

            
            <div id="mpTopUpStep3" class="hidden">
                <div id="mpPayError" class="hidden mb-3 flex items-start gap-2 px-3 py-2.5 bg-red-50 border border-red-200 rounded-lg text-xs text-red-700">
                    <svg class="w-4 h-4 shrink-0 mt-px" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg>
                    <span id="mpPayErrorMsg" class="flex-1"></span>
                </div>
                <div class="flex items-start justify-between gap-3 mb-3">
                    <div class="min-w-0">
                        <p class="text-sm font-semibold text-gray-900">Choose how to pay</p>
                        <p class="text-[11px] text-gray-500 mt-0.5" id="mpPaySummary">&nbsp;</p>
                    </div>
                    <button type="button" id="mpStripeSwitch" onclick="MP.startStripe()" class="hidden shrink-0 text-[11px] font-semibold text-primary-700 hover:text-primary-800 underline">
                        Pay by card instead
                    </button>
                </div>
                <div class="relative mb-2">
                    <svg class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/></svg>
                    <input type="text" id="mpCoinSearch" autocomplete="off" placeholder="Search a coin (BTC, USDT, Monero…)" oninput="MP.filterCoins(this.value)"
                           class="w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
                </div>
                <div id="mpCoinGrid" class="grid grid-cols-3 gap-2 max-h-[276px] overflow-y-auto pr-0.5"></div>
                <div id="mpCoinEmpty" class="hidden text-center py-8 text-sm text-gray-400">No coin matches that search.</div>
                <div id="mpCoinConfirm" class="hidden mt-3 flex items-center justify-between gap-3 px-3 py-2.5 bg-primary-50 border border-primary-200 rounded-lg">
                    <div class="min-w-0">
                        <p class="text-[11px] text-gray-600">You will send</p>
                        <p class="text-sm font-bold text-gray-900 truncate" id="mpCoinConfirmAmount">Calculating…</p>
                        <p class="text-[10px] text-gray-500" id="mpCoinConfirmTotals">&nbsp;</p>
                    </div>
                    <button type="button" id="mpCoinConfirmBtn" onclick="MP.confirmCoin()" disabled class="shrink-0 px-4 py-2 bg-primary-600 hover:bg-primary-700 disabled:opacity-50 disabled:cursor-not-allowed text-white text-xs font-semibold rounded-lg transition-colors">Continue</button>
                </div>
            </div>

            <div id="mpTopUpStep4" class="hidden">
                <div id="mpPayError2" class="hidden mb-3 flex items-start gap-2 px-3 py-2.5 bg-red-50 border border-red-200 rounded-lg text-xs text-red-700">
                    <svg class="w-4 h-4 shrink-0 mt-px" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg>
                    <span id="mpPayError2Msg" class="flex-1"></span>
                </div>

                <div class="flex items-center gap-2.5 mb-3">
                    <img id="mpPayCoinIcon" src="" alt="" class="w-7 h-7 rounded-full bg-gray-100" onerror="this.style.visibility='hidden'">
                    <div class="min-w-0">
                        <p class="text-sm font-bold text-gray-900 leading-tight"><span id="mpPayCoinName">—</span> <span id="mpPayCoinBadge" class="ml-0.5 px-1.5 py-0.5 bg-gray-100 text-gray-600 rounded text-[10px] font-semibold align-middle"></span></p>
                        <p class="text-[11px] text-gray-500" id="mpPayNetwork">&nbsp;</p>
                    </div>
                    <span id="mpPayCredits" class="ml-auto shrink-0 px-2 py-1 bg-green-50 border border-green-200 rounded-lg text-[11px] font-bold text-green-700"></span>
                </div>

                <div class="flex gap-4">
                    <div class="shrink-0">
                        <div class="w-[148px] h-[148px] rounded-xl border border-gray-200 bg-white p-2 flex items-center justify-center">
                            <img id="mpPayQr" src="" alt="Payment QR code" class="w-full h-full object-contain">
                            <span id="mpPayQrFallback" class="hidden text-[10px] text-gray-400 text-center px-2">QR unavailable — copy the address below.</span>
                        </div>
                    </div>

                    <div class="flex-1 min-w-0 space-y-2.5">
                        <div>
                            <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wide mb-1">Send exactly</label>
                            <div class="flex items-stretch gap-1.5">
                                <div class="flex-1 min-w-0 px-2.5 py-2 bg-gray-50 border border-gray-200 rounded-lg font-mono text-sm font-bold text-gray-900 truncate" id="mpPayAmount">—</div>
                                <button type="button" onclick="MP.copyField('mpPayAmount', this)" class="shrink-0 px-2.5 rounded-lg border border-gray-300 text-gray-500 hover:text-primary-700 hover:border-primary-400 transition-colors" title="Copy amount">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75"/></svg>
                                </button>
                            </div>
                        </div>

                        <div>
                            <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wide mb-1">To this address</label>
                            <div class="flex items-stretch gap-1.5">
                                <div class="flex-1 min-w-0 px-2.5 py-2 bg-gray-50 border border-gray-200 rounded-lg font-mono text-[11px] leading-snug text-gray-900 break-all" id="mpPayAddress">—</div>
                                <button type="button" onclick="MP.copyField('mpPayAddress', this)" class="shrink-0 px-2.5 rounded-lg border border-gray-300 text-gray-500 hover:text-primary-700 hover:border-primary-400 transition-colors" title="Copy address">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75"/></svg>
                                </button>
                            </div>
                        </div>

                        <div id="mpPayMemoWrap" class="hidden">
                            <label class="block text-[10px] font-bold text-amber-700 uppercase tracking-wide mb-1">Memo / Tag — required</label>
                            <div class="flex items-stretch gap-1.5">
                                <div class="flex-1 min-w-0 px-2.5 py-2 bg-amber-50 border border-amber-300 rounded-lg font-mono text-[11px] text-amber-900 break-all" id="mpPayMemo">—</div>
                                <button type="button" onclick="MP.copyField('mpPayMemo', this)" class="shrink-0 px-2.5 rounded-lg border border-amber-300 text-amber-600 hover:border-amber-500 transition-colors" title="Copy memo">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75"/></svg>
                                </button>
                            </div>
                            <p class="mt-1 text-[10px] text-amber-700">Send the memo with the transfer or the payment cannot be matched to your account.</p>
                        </div>
                    </div>
                </div>

                <div class="mt-3 flex items-center justify-between px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg">
                    <span class="text-[11px] text-gray-500" id="mpPayTotals">&nbsp;</span>
                    <span class="text-[11px] text-gray-400" id="mpPayOpened">&nbsp;</span>
                </div>

                <div id="mpPayStatus" class="mt-3 flex items-center gap-2.5 px-3 py-2.5 rounded-lg border text-xs font-medium bg-blue-50 border-blue-200 text-blue-800">
                    <span id="mpPayStatusDot" class="relative flex h-2.5 w-2.5 shrink-0">
                        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
                        <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-blue-500"></span>
                    </span>
                    <span id="mpPayStatusText" class="flex-1">Waiting for your transfer…</span>
                    <button type="button" id="mpPayCancel" onclick="MP.cancelCryptoPayment()" class="shrink-0 text-[11px] text-gray-500 hover:text-red-600 underline">Cancel</button>
                </div>
                <p class="mt-2 text-[10px] text-gray-400 leading-relaxed">
                    You can close this window — the credits are added automatically once the network confirms your transfer.
                </p>
            </div>

            <div id="mpTopUpStep5" class="hidden">
                <div id="mpStripeCheckout" class="min-h-[300px]"></div>
            </div>

            <div id="mpTopUpStep6" class="hidden text-center py-6">
                <div class="w-16 h-16 mx-auto mb-4 bg-green-100 rounded-full flex items-center justify-center">
                    <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                </div>
                <h4 class="text-lg font-bold text-gray-900 mb-1">Payment received</h4>
                <p class="text-sm text-gray-600" id="mpGrantedLine"></p>
                <p class="text-sm text-gray-600 mt-0.5">Your new balance: <strong id="mpNewBalance" class="text-green-600">0</strong></p>
            </div>
        </div>
        <div id="mpTopUpFooter" class="px-6 py-3 bg-gray-50 border-t border-gray-100 flex items-center justify-between">
            <span class="text-[11px] text-gray-400">
                <svg class="w-3 h-3 inline -mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
                <span id="mpFooterNote">Payments are processed securely</span>
            </span>
            <button type="button" id="mpTopUpFooterBtn" onclick="MP.closeTopUpModal()" class="text-xs text-gray-500 hover:text-gray-700">Cancel</button>
        </div>
    </div>
</div>


<div id="mpPurchaseOverlay" class="hidden fixed inset-0 bg-black/40 z-[60] transition-opacity"></div>
<div id="mpPurchaseModal" class="hidden fixed inset-0 z-[60] flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden" onclick="event.stopPropagation()">
        <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
            <div>
                <h3 id="mpPurchaseName" class="text-base font-bold text-gray-900">Purchase Item</h3>
                <p class="text-xs text-gray-500 mt-0.5">Your balance: <strong id="mpPurchaseBalance" class="text-green-600">0</strong></p>
            </div>
            <button type="button" onclick="MP.closePurchaseModal()" class="p-1.5 text-gray-400 hover:text-gray-600 rounded-lg hover:bg-gray-100 transition-colors">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>

        
        <div id="mpPurchaseLoading" class="px-6 py-8 text-center text-gray-400 text-sm">
            <svg class="w-6 h-6 mx-auto mb-2 animate-spin text-gray-300" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
            Loading...
        </div>

        
        <div id="mpPurchaseContent" class="hidden px-6 py-5">
            <div id="mpTierCards" class="space-y-3 mb-4"></div>

            <div id="mpInsufficientCredits" class="hidden mb-4 p-3 bg-amber-50 border border-amber-200 rounded-lg">
                <p class="text-sm text-amber-800 font-medium">Insufficient Credits</p>
                <p class="text-xs text-amber-600 mt-1">You need more Credits for this purchase.</p>
                <button type="button" onclick="MP.topUpThenRetry()" class="mt-2 text-xs font-semibold text-primary-700 hover:text-primary-800 underline">
                    Top Up Credits
                </button>
            </div>

            <button type="button" id="mpPurchaseBtn" onclick="MP.confirmPurchase()"
                    class="w-full py-2.5 bg-primary-600 text-white text-sm font-semibold rounded-lg hover:bg-primary-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                <span id="mpPurchaseBtnText">Purchase & Install</span>
            </button>
        </div>

        
        <div id="mpPurchaseInstalling" class="hidden px-6 py-8 text-center">
            <svg class="w-8 h-8 mx-auto mb-3 animate-spin text-primary-500" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
            <p class="text-sm font-medium text-gray-700">Purchasing & Installing...</p>
            <p class="text-xs text-gray-400 mt-1">This may take a moment</p>
        </div>

        
        <div id="mpPurchaseSuccess" class="hidden px-6 py-8 text-center">
            <div class="w-16 h-16 mx-auto mb-4 bg-green-100 rounded-full flex items-center justify-center">
                <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
            </div>
            <h4 class="text-lg font-bold text-gray-900 mb-1">Installed!</h4>
            <p id="mpPurchaseSuccessMsg" class="text-sm text-gray-600"></p>
            <button id="mpPurchaseSuccessBtn" type="button" onclick="window.location.reload()" class="mt-4 px-6 py-2 bg-primary-600 text-white text-sm font-semibold rounded-lg hover:bg-primary-700">
                Reload Page
            </button>
        </div>

        
        <div id="mpPurchaseError" class="hidden px-6 py-6 text-center">
            <div class="w-12 h-12 mx-auto mb-3 bg-red-100 rounded-full flex items-center justify-center">
                <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
            </div>
            <p id="mpPurchaseErrorMsg" class="text-sm text-red-700 font-medium"></p>
            <button type="button" onclick="MP.closePurchaseModal()" class="mt-3 text-xs text-gray-500 hover:text-gray-700">Close</button>
        </div>
    </div>
</div>


<?php $__mpBoot = ['csrf' => Router::csrfToken(), 'creditRate' => (float) ($creditRate ?? 0.01), 'connected' => (bool) $isConnected,]; ?>
<script type="application/json" id="tp-mp-boot"><?= json_encode($__mpBoot, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) ?></script>
<script src="<?= AdminAssets::url('marketplace-modal.js') ?>" defer></script>
