<?php
$pageTitle = '实体设备购买';
require_once __DIR__ . '/config.php';
require_once __DIR__ . '/includes/header.php';
$pdo = getDB();

$devices      = $pdo->query("SELECT * FROM devices ORDER BY id")->fetchAll();
$shipping_fee = floatval(getSetting('shipping_fee_default') ?? 3.50);
$carrier      = getSetting('shipping_carrier') ?? '顺丰速运 / SF Express';
$ship_note    = getSetting('shipping_note') ?? '通常3-7个工作日送达';

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

<div class="container py-4">
    <div class="row">
        <!-- 左侧导航条（与 user/phone-orders.php 完全一致） -->
        <div class="col-md-3">
            <?php include __DIR__ . '/user/sidebar.php'; ?>
        </div>

        <!-- 右侧主内容 -->
        <div class="col-md-9">
            <div class="text-center mb-4">
                <h4 class="fw-bold">实体设备购买</h4>
                <p class="text-muted">可选购免费SIM实体卡、可编程SIM实体卡及写卡器，<strong>全单只收一次快递费 $<?php echo number_format($shipping_fee,2); ?> USD</strong></p>
            </div>

            <!-- Device cards -->
            <div class="row g-4 justify-content-center mb-4">
                <?php foreach ($devices as $dev): ?>
                <div class="col-md-4">
                    <div class="card border-0 shadow h-100 dev-select-card" id="dev-card-<?php echo $dev['id']; ?>"
                         style="cursor:pointer;transition:.25s;border:2px solid transparent!important;"
                         onclick="toggleDevice(<?php echo $dev['id']; ?>, <?php echo $dev['price']; ?>, '<?php echo e($dev['name']); ?>')">
                        <div class="card-body p-4 text-center d-flex flex-column">
                            <div class="mb-3">
                                <i class="fas fa-<?php echo devIcon3($dev['name']); ?> fa-3x text-<?php echo devColor($dev['name']); ?>"></i>
                            </div>
                            <h5 class="fw-bold mb-2"><?php echo e($dev['name']); ?></h5>
                            <p class="text-muted small mb-3"><?php echo e($dev['description']); ?></p>
                            <div class="mt-auto mb-3">
                                <?php if ($dev['price'] > 0): ?>
                                <span class="fs-3 fw-bold text-primary">$<?php echo number_format($dev['price'],2); ?></span>
                                <span class="text-muted"> USD</span>
                                <?php else: ?>
                                <span class="fs-3 fw-bold text-success">免费</span>
                                <div class="text-muted small">仅需支付快递费</div>
                                <?php endif; ?>
                            </div>
                            <div class="select-badge">
                                <span class="badge bg-light text-muted border px-3 py-2 selected-no">点击选择</span>
                                <span class="badge bg-primary px-3 py-2 selected-yes d-none"><i class="fas fa-check me-1"></i>已选择</span>
                            </div>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>

            <!-- Shipping info -->
            <div class="alert alert-info mb-4">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <h6 class="fw-bold mb-1"><i class="fas fa-truck me-2"></i>快递配送</h6>
                        <div class="small">快递公司：<strong><?php echo e($carrier); ?></strong> &nbsp;|&nbsp; 快递费：<strong>$<?php echo number_format($shipping_fee,2); ?> USD</strong>（全单一次收取）</div>
                        <div class="small text-muted mt-1"><?php echo e($ship_note); ?></div>
                    </div>
                    <div class="col-md-4 text-md-end">
                        <div class="fs-4 fw-bold text-info">$<?php echo number_format($shipping_fee,2); ?> USD</div>
                        <div class="small text-muted">快递费（无论几件）</div>
                    </div>
                </div>
            </div>

            <!-- Order form -->
            <form method="POST" action="/checkout.php" id="deviceForm" onsubmit="return validateDeviceForm()">
                <input type="hidden" name="order_type" value="device">
                <div id="selected-devices-inputs"></div>

                <!-- Shipping address -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-body p-4">
                        <h5 class="fw-bold mb-4"><i class="fas fa-map-marker-alt text-danger me-2"></i>收货地址</h5>
                        <?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="devUseSaved" checked onchange="devToggleAddr()">
                                    <label class="form-check-label small" for="devUseSaved">使用此地址</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="use_saved_address" value="0" id="devUseNew" onchange="devToggleAddr()">
                                    <label class="form-check-label small" for="devUseNew">填写新地址</label>
                                </div>
                            </div>
                        </div>
                        <?php endif; ?>
                        <?php endif; ?>
                        <div id="dev-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" placeholder="省份/州">
                                </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" placeholder="城市">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">邮政编码</label>
                                    <input type="text" name="ship_zip" class="form-control" placeholder="邮编">
                                </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>
                </div>

                <!-- Price summary -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-body p-4">
                        <h5 class="fw-bold mb-3"><i class="fas fa-receipt text-primary me-2"></i>费用明细</h5>
                        <div id="dev-items-list" class="mb-3">
                            <div class="text-muted small"><em>请先选择要购买的设备</em></div>
                        </div>
                        <div class="d-flex justify-content-between mb-2 text-muted">
                            <span>设备费用</span><span>$<span id="dev-sum-items">0.00</span> USD</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2 text-muted" id="dev-ship-row" style="display:none!important;">
                            <span>快递费</span><span>$<span id="dev-sum-ship"><?php echo number_format($shipping_fee,2); ?></span> USD</span>
                        </div>
                        <hr>
                        <div class="d-flex justify-content-between fw-bold fs-5">
                            <span>合计</span>
                            <span class="text-primary">$<span id="dev-sum-total">0.00</span> USD</span>
                        </div>
                    </div>
                </div>

                <!-- Payment method -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-body p-4">
                        <h5 class="fw-bold mb-3"><i class="fas fa-credit-card text-primary me-2"></i>选择支付方式</h5>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="card border dev-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 dev-pay-radio" required>
                                        <i class="fas fa-coins fa-2x text-warning mb-2 d-block"></i>
                                        <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 dev-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 dev-pay-radio">
                                        <i class="fab fa-weixin fa-2x text-success mb-2 d-block"></i>
                                        <div class="fw-bold">微信支付</div><div class="small text-muted">*去你妈的马化腾</div>
                                    </div>
                                </label>
                            </div>
                            <div class="col-md-4">
                                <label class="card border dev-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 dev-pay-radio">
                                        <i class="fas fa-credit-card fa-2x text-primary mb-2 d-block"></i>
                                        <div class="fw-bold">银联卡</div><div class="small text-muted">Visa/Master/Apple Pay</div>
                                    </div>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <button type="submit" class="btn btn-primary btn-lg w-100" id="dev-submit-btn" disabled>
                    <i class="fas fa-lock me-2"></i>确认下单 $<span id="dev-btn-total">0.00</span> USD
                </button>
            </form>
        </div><!-- /col-md-9 -->
    </div><!-- /row -->
