<%
const p = product || {};
const isEdit = !!product;
let specs = {};
try { specs = p.specs ? JSON.parse(p.specs) : {}; } catch(e) {}
const specKeys = Object.keys(specs);
%>

<%- include('layout', { pageTitle: isEdit ? 'Edit Product' : 'New Product', activePage: 'products' }) %>

<div class="section-header">
    <h2><i class="fas fa-box"></i> <%= isEdit ? 'Edit Product' : 'Add Product' %></h2>
    <a href="/admin/products" class="btn btn-outline"><i class="fas fa-arrow-left"></i> Back</a>
</div>

<div class="form-card">
    <form method="POST" action="/admin/products/<%= isEdit ? p.id : '' %>" enctype="multipart/form-data">
        <div class="form-row">
            <div class="form-group">
                <label>Product Name *</label>
                <input type="text" name="name" required value="<%= p.name || '' %>" placeholder="e.g. Canon IR 2006N Xerox Machine">
            </div>
            <div class="form-group">
                <label>Category *</label>
                <select name="category_id" required>
                    <option value="">Select Category</option>
                    <% categories.forEach(cat => { %>
                    <option value="<%= cat.id %>" <%= p.category_id == cat.id ? 'selected' : '' %>><%= cat.name %></option>
                    <% }); %>
                </select>
            </div>
        </div>

        <div class="form-row">
            <div class="form-group">
                <label>Price</label>
                <input type="text" name="price" value="<%= p.price || '' %>" placeholder="e.g. Rs 35,000 / Piece">
            </div>
            <div class="form-group">
                <label>Minimum Order</label>
                <input type="text" name="min_order" value="<%= p.min_order || '' %>" placeholder="e.g. 1 Piece">
            </div>
        </div>

        <div class="form-group">
            <label>Description</label>
            <textarea name="description" rows="3" placeholder="Product description..."><%= p.description || '' %></textarea>
        </div>

        <div class="form-group">
            <label>Image</label>
            <% if (isEdit && p.image) { %>
            <div class="current-image">
                <img src="<%= p.image %>" alt="Current image">
            </div>
            <% } %>
            <input type="file" name="image" accept="image/*">
            <small>Or enter image URL below:</small>
            <input type="text" name="image_url" value="<%= p.image || '' %>" placeholder="https://example.com/image.jpg">
        </div>

        <div class="form-group">
            <label>Specifications (JSON)</label>
            <textarea name="specs" rows="6" placeholder='{"Brand": "Canon", "Model": "IR 2006N", "Type": "Multifunction"}'><%= p.specs || '' %></textarea>
            <small>Enter as JSON object. Example: {"Brand": "Canon", "Speed": "20 ppm"}</small>
        </div>

        <div class="form-group">
            <label>Features (one per line)</label>
            <textarea name="features" rows="4" placeholder="Easy to use&#10;Low maintenance&#10;High quality output"><%= p.features ? p.features.split('|').join('\n') : '' %></textarea>
            <small>Enter each feature on a new line</small>
        </div>

        <div class="form-row">
            <div class="form-group">
                <label>Sort Order</label>
                <input type="number" name="sort_order" value="<%= p.sort_order || 0 %>">
            </div>
            <div class="form-group">
                <label>Featured</label>
                <select name="is_featured">
                    <option value="0" <%= !p.is_featured ? 'selected' : '' %>>No</option>
                    <option value="1" <%= p.is_featured ? 'selected' : '' %>>Yes</option>
                </select>
            </div>
        </div>

        <div class="form-actions">
            <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Save Product</button>
            <a href="/admin/products" class="btn btn-outline">Cancel</a>
        </div>
    </form>
</div>

<%- include('layout-footer') %>
