{% extends 'admin/layout.html.twig' %}
{% block title %}Invoice #{{ invoice.displayInvoiceNumber }} - KitscoApp{% endblock %}
{% block page_title %}Invoice #{{ invoice.displayInvoiceNumber }}{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
    .invoice-items th, .invoice-items td { padding: 0.5rem 0.75rem; }
    @media (max-width: 640px) {
        .invoice-items th, .invoice-items td { padding: 0.5rem; font-size: 0.75rem; }
        .invoice-items .hide-mobile { display: none; }
        .invoice-items .col-qty { width: 15%; }
        .invoice-items .col-amount { width: 30%; }
    }
    @media print {
        @page {
            margin: 0.7in;
        }
        .bg-white.rounded-xl {
            box-shadow: none !important;
            border: none !important;
            padding: 0 !important;
            max-width: none !important;
        }
        #paymentModal { display: none !important; }
        .print-footer {
            display: block !important;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            text-align: center;
            font-size: 9px;
            color: #888;
        }
    }
    .print-footer { display: none; }
</style>
{% endblock %}

{% block content %}
<!-- Action buttons -->
<div class="flex flex-wrap gap-2 mb-6 no-print">
    <div class="flex rounded-lg overflow-hidden border border-gray-300">
        <a href="{{ path('admin_invoice_pdf', {id: invoice.id}) }}?t={{ 'now'|date('U') }}" class="px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 border-r border-gray-300 inline-flex items-center gap-1" target="_blank"><i class="bi bi-file-pdf"></i> PDF</a>
        <a href="{{ path('admin_invoice_download', {id: invoice.id}) }}?t={{ 'now'|date('U') }}" class="px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 border-r border-gray-300 inline-flex items-center gap-1"><i class="bi bi-download"></i> Download</a>
        <button onclick="window.print()" class="px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 border-r border-gray-300 inline-flex items-center gap-1"><i class="bi bi-printer"></i> Print</button>
        {% if invoice.accessToken %}
        <button onclick="copyShareLink()" class="px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 inline-flex items-center gap-1" id="shareBtn"><i class="bi bi-share"></i> Share</button>
        {% endif %}
    </div>

    {% if invoice.status.value == 'draft' %}
        <a href="{{ path('admin_invoice_edit', {id: invoice.id}) }}" class="px-3 py-2 text-sm border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 inline-flex items-center gap-1"><i class="bi bi-pencil"></i> Edit</a>
        <form method="post" action="{{ path('admin_invoice_send', {id: invoice.id}) }}" class="inline">
            <input type="hidden" name="_token" value="{{ csrf_token('send' ~ invoice.id) }}">
            <button class="px-3 py-2 text-sm bg-cyan-500 text-white rounded-lg hover:bg-cyan-600 inline-flex items-center gap-1"><i class="bi bi-send"></i> Mark Sent</button>
        </form>
    {% endif %}

    {% if invoice.status.value in ['sent', 'viewed', 'overdue'] %}
        <button class="px-3 py-2 text-sm bg-green-500 text-white rounded-lg hover:bg-green-600 inline-flex items-center gap-1" onclick="document.getElementById('paymentModal').classList.remove('hidden')"><i class="bi bi-check-circle"></i> Mark Paid</button>
    {% endif %}

    <a href="{{ path('admin_invoice_duplicate', {id: invoice.id}) }}" class="px-3 py-2 text-sm border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 inline-flex items-center gap-1"><i class="bi bi-copy"></i> Duplicate</a>

    {# Email Actions Dropdown #}
    {% if invoice.customer and invoice.customer.contactEmail %}
    <div class="relative" x-data="{ open: false }">
        <button @click="open = !open" class="px-3 py-2 text-sm border border-blue-300 text-blue-600 rounded-lg hover:bg-blue-50 inline-flex items-center gap-1">
            <i class="bi bi-envelope"></i> Send Email <i class="bi bi-chevron-down text-xs" :class="{ 'rotate-180': open }"></i>
        </button>
        <div x-show="open" @click.away="open = false" x-cloak x-transition
             class="absolute left-0 mt-1 w-56 bg-white border border-gray-200 rounded-lg shadow-lg z-10">
            <div class="py-1">
                {% if invoice.status.value in ['sent', 'viewed', 'overdue', 'draft'] %}
                <form method="post" action="{{ path('admin_invoice_email_invoice', {id: invoice.id}) }}" class="block">
                    <button type="submit" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2">
                        <i class="bi bi-file-earmark-text text-blue-500"></i> Send Invoice
                    </button>
                </form>
                {% endif %}

                {% if invoice.status.value in ['sent', 'viewed', 'overdue'] and not invoice.isPaid %}
                <form method="post" action="{{ path('admin_invoice_email_reminder', {id: invoice.id}) }}" class="block">
                    <button type="submit" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2">
                        <i class="bi bi-bell text-amber-500"></i> Send Payment Reminder
                    </button>
                </form>
                {% endif %}

                {% if invoice.status.value == 'overdue' %}
                <form method="post" action="{{ path('admin_invoice_email_overdue', {id: invoice.id}) }}" class="block">
                    <button type="submit" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2">
                        <i class="bi bi-exclamation-triangle text-red-500"></i> Send Overdue Notice
                    </button>
                </form>
                {% endif %}

                {% if invoice.payments|length > 0 %}
                <div class="border-t border-gray-100 my-1"></div>
                <div class="px-4 py-1 text-xs text-gray-400 uppercase">Payment Confirmations</div>
                {% for payment in invoice.payments %}
                <form method="post" action="{{ path('admin_invoice_email_payment', {id: invoice.id, paymentId: payment.id}) }}" class="block">
                    <button type="submit" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2">
                        <i class="bi bi-check-circle text-green-500"></i>
                        {{ payment.currency.symbol }}{{ payment.amount|number_format(0, '.', ',') }} - {{ payment.paymentDate|date('d/m/Y') }}
                    </button>
                </form>
                {% endfor %}
                {% endif %}
            </div>
        </div>
    </div>
    {% else %}
    <span class="px-3 py-2 text-sm border border-gray-200 text-gray-400 rounded-lg inline-flex items-center gap-1 cursor-not-allowed" title="Customer has no email">
        <i class="bi bi-envelope-slash"></i> No Email
    </span>
    {% endif %}

    {% if invoice.canBeRevised %}
        <a href="{{ path('admin_invoice_revise', {id: invoice.id}) }}" class="px-3 py-2 text-sm border border-amber-300 text-amber-700 rounded-lg hover:bg-amber-50 inline-flex items-center gap-1"><i class="bi bi-arrow-clockwise"></i> Create Revision</a>
    {% endif %}

    {% if is_granted('ROLE_ADMIN') and invoice.status.value != 'cancelled' %}
        <form method="post" action="{{ path('admin_invoice_cancel', {id: invoice.id}) }}" class="inline">
            <input type="hidden" name="_token" value="{{ csrf_token('cancel' ~ invoice.id) }}">
            <button type="button" class="px-3 py-2 text-sm border border-red-300 text-red-600 rounded-lg hover:bg-red-50 inline-flex items-center gap-1"
                    onclick="window.confirmDialog?.confirmForm(this.closest('form'), 'Cancel Invoice', 'Are you sure you want to cancel this invoice?', 'Cancel Invoice', 'danger')"><i class="bi bi-x-circle"></i> Cancel</button>
        </form>
    {% endif %}

    <span class="ml-auto inline-flex items-center px-3 py-1 rounded-full text-sm font-medium {{ invoice.status.badgeClass }}">{{ invoice.status.label }}</span>
</div>

<!-- Invoice Preview -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 sm:p-8 max-w-4xl mx-auto">
    <!-- Header -->
    <div class="grid grid-cols-2 gap-4 mb-8">
        <div class="text-sm leading-relaxed">
            {% if company %}
            <p class="font-bold text-gray-800">{{ company.name }},</p>
            <p class="text-gray-600">{{ company.formattedAddress }}.</p>
            <p><a href="mailto:{{ company.email }}" class="text-kitsco-accent hover:underline">{{ company.email }}</a></p>
            <p class="text-gray-600">{{ company.phone }}</p>
            {% endif %}
        </div>
        <div class="text-right">
            {% if company and company.logoPath %}
                <img src="{{ asset('uploads/' ~ company.logoPath) }}" alt="Logo" class="h-14 inline-block mb-2">
            {% else %}
                <img src="{{ asset('images/logo-color.jpg') }}" alt="KitscoApp" class="h-12 inline-block mb-2">
            {% endif %}
            <br>
            <span class="text-lg font-bold text-kitsco-accent">{{ invoice.type.label|upper }}</span>
        </div>
    </div>

    <!-- Customer & Meta -->
    <div class="grid grid-cols-2 gap-4 mb-8">
        <div class="text-sm">
            <p class="text-xs text-gray-400 uppercase tracking-wide mb-1">
                Bill To
                {% if invoice.hasBillingOverrides %}
                    <span class="ml-1 text-amber-600" title="Custom billing details for this invoice"><i class="bi bi-pencil-square"></i></span>
                {% endif %}
            </p>
            <p class="font-bold text-gray-800">{{ invoice.effectiveBillingName }}</p>
            <p class="text-gray-600">{{ invoice.effectiveFormattedAddress }}</p>
            {% if invoice.effectiveBillingContactPerson %}
                <p class="text-gray-500 text-xs mt-1">Att: {{ invoice.effectiveBillingContactPerson }}{% if invoice.effectiveBillingContactEmail %}, {{ invoice.effectiveBillingContactEmail }}{% endif %}</p>
            {% endif %}
        </div>
        <div class="text-sm">
            <table class="ml-auto">
                <tr><td class="text-right text-gray-400 pr-3 py-0.5">Invoice #</td><td class="font-bold">{{ invoice.displayInvoiceNumber }}</td></tr>
                <tr><td class="text-right text-gray-400 pr-3 py-0.5">Invoice Date</td><td>{{ invoice.invoiceDate|date('d/m/Y') }}</td></tr>
                <tr><td class="text-right text-gray-400 pr-3 py-0.5">Due Date</td><td>{{ invoice.dueDate|date('d/m/Y') }}</td></tr>
            </table>
        </div>
    </div>

    <!-- Revision History (if any) -->
    {% set originalInvoice = invoice.originalInvoice %}
    {% if originalInvoice.revisions|length > 0 or invoice.isRevision %}
    <div class="mb-6 p-3 bg-amber-50 border border-amber-200 rounded-lg text-sm no-print">
        <p class="font-medium text-amber-800 mb-2"><i class="bi bi-clock-history"></i> Revision History</p>
        <div class="flex flex-wrap gap-2">
            <a href="{{ path('admin_invoice_show', {id: originalInvoice.id}) }}"
               class="px-2 py-1 rounded {{ originalInvoice.id == invoice.id ? 'bg-amber-500 text-white' : 'bg-white text-amber-700 border border-amber-300 hover:bg-amber-100' }}">
                {{ originalInvoice.invoiceNumber }}
            </a>
            {% for rev in originalInvoice.revisions %}
                <a href="{{ path('admin_invoice_show', {id: rev.id}) }}"
                   class="px-2 py-1 rounded {{ rev.id == invoice.id ? 'bg-amber-500 text-white' : 'bg-white text-amber-700 border border-amber-300 hover:bg-amber-100' }}">
                    {{ rev.displayInvoiceNumber }}
                </a>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Line Items Table -->
    <table class="invoice-items w-full text-sm border border-gray-200 rounded-lg overflow-hidden mb-6">
        <thead class="bg-gray-50">
            <tr>
                <th class="col-qty text-left font-medium text-gray-600 text-xs uppercase">Qty</th>
                <th class="text-left font-medium text-gray-600 text-xs uppercase">Description</th>
                <th class="hide-mobile text-right font-medium text-gray-600 text-xs uppercase whitespace-nowrap">Unit Price</th>
                <th class="col-amount text-right font-medium text-gray-600 text-xs uppercase">Amount</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-100">
            {% for item in invoice.items %}
            <tr>
                <td>{{ item.quantity }}</td>
                <td>
                    {% if item.product %}
                        <span class="font-medium">{{ item.product.name }}</span>
                        {% if item.description %}<br><span class="text-gray-400 text-xs">{{ item.description }}</span>{% endif %}
                    {% else %}
                        {{ item.description }}
                    {% endif %}
                </td>
                <td class="hide-mobile text-right">{{ item.unitPrice|money }}</td>
                <td class="text-right font-semibold whitespace-nowrap">{{ item.amount|money }}</td>
            </tr>
            {% endfor %}
        </tbody>
        <tfoot>
            {% if invoice.taxRate > 0 %}
            <tr class="border-t border-gray-200">
                <td colspan="2" class="text-right text-gray-600 sm:hidden">Subtotal</td>
                <td colspan="3" class="text-right text-gray-600 hidden sm:table-cell">Subtotal</td>
                <td class="text-right font-semibold whitespace-nowrap">{{ invoice.subtotal|money }}</td>
            </tr>
            <tr>
                <td colspan="2" class="text-right text-gray-600 sm:hidden">Tax ({{ invoice.taxRate }}%)</td>
                <td colspan="3" class="text-right text-gray-600 hidden sm:table-cell">Tax ({{ invoice.taxRate }}%)</td>
                <td class="text-right font-semibold whitespace-nowrap">{{ invoice.taxAmount|money }}</td>
            </tr>
            {% endif %}
            <tr class="bg-gray-50 border-t border-gray-200">
                <td colspan="2" class="text-right font-bold text-gray-800 sm:hidden">TOTAL</td>
                <td colspan="3" class="text-right font-bold text-gray-800 hidden sm:table-cell">TOTAL</td>
                <td class="text-right font-bold text-base text-kitsco-accent whitespace-nowrap">{{ invoice.currency.symbol }}{{ invoice.total|money }}</td>
            </tr>
            {% if invoice.isForeignCurrency and invoice.exchangeRate %}
            <tr class="bg-gray-50/50">
                <td colspan="2" class="text-right text-xs text-gray-400 sm:hidden">TZS Equivalent</td>
                <td colspan="3" class="text-right text-xs text-gray-400 hidden sm:table-cell">TZS Equivalent</td>
                <td class="text-right text-xs text-gray-500 whitespace-nowrap">
                    {{ invoice.formattedTotalInTzs }}
                    <span class="text-gray-400">(1 {{ invoice.currency.code }} = {{ invoice.exchangeRate|money }} TZS)</span>
                </td>
            </tr>
            {% endif %}
        </tfoot>
    </table>

    <!-- Payment Info -->
    {% if company %}
    <div class="bg-gray-50 rounded-lg p-4 text-sm">
        <p class="font-semibold text-gray-700 mb-2"><i class="bi bi-bank mr-1"></i>Payment Information</p>
        <div class="flex flex-wrap gap-x-6 gap-y-1 text-gray-600">
            <span><span class="text-gray-400">Bank:</span> {{ company.bankName }}</span>
            <span><span class="text-gray-400">Account Name:</span> {{ company.bankAccountName }}</span>
            <span><span class="text-gray-400">Account #:</span> {{ company.bankAccountNumber }}</span>
        </div>
    </div>
    {% endif %}

    <!-- Terms & Conditions -->
    {% if invoice.invoiceTerms %}
    <div class="mt-6 pt-4 border-t border-gray-200 text-sm">
        <p class="font-semibold text-gray-700 mb-2"><i class="bi bi-file-text mr-1"></i>Terms & Conditions</p>
        <div class="text-gray-600 prose prose-sm max-w-none">{{ invoice.invoiceTerms|raw }}</div>
    </div>
    {% endif %}

</div>

<!-- Print Footer -->
<div class="print-footer">
    Invoice created at: {{ invoice.createdAt|date("d/m/Y H:i:s") }}
</div>

<!-- Payment Modal -->
<div class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center" id="paymentModal">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-md mx-4">
        <form method="post" action="{{ path('admin_invoice_mark_paid', {id: invoice.id}) }}">
            <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
                <h3 class="font-semibold text-gray-800"><i class="bi bi-check-circle mr-2 text-green-500"></i>Record Payment</h3>
                <button type="button" onclick="document.getElementById('paymentModal').classList.add('hidden')" class="text-gray-400 hover:text-gray-600"><i class="bi bi-x-lg"></i></button>
            </div>
            <div class="p-6 space-y-4">
                <div class="bg-blue-50 border border-blue-200 rounded-lg px-4 py-3 text-sm text-blue-800">
                    <strong>Amount Due:</strong> {{ invoice.currency.symbol }}{{ invoice.balanceDue|money }}
                </div>
                <div>
                    {% include 'components/_select_dropdown.html.twig' with {
                        id: 'payment_method',
                        name: 'payment_method',
                        value: 'bank_transfer',
                        label: 'Payment Method',
                        options: [
                            {value: 'bank_transfer', label: 'Bank Transfer'},
                            {value: 'cash', label: 'Cash'},
                            {value: 'mobile_money', label: 'Mobile Money'},
                            {value: 'cheque', label: 'Cheque'}
                        ],
                        placeholder: 'Select method...'
                    } %}
                </div>
                <div>
                    <label>Reference Number</label>
                    <input type="text" name="reference_number" placeholder="Transaction/receipt reference">
                </div>
            </div>
            <div class="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">
                <button type="button" onclick="document.getElementById('paymentModal').classList.add('hidden')" class="px-4 py-2 border border-gray-300 rounded-lg text-sm text-gray-600 hover:bg-gray-50">Cancel</button>
                <button type="submit" class="px-4 py-2 bg-green-500 text-white rounded-lg text-sm font-medium hover:bg-green-600 inline-flex items-center gap-1"><i class="bi bi-check-circle"></i> Confirm Payment</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
{% if invoice.accessToken %}
<script>
function copyShareLink() {
    const url = '{{ url('public_invoice_show', {token: invoice.accessToken}) }}';
    navigator.clipboard.writeText(url).then(function() {
        const btn = document.getElementById('shareBtn');
        const originalHtml = btn.innerHTML;
        btn.innerHTML = '<i class="bi bi-check"></i> Copied!';
        setTimeout(function() {
            btn.innerHTML = originalHtml;
        }, 2000);
    });
}
</script>
{% endif %}
{% endblock %}