<?php
//Developer: core tech web designTechnology
//Whatsapp: +2349162671360
//Telegram: @jeditech
include('header.php');
$page_title  = WEB_NAME . " | My Gift Card Sales";
$page_title2 = "My Gift Card Sales";

$items_per_page = 15;
$current_page   = max(1, (int)($_GET['page'] ?? 1));
$offset         = ($current_page - 1) * $items_per_page;

try {
    $count_stmt = $pdo->prepare("SELECT COUNT(*) FROM sell_giftcard_orders WHERE user_id = :uid");
    $count_stmt->execute(['uid' => $user['id']]);
    $total       = (int)$count_stmt->fetchColumn();
    $total_pages = (int)ceil($total / $items_per_page);

    $stmt = $pdo->prepare("SELECT * FROM sell_giftcard_orders WHERE user_id = :uid ORDER BY id DESC LIMIT :lim OFFSET :off");
    $stmt->bindValue(':uid', $user['id']);
    $stmt->bindValue(':lim', $items_per_page, PDO::PARAM_INT);
    $stmt->bindValue(':off', $offset, PDO::PARAM_INT);
    $stmt->execute();
    $orders = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) { $orders = []; $total = 0; $total_pages = 1; }

// Stats
try {
    $stats = $pdo->prepare(
        "SELECT COUNT(*) as total,
                SUM(CASE WHEN status='approved'  THEN 1 ELSE 0 END) as approved,
                SUM(CASE WHEN status='pending'   THEN 1 ELSE 0 END) as pending,
                SUM(CASE WHEN status='rejected'  THEN 1 ELSE 0 END) as rejected,
                SUM(CASE WHEN status='approved'  THEN ngn_payout ELSE 0 END) as total_earned
         FROM sell_giftcard_orders WHERE user_id = :uid"
    );
    $stats->execute(['uid' => $user['id']]);
    $stats = $stats->fetch(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    $stats = ['total'=>0,'approved'=>0,'pending'=>0,'rejected'=>0,'total_earned'=>0];
}
?>
<title><?php echo htmlspecialchars($page_title); ?></title>

<style>
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.anim{opacity:0;animation:fadeUp .45s ease-out forwards}
.anim-1{animation-delay:.05s}.anim-2{animation-delay:.12s}.anim-3{animation-delay:.19s}

.sell-hero {
    background: linear-gradient(145deg,#2d0a5e 0%,#3b0f6b 35%,#4D148C 70%,#4D148C 100%);
    border: 1px solid rgba(245,158,11,.15);
    border-radius: 20px; padding: 20px;
    position: relative; overflow: hidden; margin-bottom: 14px;
}
.sell-hero::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background: repeating-linear-gradient(45deg,transparent,transparent 40px,rgba(77,20,140,.015) 40px,rgba(77,20,140,.015) 41px);
}
.ord-card {
    background: var(--card-bg); border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow); border-radius: 14px; padding: 14px;
    transition: border-color .2s; margin-bottom: 10px;
}
.ord-card:hover { border-color: rgba(77,20,140,.25); }
.stat-card {
    background: var(--card-bg); border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow); border-radius: 12px; padding: 12px;
    display: flex; align-items: center; gap: 10px;
}
.snap-thumb{width:60px;height:45px;border-radius:8px;object-fit:cover;cursor:pointer;border:1px solid var(--card-border);transition:transform .15s}
.snap-thumb:hover{transform:scale(1.05)}
</style>

<div class="max-w-2xl mx-auto">

<!-- Hero -->
<div class="sell-hero anim anim-1">
    <div style="position:absolute;width:140px;height:140px;border-radius:50%;filter:blur(50px);background:radial-gradient(circle,rgba(77,20,140,.3),transparent);top:-30px;right:-30px;pointer-events:none"></div>
    <div style="position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px">
        <div>
            <h2 style="font-size:1.1rem;font-weight:800;color:white;margin-bottom:4px;display:flex;align-items:center;gap:8px">
                <i class="fas fa-tags" style="color:#c4b5fd"></i>My Gift Card Sales
            </h2>
            <p style="color:rgba(255,255,255,.55);font-size:.78rem">Track the status of your gift card submissions.</p>
        </div>
        <a href="sell-giftcard" style="background:white;color:#4D148C;font-weight:700;font-size:.78rem;padding:10px 16px;border-radius:10px;text-decoration:none;display:inline-flex;align-items:center;gap:6px">
            <i class="fas fa-plus" style="font-size:.7rem"></i>Sell New Card
        </a>
    </div>