</div><!-- /container -->

<script>
const DEV_SHIPPING = <?php echo $shipping_fee; ?>;
const selectedDevices = {};

function toggleDevice(id, price, name) {
    <?php if (!isLoggedIn()): ?>
    window.location.href = '/login.php?redirect=' + encodeURIComponent(window.location.pathname);
    return;
    <?php endif; ?>
    const card = document.getElementById('dev-card-' + id);
    if (selectedDevices[id]) {
        delete selectedDevices[id];
        card.style.borderColor = 'transparent';
        card.classList.remove('shadow-lg');
        card.querySelector('.selected-yes').classList.add('d-none');
        card.querySelector('.selected-no').classList.remove('d-none');
    } else {
        selectedDevices[id] = { price: parseFloat(price), name: name };
        card.style.borderColor = '#0d6efd';
        card.classList.add('shadow-lg');
        card.querySelector('.selected-yes').classList.remove('d-none');
        card.querySelector('.selected-no').classList.add('d-none');
    }
    updateDeviceTotal();
}

function updateDeviceTotal() {
    let itemTotal = 0;
    const inputContainer = document.getElementById('selected-devices-inputs');
    inputContainer.innerHTML = '';
    const listEl = document.getElementById('dev-items-list');
    listEl.innerHTML = '';

    const keys = Object.keys(selectedDevices);
    if (keys.length === 0) {
        listEl.innerHTML = '<div class="text-muted small"><em>请先选择要购买的设备</em></div>';
    } else {
        keys.forEach(id => {
            const d = selectedDevices[id];
            itemTotal += d.price;
            const inp = document.createElement('input');
            inp.type = 'hidden'; inp.name = 'device_ids[]'; inp.value = id;
            inputContainer.appendChild(inp);
            const li = document.createElement('div');
            li.className = 'd-flex justify-content-between mb-1 small';
            li.innerHTML = `<span><i class="fas fa-check-circle text-success me-2"></i>${d.name}</span><span class="fw-semibold">${d.price > 0 ? '$' + d.price.toFixed(2) + ' USD' : '免费'}</span>`;
            listEl.appendChild(li);
        });
    }

    const hasItems = keys.length > 0;
    const shipTotal = hasItems ? DEV_SHIPPING : 0;
    const total = itemTotal + shipTotal;

    document.getElementById('dev-sum-items').textContent = itemTotal.toFixed(2);
    document.getElementById('dev-sum-ship').textContent  = shipTotal.toFixed(2);
    document.getElementById('dev-sum-total').textContent = total.toFixed(2);
    document.getElementById('dev-btn-total').textContent = total.toFixed(2);

    const shipRow = document.getElementById('dev-ship-row');
    shipRow.style.cssText = hasItems
        ? 'display:flex!important;justify-content:space-between;margin-bottom:.5rem;'
        : 'display:none!important;';

    document.getElementById('dev-submit-btn').disabled = !hasItems;
}

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

function validateDeviceForm() {
    if (Object.keys(selectedDevices).length === 0) {
        alert('请先选择要购买的设备！');
        return false;
    }
    return true;
}

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

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