<?php
require_once '../includes/config.php';
require_once '../includes/vtu-api.php';
requireLogin();

$page_title = "Buy Data";
$user       = getUser($_SESSION['user_id']);
$uid        = (int)$_SESSION['user_id'];
$error = $success = '';

// ── Load networks ─────────────────────────────────────────────────────────
$net_resp = tca_get('get-networks?service=data');
$net_list = tca_list($net_resp);
$networks = [];
foreach ($net_list as $n) {
    if (isset($n['id'], $n['network'])) $networks[(int)$n['id']] = $n['network'];
}
if (empty($networks)) $networks = [1=>'MTN', 2=>'Airtel', 3=>'Glo', 4=>'9mobile'];

// ── Load plans + apply margin ─────────────────────────────────────────────
$plans_resp = tca_get('data_plans');
$plans_raw  = tca_list($plans_resp);

$plans_by_network = [];
foreach ($plans_raw as $p) {
    if (!isset($p['network'], $p['plan_id'])) continue;
    $net_name  = $p['network'];
    $api_cost  = (float)($p['price'] ?? 0);
    $calc      = vtu_calc_charge($api_cost, 'data', $net_name);
    $p['api_price']  = $api_cost;
    $p['price']      = ceil($calc['charge']);
    $p['profit']     = $calc['profit'];
    $p['margin_pct'] = $calc['margin_pct'];
    $plans_by_network[$net_name][] = $p;
}

// ── Classify plans into tabs: HOT / Daily / Weekly / Monthly ──────────────
function classify_plan(array $p): string {
    $day      = (int)($p['day'] ?? 0);
    $type     = strtoupper($p['type'] ?? '');
    $size_str = strtolower($p['datasize'] ?? '');

    if ($day <= 1)  return 'daily';
    if ($day <= 7)  return 'weekly';
    if (str_contains($type, 'SME') || str_contains($type, 'SMB')) {
        $mb = 0;
        if (preg_match('/(\d+(?:\.\d+)?)\s*GB/i', $size_str, $m)) $mb = (float)$m[1] * 1024;
        elseif (preg_match('/(\d+(?:\.\d+)?)\s*MB/i', $size_str, $m)) $mb = (float)$m[1];
        if ($mb > 0 && $mb <= 2048) return 'hot';
    }
    return 'monthly';
}

$classified = [];
foreach ($plans_by_network as $net => $plans) {
    $classified[$net] = ['hot'=>[], 'daily'=>[], 'weekly'=>[], 'monthly'=>[]];
    foreach ($plans as $p) {
        $tab = classify_plan($p);
        $classified[$net][$tab][] = $p;
    }
    if (empty($classified[$net]['hot']) && !empty($classified[$net]['monthly'])) {
        $sorted = $classified[$net]['monthly'];
        usort($sorted, fn($a,$b) => $a['price'] <=> $b['price']);
        $classified[$net]['hot'] = array_slice($sorted, 0, 4);
    }
}

