{% extends 'base.html' %}
{% load i18n %}

{% block title %}{% trans "Customer Statement" %} | {{ site_settings.business_name }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row mb-4 no-print">
        <div class="col-md-6">
            <h1 class="h3 fw-bold">{% trans "Customer Statement" %}</h1>
            <p class="text-muted">{% trans "View transaction history and balance for customers." %}</p>
        </div>
        <div class="col-md-6 text-end">
            <button onclick="window.print()" class="btn btn-outline-primary rounded-pill px-4">
                <i class="bi bi-printer me-2"></i> {% trans "Print Statement" %}
            </button>
        </div>
    </div>

    <!-- Filters -->
    <div class="card border-0 shadow-sm p-4 mb-4 no-print rounded-4">
        <form method="get" class="row g-3 align-items-end">
            <div class="col-md-4">
                <label class="form-label small fw-bold">{% trans "Customer" %}</label>
                <select name="customer" class="form-select rounded-pill" required>
                    <option value="">{% trans "Select Customer" %}</option>
                    {% for c in customers %}
                    <option value="{{ c.id }}" {% if customer.id == c.id %}selected{% endif %}>{{ c.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label small fw-bold">{% trans "From Date" %}</label>
                <input type="date" name="start_date" class="form-select rounded-pill" value="{{ start_date }}">
            </div>
            <div class="col-md-3">
                <label class="form-label small fw-bold">{% trans "To Date" %}</label>
                <input type="date" name="end_date" class="form-select rounded-pill" value="{{ end_date }}">
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-primary w-100 rounded-pill">
                    <i class="bi bi-search me-2"></i> {% trans "Filter" %}
                </button>
            </div>
        </form>
    </div>

    {% if customer %}
    <div class="statement-print">
        <div class="card border-0 shadow-sm overflow-hidden rounded-4">
            <div class="card-header bg-white border-0 p-4">
                <div class="row align-items-center">
                    <div class="col-sm-6">
                        {% if settings.logo %}
                            <img src="{{ settings.logo.url }}" alt="Logo" height="50" class="mb-3">
                        {% endif %}
                        <h4 class="fw-bold mb-1">{{ settings.business_name }}</h4>
                        <p class="text-muted mb-0 small">{{ settings.address }}</p>
                        <p class="text-muted mb-0 small">{{ settings.phone }} | {{ settings.email }}</p>
                    </div>
                    <div class="col-sm-6 text-sm-end mt-3 mt-sm-0">
                        <h2 class="text-primary fw-bold mb-1">{% trans "STATEMENT" %}</h2>
                        <p class="mb-0"><strong>{% trans "Date" %}:</strong> {% now "Y-m-d" %}</p>
                        {% if start_date or end_date %}
                        <p class="mb-0 small text-muted">
                            {% if start_date %}{% trans "From" %}: {{ start_date }}{% endif %}
                            {% if end_date %} {% trans "To" %}: {{ end_date }}{% endif %}
                        </p>
                        {% endif %}
                    </div>
                </div>
                <hr class="my-4">
                <div class="row">
                    <div class="col-sm-6">
                        <h6 class="text-uppercase text-muted small fw-bold mb-2">{% trans "Bill To" %}</h6>
                        <h5 class="fw-bold mb-1">{{ customer.name }}</h5>
                        <p class="text-muted mb-0">{{ customer.address }}</p>
                        <p class="text-muted mb-0">{{ customer.phone }}</p>
                    </div>
                </div>
            </div>
            
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="bg-light">
                        <tr>
                            <th class="ps-4">{% trans "Date" %}</th>
                            <th>{% trans "Transaction" %}</th>
                            <th>{% trans "Reference" %}</th>
                            <th class="text-end">{% trans "Debit" %} (+)</th>
                            <th class="text-end">{% trans "Credit" %} (-)</th>
                            <th class="text-end pe-4">{% trans "Balance" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% if opening_balance != 0 or start_date %}
                        <tr class="table-light italic">
                            <td class="ps-4 text-muted">{{ start_date|default:"---" }}</td>
                            <td colspan="2" class="fw-bold text-muted">{% trans "Opening Balance" %}</td>
                            <td class="text-end">{% if opening_balance > 0 %}{{ settings.currency_symbol }}{{ opening_balance|floatformat:settings.decimal_places }}{% endif %}</td>
                            <td class="text-end">{% if opening_balance < 0 %}{{ settings.currency_symbol }}{{ opening_balance_abs|floatformat:settings.decimal_places }}{% endif %}</td>
                            <td class="text-end pe-4 fw-bold">{{ settings.currency_symbol }}{{ opening_balance|floatformat:settings.decimal_places }}</td>
                        </tr>
                        {% endif %}
                        
                        {% for item in statement_data %}
                        <tr>
                            <td class="ps-4">{{ item.date|date:"Y-m-d" }}</td>
                            <td>{{ item.type }}</td>
                            <td><span class="badge bg-light text-dark fw-normal">{{ item.reference }}</span></td>
                            <td class="text-end text-danger">
                                {% if item.debit > 0 %}
                                    {{ settings.currency_symbol }}{{ item.debit|floatformat:settings.decimal_places }}
                                {% else %}-{% endif %}
                            </td>
                            <td class="text-end text-success">
                                {% if item.credit > 0 %}
                                    {{ settings.currency_symbol }}{{ item.credit|floatformat:settings.decimal_places }}
                                {% else %}-{% endif %}
                            </td>
                            <td class="text-end pe-4 fw-bold">{{ settings.currency_symbol }}{{ item.balance|floatformat:settings.decimal_places }}</td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="6" class="text-center py-5 text-muted">{% trans "No transactions found for the selected period." %}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                    <tfoot class="bg-primary text-white">
                        <tr>
                            <td colspan="5" class="ps-4 fw-bold text-uppercase">{% trans "Closing Balance" %}</td>
                            <td class="text-end pe-4 fw-bold fs-5">
                                {% with last=statement_data|last %}
                                    {{ settings.currency_symbol }}{{ last.balance|default:opening_balance|floatformat:settings.decimal_places }}
                                {% endwith %}
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
    {% else %}
    <div class="text-center py-5">
        <div class="bg-light rounded-circle d-inline-flex align-items-center justify-content-center mb-4" style="width: 100px; height: 100px;">
            <i class="bi bi-person-lines-fill fs-1 text-primary"></i>
        </div>
        <h4 class="fw-bold">{% trans "Select a Customer" %}</h4>
        <p class="text-muted">{% trans "Please select a customer and date range to view their statement." %}</p>
    </div>
    {% endif %}
</div>

<style>
    @media print {
        .no-print { display: none !important; }
        body { background: white !important; }
        .statement-print { margin: 0; padding: 0; }
        .card { border: none !important; shadow: none !important; }
        #sidebar, .top-navbar { display: none !important; }
        #content { margin-left: 0 !important; width: 100% !important; padding: 0 !important; }
        .main { padding: 0 !important; }
    }
</style>
{% endblock %}
