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

$sort = $_GET['sort'] ?? 'sale_price_asc';
$page = max(1, intval($_GET['page'] ?? 1));
$per_page = 24;

$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 = "(countries LIKE '%中国%' OR countries LIKE '%大陆%' OR name LIKE '%中国%' OR name LIKE '%大陆%' OR name LIKE '%中港%' OR name LIKE '%中日%')";

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

$stmt = $pdo->prepare("SELECT * FROM packages WHERE $where ORDER BY $order_sql LIMIT $per_page OFFSET $offset");
$stmt->execute();
$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
$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 chinaDevIcon($name) {
    if (strpos($name, '写卡器') !== false) return 'usb';
    if (strpos($name, '可编程') !== false) return 'microchip';
    return 'sim-card';
}
?>

<div class="container py-4">
    <div class="d-flex align-items-center mb-4">
        <div>
            <h2 class="fw-bold mb-1"><i class="fas fa-flag me-2 text-danger"></i>大陆流量套餐</h2>
            <p class="text-muted mb-0">专为中国大陆用户推荐，支持在中国大陆使用的eSIM流量套餐</p>
        </div>
    </div>

    <!-- Sort Bar -->
    <div class="filter-section mb-4">
        <form method="GET" id="filter-form" class="row g-3 align-items-end">
            <div class="col-md-3">
                <label class="form-label fw-semibold">排序方式</label>
                <select name="sort" id="sort-select" 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"><i class="fas fa-sort me-1"></i>排序</button>
            </div>
        </form>
    </div>

    <p class="text-muted mb-3">共找到 <strong><?php echo $total; ?></strong> 个适合大陆使用的套餐</p>

    <div class="row g-4">
        <?php foreach ($packages as $pkg): ?>
        <div class="col-md-6 col-lg-4 col-xl-3">
            <div class="package-card card h-100">
                <div class="card-header" style="background: linear-gradient(135deg, #dc3545, #fd7e14);">
                    <h6 class="mb-0 text-truncate" title="<?php echo htmlspecialchars($pkg['name']); ?>"><?php echo htmlspecialchars($pkg['name']); ?></h6>
                    <small><?php echo htmlspecialchars($pkg['continent'] ?? '亚洲'); ?></small>
                </div>
                <div class="card-body d-flex flex-column">
                    <div class="text-center mb-3">
                        <div class="data-info"><?php echo formatMB($pkg['data_mb']); ?></div>
                        <div class="text-muted"><?php echo getDays($pkg['days'], $pkg['name']); ?> 天有效期</div>
                    </div>
                    <span class="badge bg-<?php echo $pkg['type'] === '总量套餐' ? 'info' : ($pkg['type'] === '用完限速' ? 'warning' : 'success'); ?> badge-type mb-2"><?php echo htmlspecialchars($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 htmlspecialchars(implode('、', $clist)); ?>
                    </div>
                    <?php endif; ?>
                    <div class="price text-center mt-auto">$<?php echo number_format($pkg['sale_price'], 2); ?></div>
                    <button class="btn btn-danger mt-2"
                        onclick="openChinaModal(<?php echo $pkg['id']; ?>, '<?php echo htmlspecialchars(addslashes($pkg['name'])); ?>', <?php echo $pkg['sale_price']; ?>)">
                        <i class="fas fa-shopping-cart me-1"></i>立即购买
                    </button>
                </div>
            </div>
        </div>
        <?php endforeach; ?>
    </div>

    <?php if ($total_pages > 1): ?>
    <nav class="mt-4">
        <ul class="pagination justify-content-center flex-wrap gap-1">
            <?php
            if ($page > 1): ?>
            <li class="page-item"><a class="page-link" href="?<?php echo http_build_query(array_merge($_GET, ['page' => $page - 1])); ?>">&laquo;</a></li>
            <?php endif;
            $shown = [];
            for ($i = 1; $i <= $total_pages; $i++) {
                if ($i === 1 || $i === $total_pages || ($i >= $page - 2 && $i <= $page + 2)) $shown[] = $i;
            }
            $prev = null;
            foreach ($shown as $i):
                if ($prev !== null && $i - $prev > 1): ?>
                <li class="page-item disabled"><span class="page-link px-2">&hellip;</span></li>
                <?php endif; ?>
                <li class="page-item <?php echo $i === $page ? 'active' : ''; ?>">
                    <a class="page-link" href="?<?php echo http_build_query(array_merge($_GET, ['page' => $i])); ?>"><?php echo $i; ?></a>
                </li>
            <?php $prev = $i; endforeach;
            if ($page < $total_pages): ?>
            <li class="page-item"><a class="page-link" href="?<?php echo http_build_query(array_merge($_GET, ['page' => $page + 1])); ?>">&raquo;</a></li>
            <?php endif; ?>
        </ul>
    </nav>
    <?php endif; ?>
</div>

<!-- ===== Purchase Modal ===== -->
<div class="modal fade" id="chinaOrderModal" 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-danger 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="china-pkg-id">
                <div class="modal-body pt-2">

                    <!-- Package summary -->
                    <div class="alert alert-danger d-flex justify-content-between align-items-center mb-4">
                        <div>
                            <strong id="china-pkg-name"></strong>
                            <div class="small opacity-75">大陆流量套餐</div>
                        </div>
                        <div class="fs-5 fw-bold">$<span id="china-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 china-euicc-option" style="cursor:pointer;background:#f8f5ff;">
                                        <input type="radio" name="euicc_id" value="" class="china-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 china-euicc-option" style="cursor:pointer;">
                                        <input type="radio" name="euicc_id" value="<?php echo $eu['id']; ?>" class="china-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">
                            <div class="d-flex align-items-start gap-2">
                                <i class="fas fa-mobile-alt text-success mt-1"></i>
                                <div>
                                    <div class="fw-semibold small">我有 eSIM 手机，自由下单</div>
                                    <div class="text-muted" style="font-size:.8rem">管理员将发送二维码，您自行扫码安装。如需关联 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="china-addon-container">
                            <?php foreach ($devices as $dev): ?>
                            <div class="col-md-4">
                                <label class="card border h-100 china-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="china-addon-check visually-hidden">
                                        <i class="fas fa-<?php echo chinaDevIcon($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="china-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 (shown only when device selected) -->
                    <div id="china-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()): $cu = getCurrentUser(); ?>
                        <?php if (!empty($cu['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 htmlspecialchars(($cu['province'] ?? '') . ' ' . ($cu['city'] ?? '') . ' ' . ($cu['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="chinaUseSaved" checked onchange="chinaToggleAddr()">
                                    <label class="form-check-label small" for="chinaUseSaved">使用此地址</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="use_saved_address" value="0" id="chinaUseNew" onchange="chinaToggleAddr()">
                                    <label class="form-check-label small" for="chinaUseNew">填写新地址</label>
                                </div>
                            </div>
                        </div>
                        <?php endif; ?>
                        <?php endif; ?>
                        <div id="china-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="china-sum-pkg">0.00</span> USD</span>
                            </div>
                            <div class="d-flex justify-content-between mb-1 text-muted small" id="china-sum-dev-row" style="display:none!important;">
                                <span>设备费用</span><span>$<span id="china-sum-dev">0.00</span> USD</span>
                            </div>
                            <div class="d-flex justify-content-between mb-1 text-muted small" id="china-sum-ship-row" style="display:none!important;">
                                <span>快递费</span><span>$<span id="china-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-danger">$<span id="china-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 china-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 china-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 china-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 china-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 china-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 china-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-danger btn-lg px-5" id="china-submit-btn">
                        <i class="fas fa-lock me-2"></i>确认下单 $<span id="china-btn-total">0.00</span> USD
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
const CHINA_SHIPPING = <?php echo $shipping_fee; ?>;
const CHINA_DEVICES  = <?php echo $devices_json; ?>;
let chinaPkgPrice = 0;

function openChinaModal(pkgId, pkgName, pkgPrice) {
    <?php if (!isLoggedIn()): ?>
    window.location.href = '/login.php?redirect=' + encodeURIComponent(window.location.pathname);
    return;
    <?php endif; ?>
    document.getElementById('china-pkg-id').value = pkgId;
    document.getElementById('china-pkg-name').textContent = pkgName;
    document.getElementById('china-pkg-price').textContent = parseFloat(pkgPrice).toFixed(2);
    chinaPkgPrice = parseFloat(pkgPrice);
    // Reset addons
    document.querySelectorAll('.china-addon-check').forEach(c => { c.checked = false; });
    document.querySelectorAll('.china-addon-label').forEach(l => {
        l.classList.remove('border-success', 'bg-success-subtle');
        l.style.boxShadow = '';
        const icon = l.querySelector('.china-addon-check-icon');
        if (icon) icon.style.display = 'none';
    });
    document.getElementById('china-shipping-section').style.display = 'none';
    // Reset payment
    document.querySelectorAll('.china-pay-label').forEach(l => l.classList.remove('border-danger', 'bg-danger-subtle'));
    document.querySelectorAll('.china-pay-radio').forEach(r => r.checked = false);
    // Highlight default eUICC
    document.querySelectorAll('.china-euicc-option').forEach(l => {
        const r = l.querySelector('.china-euicc-radio');
        l.classList.toggle('border-primary', r && r.checked);
        l.classList.toggle('bg-primary-subtle', r && r.checked);
    });
    chinaUpdateTotal();
    new bootstrap.Modal(document.getElementById('chinaOrderModal')).show();
}

document.querySelectorAll('.china-addon-label').forEach(function(label) {
    label.addEventListener('click', function(e) {
        e.preventDefault();
        var cb = this.querySelector('.china-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' : '';
        var icon = this.querySelector('.china-addon-check-icon');
        if (icon) icon.style.display = cb.checked ? 'inline' : 'none';
        var any = Array.from(document.querySelectorAll('.china-addon-check')).some(function(c) { return c.checked; });
        document.getElementById('china-shipping-section').style.display = any ? 'block' : 'none';
        chinaUpdateTotal();
    });
});

function chinaToggleAddr() {
    var saved = document.getElementById('chinaUseSaved');
    var form  = document.getElementById('china-new-address-form');
    if (form) form.style.display = (saved && saved.checked) ? 'none' : 'block';
}

function chinaUpdateTotal() {
    var devTotal = 0, devCount = 0;
    document.querySelectorAll('.china-addon-check:checked').forEach(function(c) {
        devTotal += parseFloat(c.dataset.price || 0);
        devCount++;
    });
    var shipTotal = devCount > 0 ? CHINA_SHIPPING : 0;
    var total = chinaPkgPrice + devTotal + shipTotal;

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

    var dr = document.getElementById('china-sum-dev-row');
    var sr = document.getElementById('china-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;';
    }
}

document.querySelectorAll('.china-euicc-option').forEach(function(label) {
    label.addEventListener('click', function() {
        document.querySelectorAll('.china-euicc-option').forEach(function(l) {
            l.classList.remove('border-primary', 'bg-primary-subtle');
        });
        this.classList.add('border-primary', 'bg-primary-subtle');
        var radio = this.querySelector('.china-euicc-radio');
        if (radio) radio.checked = true;
    });
});

document.querySelectorAll('.china-pay-label').forEach(function(label) {
    label.addEventListener('click', function() {
        document.querySelectorAll('.china-pay-label').forEach(function(l) { l.classList.remove('border-danger', 'bg-danger-subtle'); });
        this.classList.add('border-danger', 'bg-danger-subtle');
        this.querySelector('.china-pay-radio').checked = true;
    });
});

document.getElementById('chinaOrderModal').querySelector('form').addEventListener('submit', function(e) {
    var method = this.querySelector('.china-pay-radio:checked');
    if (!method) {
        e.preventDefault();
        alert('请先选择支付方式');
    }
});
</script>
<?php require_once 'includes/footer.php'; ?>
