<?php
include 'config.php';

/* GET DATA */
$customers = mysqli_query($conn, "SELECT id, name FROM customers ORDER BY name ASC");
$products  = mysqli_query($conn, "SELECT id, name, quantity FROM inventory WHERE quantity > 0");
?>

<!DOCTYPE html>
<html>
<head>
<title>Sales Invoice</title>

<style>
body{
    font-family: Arial;
    background:#f1f3f6;
    margin:0;
    padding:15px;
}

.card{
    background:white;
    padding:15px;
    border-radius:10px;
    margin-bottom:15px;
}

.label{
    font-size:13px;
    color:gray;
    margin-top:10px;
}

input, select, textarea{
    width:100%;
    padding:8px;
    border:1px solid #ccc;
    margin-top:5px;
}

/* GREEN ADD OPTION */
.add-option{
    color:green;
    font-weight:bold;
}

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

.modal-box{
    background:white;
    width:320px;
    margin:120px auto;
    padding:20px;
    border-radius:10px;
}

button{
    padding:10px;
    margin-top:10px;
    width:100%;
}
</style>

</head>
<body>

<div class="card">

<form>

<div class="label">Customer</div>
<select id="customerSelect">
    <option value="">Select Customer</option>

    <?php while($c = mysqli_fetch_assoc($customers)){ ?>
        <option value="<?= $c['id'] ?>">
            <?= $c['name'] ?>
        </option>
    <?php } ?>

    <!-- ADD NEW -->
    <option value="add_customer" class="add-option">
        + Add New Customer
    </option>
</select>

<div class="label">Product</div>
<select id="productSelect">
    <option value="">Select Product</option>

    <?php while($p = mysqli_fetch_assoc($products)){ ?>
        <option value="<?= $p['id'] ?>">
            <?= $p['name'] ?> (Stock: <?= $p['quantity'] ?>)
        </option>
    <?php } ?>

    <!-- ADD NEW -->
    <option value="add_product" class="add-option">
        + Add New Product
    </option>
</select>

</form>

</div>

<!-- CUSTOMER MODAL -->
<div class="modal" id="customerModal">
<div class="modal-box">
<h3>Add Customer</h3>
<input type="text" id="cname" placeholder="Customer Name">

<button onclick="saveCustomer()">Save</button>
<button onclick="closeCustomer()">Close</button>
</div>
</div>

<!-- PRODUCT MODAL -->
<div class="modal" id="productModal">
<div class="modal-box">
<h3>Add Product</h3>
<input type="text" id="pname" placeholder="Product Name">
<input type="number" id="pqty" placeholder="Quantity">

<button onclick="saveProduct()">Save</button>
<button onclick="closeProduct()">Close</button>
</div>
</div>

<script>

/* OPEN ADD NEW */
document.getElementById("customerSelect").addEventListener("change", function(){
    if(this.value === "add_customer"){
        this.value = "";
        document.getElementById("customerModal").style.display = "block";
    }
});

document.getElementById("productSelect").addEventListener("change", function(){
    if(this.value === "add_product"){
        this.value = "";
        document.getElementById("productModal").style.display = "block";
    }
});

/* CLOSE */
function closeCustomer(){
    document.getElementById("customerModal").style.display = "none";
}

function closeProduct(){
    document.getElementById("productModal").style.display = "none";
}

/* SAVE CUSTOMER (AJAX) */
function saveCustomer(){

    let name = document.getElementById("cname").value;

    fetch("save_customer.php", {
        method:"POST",
        headers:{"Content-Type":"application/x-www-form-urlencoded"},
        body:"name="+name
    })
    .then(res=>res.json())
    .then(data=>{

        let select = document.getElementById("customerSelect");

        let opt = document.createElement("option");
        opt.value = data.id;
        opt.textContent = data.name;

        select.insertBefore(opt, select.lastChild);

        closeCustomer();
    });
}

/* SAVE PRODUCT (AJAX) */
function saveProduct(){

    let name = document.getElementById("pname").value;
    let qty  = document.getElementById("pqty").value;

    fetch("save_product.php", {
        method:"POST",
        headers:{"Content-Type":"application/x-www-form-urlencoded"},
        body:"name="+name+"&qty="+qty
    })
    .then(res=>res.json())
    .then(data=>{

        let select = document.getElementById("productSelect");

        let opt = document.createElement("option");
        opt.value = data.id;
        opt.textContent = data.name + " (Stock: "+data.qty+")";

        select.insertBefore(opt, select.lastChild);

        closeProduct();
    });
}

</script>

</body>
</html>