if ($_SERVER['REQUEST_METHOD'] === 'POST') {

    $network_id = (int)($_POST['network_id'] ?? 0);
    $plan_id    = (int)($_POST['plan_id'] ?? 0);
    $phone      = sanitize($_POST['phone'] ?? '');

    if (!$network_id || !$plan_id || !$phone) {
        $error = 'Please select a network, plan and enter a phone number.';
    } elseif (!preg_match('/^0[789][01]\d{8}$/', $phone)) {
        $error = 'Enter a valid 11-digit Nigerian phone number.';
    } else {

        $selected_plan    = null;
        $selected_network = null;

        foreach ($plans_by_network as $net => $plans) {
            foreach ($plans as $p) {
                if ((int)$p['plan_id'] === $plan_id) {
                    $selected_plan    = $p;
                    $selected_network = $net;
                    break 2;
                }
            }
        }

        if (!$selected_plan) {
            $error = 'Invalid data plan selected.';
        } else {

            $expected_net_id = array_search($selected_network, $networks);

            if ((int)$expected_net_id !== $network_id) {
                $error = 'Network mismatch detected.';
            } else {

                $api_price  = (float)$selected_plan['api_price'];
                $user_price = (float)$selected_plan['price'];
                $plan_label = $selected_plan['datasize'] . ' ' . $selected_plan['day'] . 'days ' . $selected_network;

                if ($user_price <= 0) {
                    $error = 'Invalid plan price.';
                } else {

                    $conn->begin_transaction();

                    try {
                        $stmt = $conn->prepare("SELECT balance FROM users WHERE id=? FOR UPDATE");
                        $stmt->bind_param('i', $uid);
                        $stmt->execute();
                        $stmt->bind_result($balance);
                        $stmt->fetch();
                        $stmt->close();

                        if ($user_price > (float)$balance) {
                            throw new Exception('Insufficient balance.');
                        }

                        // ── Call API ───────────────────────────────────────
                        $resp = tca_post('data', [
                            'network'   => $network_id,
                            'phone'     => $phone,
                            'data_plan' => $plan_id,
                            'bypass'    => false
                        ]);

                        $api_status = strtolower($resp['status'] ?? '');

                        // Hard failures → roll back, no charge
                        if ($api_status === 'failed' || $api_status === 'error') {
                            throw new Exception($resp['message'] ?? 'Data purchase failed. Please try again.');
                        }

                        // Must be success or pending to continue
                        if (!tca_ok($resp) && !tca_pending($resp)) {
                            throw new Exception($resp['message'] ?? 'Unexpected API response.');
                        }

                        // ── Deduct balance ─────────────────────────────────
                        $stmt = $conn->prepare("UPDATE users SET balance = balance - ? WHERE id=?");
                        $stmt->bind_param('di', $user_price, $uid);
                        $stmt->execute();
                        $stmt->close();

                        // ── Determine order status ─────────────────────────
                        $order_status = tca_pending($resp) ? 'pending' : 'completed';

                        // ── Save order ─────────────────────────────────────
                        $ref    = sanitize($resp['request-id'] ?? ('DATA-' . time()));
                        $profit = $user_price - $api_price;

                        $dets = json_encode([
                            'plan'      => $plan_label,
                            'network'   => $selected_network,
                            'phone'     => $phone,
                            'data_size' => $resp['data_size'] ?? '',
                            'data_type' => $resp['data_type'] ?? '',
                            'api_price' => $api_price,
                            'profit'    => $profit,
                            'response'  => $resp['response'] ?? ($resp['message'] ?? ''),
                        ]);

                        $stmt = $conn->prepare(
                            "INSERT INTO vtu_orders
                             (user_id,type,network,phone,plan_id,amount,reference,details,status,created_at)
                             VALUES (?,'data',?,?,?,?,?,?,?,NOW())"
                        );
                        $stmt->bind_param('issidsss',
                            $uid, $selected_network, $phone,
                            $plan_id, $user_price, $ref, $dets, $order_status
                        );
                        $stmt->execute();
                        $stmt->close();

                        // ── Transaction log ────────────────────────────────
                        addTransaction($uid, $user_price, 'order', "Data: {$plan_label} → {$phone}", $order_status);

                        // ── Commit ─────────────────────────────────────────
                        $conn->commit();

                        $user = getUser($uid);

                        if (tca_pending($resp)) {
                            $success = "⏳ <strong>{$plan_label}</strong> to <strong>{$phone}</strong> is being processed."
                                     . " Ref: <code>{$ref}</code><br>"
                                     . "<small style='opacity:.7'>Your order will update automatically once confirmed — usually within a minute.</small>";
                        } else {
                            $success = "✓ <strong>{$plan_label}</strong> sent to <strong>{$phone}</strong>! Ref: <code>{$ref}</code>";
                        }

                    } catch (Exception $e) {

                        $conn->rollback();
                        $error = $e->getMessage();
                    }
                }
            }
        }
    }
}

$active_net = $_GET['net'] ?? array_key_first($plans_by_network) ?? 'MTN';
if (!array_key_exists($active_net, $plans_by_network)) {
    $active_net = array_key_first($plans_by_network) ?? 'MTN';
}

$net_colors = ['MTN'=>'#f9a825','Airtel'=>'#e53935','Glo'=>'#2e7d32','9mobile'=>'#00897b'];

include '../includes/header.php';
?>

