<?php
include "../../root.class.php";
$html = new html();
$html->add_styles_page();
$db = new db_safeguard();

/* Generate invoice number */
$inv_res  = $db->query("invoices", "SELECT MAX(record_id) as max_id FROM invoices");
$inv_row  = $inv_res->fetch_assoc();
$inv_no   = "INV_" . str_pad((($inv_row['max_id'] ?? 0) + 1), 4, "0", STR_PAD_LEFT);

$today = date('Y-m-d');
$due   = date('Y-m-d', strtotime('+30 days'));

/* Fetch stock items for datalist */
$stock_res   = $db->query("stock", "SELECT item_name, item_price FROM stock ORDER BY item_name ASC");
$stock_items = [];
$datalist_options = "";
while ($stock = $stock_res->fetch_assoc()) {
    $name  = htmlspecialchars($stock['item_name'],  ENT_QUOTES);
    $price = (float) ($stock['item_price'] ?? 0);
    $stock_items[]     = ['name' => $name, 'price' => $price];
    $datalist_options .= "<option value='{$name}'>";
}
?>

<!-- Stock item datalist -->
<datalist id="stock_items_list">
    <?= $datalist_options ?>
</datalist>

<style>
    :root {
        --blue: #1e3a8a; --light-blue: #eaf0ff;
        --orange: #f97316; --white: #ffffff;
        --border: #d1d5db; --text: #0f172a;
    }

    body { margin: 0; background: #f8fafc; font-family: "Segoe UI", Roboto, Arial, sans-serif; color: var(--text); }
    .form_down { width: 95%; margin: auto; padding-bottom: 3vw; }
    h1 { font-size: 3em; color: var(--blue); margin: 1.5vw 0 0.5vw; }
    h2 { font-size: 1.5em; color: var(--blue); margin: 1.5vw 0 0.5vw; border-left: 4px solid var(--orange); padding-left: 0.5vw; }

    .card { background: var(--white); border-radius: 12px; padding: 1.5vw; margin-bottom: 1.5vw; box-shadow: 0 4px 15px rgba(0,0,0,0.07); }

    .field-row { display: flex; flex-direction: row; align-items: center; gap: 1vw; margin-bottom: 0.8vw; width: 100%; }
    .field-row label { font-size: 1.1em; font-weight: 600; color: var(--blue); width: 20%; }

    .inputs { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 1em; background: var(--white); color: var(--text); width: 40%; }
    .inputs:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,0.15); }
    textarea.inputs { resize: vertical; width: 60%; }

    table { width: 100%; border-collapse: collapse; font-size: 1em; }
    th { background: var(--blue); color: var(--white); padding: 0.6vw; text-align: left; }
    td { border: 1px solid var(--border); padding: 0.3vw; }

    .row-input { width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: 8px; font-size: 0.95em; box-sizing: border-box; }
    .row-input:focus { outline: none; border-color: #2563eb; }
    .row-input[readonly] { background: #f1f5f9; color: #64748b; }

    .delete_btn { background: linear-gradient(135deg, #f97316, #fb923c); color: var(--white); border: none; padding: 8px 14px; border-radius: 8px; font-weight: 700; cursor: pointer; width: 100%; }
    .delete_btn:hover { background: linear-gradient(135deg, #224396, #153b96); }

    .submit_btn { background: var(--blue); color: var(--white); border: none; padding: 1vw 2vw; font-size: 1.3em; font-weight: 700; border-radius: 8px; cursor: pointer; margin-top: 1vw; }
    .submit_btn:hover { background: var(--orange); }

    .add_row_btn { background: var(--orange); color: var(--white); border: none; padding: 0.6vw 1.2vw; font-size: 1em; font-weight: 700; border-radius: 8px; cursor: pointer; margin-top: 0.8vw; }
    .add_row_btn:hover { background: #ea580c; }

    .totals-row td { font-weight: 700; background: var(--light-blue); }
    .grand-total-row td { font-weight: 700; font-size: 1.1em; background: var(--blue); color: var(--white); }
</style>

<div class="form_down">
    <h1>ADD INVOICE</h1>

    <form action="add_invoice.ajax.php" method="POST" onsubmit="return validateForm()">

        <!-- Invoice Details -->
        <div class="card">
            <h2>INVOICE DETAILS</h2>

            <div class="field-row">
                <label>INVOICE NO :</label>
                <input type="text" name="invoice_no" class="inputs" value="<?= $inv_no ?>" readonly>
            </div>
            <div class="field-row">
                <label>INVOICE DATE :</label>
                <input type="date" name="invoice_date" class="inputs" value="<?= $today ?>" required>
            </div>
            <div class="field-row">
                <label>DUE DATE :</label>
                <input type="date" name="due_date" class="inputs" value="<?= $due ?>" required>
            </div>
            <div class="field-row">
                <label>STATUS :</label>
                <select name="status" class="inputs">
                    <option value="UNPAID">UNPAID</option>
                    <option value="PAID">PAID</option>
                </select>
            </div>
        </div>

        <!-- Client Details -->
        <div class="card">
            <h2>CLIENT DETAILS</h2>

            <div class="field-row">
                <label>CLIENT NAME :</label>
                <input type="text" name="client_name" class="inputs" placeholder="Client name" required>
            </div>
            <div class="field-row">
                <label>ADDRESS :</label>
                <input type="text" name="client_address" class="inputs" placeholder="Client address">
            </div>
            <div class="field-row">
                <label>EMAIL :</label>
                <input type="email" name="client_email" class="inputs" placeholder="client@email.com">
            </div>
            <div class="field-row">
                <label>PHONE :</label>
                <input type="text" name="client_phone" class="inputs" placeholder="+27 ...">
            </div>
        </div>

        <!-- Line Items -->
        <div class="card">
            <h2>LINE ITEMS</h2>
            <input type="hidden" id="no_rows" name="no_rows" value="1">

            <table id="items_table">
                <thead>
                    <tr>
                        <th style="width:40%">Description</th>
                        <th style="width:12%">Qty</th>
                        <th style="width:15%">Unit Price (R)</th>
                        <th style="width:15%">Total (R)</th>
                        <th style="width:8%"></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <input type="text" name="desc_1" class="row-input"
                                list="stock_items_list"
                                placeholder="Type or pick a stock item..."
                                oninput="autofillPrice(1)"
                                required>
                        </td>
                        <td><input type="number" name="qty_1"        class="row-input" value="1" min="0" step="any"  oninput="calcRow(1)" required></td>
                        <td><input type="number" name="unit_price_1" class="row-input" value="0" min="0" step="0.01" oninput="calcRow(1)" required></td>
                        <td><input type="number" name="total_1"      class="row-input" value="0" readonly></td>
                        <td><button type="button" class="delete_btn" onclick="deleteRow(this)">X</button></td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr class="totals-row">
                        <td colspan="3" style="text-align:right; padding:0.5vw;">SUBTOTAL :</td>
                        <td><input type="number" id="subtotal" name="subtotal" class="row-input" value="0" readonly></td>
                        <td></td>
                    </tr>
                    <tr class="grand-total-row">
                        <td colspan="3" style="text-align:right; padding:0.5vw;">TOTAL :</td>
                        <td><input type="number" id="grand_total" name="grand_total" class="row-input" value="0" readonly style="background:var(--blue); color:var(--white); font-weight:700;"></td>
                        <td></td>
                    </tr>
                </tfoot>
            </table>

            <button type="button" class="add_row_btn" onclick="addRow()">+ ADD ROW</button>
        </div>

        <!-- Notes -->
        <div class="card">
            <h2>NOTES</h2>
            <div class="field-row">
                <label>NOTES :</label>
                <textarea name="notes" class="inputs" rows="4" placeholder="Any additional notes..."></textarea>
            </div>
        </div>

        <button type="submit" class="submit_btn">SAVE INVOICE</button>
    </form>
</div>

<script>
    let rowIndex = 1;

    /* Build price lookup map from PHP stock data */
    const stockPrices = {
        <?php foreach ($stock_items as $s): ?>
        <?= json_encode($s['name']) ?>: <?= $s['price'] ?>,
        <?php endforeach; ?>
    };

    /* Auto-fill unit price if description matches a stock item */
    function autofillPrice(i) {
        const desc  = document.querySelector(`[name="desc_${i}"]`).value.trim();
        const price = stockPrices[desc];

        if (price !== undefined) {
            document.querySelector(`[name="unit_price_${i}"]`).value = price.toFixed(2);
            calcRow(i);
        }
    }

    function calcRow(i) {
        const qty        = parseFloat(document.querySelector(`[name="qty_${i}"]`).value)        || 0;
        const unit_price = parseFloat(document.querySelector(`[name="unit_price_${i}"]`).value) || 0;
        document.querySelector(`[name="total_${i}"]`).value = (qty * unit_price).toFixed(2);
        calcTotals();
    }

    function calcTotals() {
        let subtotal = 0;
        document.querySelectorAll("[name^='total_']").forEach(input => {
            subtotal += parseFloat(input.value) || 0;
        });
        document.getElementById("subtotal").value    = subtotal.toFixed(2);
        document.getElementById("grand_total").value = subtotal.toFixed(2);
    }

    function autofillPrice(i) {
        const desc  = document.querySelector(`[name="desc_${i}"]`).value.trim();
        const price = stockPrices[desc];

        if (price !== undefined) {
            // Exact match found in stock — fill price and recalculate
            document.querySelector(`[name="unit_price_${i}"]`).value = price.toFixed(2);
            calcRow(i);
        }
        // No match — user is typing a custom item, leave unit price alone
    }

    function addRow() {
        rowIndex++;
        const tbody = document.querySelector("#items_table tbody");
        const row   = document.createElement("tr");

        row.innerHTML = `
            <td>
                <input type="text" name="desc_${rowIndex}" class="row-input"
                    list="stock_items_list"
                    placeholder="Type or pick a stock item..."
                    oninput="autofillPrice(${rowIndex})"
                    required>
            </td>
            <td><input type="number" name="qty_${rowIndex}"        class="row-input" value="1" min="0" step="any"  oninput="calcRow(${rowIndex})" required></td>
            <td><input type="number" name="unit_price_${rowIndex}" class="row-input" value="0" min="0" step="0.01" oninput="calcRow(${rowIndex})" required></td>
            <td><input type="number" name="total_${rowIndex}"      class="row-input" value="0" readonly></td>
            <td><button type="button" class="delete_btn" onclick="deleteRow(this)">X</button></td>
        `;

        tbody.appendChild(row);
        document.getElementById("no_rows").value = rowIndex;
    }

    function deleteRow(btn) {
        const tbody = document.querySelector("#items_table tbody");
        if (tbody.rows.length <= 1) {
            alert("At least one line item is required.");
            return;
        }
        btn.closest("tr").remove();
        calcTotals();
    }

    function validateForm() {
        const client = document.querySelector("[name='client_name']").value.trim();
        if (!client) { alert("Client name is required."); return false; }
        const btn    = document.querySelector(".submit_btn");
        btn.disabled = true;
        btn.textContent = "SAVING...";
        return true;
    }
</script>