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

{% block content %}
<div class="container-fluid">
    <h1><i class="fas fa-chart-bar"></i> Stock Transfer Reports</h1>
    <p class="text-muted">Branch: <strong>{{ branch.branch_name }}</strong></p>
    
    <hr>
    
    <!-- Quick Stats Cards -->
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="card-subtitle mb-1">Outgoing Transfers</h6>
                            <h2 class="card-title mb-0">{{ outgoing_count }}</h2>
                        </div>
                        <i class="fas fa-arrow-up fa-2x opacity-50"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="card-subtitle mb-1">Incoming Transfers</h6>
                            <h2 class="card-title mb-0">{{ incoming_count }}</h2>
                        </div>
                        <i class="fas fa-arrow-down fa-2x opacity-50"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card bg-warning text-dark">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="card-subtitle mb-1">Pending Approvals</h6>
                            <h2 class="card-title mb-0">{{ pending_count }}</h2>
                        </div>
                        <i class="fas fa-clock fa-2x opacity-50"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Report Links -->
    <div class="row">
        <div class="col-md-4 mb-3">
            <div class="card h-100">
                <div class="card-body text-center">
                    <i class="fas fa-file-invoice fa-3x text-primary mb-3"></i>
                    <h5 class="card-title">Bill-wise Report</h5>
                    <p class="card-text text-muted">
                        View all transfer invoices with complete details including items, overhead, and totals.
                    </p>
                    <a href="{% url 'stock_transfer:report_bill_wise' %}" class="btn btn-primary">
                        <i class="fas fa-arrow-right"></i> View Report
                    </a>
                </div>
            </div>
        </div>
        
        <div class="col-md-4 mb-3">
            <div class="card h-100">
                <div class="card-body text-center">
                    <i class="fas fa-boxes fa-3x text-success mb-3"></i>
                    <h5 class="card-title">Item-wise Report</h5>
                    <p class="card-text text-muted">
                        Product-level summary showing quantities, values, and transfer frequency.
                    </p>
                    <a href="{% url 'stock_transfer:report_item_wise' %}" class="btn btn-success">
                        <i class="fas fa-arrow-right"></i> View Report
                    </a>
                </div>
            </div>
        </div>
        
        <div class="col-md-4 mb-3">
            <div class="card h-100">
                <div class="card-body text-center">
                    <i class="fas fa-exchange-alt fa-3x text-info mb-3"></i>
                    <h5 class="card-title">Branch Summary</h5>
                    <p class="card-text text-muted">
                        Summary of transfers with each connected branch - sent vs received.
                    </p>
                    <a href="{% url 'stock_transfer:report_branch_summary' %}" class="btn btn-info">
                        <i class="fas fa-arrow-right"></i> View Report
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Quick Links -->
    <div class="card mt-4">
        <div class="card-header">
            <i class="fas fa-link"></i> Quick Actions
        </div>
        <div class="card-body">
            <a href="{% url 'stock_transfer:transfer_add' %}" class="btn btn-outline-primary mr-2">
                <i class="fas fa-plus"></i> New Transfer
            </a>
            <a href="{% url 'stock_transfer:incoming_transfers' %}" class="btn btn-outline-secondary mr-2">
                <i class="fas fa-inbox"></i> Pending Transfers
            </a>
<!--             <a href="{% url 'stock_transfer:connection_list' %}" class="btn btn-outline-info">
                <i class="fas fa-network-wired"></i> Branch Connections
            </a> -->
        </div>
    </div>
</div>
{% endblock content %}