<?php
$pageTitle = 'eSIM流量套餐';
require_once __DIR__ . '/config.php';
require_once __DIR__ . '/includes/header.php';
$pdo = getDB();

$search      = trim($_GET['search'] ?? '');
$type_filter = $_GET['type'] ?? '';
$sort        = $_GET['sort'] ?? 'sale_price_asc';
$coverage    = $_GET['coverage'] ?? '';
$page        = max(1, intval($_GET['page'] ?? 1));
$per_page    = 24;

$where  = ['1=1'];
$params = [];

if ($search) {
    $where[]  = "(name LIKE ? OR countries LIKE ? OR continent LIKE ?)";
    $params[] = "%$search%";
    $params[] = "%$search%";
    $params[] = "%$search%";
}
if ($type_filter) {
    $where[]  = "type = ?";
    $params[] = $type_filter;
}
if ($coverage === 'single') {
    $where[] = "countries NOT LIKE '%,%'";
} elseif ($coverage === 'multi') {
    $where[] = "countries LIKE '%,%'";
}

$order_map = [
    'sale_price_asc'  => 'sale_price ASC',
    'sale_price_desc' => 'sale_price DESC',
    'days_asc'        => 'days ASC',
    'days_desc'       => 'days DESC',
    'data_asc'        => 'data_mb ASC',
    'data_desc'       => 'data_mb DESC',
];
$order_sql  = $order_map[$sort] ?? 'sale_price ASC';
$where_sql  = implode(' AND ', $where);

$count_stmt = $pdo->prepare("SELECT COUNT(*) FROM packages WHERE $where_sql");
$count_stmt->execute($params);
$total       = $count_stmt->fetchColumn();
$total_pages = ceil($total / $per_page);
$offset      = ($page - 1) * $per_page;

$stmt = $pdo->prepare("SELECT * FROM packages WHERE $where_sql ORDER BY $order_sql LIMIT $per_page OFFSET $offset");
$stmt->execute($params);
$packages = $stmt->fetchAll();

// Devices for add-on
$devices      = $pdo->query("SELECT * FROM devices ORDER BY id")->fetchAll();
$shipping_fee = floatval(getSetting('shipping_fee') ?? 3.50);
$devices_json = json_encode(array_map(function($d){ return ['id'=>(int)$d['id'],'name'=>$d['name'],'price'=>(float)$d['price'],'description'=>$d['description']]; }, $devices));

// Load current user's eUICC cards for order association
$user_euiccs = [];
if (isLoggedIn()) {
    $eu_stmt = $pdo->prepare("SELECT id, euicc_number, nickname FROM euniccs WHERE user_id = ? ORDER BY created_at DESC");
    $eu_stmt->execute([$_SESSION['user_id']]);
    $user_euiccs = $eu_stmt->fetchAll();
}

function devIcon2($name) {
    if (strpos($name, '写卡器') !== false) return 'usb';
    if (strpos($name, '可编程') !== false) return 'microchip';
    return 'sim-card';
}
?>

