<?php
require_once '../../includes/auth_middleware.php';
require_once '../../config/database.php';
require_once '../../includes/header.php';
checkRole(['admin']);

// Ambil semua bahan baku
$ingredients = $pdo->query("SELECT * FROM ingredients ORDER BY name ASC")->fetchAll();
?>

<div class="container" style="max-width: 900px; padding-bottom: 50px;">
    
    <?php if (isset($_GET['status']) && $_GET['status'] == 'updated'): ?>
        <div style="background: #ecfdf5; border-left: 5px solid #10b981; color: #065f46; padding: 15px; margin-bottom: 20px; border-radius: 8px;">
            ✅ Data bahan baku berhasil diperbarui!
        </div>
    <?php endif; ?>

    <div class="card" style="border-top: 5px solid var(--primary);">
        <h2 style="margin-top:0;">TAMBAH BAHAN BAKU</h2>
        <form action="../../api/add_ingredient.php" method="POST" style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
            <div class="input-group" style="grid-column: span 2;">
                <label style="font-weight: bold; font-size: 0.85rem;">Nama Bahan (Contoh: Daging Kebab)</label>
                <input type="text" name="name" required placeholder="Nama bahan..." style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid #ddd;">
            </div>
            <div class="input-group">
                <label style="font-weight: bold; font-size: 0.85rem;">Satuan</label>
                <select name="unit" required style="width:100%; padding: 12px; border-radius: 8px; border: 1px solid #ddd;">
                    <option value="gram">Gram (Weight-based)</option>
                    <option value="pcs">Pcs (Piece-based)</option>
                </select>
            </div>
            <div class="input-group">
                <label style="font-weight: bold; font-size: 0.85rem;">Harga per Gram/Pcs (Rp)</label>
                <input type="number" name="price_per_unit" step="0.01" required placeholder="Contoh: 150" style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid #ddd;">
            </div>
            <div class="input-group">
                <label style="font-weight: bold; font-size: 0.85rem;">Stok Awal</label>
                <input type="number" name="stock_qty" value="0" step="0.01" required style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid #ddd;">
            </div>
            <div class="input-group">
                <label style="font-weight: bold; font-size: 0.85rem;">Batas Stok Kritis</label>
                <input type="number" name="min_stock_level" value="10" required style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid #ddd;">
            </div>
            <button type="submit" class="btn-primary" style="grid-column: span 2; padding: 12px; font-size: 1rem;">SIMPAN BAHAN</button>
        </form>
    </div>

    <div class="card" style="margin-top: 2rem; overflow-x: auto;">
        <h3 style="margin-top: 0; color: #374151;">DAFTAR BAHAN BAKU</h3>
        <table style="width: 100%; border-collapse: collapse; min-width: 600px;">
            <thead>
                <tr style="text-align: left; border-bottom: 2px solid #ddd; background: #f9fafb;">
                    <th style="padding: 12px; color: #4b5563; font-size: 0.85rem;">BAHAN</th>
                    <th style="padding: 12px; color: #4b5563; font-size: 0.85rem;">HARGA/UNIT</th>
                    <th style="padding: 12px; color: #4b5563; font-size: 0.85rem;">STOK</th>
                    <th style="padding: 12px; color: #4b5563; font-size: 0.85rem; text-align: center;">AKSI</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($ingredients as $ing): 
                    $is_low = $ing['stock_qty'] <= $ing['min_stock_level'];
                ?>
                <tr style="border-bottom: 1px solid #eee; background: <?= $is_low ? '#fef2f2' : 'transparent' ?>;">
                    <td style="padding: 12px; font-weight: bold; color: #1f2937;">
                        <?= htmlspecialchars($ing['name']) ?>
                    </td>
                    <td style="padding: 12px; font-weight: 500;">
                        Rp <?= number_format($ing['price_per_unit'], 2, ',', '.') ?>
                    </td>
                    <td style="padding: 12px;">
                        <span style="font-weight: 800; color: <?= $is_low ? '#dc2626' : '#10b981' ?>;">
                            <?= number_format($ing['stock_qty'], 2, ',', '.') ?> <?= htmlspecialchars($ing['unit']) ?>
                        </span>
                        <?= $is_low ? '<span style="font-size: 0.75rem; color: #dc2626; display: block;">(Limit!)</span>' : '' ?>
                    </td>
                    <td style="padding: 12px; text-align: center;">
                        <button type="button" onclick='openEditModal(<?= json_encode($ing) ?>)' style="background: #3b82f6; color: white; border: none; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 0.8rem; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                            ✏️ Edit
                        </button>
                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>