</div>

<!-- Stats -->
<div class="anim anim-1" style="display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:14px">
    <?php foreach ([
        ['fas fa-list',         'rgba(77,20,140,.1)',  '#4D148C', $stats['total'],      'Total Submitted'],
        ['fas fa-circle-check', 'rgba(77,20,140,.1)',  '#6b23c2', $stats['approved'],   'Approved'],
        ['fas fa-clock',        'rgba(245,158,11,.1)',  '#d97706', $stats['pending'],    'Pending'],
        ['fas fa-circle-xmark', 'rgba(239,68,68,.1)',   '#dc2626', $stats['rejected'],   'Rejected'],
    ] as [$ic,$bg,$col,$val,$lbl]): ?>
    <div class="stat-card">
        <div style="width:36px;height:36px;border-radius:9px;background:<?php echo $bg; ?>;display:flex;align-items:center;justify-content:center;flex-shrink:0">
            <i class="<?php echo $ic; ?>" style="font-size:.85rem;color:<?php echo $col; ?>"></i>
        </div>
        <div>
            <p style="font-size:.68rem;color:var(--text-muted);font-weight:500"><?php echo $lbl; ?></p>
            <p style="font-weight:800;font-size:.95rem;color:var(--text-primary);font-family:monospace"><?php echo $val; ?></p>
        </div>
    </div>
    <?php endforeach; ?>
</div>
<div class="stat-card anim anim-1" style="margin-bottom:14px">
    <div style="width:36px;height:36px;border-radius:9px;background:rgba(77,20,140,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0">
        <i class="fas fa-naira-sign" style="font-size:.85rem;color:#4D148C"></i>
    </div>
    <div>
        <p style="font-size:.68rem;color:var(--text-muted);font-weight:500">Total Earned (Approved)</p>
        <p style="font-weight:800;font-size:1rem;color:#4D148C;font-family:monospace">₦<?php echo number_format($stats['total_earned'] ?? 0, 2); ?></p>
    </div>
</div>

<!-- Orders -->
<?php if (!empty($orders)): ?>
<div class="anim anim-2">
    <?php foreach ($orders as $o):
        switch ($o['status']) {
            case 'approved': $bc='rgba(77,20,140,.08)';  $tc='#6b23c2'; $ic='fa-circle-check'; break;
            case 'rejected': $bc='rgba(239,68,68,.08)';   $tc='#dc2626'; $ic='fa-circle-xmark'; break;
            default:         $bc='rgba(245,158,11,.08)';  $tc='#d97706'; $ic='fa-clock';        break;
        }
    ?>
    <div class="ord-card">
        <div style="display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap">

            <!-- Snapshot -->
            <?php if (!empty($o['image_path'])): ?>
            <img src="<?php echo htmlspecialchars($o['image_path']); ?>"
                 class="snap-thumb" alt="Card snapshot"
                 onclick="viewSnap('<?php echo htmlspecialchars($o['image_path']); ?>')">
            <?php else: ?>
            <div style="width:60px;height:45px;border-radius:8px;background:rgba(77,20,140,.08);display:flex;align-items:center;justify-content:center;flex-shrink:0">
                <i class="fas fa-image" style="color:#4D148C;font-size:.9rem"></i>
            </div>
            <?php endif; ?>

            <div style="flex:1;min-width:0">
                <div style="display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:5px">
                    <span style="font-size:.65rem;font-weight:700;color:var(--text-muted);font-family:monospace">#<?php echo $o['id']; ?></span>
                    <span style="font-size:.65rem;font-weight:700;padding:2px 8px;border-radius:99px;background:<?php echo $bc; ?>;color:<?php echo $tc; ?>;display:flex;align-items:center;gap:4px">
                        <i class="fas <?php echo $ic; ?>" style="font-size:.55rem"></i><?php echo ucfirst($o['status']); ?>
                    </span>
                    <span style="font-size:.65rem;padding:2px 8px;border-radius:99px;background:rgba(77,20,140,.08);color:#4D148C;font-weight:600">
                        <?php echo htmlspecialchars($o['card_currency']); ?>
                    </span>
                </div>
                <p style="font-weight:700;font-size:.85rem;color:var(--text-primary);margin-bottom:2px"><?php echo htmlspecialchars($o['type_name']); ?></p>
                <p style="font-size:.72rem;color:var(--text-muted);margin-bottom:2px">
                    <i class="fas fa-money-bill-wave" style="font-size:.65rem;margin-right:3px"></i>
                    Card Value: <?php echo htmlspecialchars($o['usd_amount']); ?> <?php echo htmlspecialchars($o['card_currency']); ?>
                    &nbsp;·&nbsp; Rate: ₦<?php echo number_format($o['ngn_rate']); ?>
                </p>
                <p style="font-size:.72rem;color:var(--text-muted);margin-bottom:4px">
                    <i class="fas fa-building-columns" style="font-size:.65rem;margin-right:3px"></i>
                    <?php echo htmlspecialchars($o['bank_name']); ?> — <?php echo htmlspecialchars($o['account_number']); ?>
                </p>
                <p style="font-size:.68rem;color:var(--text-muted)">
                    <?php echo date('M d, Y · h:i A', strtotime($o['created_at'])); ?>
                </p>

                <?php if ($o['status'] === 'rejected' && !empty($o['rejection_reason'])): ?>
                <div style="margin-top:8px;background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.15);border-radius:9px;padding:8px 10px">
                    <p style="font-size:.7rem;font-weight:700;color:#dc2626;margin-bottom:2px"><i class="fas fa-triangle-exclamation" style="font-size:.65rem;margin-right:4px"></i>Rejection Reason:</p>
                    <p style="font-size:.72rem;color:var(--text-muted)"><?php echo htmlspecialchars($o['rejection_reason']); ?></p>
                </div>
                <?php endif; ?>
            </div>

            <div style="text-align:right;flex-shrink:0">
                <p style="font-weight:800;font-size:.95rem;color:#4D148C;font-family:monospace">₦<?php echo number_format($o['ngn_payout'], 2); ?></p>
                <p style="font-size:.68rem;color:var(--text-muted)">Expected payout</p>
            </div>
        </div>
    </div>
    <?php endforeach; ?>
