<?php
require_once __DIR__ . '/../include/db.php';

if (!isset($_GET['id'])) {
    die("Invalid request!");
}

$id = intval($_GET['id']);

/* ------------------------------
   LOAD ORDER (SAFE)
--------------------------------*/
$sql = "SELECT * FROM orders WHERE id = $id";
$res = $conn->query($sql);

if (!$res) { die("SQL ERROR: " . $conn->error); }
if ($res->num_rows == 0) { die("Order not found!"); }

$order = $res->fetch_assoc();

/* ------------------------------
   LOAD MEASUREMENTS
--------------------------------*/
$measurements = $conn->query("SELECT * FROM order_measurements WHERE order_id = $id");
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>View Order</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
body { background: #f2f4f8; margin: 0; font-family: Arial; }
.container { max-width: 950px; margin: 30px auto; background: #fff; padding: 25px; border-radius: 12px; box-shadow: 0 3px 20px rgba(0,0,0,0.08); }
.backBtn { background: #6c757d; padding: 8px 12px; color: #fff; border-radius: 6px; text-decoration: none; font-size: 14px; }

.infoBox { background: #f9fbff; border-radius: 12px; border: 1px solid #e5e5e5; padding: 20px; margin-top: 20px; }
.infoRow { display: flex; padding: 4px 0; border-bottom:1px solid #e5e5e5; }
.infoRow label { width: 180px; font-weight: bold; }

.badge { padding: 5px 10px; border-radius: 6px; font-size: 13px; color: #fff; }
.badge.pending { background: #6c757d; }
.badge.partial { background: #ffc107; color:#000; }

.measureTitle { margin-top: 30px; font-size: 20px; }

table { width: 100%; border-collapse: collapse; background: #fff; }
table th { background: #007bff; color: #fff; padding: 12px 10px; text-align: left; }
table td { padding: 10px; border-bottom: 1px solid #e5e5e5; }

.actionBtns { margin-top: 25px; }
.actionBtns button { padding: 10px 14px; color: #fff; border-radius: 6px; margin-right: 8px; font-size: 14px; border: none; cursor: pointer; }
.assign { background:#6f42c1; }
.edit { background:#17a2b8; }
.delete { background:#dc3545; }

/* MODAL */
.modal { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.45); padding-top: 80px; }
.modal-content { background: #fff; margin: auto; padding: 25px; width: 450px; border-radius: 10px; animation: fadeIn .3s; }
@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }

/* Modal sizing fix */
.modal-content {
    background: #fff;
    margin: auto;
    padding: 25px;
    width: 600px; /* increased size */
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 10px;
}

/* Measurement table fix */
#measureTable td {
    padding: 6px 4px;
}

#measureTable input {
    width: 100%;
}

.removeRow {
    background: #dc3545;
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
}

.saveBtn { background: #28a745; color: white; padding: 10px 16px; border-radius: 6px; border: none; }
.closeBtn { background: #6c757d; color: white; padding: 10px 16px; border-radius: 6px; border: none; }
.deleteYes { background: #dc3545; color: #fff; padding: 10px 16px; border-radius: 6px; text-decoration: none; }
</style>

</head>
<body>

<div class="container">

<a class="backBtn" href="orders_list.php">← Back to Orders</a>
<h4>Order Details</h4>

<style>
.detailsTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.detailsTable tr:nth-child(even) {
    background: #f3f7ff; /* light blue */
}

.detailsTable tr:nth-child(odd) {
    background: #ffffff; /* white */
}

.detailsTable th {
    background: #0056b3;
    color: #fff;
    padding: 12px;
    text-align: left;
    font-size: 16px;
}

.detailsTable td {
    padding: 8px;
    font-size: 15px;
    color: #333;
}

.badge {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    color: #fff;
}

.badge.pending { background: #6c757d; }
.badge.partial { background: #ffc107; color:#000; }
.badge.completed { background: #28a745; }
.badge.cancelled { background: #dc3545; } 


</style>


<table class="detailsTable">
    <tr>
        <th colspan="2">Order Information</th>
    </tr>

    <tr>
        <td><strong>Order ID</strong></td>
        <td><?= $order['id'] ?></td>
    </tr>

    <tr>
        <td><strong>Order Date</strong></td>
        <td><?= $order['order_date'] ?></td>
    </tr>

    <tr>
        <td><strong>Buyer Name</strong></td>
        <td><?= htmlspecialchars($order['buyer_name']) ?></td>
    </tr>

    <tr>
        <td><strong>Style No</strong></td>
        <td><?= htmlspecialchars($order['style_no']) ?></td>
    </tr>
    
    <tr>
        <td><strong>PO No</strong></td>
        <td><?= htmlspecialchars($order['po_no']) ?></td>
    </tr>

    <tr>
        <td><strong>Merchandiser</strong></td>
        <td><?= htmlspecialchars($order['merchandiser_name']) ?></td>
    </tr>

    <tr>
        <td><strong>Total Quantity</strong></td>
        <td><?= $order['total_qty'] ?></td>
    </tr>

    <tr>
        <td><strong>Status</strong></td>
        <td><span class="badge <?= $order['status'] ?>"><?= ucfirst($order['status']) ?></span></td>
    </tr>

    <tr>
        <td><strong>Remarks</strong></td>
        <td><?= nl2br(htmlspecialchars($order['remarks'])) ?></td>
    </tr>
</table>


<h4 class="measureTitle">Measurements/Size Breakdown</h4>

<table>
<tr><th>Measurement</th><th>Qty</th></tr>
<?php while ($m = $measurements->fetch_assoc()): ?>
<tr>
    <td><?= htmlspecialchars(stripslashes($m['measurement_text'])) ?></td>
    <td><?= $m['total_qty'] ?></td>
</tr>
<?php endwhile; ?>
</table>

<div class="actionBtns">
    <button class="edit" onclick="openEditModal()">Edit</button>
    <button class="delete" onclick="openDeleteModal()">Delete</button>
</div>

</div>



<!-- ======================
      EDIT MODAL
======================= -->
<div id="editModal" class="modal">
  <div class="modal-content">
    <h3>Edit Order</h3>

    <form action="update_order.php" method="POST">

        <input type="hidden" name="id" value="<?= $order['id'] ?>">

        <label>Buyer Name</label>
        <input type="text" name="buyer_name" class="form-control" value="<?= htmlspecialchars($order['buyer_name']) ?>" required>

        <label>Style No</label>
        <input type="text" name="style_no" class="form-control" value="<?= htmlspecialchars($order['style_no']) ?>" required>
        
        <label>PO No</label>
        <input type="text" name="po_no" class="form-control" value="<?= htmlspecialchars($order['po_no']) ?>" required>

        <label>Merchandiser</label>
        <input type="text" name="merchandiser_name" class="form-control" value="<?= htmlspecialchars($order['merchandiser_name']) ?>" required>

        <label>Total Quantity</label>
        <input type="number" name="total_qty" class="form-control" value="<?= $order['total_qty'] ?>" required>

        <label>Remarks</label>
        <textarea name="remarks" rows="2" class="form-control"><?= htmlspecialchars($order['remarks']) ?></textarea>

<h4>Measurements</h4>

<table id="measureTable" style="width:100%; margin-top:10px; border-collapse: collapse; " >
    <tbody>
        <?php
        $m_sql = $conn->query("SELECT * FROM order_measurements WHERE order_id = $id");
        while ($m = $m_sql->fetch_assoc()) {
            echo '
            <tr>
                <td style="width:70%;">
                    <input type="text" name="measurement_text[]" 
                        value="'.htmlspecialchars($m['measurement_text']).'" required>
                </td>
                <td style="width:20%;">
                    <input type="number" name="measurement_qty[]" 
                        value="'.$m['total_qty'].'" required>
                </td>
                <td style="width:10%; text-align:right;">
                    <button type="button" class="removeRow">X</button>
                </td>
            </tr>';
        }
        ?>
    </tbody>
</table>

<button type="button" id="addRow" style="margin-top:10px;">+ Add Row</button>


        <div style="margin-top: 15px;">
            <button type="button" class="closeBtn" onclick="closeEditModal()">Close</button>
            <button class="saveBtn">Save Changes</button>
        </div>

    </form>

  </div>
</div>



<!-- ======================
      DELETE MODAL
======================= -->
<div id="deleteModal" class="modal">
  <div class="modal-content">
      <h3 style="color:#c0392b;">Confirm Delete</h3>
      <p>Are you sure you want to delete this order?</p>

      <a class="deleteYes" href="delete_order.php?id=<?= $order['id'] ?>">Yes, Delete</a>
      <button class="closeBtn" onclick="closeDeleteModal()">Cancel</button>
  </div>
</div>



<script>
// Modal controls
function openEditModal(){ document.getElementById("editModal").style.display='block'; }
function closeEditModal(){ document.getElementById("editModal").style.display='none'; }
function openDeleteModal(){ document.getElementById("deleteModal").style.display='block'; }
function closeDeleteModal(){ document.getElementById("deleteModal").style.display='none'; }

// Add row
document.getElementById("addRow").addEventListener("click", () => {
    let row = `
    <tr>
        <td><input type="text" name="measurement_text[]" required></td>
        <td><input type="number" name="measurement_qty[]" required></td>
        <td><button type="button" class="removeRow">X</button></td>
    </tr>`;
    document.querySelector("#measureTable tbody").insertAdjacentHTML("beforeend", row);
});

// Remove row
document.addEventListener("click", e => {
    if (e.target.classList.contains("removeRow")) {
        e.target.closest("tr").remove();
    }
});
</script>

</body>
</html>
