{% extends 'layouts/base.html' %}

{% block content %}

<div class="page-head">
    <h1>Product / Service Management</h1>

    <div class="action-buttons">
        <a class="btn" href="{{ url_for('settings.index') }}">Settings</a>
        <a class="btn" href="{{ url_for('products.export', format='xlsx') }}">Export XLSX</a>
        <a class="btn" href="{{ url_for('products.export', format='csv') }}">Export CSV</a>
        <a class="btn" href="{{ url_for('products.bulk_import') }}">Import</a>
    </div>
</div>

<div class="grid-2">
    <div class="panel">
        <h3>Groups</h3>

        <form method="post" action="{{ url_for('products.create_group') }}" class="form-grid">
            <input name="name" placeholder="Group name" required>
            <input name="description" placeholder="Description">
            <select name="status">
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
            </select>
            <button class="btn" type="submit">Add Group</button>
        </form>

        <table class="modern-table">
            <thead><tr><th>Name</th><th>Description</th><th>Products</th><th>Status</th><th>Actions</th></tr></thead>
            <tbody>
                {% for g in groups %}
                <tr>
                    <td><input name="name" value="{{ g.name }}" form="group-{{ g.id }}" required></td>
                    <td><input name="description" value="{{ g.description or '' }}" form="group-{{ g.id }}"></td>
                    <td>{{ g.product_count }}</td>
                    <td>
                        <select name="status" form="group-{{ g.id }}">
                            <option value="active" {% if g.status == 'active' %}selected{% endif %}>Active</option>
                            <option value="inactive" {% if g.status == 'inactive' %}selected{% endif %}>Inactive</option>
                        </select>
                    </td>
                    <td>
                        <button class="btn btn-sm" type="submit" form="group-{{ g.id }}">Save</button>
                        <button class="btn btn-sm danger" type="submit" form="group-del-{{ g.id }}">Delete</button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>

        {% for g in groups %}
        <form id="group-{{ g.id }}" method="post" action="{{ url_for('products.edit_group', group_id=g.id) }}"></form>
        <form id="group-del-{{ g.id }}" method="post" action="{{ url_for('products.delete_group', group_id=g.id) }}"
              onsubmit="return confirm('Delete this group? Its products become ungrouped.')"></form>
        {% endfor %}
    </div>

    <div class="panel">
        <h3>Products / Services</h3>

        <form method="post" action="{{ url_for('products.create') }}" class="form-grid">
            <div class="form-group">
                <label>Group</label>
                <select name="group_id">
                    <option value="">Select Group</option>
                    {% for g in groups %}
                    <option value="{{ g.id }}">{{ g.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group"><label>Name</label><input name="name" required></div>
            <div class="form-group"><label>SKU</label><input name="sku"></div>
            <div class="form-group"><label>Price</label><input name="price" type="number" step="0.01" value="0"></div>
            <div class="form-group"><label>Tax Percent</label><input name="tax_percent" type="number" step="0.01" value="0"></div>
            <div class="form-group">
                <label>Status</label>
                <select name="status"><option value="active">Active</option><option value="inactive">Inactive</option></select>
            </div>
            <div class="form-group full-width"><label>Description</label><textarea name="description"></textarea></div>
            <div class="form-actions full-width"><button class="btn" type="submit">Add Product</button></div>
        </form>

        <form method="get" class="bulkbar">
            <input name="q" value="{{ filters.get('q', '') }}" placeholder="Search products">
            <select name="group_id">
                <option value="">All groups</option>
                {% for g in groups %}
                <option value="{{ g.id }}" {% if filters.get('group_id') == g.id|string %}selected{% endif %}>{{ g.name }}</option>
                {% endfor %}
            </select>
            <button class="btn btn-sm" type="submit">Filter</button>
            <a class="btn btn-sm" href="{{ url_for('products.index') }}">Reset</a>
        </form>

        <div class="table-wrap">
            <table class="modern-table">
                <thead>
                    <tr><th>Name</th><th>SKU</th><th>Group</th><th>Price</th><th>Tax</th><th>Status</th><th>Actions</th></tr>
                </thead>
                <tbody>
                    {% for p in products %}
                    <tr>
                        <td><strong>{{ p.name }}</strong></td>
                        <td>{{ p.sku or '-' }}</td>
                        <td>{{ p.group_name or '-' }}</td>
                        <td>₹{{ p.price or 0 }}</td>
                        <td>{{ p.tax_percent or 0 }}%</td>
                        <td><span class="badge">{{ p.status }}</span></td>
                        <td>
                            <a class="btn btn-sm" href="{{ url_for('products.edit', product_id=p.id) }}">Edit</a>
                            <form method="post" action="{{ url_for('products.delete', product_id=p.id) }}"
                                  onsubmit="return confirm('Delete this product?')" style="display:inline;">
                                <button class="btn btn-sm danger" type="submit">Delete</button>
                            </form>
                        </td>
                    </tr>
                    {% else %}
                    <tr><td colspan="7" style="text-align:center;">No products found.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="panel">
    <h3>Scrips (Calculator Point Values)</h3>
    <p class="muted">Scrips power the <a href="{{ url_for('tools.calculator') }}">profit/loss calculator</a>.</p>

    <form method="post" action="{{ url_for('products.create_scrip') }}" class="bulkbar">
        <input name="name" placeholder="Scrip name" required>
        <input name="category" placeholder="Category e.g. BULLIONS">
        <input name="lot_size" type="number" step="0.0001" placeholder="Lot size" value="1">
        <input name="point_value" type="number" step="0.0001" placeholder="Point value" value="1">
        <button class="btn" type="submit">Add Scrip</button>
    </form>

    <div class="table-wrap">
        <table class="modern-table">
            <thead><tr><th>Name</th><th>Category</th><th>Lot Size</th><th>Point Value</th><th>Status</th><th>Actions</th></tr></thead>
            <tbody>
                {% for s in scrips %}
                <tr>
                    <td><input name="name" value="{{ s.name }}" form="scrip-{{ s.id }}" required></td>
                    <td><input name="category" value="{{ s.category }}" form="scrip-{{ s.id }}"></td>
                    <td><input name="lot_size" type="number" step="0.0001" value="{{ s.lot_size }}" form="scrip-{{ s.id }}"></td>
                    <td><input name="point_value" type="number" step="0.0001" value="{{ s.point_value }}" form="scrip-{{ s.id }}"></td>
                    <td>
                        <select name="status" form="scrip-{{ s.id }}">
                            <option value="active" {% if s.status == 'active' %}selected{% endif %}>Active</option>
                            <option value="inactive" {% if s.status == 'inactive' %}selected{% endif %}>Inactive</option>
                        </select>
                    </td>
                    <td>
                        <button class="btn btn-sm" type="submit" form="scrip-{{ s.id }}">Save</button>
                        <button class="btn btn-sm danger" type="submit" form="scrip-del-{{ s.id }}">Delete</button>
                    </td>
                </tr>
                {% else %}
                <tr><td colspan="6" style="text-align:center;">No scrips configured.</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {% for s in scrips %}
    <form id="scrip-{{ s.id }}" method="post" action="{{ url_for('products.edit_scrip', scrip_id=s.id) }}"></form>
    <form id="scrip-del-{{ s.id }}" method="post" action="{{ url_for('products.delete_scrip', scrip_id=s.id) }}"
          onsubmit="return confirm('Delete this scrip?')"></form>
    {% endfor %}
</div>

{% endblock %}