<div class="container py-4">
    <h2 class="fw-bold mb-4"><i class="fas fa-wifi me-2 text-primary"></i>eSIM流量套餐</h2>

    <!-- Filter Section -->
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body p-3">
            <form method="GET" id="filter-form">
                <div class="row g-3 align-items-end">
                    <div class="col-md-4">
                        <label class="form-label fw-semibold small">搜索国家/地区</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-search"></i></span>
                            <input type="text" name="search" class="form-control" placeholder="输入国家名称..." value="<?php echo e($search); ?>">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label fw-semibold small">套餐类型</label>
                        <select name="type" class="form-select">
                            <option value="">全部类型</option>
                            <option value="总量套餐" <?php echo $type_filter==='总量套餐'?'selected':''; ?>>总量套餐</option>
                            <option value="用完限速" <?php echo $type_filter==='用完限速'?'selected':''; ?>>用完限速</option>
                            <option value="周期高速" <?php echo $type_filter==='周期高速'?'selected':''; ?>>周期高速</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label fw-semibold small">覆盖范围</label>
                        <select name="coverage" class="form-select">
                            <option value="">单国/多国</option>
                            <option value="single" <?php echo $coverage==='single'?'selected':''; ?>>单国优先</option>
                            <option value="multi" <?php echo $coverage==='multi'?'selected':''; ?>>多国联合</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label fw-semibold small">排序方式</label>
                        <select name="sort" class="form-select">
                            <option value="sale_price_asc" <?php echo $sort==='sale_price_asc'?'selected':''; ?>>价格 ↑</option>
                            <option value="sale_price_desc" <?php echo $sort==='sale_price_desc'?'selected':''; ?>>价格 ↓</option>
                            <option value="days_asc" <?php echo $sort==='days_asc'?'selected':''; ?>>时间 ↑</option>
                            <option value="days_desc" <?php echo $sort==='days_desc'?'selected':''; ?>>时间 ↓</option>
                            <option value="data_asc" <?php echo $sort==='data_asc'?'selected':''; ?>>流量 ↑</option>
                            <option value="data_desc" <?php echo $sort==='data_desc'?'selected':''; ?>>流量 ↓</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-primary w-100"><i class="fas fa-filter me-1"></i>筛选</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <p class="text-muted mb-3">共找到 <strong><?php echo $total; ?></strong> 个套餐</p>

    <div class="row g-3">
        <?php foreach ($packages as $pkg): ?>
        <div class="col-md-6 col-lg-4 col-xl-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-primary text-white py-2 px-3" style="border-radius:10px 10px 0 0;">
                    <h6 class="mb-0 text-truncate small fw-bold" title="<?php echo e($pkg['name']); ?>"><?php echo e($pkg['name']); ?></h6>
                    <small class="opacity-75"><?php echo e($pkg['continent'] ?? ''); ?></small>
                </div>
                <div class="card-body d-flex flex-column p-3">
                    <div class="text-center mb-2">
                        <div class="fs-5 fw-bold text-primary"><?php echo formatMB($pkg['data_mb']); ?></div>
                        <div class="text-muted small"><?php echo getDays($pkg['days'], $pkg['name']); ?> 天有效期</div>
                    </div>
                    <span class="badge bg-<?php echo $pkg['type']==='总量套餐'?'info':($pkg['type']==='用完限速'?'warning':'success'); ?> mb-2 align-self-start"><?php echo e($pkg['type']); ?></span>
                    <?php if ($pkg['countries']): ?>
                    <?php
                        $clist = array_filter(array_map('trim', explode(',', $pkg['countries'])));
                    ?>
                    <div class="countries-block mb-2 small text-muted">
                        <i class="fas fa-map-marker-alt me-1 text-danger"></i>
                        <?php echo e(implode('、', $clist)); ?>
                    </div>
                    <?php endif; ?>
                    <div class="text-center mt-auto mb-2">
                        <span class="fs-5 fw-bold text-primary">$<?php echo number_format($pkg['sale_price'], 2); ?></span>
                        <span class="text-muted small"> USD</span>
                    </div>
                    <button class="btn btn-primary btn-sm w-100"
                        onclick="openEsimModal(<?php echo $pkg['id']; ?>, '<?php echo e($pkg['name']); ?>', <?php echo $pkg['sale_price']; ?>)">
                        <i class="fas fa-shopping-cart me-1"></i>立即购买
                    </button>
                </div>
            </div>
        </div>
        <?php endforeach; ?>
    </div>

    <!-- Pagination -->
    <?php if ($total_pages > 1): ?>
    <nav class="mt-4">
        <ul class="pagination justify-content-center flex-wrap">
            <?php
            $qs = $_GET;
            for ($i = 1; $i <= min($total_pages, 20); $i++):
                $qs['page'] = $i;
            ?>
            <li class="page-item <?php echo $i===$page?'active':''; ?>">
                <a class="page-link" href="?<?php echo http_build_query($qs); ?>"><?php echo $i; ?></a>
            </li>
            <?php endfor; ?>
        </ul>
    </nav>
    <?php endif; ?>