<div id="editModal" style="display:none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); align-items: center; justify-content: center; backdrop-filter: blur(3px);">
    <div class="card" style="width: 100%; max-width: 450px; margin: 20px; position: relative; animation: slideDown 0.3s ease-out;">
        
        <span onclick="closeModal()" style="position: absolute; right: 15px; top: 15px; font-size: 1.5rem; cursor: pointer; color: #9ca3af;">&times;</span>
        
        <h3 style="margin-top: 0; color: #1f2937; border-bottom: 2px solid #f3f4f6; padding-bottom: 10px;">Update Bahan Baku</h3>
        
        <form action="../../api/update_ingredient.php" method="POST">
            <input type="hidden" name="id" id="edit_id">
            
            <div style="margin-bottom: 15px;">
                <label style="display: block; font-size: 0.8rem; font-weight: bold; margin-bottom: 5px; color: #4b5563;">Nama Bahan & Satuan</label>
                <div style="display: flex; gap: 10px;">
                    <input type="text" name="name" id="edit_name" style="flex: 3; padding: 10px; border: 1px solid #ddd; border-radius: 8px; font-weight: bold;" required>
                    <input type="text" id="edit_unit" style="flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 8px; background: #f3f4f6; color: #6b7280; text-align: center; font-weight: bold;" readonly>
                </div>
                <small style="color: #9ca3af;">*Satuan tidak bisa diubah karena terikat pada perhitungan resep.</small>
            </div>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px;">
                <div>
                    <label style="display: block; font-size: 0.8rem; font-weight: bold; margin-bottom: 5px; color: #4b5563;">Stok Sekarang</label>
                    <input type="number" step="0.01" name="stock_qty" id="edit_stock" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 8px;" required>
                </div>
                <div>
                    <label style="display: block; font-size: 0.8rem; font-weight: bold; margin-bottom: 5px; color: #4b5563;">Harga / Unit</label>
                    <input type="number" step="0.01" name="price_per_unit" id="edit_price" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 8px;" required>
                </div>
            </div>

            <div style="margin-bottom: 20px;">
                <label style="display: block; font-size: 0.8rem; font-weight: bold; margin-bottom: 5px; color: #4b5563;">Batas Stok Minimal</label>
                <input type="number" name="min_stock_level" id="edit_min" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 8px;" required>
            </div>

            <div style="display: flex; gap: 10px;">
                <button type="submit" class="btn-primary" style="flex: 2; padding: 12px; font-size: 1rem;">Simpan Perubahan</button>
            </div>
        </form>
    </div>
</div>

<style>
    @keyframes slideDown {
        from { transform: translateY(-20px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
</style>

<script>
function openEditModal(data) {
    document.getElementById('edit_id').value = data.id;
    // Sekarang nama & satuan dipisah inputnya
    document.getElementById('edit_name').value = data.name; 
    document.getElementById('edit_unit').value = data.unit;
    
    document.getElementById('edit_stock').value = data.stock_qty;
    document.getElementById('edit_price').value = data.price_per_unit;
    document.getElementById('edit_min').value = data.min_stock_level;
    
    document.getElementById('editModal').style.display = 'flex';
}

function closeModal() {
    document.getElementById('editModal').style.display = 'none';
}

window.onclick = function(event) {
    const modal = document.getElementById('editModal');
    if (event.target == modal) {
        closeModal();
    }
}
</script>