{% extends 'admin/layout.html.twig' %}
{% block title %}{{ is_new ? 'New' : 'Edit' }} Account - KitscoApp{% endblock %}
{% block page_title %}{{ is_new ? 'New Account' : 'Edit: ' ~ account.name }}{% endblock %}

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

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

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>{{ form_row(form.name) }}</div>
            <div>{{ form_row(form.code) }}</div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
            {# Account Type dropdown #}
            <div>
                {% set type_options = [] %}
                {% for choice in form.type.vars.choices %}
                    {% set type_options = type_options|merge([{value: choice.value, label: choice.label}]) %}
                {% endfor %}
                {% include 'components/_select_dropdown.html.twig' with {
                    id: form.type.vars.id,
                    name: form.type.vars.full_name,
                    value: form.type.vars.value,
                    label: 'Account Type',
                    options: type_options,
                    placeholder: 'Select type...',
                    required: true
                } %}
                {% do form.type.setRendered %}
            </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
                } %}
                {% do form.currency.setRendered %}
            </div>
        </div>

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

        <div class="px-4 py-3 mt-4 bg-gray-50 rounded-lg border border-gray-200">
            <p class="text-xs text-gray-500 uppercase tracking-wider mb-3">Bank Details (Optional)</p>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>{{ form_row(form.bankName) }}</div>
                <div>{{ form_row(form.accountNumber) }}</div>
            </div>
        </div>

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

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
            <div class="flex items-end pb-1">{{ form_row(form.isActive) }}</div>
            <div class="flex items-end pb-1">{{ form_row(form.isDefault) }}</div>
        </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-account">
                <i class="bi bi-trash"></i> Delete
            </button>
            {% else %}
            <div></div>
            {% endif %}
            <div class="flex gap-3">
                <a href="{{ path('admin_account_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-account-form" action="{{ path('admin_account_delete', {id: account.id}) }}" method="POST" class="hidden">
            <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ account.id) }}">
        </form>
        <script>
            document.querySelector('.js-delete-account')?.addEventListener('click', function() {
                window.confirmDialog?.confirmForm(document.getElementById('delete-account-form'), 'Delete Account', 'Are you sure you want to delete this account? This cannot be undone.', 'Delete', 'danger');
            });
        </script>
        {% endif %}
    </div>
</div>
{% endblock %}