</div>

<!-- ===== eSIM Order Modal ===== -->
<div class="modal fade" id="esimOrderModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-bold"><i class="fas fa-shopping-cart text-primary me-2"></i>下单确认</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="/checkout.php">
                <input type="hidden" name="order_type" value="esim">
                <input type="hidden" name="package_id" id="esim-pkg-id">
                <div class="modal-body pt-2">

                    <!-- Package summary -->
                    <div class="alert alert-primary d-flex justify-content-between align-items-center mb-4">
                        <div>
                            <strong id="esim-pkg-name"></strong>
                            <div class="small opacity-75">eSIM流量套餐</div>
                        </div>
                        <div class="fs-5 fw-bold">$<span id="esim-pkg-price">0.00</span> USD</div>
                    </div>

                    <!-- eUICC Card Association -->
                    <div class="mb-4">
                        <h6 class="fw-bold mb-2"><i class="fas fa-sim-card text-primary me-2"></i>eSIM 卡关联（可选）</h6>
                        <?php if (!empty($user_euiccs)): ?>
                        <div class="alert alert-light border p-3 mb-2">
                            <div class="mb-2 small text-muted"><i class="fas fa-info-circle me-1"></i>检测到您在卡管中心已登记有 eUICC 卡，可选择关联下单，也可选择「我有 eSIM 手机，自由下单」</div>
                            <div class="row g-2">
                                <div class="col-12">
                                    <label class="d-flex align-items-center gap-2 p-2 border rounded esim-euicc-option" style="cursor:pointer;background:#f8f5ff;">
                                        <input type="radio" name="euicc_id" value="" class="esim-euicc-radio" checked>
                                        <div>
                                            <div class="fw-semibold small"><i class="fas fa-mobile-alt text-success me-1"></i>我有 eSIM 手机，自由下单</div>
                                            <div class="text-muted" style="font-size:.75rem">管理员将发送二维码，您自行扫码安装</div>
                                        </div>
                                    </label>
                                </div>
                                <?php foreach ($user_euiccs as $eu): ?>
                                <div class="col-12">
                                    <label class="d-flex align-items-center gap-2 p-2 border rounded esim-euicc-option" style="cursor:pointer;">
                                        <input type="radio" name="euicc_id" value="<?php echo $eu['id']; ?>" class="esim-euicc-radio">
                                        <div>
                                            <div class="fw-semibold small"><i class="fas fa-sim-card text-primary me-1"></i><?php echo htmlspecialchars($eu['nickname']); ?></div>
                                            <div class="text-muted font-monospace" style="font-size:.72rem"><?php echo htmlspecialchars($eu['euicc_number']); ?></div>
                                        </div>
                                    </label>
                                </div>
                                <?php endforeach; ?>
                            </div>
                        </div>
                        <?php else: ?>
                        <div class="alert alert-light border p-3 mb-0">
                            <div class="d-flex align-items-center gap-2">
                                <i class="fas fa-mobile-alt text-success fa-lg"></i>
                                <div>
                                    <div class="fw-semibold small">我有 eSIM 手机，自由下单</div>
                                    <div class="text-muted" style="font-size:.75rem">管理员将发送二维码，您自行扫码安装。如需关联 eUICC 卡可先前往 <a href="/user/cards.php" target="_blank">卡管中心</a> 添加</div>
                                </div>
                            </div>
                            <input type="hidden" name="euicc_id" value="">
                        </div>
                        <?php endif; ?>
                    </div>

                    <!-- Add-on devices (data from DB via PHP) -->
                    <div class="mb-4">
                        <h6 class="fw-bold mb-2"><i class="fas fa-plus-circle text-success me-2"></i>可选搭配实体设备 <span class="badge bg-secondary fw-normal ms-1" style="font-size:.7rem">一次快递费</span></h6>
                        <div class="row g-2" id="esim-addon-container">
                            <?php foreach ($devices as $dev): ?>
                            <div class="col-md-4">
                                <label class="card border h-100 esim-addon-label position-relative" style="cursor:pointer;transition:all .2s;">
                                    <div class="card-body p-3 d-flex flex-column align-items-center text-center gap-1">
                                        <input type="checkbox" name="addon_devices[]" value="<?php echo (int)$dev['id']; ?>"
                                            data-price="<?php echo number_format((float)$dev['price'], 2, '.', ''); ?>"
                                            data-name="<?php echo htmlspecialchars($dev['name'], ENT_QUOTES); ?>"
                                            class="esim-addon-check visually-hidden">
                                        <i class="fas fa-<?php echo devIcon2($dev['name']); ?> fa-2x mb-1" style="color:#6c757d"></i>
                                        <div class="fw-semibold" style="font-size:.88rem;line-height:1.3"><?php echo htmlspecialchars($dev['name']); ?></div>
                                        <div class="fw-bold <?php echo $dev['price']>0?'text-primary':'text-success'; ?>" style="font-size:1rem">
                                            <?php echo $dev['price']>0 ? '$'.number_format((float)$dev['price'],2) : '<span class="badge bg-success">免费</span>'; ?>
                                        </div>
                                        <small class="text-muted" style="font-size:.75rem;line-height:1.4"><?php echo htmlspecialchars($dev['description']); ?></small>
                                        <span class="esim-addon-check-icon position-absolute top-0 end-0 m-2" style="display:none"><i class="fas fa-check-circle text-success"></i></span>
                                    </div>
                                </label>
                            </div>
                            <?php endforeach; ?>
                        </div>
                        <div class="text-muted small mt-2"><i class="fas fa-info-circle me-1 text-primary"></i>选购设备后需填写收货地址，全单只收一次快递费 <strong>$<?php echo number_format($shipping_fee,2); ?> USD</strong></div>
                    </div>

                    <!-- Shipping address -->
                    <div id="esim-shipping-section" style="display:none;">
                        <h6 class="fw-bold mb-3"><i class="fas fa-truck text-warning me-2"></i>收货地址</h6>
                        <?php if (isLoggedIn()): $u = getCurrentUser(); ?>
                        <?php if (!empty($u['address'])): ?>
                        <div class="alert alert-light border mb-3 p-3">
                            <div class="mb-2 fw-semibold"><i class="fas fa-map-marker-alt text-danger me-2"></i>已保存地址</div>
                            <div class="text-muted small mb-2"><?php echo e(($u['province']??'').' '.($u['city']??'').' '.($u['address']??'')); ?></div>
                            <div class="d-flex gap-4">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="use_saved_address" value="1" id="esimUseSaved" checked onchange="esimToggleAddr()">
                                    <label class="form-check-label small" for="esimUseSaved">使用此地址</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="use_saved_address" value="0" id="esimUseNew" onchange="esimToggleAddr()">
                                    <label class="form-check-label small" for="esimUseNew">填写新地址</label>
                                </div>
                            </div>
                        </div>
                        <?php endif; ?>
                        <?php endif; ?>
                        <div id="esim-new-address-form" <?php echo (isLoggedIn() && !empty(getCurrentUser()['address']??'')) ? 'style="display:none;"' : ''; ?>>
                            <div class="row g-3">
                                <div class="col-md-6"><label class="form-label">收件人姓名 <span class="text-danger">*</span></label><input type="text" name="ship_name" class="form-control" placeholder="真实姓名"></div>
                                <div class="col-md-6"><label class="form-label">联系电话 <span class="text-danger">*</span></label><input type="text" name="ship_phone" class="form-control" placeholder="手机号码"></div>
                                <div class="col-md-4"><label class="form-label">省/州 <span class="text-danger">*</span></label><input type="text" name="ship_province" class="form-control"></div>
                                <div class="col-md-4"><label class="form-label">城市 <span class="text-danger">*</span></label><input type="text" name="ship_city" class="form-control"></div>
                                <div class="col-md-4"><label class="form-label">邮政编码</label><input type="text" name="ship_zip" class="form-control"></div>
                                <div class="col-12"><label class="form-label">详细地址 <span class="text-danger">*</span></label><input type="text" name="ship_address" class="form-control" placeholder="街道、门牌号等"></div>
                            </div>
                        </div>
                    </div>

                    <!-- Price summary -->
                    <div class="card bg-light border-0 mt-4">
                        <div class="card-body p-3">
                            <div class="d-flex justify-content-between mb-1 text-muted small">
                                <span>套餐费用</span><span>$<span id="esim-sum-pkg">0.00</span> USD</span>
                            </div>
                            <div class="d-flex justify-content-between mb-1 text-muted small" id="esim-sum-dev-row" style="display:none!important;">
                                <span>设备费用</span><span>$<span id="esim-sum-dev">0.00</span> USD</span>
                            </div>
                            <div class="d-flex justify-content-between mb-1 text-muted small" id="esim-sum-ship-row" style="display:none!important;">
                                <span>快递费</span><span>$<span id="esim-sum-ship"><?php echo number_format($shipping_fee,2); ?></span> USD</span>
                            </div>
                            <hr class="my-2">
                            <div class="d-flex justify-content-between fw-bold fs-5">
                                <span>合计</span>
                                <span class="text-primary">$<span id="esim-sum-total">0.00</span> USD</span>
                            </div>
                        </div>
                    </div>

                    <!-- Payment method -->
                    <h6 class="fw-bold mt-4 mb-3"><i class="fas fa-credit-card text-primary me-2"></i>选择支付方式</h6>
                    <div class="row g-2">
                        <div class="col-md-4">
                            <label class="card border esim-pay-label h-100" style="cursor:pointer;">
                                <div class="card-body p-3 text-center">
                                    <input type="radio" name="payment_method" value="usdt" class="visually-hidden esim-pay-radio" required>
                                    <div class="fw-bold">USDT</div><div class="small text-muted">TRC20链自动入账</div>
                                </div>
                            </label>
                        </div>
                        <div class="col-md-4">
                            <label class="card border esim-pay-label h-100" style="cursor:pointer;">
                                <div class="card-body p-3 text-center">
                                    <input type="radio" name="payment_method" value="wechat" class="visually-hidden esim-pay-radio">
                                    <div class="fw-bold">微信支付</div><div class="small text-muted">*去你妈的马化腾</div>
                                </div>
                            </label>
                        </div>
                        <div class="col-md-4">
                            <label class="card border esim-pay-label h-100" style="cursor:pointer;">
                                <div class="card-body p-3 text-center">
                                    <input type="radio" name="payment_method" value="card" class="visually-hidden esim-pay-radio">
                                    <div class="fw-bold">银行卡(银联)</div><div class="small text-muted">Visa/Master/Apple Pay</div>
                                </div>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary btn-lg px-5">
                        <i class="fas fa-lock me-2"></i>确认下单 $<span id="esim-btn-total">0.00</span> USD
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
const ESIM_SHIPPING = <?php echo $shipping_fee; ?>;
const ESIM_DEVICES  = <?php echo $devices_json; ?>;
let esimPkgPrice = 0;

