<?php
$pageTitle = 'Products';
require_once('./config/db.php');
require_once('./includes/admin_only.php');
include('./includes/header.php');

// Fetch all products
$products = $pdo->query("SELECT * FROM products ORDER BY Name ASC")->fetchAll();
?>
<style>
    .clickable-product.selected {
        border: 2px solid #0d6efd;
        background: #e9f3ff;
    }
</style>
<div class="d-flex justify-content-between align-items-center mb-3">
    <h3>Products</h3>
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addModal">Add Product</button>
</div>

<div class="row g-3">

    <?php foreach ($products as $p): ?>
        <div class="col-6 col-md-4 col-lg-3 col-xl-2">
            <div class="card card-product">

                <!-- Product Image -->
                <?php if (!empty($p['Photo'])): ?>
                    <img src="./uploads/<?= htmlspecialchars($p['Photo']) ?>" class="mb-2">
                <?php else: ?>
                    <div class="bg-light d-flex justify-content-center align-items-center mb-2"
                        style="height:150px;border-radius:8px;">
                        <span class="text-muted">No Photo</span>
                    </div>
                <?php endif; ?>

                <h6 class="fw-bold mb-1 px-1"><?= htmlspecialchars($p['Name']) ?></h6>

                <div class="small text-muted px-1">
                    ID: <strong><?= htmlspecialchars($p['ProductID']) ?></strong>
                </div>

                <div class="small px-1">
                    Buying: <strong><?= number_format($p['BuyingPrice'], 2) ?></strong>
                </div>

                <div class="small mb-1 px-1">
                    Selling: <strong><?= number_format($p['SellingPrice'], 2) ?></strong>
                </div>

                <div class="small mb-2 px-1">
                    Stock: <strong><?= (int)$p['StockQuantity'] ?></strong>
                </div>

                <div class="d-flex gap-2 px-1 pb-1">

                    <!-- Edit -->
                    <button class="btn btn-warning btn-sm w-50"
                        data-bs-toggle="modal"
                        data-bs-target="#editModal<?= $p['ProductID'] ?>">
                        Edit
                    </button>

                    <!-- Delete -->
                    <form method="post"
                        action="./actions/product_delete.php"
                        class="w-50"
                        onsubmit="return confirm('Delete this product?');">

                        <input type="hidden" name="ProductID"
                            value="<?= htmlspecialchars($p['ProductID']) ?>">

                        <button class="btn btn-danger btn-sm w-100">Delete</button>
                    </form>
                </div>

            </div>
        </div>


        <!-- EDIT PRODUCT MODAL -->
        <div class="modal fade" id="editModal<?= htmlspecialchars($p['ProductID']) ?>" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <form class="modal-content" method="post"
                    action="./actions/product_update.php"
                    enctype="multipart/form-data">

                    <div class="modal-header">
                        <h5 class="modal-title">Edit Product</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">

                        <input type="hidden" name="ProductID"
                            value="<?= htmlspecialchars($p['ProductID']) ?>">

                        <div class="mb-3 text-center">
                            <?php if (!empty($p['Photo'])): ?>
                                <img src="./uploads/<?= htmlspecialchars($p['Photo']) ?>"
                                    class="rounded mb-2" style="height:120px;">
                            <?php else: ?>
                                <div class="text-muted mb-2">No Photo</div>
                            <?php endif; ?>

                            <input type="file" class="form-control" name="Photo" accept="image/*">
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-bold">Product Name</label>
                            <input type="text" class="form-control"
                                name="Name"
                                value="<?= htmlspecialchars($p['Name']) ?>" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-bold">Buying Price</label>
                            <input type="number" class="form-control"
                                step="0.01"
                                name="BuyingPrice"
                                value="<?= htmlspecialchars($p['BuyingPrice']) ?>" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-bold">Selling Price</label>
                            <input type="number" class="form-control"
                                step="0.01"
                                name="SellingPrice"
                                value="<?= htmlspecialchars($p['SellingPrice']) ?>" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-bold">Stock Quantity</label>
                            <input type="number" class="form-control"
                                name="StockQuantity"
                                value="<?= htmlspecialchars($p['StockQuantity']) ?>" required>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button class="btn btn-primary">Save Changes</button>
                    </div>

                </form>
            </div>
        </div>

    <?php endforeach; ?>
</div>

