<?php
session_start();
if (!isset($_SESSION['role_id']) || $_SESSION['role_id'] != 1) {
    header("Location: ../../index.php");
    exit();
}

include('../../includes/config.php');
include('../../includes/header.php');

// Fetch stores, products, and suppliers
$stores = $conn->query("SELECT id, store_name FROM stores")->fetch_all(MYSQLI_ASSOC);
$products = $conn->query("SELECT id, product_name FROM products")->fetch_all(MYSQLI_ASSOC);
$suppliers = $conn->query("SELECT id, supplier_name FROM suppliers")->fetch_all(MYSQLI_ASSOC);
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Add Stock - Digital POS</title>
    <link rel="stylesheet" href="../../css/dashboard.css">
    <style>
        body, html {
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', sans-serif;
            background: url('../../images/profile.jpg') no-repeat center center fixed;
            background-size: cover;
            color: white;
        }

        .overlay {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.6);
            z-index: -1;
        }

        .content {
            margin: 100px auto;
            padding: 30px 40px;
            max-width: 600px;
            backdrop-filter: blur(15px);
            background: rgba(255, 255, 255, 0.08);
            border-radius: 20px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
        }

        h2 {
            text-align: center;
            margin-bottom: 25px;
        }

        form label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        form input, form select, form textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border-radius: 10px;
            border: none;
            background: rgba(255, 255, 255, 0.15);
            color: black;
            font-size: 15px;
        }

        form input::placeholder, textarea::placeholder {
            color: rgba(255, 255, 255, 0.6);
        }

        .submit-btn {
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 25px;
            background: #ff6f00;
            color: white;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: background 0.3s;
        }

        .submit-btn:hover {
            background:rgb(228, 95, 6);
        }

        /* Preview box styles */
        #previewBox {
            display: none;
            margin-top: 20px;
            padding: 20px;
            background-color: rgba(0,0,0,0.6);
            border-radius: 15px;
        }
        #previewBox h3 {
            text-align: center;
            margin-bottom: 15px;
            color: #ffa000;
        }
        #previewBox div {
            line-height: 1.8;
            color: white;
        }
        #previewButtons {
            margin-top: 15px;
            display: flex;
            justify-content: space-between;
        }
        #previewButtons button {
            width: 48%;
        }
    </style>
</head>
<body>

<div class="overlay"></div>
<div class="content">
    <h2>Add New Stock Entry</h2>
    <form id="stockForm" action="create_stock_entry.php" method="POST">
        <label for="product_id">Product</label>
        <select name="product_id" id="product_id" required>
            <option value="">-- Select Product --</option>
            <?php foreach ($products as $p): ?>
                <option value="<?= $p['id'] ?>"><?= htmlspecialchars($p['product_name']) ?></option>
            <?php endforeach; ?>
        </select>

        <label for="supplier_id">Supplier (Optional)</label>
        <select name="supplier_id" id="supplier_id">
            <option value="">-- Select Supplier --</option>
            <?php foreach ($suppliers as $sup): ?>
                <option value="<?= $sup['id'] ?>"><?= htmlspecialchars($sup['supplier_name']) ?></option>
            <?php endforeach; ?>
        </select>

        <label for="store_id">Store</label>
        <select name="store_id" id="store_id" required>
            <option value="">-- Select Store --</option>
            <?php foreach ($stores as $s): ?>
                <option value="<?= $s['id'] ?>"><?= htmlspecialchars($s['store_name']) ?></option>
            <?php endforeach; ?>
        </select>

        <label for="quantity">Quantity</label>
        <input type="number" name="quantity" min="1" required placeholder="e.g., 50">

        <label for="cost_price">Cost Price per Unit</label>
        <input type="number" step="0.01" name="cost_price" required placeholder="e.g., 12.50">

        <label for="purchase_date">Purchase Date</label>
        <input type="date" name="purchase_date" required>

        <label for="remarks">Remarks (Optional)</label>
        <textarea name="remarks" rows="3" placeholder="e.g., New stock from supplier XYZ..."></textarea>

        <!-- Preview button -->
        <button class="submit-btn" type="button" onclick="showPreview()">Preview Summary</button>

        <!-- Preview summary box -->
        <div id="previewBox">
            <h3>📦 Stock Entry Preview</h3>
            <div id="previewContent"></div>
            <div id="previewButtons">
                <button type="submit" class="submit-btn">Confirm & Submit</button>
                <button type="button" class="submit-btn" style="background-color: grey;" onclick="hidePreview()">Cancel</button>
            </div>
        </div>
    </form>
</div>

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

<script>
function showPreview() {
    const product = document.querySelector('#product_id');
    const store = document.querySelector('#store_id');
    const supplier = document.querySelector('#supplier_id');
    const qty = document.querySelector('[name="quantity"]').value;
    const cost = document.querySelector('[name="cost_price"]').value;
    const date = document.querySelector('[name="purchase_date"]').value;
    const remarks = document.querySelector('[name="remarks"]').value;

    if (!product.value || !store.value || !qty || !cost || !date) {
        alert('Please fill all required fields before previewing.');
        return;
    }

    const total = (qty * cost).toFixed(2);

    document.getElementById('previewContent').innerHTML = `
        <strong>Product:</strong> ${product.options[product.selectedIndex].text}<br>
        <strong>Store:</strong> ${store.options[store.selectedIndex].text}<br>
        <strong>Supplier:</strong> ${supplier.options[supplier.selectedIndex]?.text || 'N/A'}<br>
        <strong>Quantity:</strong> ${qty}<br>
        <strong>Cost per Unit:</strong> ${parseFloat(cost).toFixed(2)}<br>
        <strong>Total Cost:</strong> ${total}<br>
        <strong>Purchase Date:</strong> ${date}<br>
        <strong>Remarks:</strong> ${remarks ? remarks : 'N/A'}<br>
    `;

    document.getElementById('previewBox').style.display = 'block';
    window.scrollTo(0, document.body.scrollHeight);
}

function hidePreview() {
    document.getElementById('previewBox').style.display = 'none';
}
</script>

</body>
</html>
