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

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h1><i class="fas fa-boxes"></i> Item-wise Transfer Report</h1>
        <a href="{% url 'stock_transfer:reports_dashboard' %}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left"></i> Back to Reports
        </a>
    </div>
    
    <p class="text-muted">Branch: <strong>{{ branch.branch_name }}</strong></p>
    
    <!-- Filters -->
    <div class="card mb-4">
        <div class="card-body">
            <form method="get" class="form-inline flex-wrap">
                <div class="form-group mr-3 mb-2">
                    <label class="mr-2">From:</label>
                    <input type="date" name="from" value="{{ date_from }}" class="form-control">
                </div>
                <div class="form-group mr-3 mb-2">
                    <label class="mr-2">To:</label>
                    <input type="date" name="to" value="{{ date_to }}" class="form-control">
                </div>
                <div class="form-group mr-3 mb-2">
                    <label class="mr-2">Direction:</label>
                    <select name="direction" class="form-control">
                        <option value="all" {% if direction == 'all' %}selected{% endif %}>All</option>
                        <option value="outgoing" {% if direction == 'outgoing' %}selected{% endif %}>Outgoing</option>
                        <option value="incoming" {% if direction == 'incoming' %}selected{% endif %}>Incoming</option>
                    </select>
                </div>
                <button type="submit" class="btn btn-primary mb-2">
                    <i class="fas fa-filter"></i> Filter
                </button>
            </form>
        </div>
    </div>
    
    <!-- Summary Cards -->
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card bg-light">
                <div class="card-body text-center">
                    <h6 class="text-muted">Unique Products</h6>
                    <h3>{{ summary.total_items }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card bg-light">
                <div class="card-body text-center">
                    <h6 class="text-muted">Total Quantity</h6>
                    <h3>{{ summary.total_qty|floatformat:2 }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card bg-light">
                <div class="card-body text-center">
                    <h6 class="text-muted">Total Value (FIFO)</h6>
                    <h3>{{ summary.total_value|floatformat:2 }}</h3>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Data Table -->
    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped table-hover" id="itemTable">
                    <thead class="thead-dark">
                        <tr>
                            <th>#</th>
                            <th>Product Code</th>
                            <th>Product Name</th>
                            <th>Total Quantity</th>
                            <th>Total Value</th>
                            <th>Avg. Rate</th>
                            <th>Transfer Count</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in item_summary %}
                        <tr>
                            <td>{{ forloop.counter }}</td>
                            <td><code>{{ item.product_code }}</code></td>
                            <td>{{ item.product_name }}</td>
                            <td>{{ item.total_qty|floatformat:2 }}</td>
                            <td>{{ item.total_value|floatformat:2|default:"--" }}</td>
                            <td>
                                {% if item.total_qty and item.total_value %}
                                    {% widthratio item.total_value item.total_qty 1 %}
                                {% else %}
                                    --
                                {% endif %}
                            </td>
                            <td>
                                <span class="badge badge-info">{{ item.transfer_count }}</span>
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="7" class="text-center text-muted py-4">
                                <i class="fas fa-inbox fa-3x mb-3 d-block"></i>
                                No items found for the selected criteria.
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                    {% if item_summary %}
                    <tfoot class="bg-light">
                        <tr>
                            <th colspan="3" class="text-right">TOTALS:</th>
                            <th>{{ summary.total_qty|floatformat:2 }}</th>
                            <th>{{ summary.total_value|floatformat:2 }}</th>
                            <th>--</th>
                            <th>--</th>
                        </tr>
                    </tfoot>
                    {% endif %}
                </table>
            </div>
        </div>
    </div>
    
    <!-- Export Options -->
    {% if item_summary %}
    <div class="card mt-4">
        <div class="card-body">
            <button class="btn btn-outline-success" onclick="exportTable()">
                <i class="fas fa-file-excel"></i> Export to Excel
            </button>
            <button class="btn btn-outline-secondary" onclick="window.print()">
                <i class="fas fa-print"></i> Print Report
            </button>
        </div>
    </div>
    {% endif %}
</div>

<script>
function exportTable() {
    // Simple CSV export
    let csv = [];
    const rows = document.querySelectorAll('#itemTable tr');
    
    rows.forEach(row => {
        const cols = row.querySelectorAll('td, th');
        const rowData = [];
        cols.forEach(col => {
            rowData.push('"' + col.innerText.replace(/"/g, '""') + '"');
        });
        csv.push(rowData.join(','));
    });
    
    const csvContent = csv.join('\n');
    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = 'item_wise_report_{{ date_from }}_{{ date_to }}.csv';
    link.click();
}
</script>
{% endblock content %}