<!-- ADD PRODUCT MODAL -->
<div class="modal fade" id="addModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <form class="modal-content"
            method="post"
            action="./actions/product_create.php"
            enctype="multipart/form-data">

            <div class="modal-header">
                <h5 class="modal-title">Add Product</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">

                <!-- Product ID Select / New -->
                <div class="mb-3">
                    <label class="form-label fw-bold">Product ID</label>

                    <select class="form-control" id="ProductIDSelect">
                        <option value="">-- Select Existing Product --</option>

                        <?php
                        $pidList = $pdo->query("SELECT ProductID, Name FROM products ORDER BY Name ASC");
                        foreach ($pidList as $row):
                        ?>
                            <option value="<?= htmlspecialchars($row['ProductID']) ?>">
                                <?= htmlspecialchars($row['ProductID']) ?> - <?= htmlspecialchars($row['Name']) ?>
                            </option>
                        <?php endforeach; ?>

                        <option value="new">+ Add New Product ID</option>
                    </select>

                    <input class="form-control mt-2"
                        name="ProductID"
                        id="ProductIDInput"
                        placeholder="Enter new Product ID"
                        style="display:none;">
                </div>

                <script>
                    document.getElementById('ProductIDSelect').addEventListener('change', function() {
                        const input = document.getElementById('ProductIDInput');

                        if (this.value === 'new') {
                            input.style.display = 'block';
                            input.required = true;
                        } else {
                            input.style.display = 'none';
                            input.required = false;
                            input.value = this.value;
                        }
                    });
                </script>

                <div class="mb-3">
                    <label class="form-label fw-bold">Product Name</label>
                    <input class="form-control" name="Name" required>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-bold">Product Photo</label>
                    <input type="file" class="form-control" name="Photo" accept="image/*">
                </div>

                <div class="mb-3">
                    <label class="form-label fw-bold">Buying Price</label>
                    <input class="form-control" name="BuyingPrice" type="number" step="0.01" required>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-bold">Selling Price</label>
                    <input class="form-control" name="SellingPrice" type="number" step="0.01" required>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-bold">Stock Quantity</label>
                    <input class="form-control" name="StockQuantity" type="number" min="0" required>
                </div>
            </div>

            <div class="modal-footer">
                <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button class="btn btn-primary" type="submit">Add</button>
            </div>

        </form>
    </div>
</div>

<!-- EDIT PRODUCT MODAL -->
<div class="modal fade" id="editModal<?= htmlspecialchars($p['ProductID']) ?>" tabindex="-1"
    aria-labelledby="editModalLabel<?= htmlspecialchars($p['ProductID']) ?>" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <form action="./actions/product_update.php" method="POST" enctype="multipart/form-data" class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title" id="editModalLabel<?= htmlspecialchars($p['ProductID']) ?>">
                    Edit Product
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">

                <!-- Hidden Product ID -->
                <input type="hidden" name="ProductID" value="<?= htmlspecialchars($p['ProductID']) ?>">

                <!-- Photo Preview -->
                <div class="mb-3 text-center">
                    <?php if (!empty($p['Photo'])): ?>
                        <img src="./uploads/<?= htmlspecialchars($p['Photo']) ?>"
                            class="rounded mb-2"
                            style="height:120px; max-width:100%; object-fit:cover;">
                    <?php else: ?>
                        <div class="text-muted mb-2">No Photo</div>
                    <?php endif; ?>

                    <input type="file" class="form-control" name="Photo" accept="image/*">
                </div>

                <!-- Product Name -->
                <div class="mb-3">
                    <label class="form-label fw-bold">Product Name</label>
                    <input type="text" class="form-control" name="Name"
                        value="<?= htmlspecialchars($p['Name']) ?>" required>
                </div>

                <!-- Buying Price -->
                <div class="mb-3">
                    <label class="form-label fw-bold">Buying Price</label>
                    <input type="number" class="form-control" name="BuyingPrice"
                        value="<?= htmlspecialchars($p['BuyingPrice']) ?>" step="0.01" required>
                </div>

                <!-- Selling Price -->
                <div class="mb-3">
                    <label class="form-label fw-bold">Selling Price</label>
                    <input type="number" class="form-control" name="SellingPrice"
                        value="<?= htmlspecialchars($p['SellingPrice']) ?>" step="0.01" required>
                </div>

                <!-- Stock Quantity -->
                <div class="mb-3">
                    <label class="form-label fw-bold">Stock Quantity</label>
                    <input type="number" class="form-control" name="StockQuantity"
                        value="<?= htmlspecialchars($p['StockQuantity']) ?>" required>
                </div>

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">Save Changes</button>
            </div>

        </form>
    </div>
</div>
<!-- END EDIT PRODUCT MODAL -->


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