<?php
session_start();
include 'includes/header.php';
include 'includes/sidebar.php';
include 'includes/connect.php';

$order_id = $_GET['order_id'] ?? '';
?>

<style>
body{
    font-family: "Segoe UI", Roboto, Arial;
    background:#f4f6f9;
}

/* WRAP */
.success-wrap{
    padding:40px 30px;
    display:flex;
    justify-content:center;
    align-items:center;
}

/* CARD */
.success-card{
    background:#fff;
    width:100%;
    max-width:600px;
    padding:40px 30px;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    text-align:center;
    animation:fadeIn 0.6s ease-in-out;
}

/* ICON */
.success-icon{
    width:90px;
    height:90px;
    margin:0 auto 20px;
    background:linear-gradient(135deg,#22c55e,#16a34a);
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:40px;
    color:#fff;
    animation:pop 0.5s ease;
}

/* TITLE */
.success-title{
    font-size:26px;
    font-weight:800;
    color:#111827;
    margin-bottom:10px;
}

/* TEXT */
.success-text{
    font-size:15px;
    color:#6b7280;
    margin-bottom:20px;
}

/* ORDER ID BOX */
.order-box{
    background:#f9fafb;
    border:1px dashed #d1d5db;
    padding:12px 15px;
    border-radius:10px;
    display:inline-block;
    font-weight:700;
    margin-bottom:25px;
}

/* BUTTONS */
.btn-row{
    display:flex;
    gap:10px;
    justify-content:center;
    flex-wrap:wrap;
}

.btn{
    padding:12px 18px;
    border-radius:10px;
    text-decoration:none;
    font-weight:700;
    font-size:14px;
    transition:0.3s;
}

.btn-home{
    background:linear-gradient(90deg,#ff7a18,#ffb347);
    color:#fff;
}

.btn-home:hover{
    transform:translateY(-2px);
}

.btn-order{
    background:#111827;
    color:#fff;
}

.btn-order:hover{
    opacity:0.85;
}

/* ANIMATION */
@keyframes fadeIn{
    from{opacity:0; transform:translateY(20px);}
    to{opacity:1; transform:translateY(0);}
}

@keyframes pop{
    0%{transform:scale(0);}
    100%{transform:scale(1);}
}

/* MOBILE */
@media(max-width:600px){
    .success-card{
        padding:30px 20px;
    }
}
</style>

<div class="success-wrap">

    <div class="success-card">

        <div class="success-icon">✓</div>

        <div class="success-title">Order Placed Successfully!</div>

        <div class="success-text">
            Thank you for your order. We will process it soon and notify you.
        </div>

        <?php if(!empty($order_id)){ ?>
            <div class="order-box">
                Order ID: #<?php echo htmlspecialchars($order_id); ?>
            </div>
        <?php } ?>

        <div class="btn-row">
            <a href="products.php" class="btn btn-home">Continue Shopping</a>
            <a href="orders.php" class="btn btn-order">View Orders</a>
        </div>

    </div>

</div>

<?php include 'includes/footer.php'; ?>