function openEsimModal(pkgId, pkgName, pkgPrice) {
    <?php if (!isLoggedIn()): ?>
    window.location.href = '/login.php?redirect=' + encodeURIComponent(window.location.pathname);
    return;
    <?php endif; ?>
    document.getElementById('esim-pkg-id').value = pkgId;
    document.getElementById('esim-pkg-name').textContent = pkgName;
    document.getElementById('esim-pkg-price').textContent = parseFloat(pkgPrice).toFixed(2);
    esimPkgPrice = parseFloat(pkgPrice);
    document.querySelectorAll('.esim-addon-check').forEach(c => { c.checked = false; });
    document.querySelectorAll('.esim-addon-label').forEach(l => {
        l.classList.remove('border-success','bg-success-subtle');
        l.style.boxShadow = '';
        const icon = l.querySelector('.esim-addon-check-icon');
        if (icon) icon.style.display = 'none';
    });
    document.getElementById('esim-shipping-section').style.display = 'none';
    esimUpdateTotal();
    highlightDefaultEuicc();
    new bootstrap.Modal(document.getElementById('esimOrderModal')).show();
}

document.querySelectorAll('.esim-addon-label').forEach(label => {
    label.addEventListener('click', function(e) {
        e.preventDefault();
        const cb = this.querySelector('.esim-addon-check');
        cb.checked = !cb.checked;
        this.classList.toggle('border-success', cb.checked);
        this.classList.toggle('bg-success-subtle', cb.checked);
        this.style.boxShadow = cb.checked ? '0 0 0 2px #198754' : '';
        const icon = this.querySelector('.esim-addon-check-icon');
        if (icon) icon.style.display = cb.checked ? 'inline' : 'none';
        const any = Array.from(document.querySelectorAll('.esim-addon-check')).some(c => c.checked);
        document.getElementById('esim-shipping-section').style.display = any ? 'block' : 'none';
        esimUpdateTotal();
    });
});

