@extends('frontend.layout.dash')
@section('title', $title)
@section('content')

<div class="mkt-header">
    <div><h2 class="mkt-title">My Purchases</h2><p class="mkt-sub">Your purchased account credentials</p></div>
    <a href="{{ route('user.marketplace.index') }}" class="btn btn-outline-mkt"><i class="ti ti-arrow-left"></i> Marketplace</a>
</div>

@if($purchases->isEmpty())
    <div class="mkt-empty"><i class="ti ti-shopping-cart-off"></i><p>No purchases yet. <a href="{{ route('user.marketplace.index') }}" style="color:var(--primary-color)">Browse marketplace →</a></p></div>
@else
<div class="purchases-grid">
    @foreach($purchases as $item)
    <div class="purchase-card">
        <div class="purchase-card-head">
            <div class="purchase-card-info">
                <span class="purchase-badge {{ $item['type'] === 'admin' ? 'purchase-badge-admin' : 'purchase-badge-seller' }}">
                    <i class="ti ti-{{ $item['type'] === 'admin' ? 'shield-check' : 'user' }}"></i>
                    {{ $item['type'] === 'admin' ? 'Admin' : 'Seller' }}
                </span>
                <span class="purchase-category">{{ $item['category'] }}</span>
            </div>
            <span class="purchase-price">{{ $currency }}{{ number_format($item['price'], 2) }}</span>
        </div>
        <h3 class="purchase-title">{{ $item['title'] }}</h3>
        <div class="purchase-credentials">
            <div class="purchase-credentials-label"><i class="ti ti-key"></i> Account Credentials</div>
            <div class="purchase-credentials-box">
                <code id="cred-{{ $loop->index }}">{{ $item['credentials'] }}</code>
                <button type="button" class="purchase-copy-btn" onclick="copyCredential('cred-{{ $loop->index }}', this)" title="Copy">
                    <i class="ti ti-copy"></i>
                </button>
            </div>
        </div>
        <div class="purchase-footer">
            <span class="purchase-seller"><i class="ti ti-user"></i> {{ $item['seller'] }}</span>
            <span class="purchase-date">{{ \Carbon\Carbon::parse($item['date'])->format('M d, Y') }}</span>
        </div>
    </div>
    @endforeach
</div>
@endif

@endsection
@push('style')
<style>
.mkt-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:24px;}
.mkt-title{font-size:22px;font-weight:700;color:var(--text-primary);margin:0 0 4px;}
.mkt-sub{font-size:14px;color:var(--text-secondary);margin:0;}
.btn-outline-mkt{height:48px;padding:0 18px;border:1.5px solid var(--border-color);border-radius:12px;font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:8px;color:var(--text-primary);background:var(--bg-primary);transition:all .2s;text-decoration:none;}
.btn-outline-mkt:hover{border-color:var(--primary-color);color:var(--primary-color);}
.mkt-empty{text-align:center;padding:60px 20px;color:var(--text-secondary);}
.mkt-empty i{font-size:48px;display:block;margin-bottom:12px;opacity:.5;}
.mkt-empty p{font-size:15px;margin:0;}
.purchases-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px;}
.purchase-card{background:var(--bg-primary);border:var(--border);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:12px;}
.purchase-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.purchase-card-info{display:flex;align-items:center;gap:8px;}
.purchase-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;}
.purchase-badge-admin{background:#ede9fe;color:#6366f1;}
.purchase-badge-seller{background:#dcfce7;color:#16a34a;}
.purchase-category{font-size:12px;color:var(--text-secondary);font-weight:500;}
.purchase-price{font-size:15px;font-weight:800;color:var(--primary-color);}
.purchase-title{font-size:15px;font-weight:700;color:var(--text-primary);margin:0;}
.purchase-credentials{background:var(--bg-secondary);border-radius:10px;padding:14px;}
.purchase-credentials-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.purchase-credentials-box{display:flex;align-items:flex-start;gap:10px;}
.purchase-credentials-box code{flex:1;font-size:13px;color:var(--text-primary);word-break:break-all;line-height:1.6;font-family:ui-monospace,monospace;}
.purchase-copy-btn{flex-shrink:0;background:var(--primary-color);color:#fff;border:none;border-radius:8px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;transition:opacity .2s;}
.purchase-copy-btn:hover{opacity:.85;}
.purchase-footer{display:flex;align-items:center;justify-content:space-between;padding-top:10px;border-top:var(--border);}
.purchase-seller{font-size:12px;color:var(--text-secondary);display:flex;align-items:center;gap:4px;}
.purchase-date{font-size:12px;color:var(--text-secondary);}
</style>
@endpush
@push('script')
<script>
function copyCredential(id, btn) {
    const text = document.getElementById(id).textContent;
    navigator.clipboard.writeText(text).then(() => {
        btn.innerHTML = '<i class="ti ti-check"></i>';
        setTimeout(() => btn.innerHTML = '<i class="ti ti-copy"></i>', 2000);
    });
}
</script>
@endpush
