{% 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-file-invoice"></i> Bill-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>
                <div class="form-group mr-3 mb-2">
                    <label class="mr-2">Status:</label>
                    <select name="status" class="form-control">
                        <option value="all" {% if status_filter == 'all' %}selected{% endif %}>All</option>
                        <option value="pending" {% if status_filter == 'pending' %}selected{% endif %}>Pending</option>
                        <option value="approved" {% if status_filter == 'approved' %}selected{% endif %}>Approved</option>
                        <option value="partially_approved" {% if status_filter == 'partially_approved' %}selected{% endif %}>Partial</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-3">
            <div class="card bg-light">
                <div class="card-body text-center">
                    <h6 class="text-muted">Total Transfers</h6>
                    <h3>{{ summary.total_transfers }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <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-3">
            <div class="card bg-light">
                <div class="card-body text-center">
                    <h6 class="text-muted">Total Value</h6>
                    <h3>{{ summary.total_value|floatformat:2 }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-light">
                <div class="card-body text-center">
                    <h6 class="text-muted">Grand Total</h6>
                    <h3>{{ summary.grand_total|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">
                    <thead class="thead-dark">
                        <tr>
                            <th>#</th>
                            <th>Date</th>
                            <th>Direction</th>
                            <th>From Branch</th>
                            <th>To Branch</th>
                            <th>Items Qty</th>
                            <th>Value</th>
                            <th>Overhead</th>
                            <th>Grand Total</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in transfer_data %}
                        <tr>
                            <td>{{ item.transfer.pk }}</td>
                            <td>{{ item.transfer.created_at|date:"Y-m-d H:i" }}</td>
                            <td>
                                {% if item.direction == 'Outgoing' %}
                                <span class="badge badge-primary">
                                    <i class="fas fa-arrow-up"></i> Outgoing
                                </span>
                                {% else %}
                                <span class="badge badge-success">
                                    <i class="fas fa-arrow-down"></i> Incoming
                                </span>
                                {% endif %}
                            </td>
                            <td>{{ item.transfer.from_branch.branch_name }}</td>
                            <td>{{ item.transfer.to_branch.branch_name }}</td>
                            <td>{{ item.total_qty|floatformat:2 }}</td>
                            <td>{{ item.total_value|floatformat:2 }}</td>
                            <td>
                                <span class="{% if item.overhead < 0 %}text-danger{% else %}text-success{% endif %}">
                                    {{ item.overhead|floatformat:2 }}
                                </span>
                            </td>
                            <td><strong>{{ item.grand_total|floatformat:2 }}</strong></td>
                            <td>
                                {% if item.transfer.status == 'pending' %}
                                <span class="badge badge-warning">Pending</span>
                                {% elif item.transfer.status == 'approved' %}
                                <span class="badge badge-success">Approved</span>
                                {% elif item.transfer.status == 'partially_approved' %}
                                <span class="badge badge-info">Partial</span>
                                {% else %}
                                <span class="badge badge-secondary">{{ item.transfer.status }}</span>
                                {% endif %}
                            </td>
                            <td>
                                <div class="btn-group btn-group-sm">
                                    <a href="{% url 'stock_transfer:transfer_print' item.transfer.pk %}" 
                                       class="btn btn-outline-info" title="View Details">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a href="{% url 'stock_transfer:transfer_print_a5' item.transfer.pk %}" 
                                       class="btn btn-outline-secondary" title="Print A4" target="_blank">
                                        <i class="fas fa-print"></i>
                                    </a>
                                    <a href="{% url 'stock_transfer:transfer_print_thermal' item.transfer.pk %}"
                                       target="_blank"
                                       class="btn btn-sm btn-outline-dark"
                                       title="Thermal Print (80mm)">
                                       🧾
                                    </a>
                                </div>
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="11" class="text-center text-muted py-4">
                                <i class="fas fa-inbox fa-3x mb-3 d-block"></i>
                                No transfers found for the selected criteria.
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
    <!-- Overhead Summary -->
    {% if transfer_data %}
    <div class="card mt-4">
        <div class="card-header">
            <i class="fas fa-calculator"></i> Overhead Summary
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-3">
                    <p class="mb-1"><strong>Total Discount:</strong></p>
                    <p class="text-danger">
                        -{% widthratio summary.total_overhead 1 1 %} (varies per bill)
                    </p>
                </div>
                <div class="col-md-3">
                    <p class="mb-1"><strong>Total Loading:</strong></p>
                    <p class="text-info">Included in overhead</p>
                </div>
                <div class="col-md-3">
                    <p class="mb-1"><strong>Total Commission:</strong></p>
                    <p class="text-info">Included in overhead</p>
                </div>
                <div class="col-md-3">
                    <p class="mb-1"><strong>Net Overhead:</strong></p>
                    <p class="h5">{{ summary.total_overhead|floatformat:2 }}</p>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock content %}