function esimToggleAddr() {
    const saved = document.getElementById('esimUseSaved');
    const form  = document.getElementById('esim-new-address-form');
    if (form) form.style.display = (saved && saved.checked) ? 'none' : 'block';
}

function esimUpdateTotal() {
    let devTotal = 0, devCount = 0;
    document.querySelectorAll('.esim-addon-check:checked').forEach(c => {
        devTotal += parseFloat(c.dataset.price || 0);
        devCount++;
    });
    const shipTotal = devCount > 0 ? ESIM_SHIPPING : 0;
    const total = esimPkgPrice + devTotal + shipTotal;

    document.getElementById('esim-sum-pkg').textContent   = esimPkgPrice.toFixed(2);
    document.getElementById('esim-sum-dev').textContent   = devTotal.toFixed(2);
    document.getElementById('esim-sum-ship').textContent  = shipTotal.toFixed(2);
    document.getElementById('esim-sum-total').textContent = total.toFixed(2);
    document.getElementById('esim-btn-total').textContent = total.toFixed(2);

    const dr = document.getElementById('esim-sum-dev-row');
    const sr = document.getElementById('esim-sum-ship-row');
    if (devCount > 0) {
        dr.style.cssText = 'display:flex!important;justify-content:space-between;margin-bottom:.25rem;';
        sr.style.cssText = 'display:flex!important;justify-content:space-between;margin-bottom:.25rem;';
    } else {
        dr.style.cssText = 'display:none!important;';
        sr.style.cssText = 'display:none!important;';
    }
}

// eUICC option selection highlight
document.querySelectorAll('.esim-euicc-option').forEach(label => {
    label.addEventListener('click', function() {
        document.querySelectorAll('.esim-euicc-option').forEach(l => {
            l.classList.remove('border-primary', 'bg-primary-subtle');
        });
        this.classList.add('border-primary', 'bg-primary-subtle');
        const radio = this.querySelector('.esim-euicc-radio');
        if (radio) radio.checked = true;
    });
});
// Highlight default selected on modal open
function highlightDefaultEuicc() {
    document.querySelectorAll('.esim-euicc-radio').forEach(r => {
        r.closest('.esim-euicc-option').classList.toggle('border-primary', r.checked);
        r.closest('.esim-euicc-option').classList.toggle('bg-primary-subtle', r.checked);
    });
}

document.querySelectorAll('.esim-pay-label').forEach(label => {
    label.addEventListener('click', function() {
        document.querySelectorAll('.esim-pay-label').forEach(l => l.classList.remove('border-primary','bg-primary-subtle'));
        this.classList.add('border-primary','bg-primary-subtle');
        this.querySelector('.esim-pay-radio').checked = true;
    });
});
</script>

<?php require_once __DIR__ . '/includes/footer.php'; ?>
