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

error_reporting(E_ALL);
ini_set('display_errors', 1);

$query = "
SELECT 
    id,
    user_id,
    name,
    mobile,
    address,
    city,
    pincode,
    payment_method,
    total_amount,
    status,
    created_at
FROM orders
ORDER BY id DESC
";

$result = mysqli_query($conn, $query);
?>

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

.page-wrap{
    padding:25px;
}

.topbar{
    background:#fff;
    padding:18px 22px;
    border-radius:16px;
    margin-bottom:20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow:0 6px 18px rgba(0,0,0,0.06);
}

.topbar h2{
    margin:0;
    font-size:20px;
}

.table-card{
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 6px 18px rgba(0,0,0,0.05);
}

table{
    width:100%;
    border-collapse:collapse;
}

thead{
    background:#f1f5f9;
}

th{
    padding:14px;
    text-align:left;
    font-size:13px;
}

td{
    padding:14px;
    font-size:14px;
    border-bottom:1px solid #eee;
}

tr:hover{
    background:#f9fafb;
}

.customer{
    font-weight:700;
}

.small{
    font-size:12px;
    color:#6b7280;
}

.badge{
    padding:5px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
}

.pending{background:#fff7ed;color:#c2410c;}
.completed{background:#ecfdf5;color:#047857;}
.cancelled{background:#fef2f2;color:#b91c1c;}

.price{
    font-weight:700;
    color:#16a34a;
}

.btn{
    padding:6px 10px;
    background:#3b82f6;
    color:#fff;
    border-radius:8px;
    text-decoration:none;
    font-size:12px;
    cursor:pointer;
}

.btn:hover{
    background:#2563eb;
}

/* MODAL */
.modal{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.4);
    z-index:9999;
}

.modal-box{
    background:#fff;
    width:650px;
    max-width:95%;
    margin:60px auto;
    border-radius:14px;
    padding:20px;
}

.close-btn{
    background:#ef4444;
    color:#fff;
    border:none;
    padding:6px 10px;
    border-radius:8px;
    cursor:pointer;
    float:right;
}
</style>

<div class="page-wrap">

<div class="topbar">
    <h2>📦 Orders Management</h2>
</div>

<div class="table-card">

<table>
<thead>
<tr>
<th>ID</th>
<th>Customer</th>
<th>Mobile</th>
<th>City</th>
<th>Payment</th>
<th>Total</th>
<th>Status</th>
<th>Date</th>
<th>Action</th>
</tr>
</thead>

<tbody>

<?php while($row = mysqli_fetch_assoc($result)) { ?>

<tr>
<td>#<?php echo $row['id']; ?></td>

<td>
<div class="customer"><?php echo $row['name']; ?></div>
<div class="small"><?php echo $row['address']; ?></div>
</td>

<td><?php echo $row['mobile']; ?></td>
<td><?php echo $row['city']; ?></td>
<td><?php echo $row['payment_method']; ?></td>

<td class="price">₹ <?php echo number_format($row['total_amount'],2); ?></td>

<td>
<?php if($row['status']=="PENDING"){ ?>
<span class="badge pending">Pending</span>
<?php } elseif($row['status']=="COMPLETED"){ ?>
<span class="badge completed">Completed</span>
<?php } else { ?>
<span class="badge cancelled">Cancelled</span>
<?php } ?>
</td>

<td><?php echo $row['created_at']; ?></td>

<td>
<button class="btn" onclick="openOrder(<?php echo $row['id']; ?>)">View</button>
</td>

</tr>

<?php } ?>

</tbody>
</table>

</div>
</div>

<!-- MODAL -->
<div id="orderModal" class="modal">
<div class="modal-box">

<button class="close-btn" onclick="closeModal()">X</button>

<h3>🧾 Order Details</h3>
<hr>

<div id="orderContent">Loading...</div>

</div>
</div>

<script>
function openOrder(id){
    document.getElementById("orderModal").style.display = "block";
    document.getElementById("orderContent").innerHTML = "Loading...";

    fetch("get_order.php?id="+id)
    .then(res => res.text())
    .then(res => {
        document.getElementById("orderContent").innerHTML = res;
    });
}

function closeModal(){
    document.getElementById("orderModal").style.display = "none";
}
</script>

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