{% extends "pos/base.html" %}
{% block title %}Stock Adjustments{% endblock title %}
{% block heading %}Manual Stock Adjustments{% endblock heading %}

{% block stylesheets %}
{{ block.super }}
<style>
.table-hover tbody tr:hover {
    background-color: rgba(0,123,255,0.1);
}
.badge-in { background-color: #28a745; }
.badge-out { background-color: #dc3545; }
.btn-action { padding: 0.25rem 0.5rem; font-size: 0.8rem; }
</style>
{% endblock %}

{% block content %}
<div class="row mb-3">
    <div class="col-12 d-flex justify-content-between align-items-center">
        <a href="{% url 'products:stock_adjustment_create' %}" class="btn btn-success font-weight-bold">
            <i class="fas fa-plus mr-1"></i> New Adjustment
        </a>
    </div>
</div>

<!-- Filters -->
<div class="card mb-3">
    <div class="card-body py-2">
        <form method="get" class="form-inline">
            <div class="form-group mr-3 mb-2">
                <label class="mr-2">From:</label>
                <input type="date" name="date_from" class="form-control form-control-sm" 
                       value="{{ date_from }}">
            </div>
            <div class="form-group mr-3 mb-2">
                <label class="mr-2">To:</label>
                <input type="date" name="date_to" class="form-control form-control-sm" 
                       value="{{ date_to }}">
            </div>
            <div class="form-group mr-3 mb-2">
                <label class="mr-2">Search:</label>
                <input type="text" name="search" class="form-control form-control-sm" 
                       placeholder="Adjustment # or remarks" value="{{ search }}">
            </div>
            <button type="submit" class="btn btn-primary btn-sm mb-2 mr-2">
                <i class="fas fa-search"></i> Filter
            </button>
            <a href="{% url 'products:stock_adjustment_list' %}" class="btn btn-secondary btn-sm mb-2">
                <i class="fas fa-times"></i> Clear
            </a>
        </form>
    </div>
</div>

<!-- Table -->
<div class="card">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover table-striped mb-0">
                <thead class="thead-dark">
                    <tr>
                        <th style="width:80px;">Adj #</th>
                        <th style="width:110px;">Date</th>
                        <th>Remarks</th>
                        <th class="text-center" style="width:80px;">Items</th>
                        <th class="text-center" style="width:100px;">Qty In</th>
                        <th class="text-center" style="width:100px;">Qty Out</th>
                        <th style="width:120px;">Created By</th>
                        <th class="text-center" style="width:150px;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for adj in page_obj %}
                    <tr>
                        <td><strong>{{ adj.adjustment_no }}</strong></td>
                        <td>{{ adj.adjustment_date|date:"d M Y" }}</td>
                        <td>{{ adj.remarks|truncatechars:50 }}</td>
                        <td class="text-center">{{ adj.total_items }}</td>
                        <td class="text-center">
                            {% if adj.total_qty_in > 0 %}
                            <span class="badge badge-in">+{{ adj.total_qty_in }}</span>
                            {% else %}-{% endif %}
                        </td>
                        <td class="text-center">
                            {% if adj.total_qty_out > 0 %}
                            <span class="badge badge-out">-{{ adj.total_qty_out }}</span>
                            {% else %}-{% endif %}
                        </td>
                        <td>{{ adj.created_by.name|default:"-" }}</td>
                        <td class="text-center">
                            <a href="{% url 'products:stock_adjustment_detail' adj.id %}" 
                               class="btn btn-info btn-action" title="View">
                                <i class="fas fa-eye"></i>
                            </a>
                            <a href="{% url 'products:stock_adjustment_edit' adj.id %}" 
                               class="btn btn-warning btn-action" title="Edit">
                                <i class="fas fa-edit"></i>
                            </a>
                            <a href="{% url 'products:stock_adjustment_print' adj.id %}" 
                               class="btn btn-secondary btn-action" title="Print" target="_blank">
                                <i class="fas fa-print"></i>
                            </a>
                            <button type="button" class="btn btn-danger btn-action btn-delete" 
                                    data-id="{{ adj.id }}" data-no="{{ adj.adjustment_no }}" title="Delete">
                                <i class="fas fa-trash"></i>
                            </button>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="8" class="text-center text-muted py-4">
                            No adjustments found
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Pagination -->
{% if page_obj.has_other_pages %}
<nav class="mt-3">
    <ul class="pagination justify-content-center">
        {% if page_obj.has_previous %}
        <li class="page-item">
            <a class="page-link" href="?page={{ page_obj.previous_page_number }}&date_from={{ date_from }}&date_to={{ date_to }}&search={{ search }}">
                &laquo; Previous
            </a>
        </li>
        {% endif %}
        
        <li class="page-item disabled">
            <span class="page-link">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
        </li>
        
        {% if page_obj.has_next %}
        <li class="page-item">
            <a class="page-link" href="?page={{ page_obj.next_page_number }}&date_from={{ date_from }}&date_to={{ date_to }}&search={{ search }}">
                Next &raquo;
            </a>
        </li>
        {% endif %}
    </ul>
</nav>
{% endif %}

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">Confirm Delete</h5>
                <button type="button" class="close text-white" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete Adjustment #<strong id="deleteAdjNo"></strong>?</p>
                <p class="text-danger"><i class="fas fa-exclamation-triangle"></i> 
                   This will reverse all stock movements. This action cannot be undone.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">
                    <i class="fas fa-trash"></i> Delete
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

{% block javascripts %}
{{ block.super }}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const csrf = '{{ csrf_token }}';
    let deleteId = null;
    
    // Delete button click
    document.querySelectorAll('.btn-delete').forEach(btn => {
        btn.addEventListener('click', function() {
            deleteId = this.dataset.id;
            document.getElementById('deleteAdjNo').textContent = this.dataset.no;
            $('#deleteModal').modal('show');
        });
    });
    
    // Confirm delete
    document.getElementById('confirmDeleteBtn').addEventListener('click', function() {
        if (!deleteId) return;
        
        this.disabled = true;
        this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Deleting...';
        
        fetch('{% url "products:stock_adjustment_delete" %}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrf,
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: JSON.stringify({ adjustment_id: deleteId })
        })
        .then(res => res.json())
        .then(data => {
            if (data.ok) {
                window.location.reload();
            } else {
                alert(data.message || 'Delete failed');
                this.disabled = false;
                this.innerHTML = '<i class="fas fa-trash"></i> Delete';
            }
        })
        .catch(err => {
            alert('Network error');
            this.disabled = false;
            this.innerHTML = '<i class="fas fa-trash"></i> Delete';
        });
    });
});
</script>
{% endblock %}