</div>

<!-- Pagination -->
<?php if ($total_pages > 1): ?>
<div class="anim anim-3" style="display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:8px">
    <?php for ($i = 1; $i <= $total_pages; $i++): ?>
    <a href="?page=<?php echo $i; ?>"
       style="padding:7px 13px;border-radius:8px;font-size:.78rem;font-weight:600;text-decoration:none;border:1.5px solid var(--card-border);background:<?php echo $i===$current_page?'linear-gradient(135deg,#4D148C,#6b23c2)':'var(--btn-bg)'; ?>;color:<?php echo $i===$current_page?'white':'var(--text-muted)'; ?>">
        <?php echo $i; ?>
    </a>
    <?php endfor; ?>
</div>
<?php endif; ?>

<?php else: ?>
<div class="anim anim-2" style="background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;padding:40px;text-align:center">
    <div style="width:56px;height:56px;border-radius:50%;background:rgba(77,20,140,.07);display:flex;align-items:center;justify-content:center;margin:0 auto 14px">
        <i class="fas fa-tags" style="font-size:1.4rem;color:var(--text-muted)"></i>
    </div>
    <h3 style="font-weight:700;font-size:.95rem;color:var(--text-primary);margin-bottom:6px">No Gift Card Sales Yet</h3>
    <p style="font-size:.78rem;color:var(--text-muted);max-width:280px;margin:0 auto 16px">Submit your unwanted gift cards and get paid in NGN directly to your bank account.</p>
    <a href="sell-giftcard" style="display:inline-flex;align-items:center;gap:8px;padding:11px 22px;background:linear-gradient(135deg,#4D148C,#6b23c2);color:white;font-weight:700;font-size:.82rem;border-radius:10px;text-decoration:none;box-shadow:0 4px 14px rgba(77,20,140,.3)">
        <i class="fas fa-tags"></i>Sell a Gift Card
    </a>
</div>
<?php endif; ?>

</div>

<!-- Snapshot lightbox -->
<div id="snapModal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:99999;align-items:center;justify-content:center;padding:16px" onclick="closeSnap()">
    <img id="snapFull" src="" style="max-width:90vw;max-height:88vh;border-radius:12px;object-fit:contain;box-shadow:0 8px 40px rgba(0,0,0,.5)">
    <button onclick="closeSnap()" style="position:fixed;top:16px;right:16px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.15);border:none;color:white;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center">
        <i class="fas fa-times"></i>
    </button>
</div>

<script>
function viewSnap(src) {
    document.getElementById('snapFull').src = src;
    document.getElementById('snapModal').style.display = 'flex';
}
function closeSnap() {
    document.getElementById('snapModal').style.display = 'none';
}
document.addEventListener('keydown', function(e){ if(e.key==='Escape') closeSnap(); });
</script>

<?php include('footer.php'); ?>