<?php
include __DIR__ . '/../layouts/header.php';
?>

<div class="container" style="max-width: 600px; margin: 2rem auto; padding: 0 20px;">
    <div class="card" style="background:#fff; border-radius:16px; padding:2rem; box-shadow:0 4px 24px rgba(0,0,0,0.06); border:1px solid rgba(0,0,0,0.04);">
        <h2 style="font-size:1.4rem; font-weight:700; margin-bottom:0.3rem; display:flex; align-items:center; gap:0.5rem;">
            📤 Upload Bukti Pembayaran
        </h2>
        <p style="color:var(--gray-500); font-size:0.9rem; margin-bottom:1.8rem; border-bottom:1px solid var(--gray-100); padding-bottom:0.8rem;">
            Upload bukti transfer untuk pesanan <strong><?= htmlspecialchars($pesanan['kode_pesanan']) ?></strong>
        </p>

        <?php if(isset($error)): ?>
            <div style="background:#fee2e2; color:#991b1b; padding:0.8rem 1.2rem; border-radius:10px; border-left:4px solid var(--danger); margin-bottom:1.2rem;">
                ⚠️ <?= htmlspecialchars($error) ?>
            </div>
        <?php endif; ?>

        <div style="background:var(--gray-50); border-radius:10px; padding:1rem 1.2rem; margin-bottom:1.5rem; border:1px solid var(--gray-200);">
            <div style="display:grid; grid-template-columns:1fr 1fr; gap:0.3rem 1rem; font-size:0.9rem;">
                <div><strong>Kode Pesanan</strong></div>
                <div><?= htmlspecialchars($pesanan['kode_pesanan']) ?></div>
                <div><strong>Total</strong></div>
                <div style="font-weight:700; color:var(--primary);">Rp <?= number_format($pesanan['total_harga'], 0, ',', '.') ?></div>
                <div><strong>Status</strong></div>
                <div><?= ucfirst($pesanan['status_pesanan']) ?></div>
            </div>
        </div>

        <form method="POST" enctype="multipart/form-data">
            <div style="margin-bottom:1.2rem;">
                <label style="display:block; font-weight:600; font-size:0.9rem; color:var(--gray-700); margin-bottom:0.3rem;">Pilih File Bukti</label>
                <input type="file" name="bukti" accept="image/*" required style="width:100%; padding:0.5rem; border:1.5px solid var(--gray-200); border-radius:10px; background:var(--gray-50);">
                <span style="font-size:0.8rem; color:var(--gray-400);">Format JPG, PNG, JPEG. Maks 2MB.</span>
            </div>

            <div style="display:flex; gap:1rem; margin-top:1.8rem; padding-top:1.2rem; border-top:1px solid var(--gray-100);">
                <button type="submit" class="btn" style="flex:1; justify-content:center; padding:0.8rem; font-size:1rem; border-radius:10px;">
                    📤 Upload Bukti
                </button>
                <a href="?page=wisatawan&action=status&id=<?= $pesanan['id'] ?>" class="btn btn-secondary" style="flex:0.5; justify-content:center; padding:0.8rem; border-radius:10px; text-align:center;">Kembali</a>
            </div>
        </form>
    </div>
</div>

<style>
    .btn {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.4rem 1rem;
        background: var(--primary);
        color: #fff;
        border: none;
        border-radius: 6px;
        font-weight: 600;
        font-size: 0.8rem;
        cursor: pointer;
        transition: var(--transition);
        text-decoration: none;
    }
    .btn:hover {
        background: var(--primary-light);
        transform: translateY(-1px);
        color: #fff;
    }
    .btn-secondary {
        background: var(--gray-200);
        color: var(--gray-700);
    }
    .btn-secondary:hover {
        background: var(--gray-300);
        color: var(--gray-800);
    }
</style>

<?php include __DIR__ . '/../layouts/footer.php'; ?>