{% extends "pos/base.html" %}

{% block title %}Product Space Cleaner{% endblock %}

{% block heading %}Product Space Cleaner{% endblock %}

{% block content %}

<div class="card shadow-sm border-0 mb-4">
    <div class="card-header bg-primary text-white">
        <strong>Product Code / Product Name Space Cleaner</strong>
    </div>

    <div class="card-body">

        <div class="alert alert-info">
            <strong>Database:</strong> {{ selected_db }} <br>
            Ye tool sirf <strong>product_code</strong> aur <strong>name</strong> ke left/right spaces remove karega.
            Middle spaces change nahi honge.
        </div>

        <div class="row mb-3">
            <div class="col-md-4">
                <div class="card border-left-warning shadow-sm">
                    <div class="card-body">
                        <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                            Affected Products
                        </div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">
                            {{ total_affected }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {% if total_affected > 0 %}

            <form method="post" class="mb-3">
                {% csrf_token %}
                <button type="submit" class="btn btn-success"
                        onclick="return confirm('Are you sure? Product code aur name ke left/right spaces remove ho jayenge.')">
                    Clean Spaces Now
                </button>
            </form>

            <div class="alert alert-warning">
                Neechy sirf first {{ preview_limit }} affected products ka preview hai.
            </div>

            <div class="table-responsive">
                <table class="table table-bordered table-sm table-hover">
                    <thead>
                        <tr>
                            <th style="width: 70px;">ID</th>
                            <th>Old Code</th>
                            <th>New Code</th>
                            <th>Old Name</th>
                            <th>New Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in preview_rows %}
                        <tr>
                            <td>{{ row.id }}</td>
                            <td>
                                <code>[{{ row.old_code }}]</code>
                            </td>
                            <td>
                                <code>[{{ row.new_code }}]</code>
                            </td>
                            <td>
                                <code>[{{ row.old_name }}]</code>
                            </td>
                            <td>
                                <code>[{{ row.new_name }}]</code>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

        {% else %}

            <div class="alert alert-success">
                Koi product affected nahi hai. Sab product codes aur names already clean hain.
            </div>

        {% endif %}

    </div>
</div>

{% endblock %}