{% extends 'admin/layout.html.twig' %}
{% block title %}{{ is_new ? 'New' : 'Edit' }} Expense - KitscoApp{% endblock %}
{% block page_title %}{{ is_new ? 'New Expense' : 'Edit: ' ~ expense.referenceNumber }}{% endblock %}

{% block content %}
<div class="mb-6">
    <a href="{{ path('admin_expense_index') }}" class="text-gray-400 hover:text-gray-600 transition-colors text-sm">
        <i class="bi bi-arrow-left"></i> Back to Expenses
    </a>
</div>

<div class="bg-white rounded-xl shadow-sm border border-gray-100 max-w-3xl">
    <div class="px-6 py-4 border-b border-gray-100">
        <h3 class="font-semibold text-gray-800 text-sm"><i class="bi bi-cash-stack mr-2"></i>Expense Details</h3>
    </div>
    <div class="p-6">
        {{ form_start(form) }}

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            {# Category dropdown #}
            <div>
                {% set category_options = [] %}
                {% for choice in form.category.vars.choices %}
                    {% set category_options = category_options|merge([{value: choice.value, label: choice.label}]) %}
                {% endfor %}
                {% include 'components/_select_dropdown.html.twig' with {
                    id: form.category.vars.id,
                    name: form.category.vars.full_name,
                    value: form.category.vars.value,
                    label: 'Category',
                    options: category_options,
                    placeholder: 'Select category...',
                    searchable: true,
                    searchPlaceholder: 'Search categories...',
                    required: true,
                    extra_attrs: {'data-expense-form-target': 'category'}
                } %}
                {% do form.category.setRendered %}
            </div>
            <div>{{ form_row(form.expenseDate) }}</div>
        </div>

        <div class="mt-4">{{ form_row(form.description) }}</div>

        {# Currency and Exchange Rate with Stimulus controller #}
        <div class="mt-4" data-controller="exchange-rate" data-exchange-rate-tzs-id-value="{{ tzs_currency_id|default('') }}">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>{{ form_row(form.amount) }}</div>
                {# Currency dropdown #}
                <div>
                    {% set currency_options = [] %}
                    {% for choice in form.currency.vars.choices %}
                        {% set currency_options = currency_options|merge([{value: choice.value, label: choice.label}]) %}
                    {% endfor %}
                    {% include 'components/_select_dropdown.html.twig' with {
                        id: form.currency.vars.id,
                        name: form.currency.vars.full_name,
                        value: form.currency.vars.value,
                        label: 'Currency',
                        options: currency_options,
                        placeholder: 'Select currency...',
                        required: true,
                        extra_attrs: {'data-exchange-rate-target': 'currency', 'data-action': 'change->exchange-rate#toggle'}
                    } %}
                    {% do form.currency.setRendered %}
                </div>
                <div></div>
            </div>

            {# Exchange Rate field - shown only for foreign currencies #}
            <div data-exchange-rate-target="rateRow" class="mt-3 {{ form.currency.vars.value and form.currency.vars.value != tzs_currency_id|default('') ? '' : 'hidden' }}">
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    Exchange Rate (to TZS)
                    <span class="text-xs text-gray-400 ml-1">e.g., 2500 means 1 USD = 2,500 TZS</span>
                </label>
                <input type="number"
                       id="{{ form.exchangeRate.vars.id }}"
                       name="{{ form.exchangeRate.vars.full_name }}"
                       value="{{ form.exchangeRate.vars.value }}"
                       step="0.0001"
                       min="0"
                       placeholder="Enter exchange rate..."
                       data-exchange-rate-target="rate"
                       class="w-full">
                <p class="text-xs text-gray-400 mt-1">How many TZS equals 1 unit of the selected currency</p>
                {% do form.exchangeRate.setRendered %}
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
            {# Account dropdown #}
            <div>
                {% set account_options = [] %}
                {% for choice in form.account.vars.choices %}
                    {% set account_options = account_options|merge([{value: choice.value, label: choice.label}]) %}
                {% endfor %}
                {% include 'components/_select_dropdown.html.twig' with {
                    id: form.account.vars.id,
                    name: form.account.vars.full_name,
                    value: form.account.vars.value,
                    label: 'Account',
                    options: account_options,
                    placeholder: 'Select account...',
                    required: true
                } %}
                {% do form.account.setRendered %}
            </div>
            {# Supplier dropdown #}
            <div>
                {% set supplier_options = [] %}
                {% for choice in form.supplier.vars.choices %}
                    {% set supplier_options = supplier_options|merge([{value: choice.value, label: choice.label}]) %}
                {% endfor %}
                {% include 'components/_select_dropdown.html.twig' with {
                    id: form.supplier.vars.id,
                    name: form.supplier.vars.full_name,
                    value: form.supplier.vars.value,
                    label: 'Supplier',
                    options: supplier_options,
                    placeholder: 'Select supplier (optional)...',
                    searchable: true,
                    searchPlaceholder: 'Search suppliers...',
                    required: false
                } %}
                {% do form.supplier.setRendered %}
            </div>
        </div>

        <div class="mt-4" id="stock-receipt-field">
            {# Stock Receipt dropdown #}
            {% set stock_receipt_options = [] %}
            {% for choice in form.relatedStockReceipt.vars.choices %}
                {% set stock_receipt_options = stock_receipt_options|merge([{value: choice.value, label: choice.label}]) %}
            {% endfor %}
            {% include 'components/_select_dropdown.html.twig' with {
                id: form.relatedStockReceipt.vars.id,
                name: form.relatedStockReceipt.vars.full_name,
                value: form.relatedStockReceipt.vars.value,
                label: 'Related Stock Receipt',
                options: stock_receipt_options,
                placeholder: 'Select stock receipt (optional)...',
                searchable: true,
                searchPlaceholder: 'Search receipts...',
                required: false
            } %}
            {% do form.relatedStockReceipt.setRendered %}
            <p class="text-xs text-gray-400 mt-1">Only shown for "Restocking" category</p>
        </div>

        {# Receipt file upload with drag & drop #}
        {% set is_image = expense.receiptPath and expense.receiptPath|lower matches '/\\.(jpg|jpeg|png|gif|webp)$/' %}
        <div class="mt-4">
            <label class="block text-sm font-medium text-gray-700 mb-2">Receipt</label>
            <div class="relative border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-kitsco-accent hover:bg-kitsco-accent/5 transition-all cursor-pointer"
                 data-controller="file-dropzone"
                 data-file-dropzone-max-size-value="{{ 5 * 1024 * 1024 }}"
                 data-file-dropzone-allowed-types-value='["image/png","image/jpeg","image/jpg","image/webp","application/pdf"]'>

                {# Drop zone prompt #}
                <div data-file-dropzone-target="prompt" class="{{ expense.receiptPath ? 'hidden' : '' }}">
                    <i class="bi bi-cloud-arrow-up text-3xl text-gray-400 block mb-2"></i>
                    <p class="text-sm text-gray-600 mb-1">Drag & drop your receipt here</p>
                    <p class="text-xs text-gray-400">or <span class="text-kitsco-accent font-medium">browse</span> to upload</p>
                    <p class="text-xs text-gray-400 mt-2">PNG, JPG, PDF up to 5MB</p>
                </div>

                {# Loading indicator #}
                <div data-file-dropzone-target="loading" class="hidden">
                    <i class="bi bi-arrow-repeat text-3xl text-kitsco-accent animate-spin block mb-2"></i>
                    <p class="text-sm text-gray-500">Processing file...</p>
                </div>

                {# Preview container #}
                <div data-file-dropzone-target="preview" class="flex items-center justify-center gap-4 {{ expense.receiptPath ? '' : 'hidden' }}">
                    <img src="{{ expense.receiptPath ? asset(expense.receiptPath) : '' }}" alt="Preview"
                         class="h-20 w-20 object-cover rounded-lg border border-gray-200 {{ is_image ? '' : 'hidden' }}"
                         data-file-dropzone-target="image">
                    <div data-file-dropzone-target="fileIcon"
                         class="h-20 w-20 flex items-center justify-center bg-gray-100 rounded-lg border border-gray-200 {{ expense.receiptPath and not is_image ? '' : 'hidden' }}">
                        <i class="bi bi-file-earmark-pdf text-3xl text-red-500"></i>
                    </div>
                    <div class="text-left">
                        <p class="text-sm font-medium text-gray-700" data-file-dropzone-target="filename">{{ expense.receiptPath ? 'Current receipt' : '' }}</p>
                        <p class="text-xs text-gray-400" data-file-dropzone-target="filesize"></p>
                        <div class="flex items-center gap-2 mt-1">
                            {% if expense.receiptPath %}
                            <a href="{{ asset(expense.receiptPath) }}" target="_blank" data-file-dropzone-target="viewLink" class="text-xs text-kitsco-accent hover:underline">
                                <i class="bi bi-eye"></i> View
                            </a>
                            <span class="text-gray-300">|</span>
                            {% endif %}
                            <button type="button" data-file-dropzone-target="removeBtn" class="text-xs text-red-500 hover:text-red-700">
                                <i class="bi bi-trash"></i> Remove
                            </button>
                        </div>
                    </div>
                </div>

                {# Error message #}
                <div data-file-dropzone-target="error" class="hidden text-red-500 text-sm mt-2">
                    <i class="bi bi-exclamation-circle"></i>
                    <span data-file-dropzone-target="errorText"></span>
                </div>

                {# Hidden file input #}
                {{ form_widget(form.receiptFile, {attr: {class: 'sr-only absolute', 'data-file-dropzone-target': 'input'}}) }}
            </div>
            {{ form_errors(form.receiptFile) }}
            {% do form.receiptFile.setRendered %}
        </div>

        <div class="mt-4">{{ form_row(form.notes) }}</div>

        <div class="mt-4 flex items-end pb-1">{{ form_row(form.isReconciled) }}</div>

        <div class="flex justify-between items-center pt-6">
            {% if not is_new %}
            <button type="button" class="inline-flex items-center gap-2 py-2.5 px-5 border border-red-300 rounded-lg text-red-600 hover:bg-red-50 transition-colors text-sm js-delete-expense">
                <i class="bi bi-trash"></i> Delete
            </button>
            {% else %}
            <div></div>
            {% endif %}
            <div class="flex gap-3">
                <a href="{{ path('admin_expense_index') }}" class="inline-flex items-center py-2.5 px-5 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors text-sm">Cancel</a>
                <button type="submit" class="inline-flex items-center gap-2 bg-kitsco-accent hover:bg-kitsco-dark text-white font-medium py-2.5 px-5 rounded-lg transition-colors text-sm">
                    <i class="bi bi-check-lg"></i> {{ is_new ? 'Create' : 'Update' }}
                </button>
            </div>
        </div>
        {{ form_end(form) }}
        {% if not is_new %}
        <form id="delete-expense-form" action="{{ path('admin_expense_delete', {id: expense.id}) }}" method="POST" class="hidden">
            <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ expense.id) }}">
        </form>
        <script>
            document.querySelector('.js-delete-expense')?.addEventListener('click', function() {
                window.confirmDialog?.confirmForm(document.getElementById('delete-expense-form'), 'Delete Expense', 'Are you sure you want to delete this expense? This cannot be undone.', 'Delete', 'danger');
            });
        </script>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const categoryInput = document.getElementById('{{ form.category.vars.id }}');
    const stockReceiptField = document.getElementById('stock-receipt-field');

    function toggleStockReceipt() {
        if (categoryInput && stockReceiptField) {
            const dropdown = categoryInput.closest('[data-controller="select-dropdown"]');
            const labelEl = dropdown ? dropdown.querySelector('[data-select-dropdown-target="label"]') : null;
            const selectedText = labelEl ? labelEl.textContent.toLowerCase() : '';
            const isRestocking = selectedText.includes('restock');
            stockReceiptField.style.display = isRestocking ? 'block' : 'none';
        }
    }

    if (categoryInput) {
        categoryInput.addEventListener('change', toggleStockReceipt);
        toggleStockReceipt();
    }
});
</script>
{% endblock %}