<style>
/* ── Network tabs ── */
.net-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:1.25rem; }
.nt {
    display:inline-flex; align-items:center; gap:7px;
    padding:8px 18px; border-radius:999px;
    border:2px solid var(--border-color); background:var(--bg-secondary);
    color:var(--text-secondary); font-size:13px; font-weight:600;
    cursor:pointer; text-decoration:none; transition:all .15s;
}
.nt:hover         { border-color:var(--primary); color:var(--primary); }
.nt.active        { color:#fff; border-color:transparent; }
.nt.MTN.active    { background:#f9a825; }
.nt.Airtel.active { background:#e53935; }
.nt.Glo.active    { background:#2e7d32; }
.nt.nine.active   { background:#00897b; }

/* ── Plan category tabs ── */
.plan-tabs {
    display:flex; gap:0;
    border-bottom:2px solid var(--border-color);
    margin-bottom:1.25rem;
}
.plan-tab {
    padding:9px 18px; border:none; background:transparent;
    font-family:inherit; font-size:13px; font-weight:600;
    color:var(--text-light); cursor:pointer; transition:all .15s;
    position:relative; display:flex; align-items:center; gap:7px;
    border-bottom:2px solid transparent; margin-bottom:-2px;
}
.plan-tab:hover   { color:var(--text-primary); }
.plan-tab.active  { color:var(--primary); border-bottom-color:var(--primary); }
.plan-tab .tab-count {
    font-size:10px; font-weight:700;
    background:var(--bg-secondary); border:1px solid var(--border-color);
    padding:1px 6px; border-radius:20px;
    color:var(--text-light);
}
.plan-tab.active .tab-count { background:rgba(0,61,122,.12); color:var(--primary); border-color:rgba(0,61,122,.2); }

.plan-tab-hot    .hot-flame { color:#ef4444; }
.plan-tab-hot.active        { color:#ef4444; border-bottom-color:#ef4444; }
.plan-tab-hot.active .tab-count { background:rgba(239,68,68,.1); color:#ef4444; border-color:rgba(239,68,68,.2); }

/* ── Plan grid ── */
.plan-cat-panel { display:none; }
.plan-cat-panel.active { display:grid; grid-template-columns:repeat(auto-fill,minmax(175px,1fr)); gap:10px; margin-bottom:1.25rem; }

.plan-card {
    background:var(--bg-secondary); border:2px solid var(--border-color);
    border-radius:12px; padding:14px 16px; cursor:pointer;
    transition:border-color .15s, transform .15s, box-shadow .15s;
    position:relative;
}
.plan-card:hover { border-color:var(--primary); transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,61,122,.08); }
.plan-card.selected { border-color:var(--primary); background:rgba(0,61,122,.07); }
.plan-card.selected::after { content:'✓'; position:absolute; top:9px; right:12px; color:var(--primary); font-weight:900; font-size:14px; }

.plan-card.hot-card { border-color:rgba(239,68,68,.25); }
.plan-card.hot-card:hover { border-color:#ef4444; box-shadow:0 4px 16px rgba(239,68,68,.1); }
.plan-card.hot-card.selected { border-color:#ef4444; background:rgba(239,68,68,.06); }
.plan-card.hot-card.selected::after { color:#ef4444; }

.plan-hot-badge {
    display:inline-flex; align-items:center; gap:3px;
    font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
    background:rgba(239,68,68,.12); color:#ef4444; border:1px solid rgba(239,68,68,.2);
    padding:2px 7px; border-radius:20px; margin-bottom:8px;
}

.plan-size     { font-size:20px; font-weight:900; color:var(--text-primary); letter-spacing:-.3px; }
.plan-validity { font-size:11.5px; color:var(--text-light); margin:2px 0 6px; }
.plan-price    { font-size:17px; font-weight:800; color:var(--primary); }
.plan-type     { font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-light); margin-top:3px; }

/* ── Empty tab ── */
.tab-empty { text-align:center; padding:2.5rem; color:var(--text-light); grid-column:1/-1; }

/* ── Trigger button area ── */
.purchase-trigger { margin-top:1rem; }

/* ── Confirmation Modal Overlay ── */
.plan-modal-overlay {
    display:none; position:fixed; inset:0; z-index:1050;
    background:rgba(0,0,0,.6); backdrop-filter:blur(4px);
    align-items:center; justify-content:center;
    padding:16px;
}
.plan-modal-overlay.show { display:flex; }

.plan-modal {
    background:#1a1a2e; border-radius:18px;
    box-shadow:0 24px 64px rgba(0,0,0,.6);
    width:min(440px, 100%); overflow:hidden;
    animation:modalPop .22s cubic-bezier(.34,1.56,.64,1);
    border:1px solid rgba(255,255,255,.08);
}
@keyframes modalPop {
    from { transform:scale(.85) translateY(20px); opacity:0; }
    to   { transform:scale(1)   translateY(0);    opacity:1; }
}

.plan-modal-header {
    padding:16px 20px 14px;
    background:#1a1a2e;
    border-bottom:1px solid rgba(255,255,255,.1);
    display:flex; align-items:center; justify-content:space-between;
}
.plan-modal-header h3 {
    font-size:15px; font-weight:800; color:#fff; margin:0;
    display:flex; align-items:center; gap:8px;
}
.modal-close-btn {
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15);
    border-radius:50%; width:32px; height:32px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:17px; color:rgba(255,255,255,.7);
    line-height:1; transition:all .15s; flex-shrink:0;
}
.modal-close-btn:hover { background:rgba(255,255,255,.2); color:#fff; }

.plan-modal-body { padding:20px; background:#1a1a2e; }

/* Plan summary block */
.modal-plan-block {
    display:flex; align-items:center; gap:14px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px; padding:16px 18px;
    margin-bottom:20px;
}
.modal-plan-icon {
    width:48px; height:48px; border-radius:12px;
    background:rgba(255,255,255,.12);
    display:flex; align-items:center; justify-content:center;
    font-size:24px; flex-shrink:0;
}
.modal-plan-info { flex:1; min-width:0; }
.modal-plan-name {
    font-size:16px; font-weight:900; color:#fff;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.modal-plan-meta { font-size:12px; color:rgba(255,255,255,.5); margin-top:3px; }
.modal-plan-price {
    font-size:26px; font-weight:900; color:#a78bfa;
    white-space:nowrap; letter-spacing:-.5px;
}

/* Divider */
.modal-divider {
    height:1px; background:rgba(255,255,255,.1); margin:0 0 18px;
}

/* Phone input inside modal */
.modal-phone-label {
    display:block; font-size:11.5px; font-weight:700;
    text-transform:uppercase; letter-spacing:.06em;
    color:rgba(255,255,255,.55); margin-bottom:7px;
}
.modal-phone-wrap { position:relative; margin-bottom:6px; }
.modal-phone-wrap .phone-flag {
    position:absolute; left:13px; top:50%; transform:translateY(-50%);
    font-size:18px; pointer-events:none;
}
.modal-phone-wrap input {
    padding-left:42px !important;
    background:#2a2a45 !important;
    border:1px solid rgba(255,255,255,.15) !important;
    color:#fff !important;
    border-radius:10px !important;
}
.modal-phone-wrap input::placeholder { color:rgba(255,255,255,.3) !important; }
.modal-phone-wrap input:focus {
    outline:none !important;
    border-color:#a78bfa !important;
    box-shadow:0 0 0 3px rgba(167,139,250,.2) !important;
}
.modal-phone-hint {
    font-size:11px; color:rgba(255,255,255,.4); margin-bottom:18px;
    display:block;
}

/* Confirm button */
.modal-confirm-btn {
    width:100%; padding:14px 20px;
    border:none; border-radius:12px;
    background:linear-gradient(135deg,#7c3aed,#9333ea); color:#fff;
    font-family:inherit; font-size:15px; font-weight:800;
    cursor:pointer; transition:opacity .15s, transform .1s;
    display:flex; align-items:center; justify-content:center; gap:8px;
    letter-spacing:.01em;
}
.modal-confirm-btn:hover  { opacity:.88; }
.modal-confirm-btn:active { transform:scale(.98); }

.modal-balance-row {
    display:flex; align-items:center; justify-content:space-between;
    margin-top:14px; padding:10px 14px;
    background:rgba(255,255,255,.06); border-radius:10px;
    font-size:12.5px;
    border:1px solid rgba(255,255,255,.08);
}
.modal-balance-row .bal-label { color:rgba(255,255,255,.5); }
.modal-balance-row .bal-val   { font-weight:800; color:#a78bfa; }

.phone-error-msg {
    font-size:11.5px; color:#ef4444; margin-top:4px;
    display:none; margin-bottom:12px;
}

@media(max-width:600px) {
    .plan-cat-panel.active { grid-template-columns:1fr 1fr; }
    .plan-tabs { overflow-x:auto; scrollbar-width:none; }
    .plan-tabs::-webkit-scrollbar { display:none; }
    .plan-tab  { white-space:nowrap; }
    .modal-plan-price { font-size:22px; }
}

/* ── Result Modal (success / error / pending) ── */
.result-modal-overlay {
    display:none; position:fixed; inset:0; z-index:1100;
    background:rgba(0,0,0,.82);
    align-items:center; justify-content:center; padding:16px;
}
.result-modal-overlay.show { display:flex; }

.result-modal {
    background:#1a1a2e; border-radius:20px;
    box-shadow:0 28px 70px rgba(0,0,0,.6);
    width:min(400px,100%); padding:36px 32px 32px;
    text-align:center;
    animation:modalPop .25s cubic-bezier(.34,1.56,.64,1);
}

.result-modal-icon {
    width:76px; height:76px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 20px;
}
.result-modal-icon.icon-success {
    background:rgba(34,197,94,.15); color:#22c55e;
    border:2px solid rgba(34,197,94,.35);
}
.result-modal-icon.icon-pending {
    background:rgba(234,179,8,.15); color:#eab308;
    border:2px solid rgba(234,179,8,.35);
}
.result-modal-icon.icon-error {
    background:rgba(239,68,68,.15); color:#ef4444;
    border:2px solid rgba(239,68,68,.35);
}

.result-modal-title {
    font-size:21px; font-weight:900; color:#fff;
    margin-bottom:10px; letter-spacing:-.3px;
}
.result-modal-msg {
    font-size:13.5px; color:rgba(255,255,255,.55); line-height:1.65;
    margin-bottom:26px;
}
.result-modal-msg strong { color:#fff; }
.result-modal-msg code {
    background:rgba(255,255,255,.08); padding:2px 8px; border-radius:5px;
    font-size:12px; color:#60a5fa; border:1px solid rgba(255,255,255,.12);
    word-break:break-all;
}
.result-modal-msg small { font-size:12px; }

.result-modal-btn {
    width:100%; padding:13px 20px; border:none; border-radius:11px;
    font-family:inherit; font-size:15px; font-weight:800;
    cursor:pointer; transition:opacity .15s, transform .1s;
    margin-bottom:14px; letter-spacing:.01em;
}
.result-modal-btn.btn-ok      { background:linear-gradient(135deg,#1d6de5,#2563eb); color:#fff; }
.result-modal-btn.btn-pending { background:linear-gradient(135deg,#b45309,#d97706); color:#fff; }
.result-modal-btn.btn-retry   { background:#ef4444; color:#fff; }
.result-modal-btn:hover  { opacity:.87; }
.result-modal-btn:active { transform:scale(.98); }

.result-modal-link {
    display:inline-block; font-size:13px; color:#60a5fa;
    text-decoration:none; font-weight:600;
}
.result-modal-link:hover { color:#93c5fd; text-decoration:underline; }
/* ── Compact Plan Selector ── */
.plan-cat-panel.active{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:1.25rem;
}

.plan-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    background:#fff;
    border:1.5px solid var(--border-color);
    border-radius:14px;

    padding:12px 14px;
    cursor:pointer;

    transition:all .18s ease;
    position:relative;
}

.plan-card:hover{
    border-color:var(--primary-color);
    transform:translateY(-1px);
    box-shadow:0 4px 14px rgba(0,61,122,.08);
}

.plan-card.selected{
    border-color:var(--primary-color);
    background:rgba(0,61,122,.05);
}

.plan-card.selected::after{
    content:'';
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--primary-color);

    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
}

/* left */
.plan-left{
    display:flex;
    flex-direction:column;
    min-width:0;
}

.plan-size{
    font-size:15px;
    font-weight:800;
    color:var(--text-dark);
    line-height:1.1;
}

.plan-validity{
    font-size:11px;
    color:var(--text-light);
    margin-top:2px;
}

.plan-type{
    display:inline-flex;
    width:max-content;

    margin-top:5px;
    padding:2px 7px;

    border-radius:999px;
    background:#f1f5f9;

    font-size:9px;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;

    color:#475569;
}

/* right */
.plan-price{
    font-size:17px;
    font-weight:900;
    color:var(--primary-color);
    white-space:nowrap;
    padding-right:18px;
}

/* HOT */
.plan-card.hot-card{
    border-color:rgba(239,68,68,.18);
}

.plan-hot-badge{
    position:absolute;
    top:-8px;
    left:12px;

    font-size:8px;
    font-weight:800;
    letter-spacing:.08em;

    padding:3px 8px;
    border-radius:999px;

    background:#ef4444;
    color:#fff;
}


</style>

<div class="page-header">
    <div>
        <h1>
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2" style="vertical-align:middle;margin-right:6px"><path d="M1 6l5.5 6L12 6l5.5 6L23 6"/><path d="M1 12l5.5 6L12 12l5.5 6L23 12"/></svg>
            Buy Data Bundle
        </h1>
        <p>Instant delivery to any Nigerian network</p>
    </div>
    <div style="margin-top:.5rem">
        <strong style="color:var(--primary);font-size:1.05rem"><?php echo formatMoney($user['balance']); ?></strong>
        <span style="color:var(--text-light);font-size:13px"> balance</span>
    </div>
</div>

<?php
// Detect pending result for modal state
$is_pending = $success && str_starts_with($success, '⏳');
?>

<?php if ($error || $success): ?>
<div class="result-modal-overlay show" id="resultModalOverlay" onclick="closeResultModal(event)">
    <div class="result-modal">
        <?php if ($success && !$is_pending): ?>
        <div class="result-modal-icon icon-success">
            <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
        <?php elseif ($is_pending): ?>
        <div class="result-modal-icon icon-pending">
            <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
        </div>
        <?php else: ?>
        <div class="result-modal-icon icon-error">
            <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
        </div>
        <?php endif; ?>

        <div class="result-modal-title">
            <?php
            if ($is_pending)       echo 'Processing...';
            elseif ($success)      echo 'Purchase Successful!';
            else                   echo 'Purchase Failed';
            ?>
        </div>
        <div class="result-modal-msg"><?php echo $success ? $success : $error; ?></div>
        <button type="button" class="result-modal-btn <?php echo $success ? ($is_pending ? 'btn-pending' : 'btn-ok') : 'btn-retry'; ?>" onclick="closeResultModalDirect()">
            <?php echo $success ? 'Done' : 'Try Again'; ?>
        </button>
        <?php if ($success): ?>
        <a href="orders.php?tab=vtu" class="result-modal-link">View Order History →</a>
        <?php endif; ?>
    </div>
</div>
<?php endif; ?>

<div class="card">
    <div class="card-header" style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px">
        <h2>Select Network &amp; Plan</h2>
    </div>
    <div class="card-body">

        <!-- Network tabs -->
        <div class="net-tabs">
            <?php foreach ($plans_by_network as $net_name => $_):
                $slug = ($net_name==='9mobile') ? 'nine' : $net_name;
                $cls  = ($net_name===$active_net) ? "active {$slug}" : $slug;
            ?>
            <a href="?net=<?php echo urlencode($net_name); ?>" class="nt <?php echo $cls; ?>">
                <?php echo htmlspecialchars($net_name); ?>
            </a>
            <?php endforeach; ?>
        </div>

        <form method="POST" id="df">
            <input type="hidden" name="network_id"  id="inp_nid"    value="">
            <input type="hidden" name="plan_id"      id="inp_pid"    value="">
            <input type="hidden" name="user_price"   id="inp_uprice" value="">
            <input type="hidden" name="api_price"    id="inp_aprice" value="">
            <input type="hidden" name="plan_label"   id="inp_label"  value="">
            <input type="hidden" name="phone"        id="inp_phone"  value="">

            <?php
            $cur_plans  = $classified[$active_net] ?? ['hot'=>[],'daily'=>[],'weekly'=>[],'monthly'=>[]];
            $cur_net_id = 0;
            foreach ($networks as $id => $name) {
                if (strcasecmp($name, $active_net)===0) { $cur_net_id=$id; break; }
            }
            $tab_defs = [
                'hot'     => ['label'=>'🔥 HOT',  'cls'=>'plan-tab-hot'],
                'daily'   => ['label'=>'Daily',   'cls'=>''],
                'weekly'  => ['label'=>'Weekly',  'cls'=>''],
                'monthly' => ['label'=>'Monthly', 'cls'=>''],
            ];
            $first_tab = null;
            foreach ($tab_defs as $tkey => $_) {
                if (!empty($cur_plans[$tkey])) { $first_tab = $tkey; break; }
            }
            ?>

            <!-- Plan category tabs -->
            <div class="plan-tabs">
                <?php foreach ($tab_defs as $tkey => $tdef):
                    $count  = count($cur_plans[$tkey]);
                    if ($count === 0) continue;
                    $active = ($tkey === $first_tab) ? 'active' : '';
                ?>
                <button type="button" class="plan-tab <?php echo $tdef['cls']; ?> <?php echo $active; ?>"
                        onclick="switchPlanTab('<?php echo $tkey; ?>','<?php echo $active_net; ?>', this)">
                    <?php echo $tdef['label']; ?>
                    <span class="tab-count"><?php echo $count; ?></span>
                </button>
                <?php endforeach; ?>
            </div>

            <!-- Plans per category -->
            <?php foreach ($tab_defs as $tkey => $tdef):
                $plans_in_tab = $cur_plans[$tkey] ?? [];
                $active       = ($tkey === $first_tab) ? 'active' : '';
                $is_hot       = ($tkey === 'hot');
            ?>
            <div class="plan-cat-panel <?php echo $active; ?>" id="tab-<?php echo $tkey; ?>-<?php echo urlencode($active_net); ?>">
                <?php if (empty($plans_in_tab)): ?>
                <div class="tab-empty">No <?php echo $tkey; ?> plans available</div>
                <?php else: foreach ($plans_in_tab as $p):
                    $p_id     = (int)($p['plan_id'] ?? 0);
                    $p_size   = $p['datasize']  ?? 'N/A';
                    $p_day    = $p['day']        ?? '';
                    $p_type   = $p['type']       ?? '';
                    $p_uprice = (int)ceil((float)($p['price']     ?? 0));
                    $p_aprice = (float)($p['api_price'] ?? 0);
                    $p_label  = "{$p_size} {$p_day}days {$active_net}";
                    $hot_cls  = $is_hot ? 'hot-card' : '';
                ?>
                <div class="plan-card <?php echo $hot_cls; ?>"
                     data-nid="<?php echo $cur_net_id; ?>"
                     data-pid="<?php echo $p_id; ?>"
                     data-uprice="<?php echo $p_uprice; ?>"
                     data-aprice="<?php echo $p_aprice; ?>"
                     data-label="<?php echo htmlspecialchars($p_label); ?>"
                     data-size="<?php echo htmlspecialchars($p_size); ?>"
                     data-day="<?php echo htmlspecialchars($p_day); ?>"
                     data-type="<?php echo htmlspecialchars($p_type); ?>"
                     data-net="<?php echo htmlspecialchars($active_net); ?>"
                     onclick="pickPlan(this)">
                    <?php if ($is_hot): ?>
                    <div class="plan-hot-badge">🔥 HOT</div>
                    <?php endif; ?>
                    <div class="plan-left">
    <div class="plan-size"><?php echo htmlspecialchars($p_size); ?></div>

    <div class="plan-validity">
        <?php echo htmlspecialchars($p_day); ?>
        day<?php echo $p_day != 1 ? 's' : ''; ?>
    </div>

    <?php if ($p_type): ?>
    <div class="plan-type">
        <?php echo htmlspecialchars($p_type); ?>
    </div>
    <?php endif; ?>
</div>

<div class="plan-price">
    ₦<?php echo number_format($p_uprice); ?>
</div>

                </div>
                <?php endforeach; endif; ?>
            </div>
            <?php endforeach; ?>

            <!-- Trigger button (opens modal) -->
            <div class="purchase-trigger">
                <button type="button" id="submitBtn" class="btn btn-primary" disabled
                        style="opacity:.45;cursor:not-allowed" onclick="openPlanModal()">
                    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                    Purchase Data
                </button>
                <div id="submitHint" style="font-size:11.5px;color:var(--text-light);margin-top:5px">Select a plan first</div>
            </div>

        </form><!-- #df -->
    </div>
</div>

<!-- ── Confirmation Block Modal ── -->
<div class="plan-modal-overlay" id="planModalOverlay" onclick="overlayClick(event)">
    <div class="plan-modal" id="planModal">

        <div class="plan-modal-header">
            <h3>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                Confirm Purchase
            </h3>
            <button type="button" class="modal-close-btn" onclick="closePlanModal()" title="Close">✕</button>
        </div>

        <div class="plan-modal-body">

            <div class="modal-plan-block">
                <div class="modal-plan-icon" id="modalIcon">📶</div>
                <div class="modal-plan-info">
                    <div class="modal-plan-name"  id="modalPlanName">—</div>
                    <div class="modal-plan-meta"  id="modalPlanMeta">—</div>
                </div>
                <div class="modal-plan-price" id="modalPlanPrice">₦0</div>
            </div>

            <div class="modal-divider"></div>

            <label class="modal-phone-label" for="modalPhone">Recipient Phone Number</label>
            <div class="modal-phone-wrap">
                <span class="phone-flag">🇳🇬</span>
                <input type="tel" id="modalPhone" class="form-control"
                       placeholder="e.g. 08012345678" maxlength="11"
                       oninput="clearPhoneError()"
                       value="<?php echo htmlspecialchars($_POST['phone']??''); ?>">
            </div>
            <span class="modal-phone-hint">Must match the selected network</span>
            <div class="phone-error-msg" id="phoneErrorMsg">⚠ Enter a valid 11-digit Nigerian phone number.</div>

            <button type="button" class="modal-confirm-btn" onclick="submitDataForm()">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                Confirm &amp; Pay
            </button>

            <div class="modal-balance-row">
                <span class="bal-label">Wallet Balance</span>
                <span class="bal-val"><?php echo formatMoney($user['balance']); ?></span>
            </div>

        </div>
    </div>
</div>


<!-- ── History ── -->
<div class="card" style="margin-top:1.5rem">
    <div class="card-header" style="display:flex;align-items:center;justify-content:space-between">
        <h2>Data Order History</h2>
    </div>
    <div class="card-body" style="padding:0">
        <div class="table-responsive">
            <table>
                <thead><tr><th>Network</th><th>Phone</th><th>Plan</th><th>Paid</th><th>Ref</th><th>Status</th><th>Date</th></tr></thead>
                <tbody>
                <?php
                $rows = $conn->query("SELECT * FROM vtu_orders WHERE user_id={$uid} AND type='data' ORDER BY created_at DESC LIMIT 10");
                if ($rows && $rows->num_rows > 0): while ($r=$rows->fetch_assoc()):
                    $d  = !empty($r['details']) ? (json_decode($r['details'],true)??[]) : [];
                    $sc = $r['status']==='completed'?'badge-success':($r['status']==='failed'?'badge-danger':'badge-warning');
                ?>
                <tr>
                    <td><strong><?php echo strtoupper(htmlspecialchars($r['network']??'')); ?></strong></td>
                    <td><?php echo htmlspecialchars($r['phone']??''); ?></td>
                    <td style="font-size:12px"><?php echo htmlspecialchars($d['plan']??($r['plan_id']??'—')); ?></td>
                    <td><strong>₦<?php echo number_format((float)$r['amount']); ?></strong></td>
                    <td style="font-size:11px;color:var(--text-light)"><?php echo htmlspecialchars(substr($r['reference']??'',0,22)); ?></td>
                    <td><span class="badge <?php echo $sc; ?>"><?php echo ucfirst($r['status']); ?></span></td>
                    <td style="color:var(--text-light);white-space:nowrap"><?php echo date('M d, Y',strtotime($r['created_at'])); ?></td>
                </tr>
                <?php endwhile; else: ?>
                <tr><td colspan="7" style="text-align:center;color:var(--text-light);padding:2rem">No data orders yet</td></tr>
                <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
var netIcons = { MTN:'🟡', Airtel:'🔴', Glo:'🟢', '9mobile':'🩵' };

function switchPlanTab(tab, net, btn) {
    document.querySelectorAll('[id^="tab-"][id$="-' + net + '"]').forEach(function(p) {
        p.classList.remove('active');
    });
    document.querySelectorAll('.plan-tab').forEach(function(b) {
        b.classList.remove('active');
    });
    var panel = document.getElementById('tab-' + tab + '-' + net);
    if (panel) panel.classList.add('active');
    btn.classList.add('active');
    document.querySelectorAll('.plan-card').forEach(function(c) { c.classList.remove('selected'); });
    var sbtn = document.getElementById('submitBtn');
    sbtn.disabled = true;
    sbtn.style.opacity = '.45';
    sbtn.style.cursor  = 'not-allowed';
    document.getElementById('submitHint').style.display = '';
}

function pickPlan(el) {
    document.querySelectorAll('.plan-card').forEach(function(c) { c.classList.remove('selected'); });
    el.classList.add('selected');

    document.getElementById('inp_nid').value    = el.dataset.nid;
    document.getElementById('inp_pid').value    = el.dataset.pid;
    document.getElementById('inp_uprice').value = el.dataset.uprice;
    document.getElementById('inp_aprice').value = el.dataset.aprice;
    document.getElementById('inp_label').value  = el.dataset.label;

    var sbtn = document.getElementById('submitBtn');
    sbtn.disabled = false;
    sbtn.style.opacity = '1';
    sbtn.style.cursor  = 'pointer';
    document.getElementById('submitHint').style.display = 'none';

    openPlanModal(el);
}

function openPlanModal(el) {
    var label  = document.getElementById('inp_label').value;
    var price  = parseInt(document.getElementById('inp_uprice').value, 10) || 0;

    var size = '', meta = '', net = '';
    if (el && el.dataset) {
        size = el.dataset.size  || '';
        meta = (el.dataset.day  || '') + (el.dataset.day ? ' day' + (parseInt(el.dataset.day)!==1?'s':'') : '') +
               (el.dataset.type ? ' · ' + el.dataset.type : '');
        net  = el.dataset.net   || '';
    } else {
        var parts = label.split(' ');
        size = parts[0] || '—';
        meta = parts.slice(1).join(' ');
    }

    var icon = netIcons[net] || '📶';

    document.getElementById('modalIcon').textContent      = icon;
    document.getElementById('modalPlanName').textContent  = size + (net ? ' — ' + net : '');
    document.getElementById('modalPlanMeta').textContent  = meta || label;
    document.getElementById('modalPlanPrice').textContent = '₦' + price.toLocaleString('en-NG');

    document.getElementById('planModalOverlay').classList.add('show');
    document.body.style.overflow = 'hidden';

    setTimeout(function() {
        var ph = document.getElementById('modalPhone');
        if (ph && !ph.value) ph.focus();
    }, 180);
}

function closePlanModal() {
    document.getElementById('planModalOverlay').classList.remove('show');
    document.body.style.overflow = '';
}

function overlayClick(e) {
    if (e.target === document.getElementById('planModalOverlay')) closePlanModal();
}

function clearPhoneError() {
    var msg = document.getElementById('phoneErrorMsg');
    var inp = document.getElementById('modalPhone');
    if (msg) msg.style.display = 'none';
    if (inp) inp.style.borderColor = '';
}

function submitDataForm() {
    var ph = document.getElementById('modalPhone').value.trim();
    if (!/^0[789][01]\d{8}$/.test(ph)) {
        var msg = document.getElementById('phoneErrorMsg');
        var inp = document.getElementById('modalPhone');
        msg.style.display = 'block';
        inp.style.borderColor = '#ef4444';
        inp.focus();
        return;
    }
    if (!document.getElementById('inp_pid').value) {
        alert('Please select a data plan first.');
        closePlanModal();
        return;
    }
    document.getElementById('inp_phone').value = ph;

    var form = document.getElementById('df');

    var btn = document.querySelector('.modal-confirm-btn');
    btn.textContent = 'Processing…';
    btn.disabled = true;
    btn.style.opacity = '.7';

    form.submit();
}

function closeResultModalDirect() {
    var el = document.getElementById('resultModalOverlay');
    if (el) el.classList.remove('show');
    document.body.style.overflow = '';
}
function closeResultModal(e) {
    if (e.target === document.getElementById('resultModalOverlay')) closeResultModalDirect();
}

document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closePlanModal();
        closeResultModalDirect();
    }
});
</script>

<?php include '../includes/footer.php'; ?>