{% extends "base.html" %}

{% block title %}{{ _('Record Payment') }} - {{ invoice.invoice_number }} - TimeTracker{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <!-- Header -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div class="d-flex align-items-center">
                    <a href="{{ url_for('invoices.view_invoice', invoice_id=invoice.id) }}" class="btn btn-outline-secondary me-3">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    <h1 class="h3 mb-0">
                        <i class="fas fa-money-bill-wave text-success"></i>
                        {{ _('Record Payment') }}
                    </h1>
                </div>
            </div>

            <div class="row">
                <!-- Payment Form -->
                <div class="col-lg-8">
                    <div class="card shadow-sm border-0">
                        <div class="card-header bg-success text-white">
                            <h5 class="mb-0">
                                <i class="fas fa-credit-card me-2"></i>
                                {{ _('Payment Details') }}
                            </h5>
                        </div>
                        <div class="card-body">
                            <form method="POST" action="{{ url_for('invoices.record_payment', invoice_id=invoice.id) }}">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="amount" class="form-label">
                                                {{ _('Payment Amount') }} <span class="text-danger">*</span>
                                            </label>
                                            <div class="input-group">
                                                <span class="input-group-text">
                                                    <i class="fas fa-dollar-sign"></i>
                                                </span>
                                                <input type="number" 
                                                       class="form-control" 
                                                       id="amount" 
                                                       name="amount" 
                                                       step="0.01" 
                                                       min="0.01" 
                                                       max="{{ invoice.outstanding_amount }}"
                                                       value="{{ invoice.outstanding_amount }}"
                                                       required>
                                            </div>
                                            <div class="form-text">
                                                {{ _('Outstanding amount:') }} {{ "%.2f"|format(invoice.outstanding_amount) }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="payment_date" class="form-label">
                                                {{ _('Payment Date') }}
                                            </label>
                                            <input type="date" 
                                                   class="form-control" 
                                                   id="payment_date" 
                                                   name="payment_date" 
                                                   value="{{ today }}">
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="payment_method" class="form-label">
                                                {{ _('Payment Method') }}
                                            </label>
                                            <select class="form-select" id="payment_method" name="payment_method">
                                                <option value="">{{ _('Select payment method') }}</option>
                                                <option value="cash">{{ _('Cash') }}</option>
                                                <option value="check">{{ _('Check') }}</option>
                                                <option value="bank_transfer">{{ _('Bank Transfer') }}</option>
                                                <option value="credit_card">{{ _('Credit Card') }}</option>
                                                <option value="debit_card">{{ _('Debit Card') }}</option>
                                                <option value="paypal">{{ _('PayPal') }}</option>
                                                <option value="stripe">{{ _('Stripe') }}</option>
                                                <option value="wire_transfer">{{ _('Wire Transfer') }}</option>
                                                <option value="other">{{ _('Other') }}</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="payment_reference" class="form-label">
                                                {{ _('Payment Reference') }}
                                            </label>
                                            <input type="text" 
                                                   class="form-control" 
                                                   id="payment_reference" 
                                                   name="payment_reference" 
                                                   placeholder="{{ _('Transaction ID, check number, etc.') }}">
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label for="payment_notes" class="form-label">
                                        {{ _('Payment Notes') }}
                                    </label>
                                    <textarea class="form-control" 
                                              id="payment_notes" 
                                              name="payment_notes" 
                                              rows="3" 
                                              placeholder="{{ _('Additional notes about this payment...') }}"></textarea>
                                </div>

                                <div class="d-flex justify-content-between">
                                    <a href="{{ url_for('invoices.view_invoice', invoice_id=invoice.id) }}" class="btn btn-outline-secondary">
                                        <i class="fas fa-times me-2"></i>{{ _('Cancel') }}
                                    </a>
                                    <button type="submit" class="btn btn-success">
                                        <i class="fas fa-save me-2"></i>{{ _('Record Payment') }}
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Invoice Summary -->
                <div class="col-lg-4">
                    <div class="card shadow-sm border-0">
                        <div class="card-header bg-light">
                            <h5 class="mb-0">
                                <i class="fas fa-file-invoice-dollar me-2"></i>
                                {{ _('Invoice Summary') }}
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="invoice-summary">
                                <div class="summary-row">
                                    <span class="label">{{ _('Invoice Number:') }}</span>
                                    <span class="value">{{ invoice.invoice_number }}</span>
                                </div>
                                <div class="summary-row">
                                    <span class="label">{{ _('Client:') }}</span>
                                    <span class="value">{{ invoice.client_name }}</span>
                                </div>
                                <div class="summary-row">
                                    <span class="label">{{ _('Total Amount:') }}</span>
                                    <span class="value font-weight-bold">{{ "%.2f"|format(invoice.total_amount) }}</span>
                                </div>
                                <div class="summary-row">
                                    <span class="label">{{ _('Amount Paid:') }}</span>
                                    <span class="value text-success">{{ "%.2f"|format(invoice.amount_paid or 0) }}</span>
                                </div>
                                <hr>
                                <div class="summary-row">
                                    <span class="label">{{ _('Outstanding:') }}</span>
                                    <span class="value font-weight-bold text-danger">{{ "%.2f"|format(invoice.outstanding_amount) }}</span>
                                </div>
                            </div>

                            <!-- Payment Status -->
                            <div class="mt-3">
                                <div class="payment-status-badge">
                                    {% if invoice.payment_status == 'unpaid' %}
                                        <span class="badge bg-danger">
                                            <i class="fas fa-exclamation-circle me-1"></i>{{ _('Unpaid') }}
                                        </span>
                                    {% elif invoice.payment_status == 'partially_paid' %}
                                        <span class="badge bg-warning">
                                            <i class="fas fa-clock me-1"></i>{{ _('Partially Paid') }}
                                        </span>
                                    {% elif invoice.payment_status == 'fully_paid' %}
                                        <span class="badge bg-success">
                                            <i class="fas fa-check-circle me-1"></i>{{ _('Fully Paid') }}
                                        </span>
                                    {% elif invoice.payment_status == 'overpaid' %}
                                        <span class="badge bg-info">
                                            <i class="fas fa-plus-circle me-1"></i>{{ _('Overpaid') }}
                                        </span>
                                    {% endif %}
                                </div>
                                
                                {% if invoice.payment_percentage > 0 %}
                                <div class="progress mt-2" style="height: 8px;">
                                    <div class="progress-bar bg-success" 
                                         role="progressbar" 
                                         style="width: {{ invoice.payment_percentage }}%"
                                         aria-valuenow="{{ invoice.payment_percentage }}" 
                                         aria-valuemin="0" 
                                         aria-valuemax="100">
                                    </div>
                                </div>
                                <small class="text-muted">{{ "%.1f"|format(invoice.payment_percentage) }}% {{ _('paid') }}</small>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.invoice-summary .summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.invoice-summary .label {
    font-weight: 500;
    color: #6c757d;
}

.invoice-summary .value {
    font-weight: 600;
}

.payment-status-badge .badge {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
}
</style>
{% endblock %}
