{% 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-exchange-alt"></i> Branch Transfer Summary</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">
                <div class="form-group mr-3">
                    <label class="mr-2">From:</label>
                    <input type="date" name="from" value="{{ date_from }}" class="form-control">
                </div>
                <div class="form-group mr-3">
                    <label class="mr-2">To:</label>
                    <input type="date" name="to" value="{{ date_to }}" class="form-control">
                </div>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-filter"></i> Filter
                </button>
            </form>
        </div>
    </div>
    
    <!-- Branch Summary Cards -->
    <div class="row">
        {% for item in branch_summary %}
        <div class="col-lg-6 mb-4">
            <div class="card h-100">
                <div class="card-header bg-dark text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-store"></i> {{ item.branch.branch_name }}
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <!-- Outgoing -->
                        <div class="col-md-6">
                            <div class="border-right pr-3">
                                <h6 class="text-primary">
                                    <i class="fas fa-arrow-up"></i> Sent to this branch
                                </h6>
                                <table class="table table-sm table-borderless">
                                    <tr>
                                        <td class="text-muted">Transfers:</td>
                                        <td><strong>{{ item.outgoing_count }}</strong></td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">Quantity:</td>
                                        <td><strong>{{ item.outgoing_qty|floatformat:2 }}</strong></td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">Value:</td>
                                        <td><strong>{{ item.outgoing_value|floatformat:2 }}</strong></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        
                        <!-- Incoming -->
                        <div class="col-md-6">
                            <h6 class="text-success">
                                <i class="fas fa-arrow-down"></i> Received from this branch
                            </h6>
                            <table class="table table-sm table-borderless">
                                <tr>
                                    <td class="text-muted">Transfers:</td>
                                    <td><strong>{{ item.incoming_count }}</strong></td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Quantity:</td>
                                    <td><strong>{{ item.incoming_qty|floatformat:2 }}</strong></td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Value:</td>
                                    <td><strong>{{ item.incoming_value|floatformat:2 }}</strong></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    
                    <hr>
                    
                    <!-- Net Balance -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="text-center p-2 {% if item.net_qty > 0 %}bg-primary text-white{% elif item.net_qty < 0 %}bg-success text-white{% else %}bg-light{% endif %} rounded">
                                <small>Net Quantity</small>
                                <h4 class="mb-0">
                                    {% if item.net_qty > 0 %}+{% endif %}{{ item.net_qty|floatformat:2 }}
                                </h4>
                                <small>
                                    {% if item.net_qty > 0 %}
                                        (More sent)
                                    {% elif item.net_qty < 0 %}
                                        (More received)
                                    {% else %}
                                        (Balanced)
                                    {% endif %}
                                </small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="text-center p-2 {% if item.net_value > 0 %}bg-primary text-white{% elif item.net_value < 0 %}bg-success text-white{% else %}bg-light{% endif %} rounded">
                                <small>Net Value</small>
                                <h4 class="mb-0">
                                    {% if item.net_value > 0 %}+{% endif %}{{ item.net_value|floatformat:2 }}
                                </h4>
                                <small>
                                    {% if item.net_value > 0 %}
                                        (Receivable)
                                    {% elif item.net_value < 0 %}
                                        (Payable)
                                    {% else %}
                                        (Settled)
                                    {% endif %}
                                </small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer bg-light">
                    <small class="text-muted">
                        Period: {{ date_from }} to {{ date_to }}
                    </small>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12">
            <div class="alert alert-info">
                <i class="fas fa-info-circle"></i>
                No connected branches found. 
                <a href="{% url 'stock_transfer:connection_create' %}">Create a branch connection</a> to start transferring stock.
            </div>
        </div>
        {% endfor %}
    </div>
    
    <!-- Summary Table -->
    {% if branch_summary %}
    <div class="card mt-4">
        <div class="card-header">
            <i class="fas fa-table"></i> Summary Table
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered">
                    <thead class="thead-light">
                        <tr>
                            <th>Branch</th>
                            <th class="text-center" colspan="3">Outgoing (Sent)</th>
                            <th class="text-center" colspan="3">Incoming (Received)</th>
                            <th class="text-center" colspan="2">Net</th>
                        </tr>
                        <tr>
                            <th></th>
                            <th>Count</th>
                            <th>Qty</th>
                            <th>Value</th>
                            <th>Count</th>
                            <th>Qty</th>
                            <th>Value</th>
                            <th>Qty</th>
                            <th>Value</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in branch_summary %}
                        <tr>
                            <td><strong>{{ item.branch.branch_name }}</strong></td>
                            <td>{{ item.outgoing_count }}</td>
                            <td>{{ item.outgoing_qty|floatformat:2 }}</td>
                            <td>{{ item.outgoing_value|floatformat:2 }}</td>
                            <td>{{ item.incoming_count }}</td>
                            <td>{{ item.incoming_qty|floatformat:2 }}</td>
                            <td>{{ item.incoming_value|floatformat:2 }}</td>
                            <td class="{% if item.net_qty > 0 %}text-primary{% elif item.net_qty < 0 %}text-success{% endif %}">
                                {% if item.net_qty > 0 %}+{% endif %}{{ item.net_qty|floatformat:2 }}
                            </td>
                            <td class="{% if item.net_value > 0 %}text-primary{% elif item.net_value < 0 %}text-success{% endif %}">
                                {% if item.net_value > 0 %}+{% endif %}{{ item.net_value|floatformat:2 }}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock content %}