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

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $order_date = $_POST['order_date'];
    $buyer_name = esc($_POST['buyer_name']);
    $style_no = esc($_POST['style_no']);
    $po_no = esc($_POST['po_no']);
    $merch = esc($_POST['merchandiser_name']);
    $remarks = esc($_POST['remarks']);

    $measure_texts = $_POST['measurement_text'] ?? [];
    $measure_qtys = $_POST['measurement_qty'] ?? [];

    $total_qty = 0;
    foreach ($measure_qtys as $q) {
        $total_qty += intval($q);
    }

    $stmt = $conn->prepare("INSERT INTO orders (order_date,buyer_name,style_no,po_no,merchandiser_name,total_qty,remarks) VALUES (?,?,?,?,?,?,?)");
    $stmt->bind_param('sssssis', $order_date, $buyer_name, $style_no, $po_no, $merch, $total_qty, $remarks);
    $stmt->execute();
    $order_id = $stmt->insert_id;
    $stmt->close();

    $mStmt = $conn->prepare("INSERT INTO order_measurements (order_id,measurement_text,total_qty) VALUES (?,?,?)");
    foreach ($measure_texts as $i => $mt) {
        $mt = esc($mt);
        $mq = intval($measure_qtys[$i]);
        if ($mq <= 0 || $mt === '') continue;
        $mStmt->bind_param('isi', $order_id, $mt, $mq);
        $mStmt->execute();
    }
    $mStmt->close();

    header("Location: orders_list.php?msg=order_added");
    exit;
}
?>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Add Order</title>

<style>
/* ---- GLOBAL ---- */
body {
    background: #f2f4f8;
    margin: 0;
    font-family: Arial, sans-serif;
}

/* ---- CONTAINER ---- */
.container {
    max-width: 900px;
    margin: auto;
    background: #fff;
    padding: 25px;
    margin-top: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* ---- HEADINGS ---- */
h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #222;
}

/* ---- FORM ---- */
form label {
    font-weight: bold;
    display: block;
    margin-top: 15px;
    color: #444;
}

form input[type="text"],
form input[type="date"],
form input[type="number"],
form textarea {
    width: 100%;
    padding: 10px;
    margin-top: 6px;
    border-radius: 6px;
    border: 1px solid #ccc;
    outline: none;
    font-size: 15px;
    transition: 0.2s;
}

form input:focus,
form textarea:focus {
    border-color: #007bff;
}

/* ---- BUTTON ---- */
button {
    padding: 10px 16px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 15px;
}

#addRow {
    background: #28a745;
    color: #fff;
    margin-top: 15px;
}

.submitBtn {
    background: #007bff;
    color: #fff;
    margin-top: 20px;
}

/* ---- TABLE ---- */
.tableWrapper {
    overflow-x: auto;
    margin-top: 15px;
}

#meas_table {
    width: 100%;
    border-collapse: collapse;
}

#meas_table th, 
#meas_table td {
    border: 1px solid #ddd;
    padding: 10px;
}

#meas_table th {
    background: #007bff;
    color: #fff;
}

/* Remove button */
.removeRow {
    background: #dc3545;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
}

@media(max-width: 600px){
    .container {
        padding: 15px;
    }
    #meas_table td input {
        width: 140px;
    }
}
</style>

</head>
<body>

<div class="container">
    <h2>Add New Order</h2>

    <form method="post">

        <label>Order Date:</label>
        <input type="date" name="order_date" required>

        <label>Buyer Name:</label>
        <input type="text" name="buyer_name" required>

        <label>Style No:</label>
        <input type="text" name="style_no">
        
         <label>Po No:</label>
        <input type="text" name="po_no">

        <label>Merchandiser Name:</label>
        <input type="text" name="merchandiser_name">

        <label>Remarks:</label>
        <textarea name="remarks" rows="3"></textarea>


        <h3 style="margin-top:25px;">Measurements</h3>

        <div class="tableWrapper">
            <table id="meas_table">
                <tr>
                    <th>Measurement Text</th>
                    <th>Qty</th>
                    <th>Action</th>
                </tr>

                <tr>
                    <td><input type="text" name="measurement_text[]" placeholder="e.g. L-40 × 30 + 2" required></td>
                    <td><input type="number" name="measurement_qty[]" required></td>
                    <td><button type="button" class="removeRow">Remove</button></td>
                </tr>
            </table>
        </div>

        <button type="button" id="addRow">+ Add Measurement</button>

        <button type="submit" class="submitBtn">Save Order</button>
    </form>
</div>

<script>
document.getElementById('addRow').addEventListener('click', function(){
    let tr = document.createElement('tr');
    tr.innerHTML = 
        '<td><input type="text" name="measurement_text[]" required></td>' +
        '<td><input type="number" name="measurement_qty[]" required></td>' +
        '<td><button type="button" class="removeRow">Remove</button></td>';
    document.getElementById('meas_table').appendChild(tr);
});

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

</body>
</html>
