{% extends 'admin/layout.html.twig' %}
{% block title %}Settings - KitscoApp{% endblock %}
{% block page_title %}Company Settings{% endblock %}

{% block stylesheets %}
{{ parent() }}
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet">
<style>
    .ql-container { font-size: 0.875rem; }
    .ql-editor { min-height: 100px; }
    .ql-toolbar { border-radius: 0.5rem 0.5rem 0 0; }
    .ql-container { border-radius: 0 0 0.5rem 0.5rem; }
</style>
{% endblock %}

{% block content %}
{% if company %}
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-5 py-3 border-b border-gray-100 flex justify-between items-center">
            <h3 class="font-semibold text-gray-800 text-sm"><i class="bi bi-building mr-2"></i>Company Information</h3>
            <button type="button" onclick="openModal('company-modal')" class="text-gray-400 hover:text-kitsco-accent transition-colors">
                <i class="bi bi-pencil"></i>
            </button>
        </div>
        <div class="p-5">
            <dl class="space-y-3 text-sm">
                <div class="flex"><dt class="w-32 text-gray-400 shrink-0">Name</dt><dd class="font-semibold text-gray-800">{{ company.name }}</dd></div>
                <div class="flex"><dt class="w-32 text-gray-400 shrink-0">Address</dt><dd class="text-gray-700">{{ company.formattedAddress }}</dd></div>
                <div class="flex"><dt class="w-32 text-gray-400 shrink-0">Email</dt><dd><a href="mailto:{{ company.email }}" class="text-kitsco-accent hover:underline">{{ company.email }}</a></dd></div>
                <div class="flex"><dt class="w-32 text-gray-400 shrink-0">Phone</dt><dd class="text-gray-700">{{ company.phone }}</dd></div>
            </dl>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-5 py-3 border-b border-gray-100 flex justify-between items-center">
            <h3 class="font-semibold text-gray-800 text-sm"><i class="bi bi-bank mr-2"></i>Bank Details</h3>
            <button type="button" onclick="openModal('bank-modal')" class="text-gray-400 hover:text-kitsco-accent transition-colors">
                <i class="bi bi-pencil"></i>
            </button>
        </div>
        <div class="p-5">
            <dl class="space-y-3 text-sm">
                <div class="flex"><dt class="w-32 text-gray-400 shrink-0">Bank</dt><dd class="font-semibold text-gray-800">{{ company.bankName }}</dd></div>
                <div class="flex"><dt class="w-32 text-gray-400 shrink-0">Account Name</dt><dd class="text-gray-700">{{ company.bankAccountName }}</dd></div>
                <div class="flex"><dt class="w-32 text-gray-400 shrink-0">Account #</dt><dd><code class="bg-gray-100 px-2 py-0.5 rounded text-sm">{{ company.bankAccountNumber }}</code></dd></div>
            </dl>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-5 py-3 border-b border-gray-100 flex justify-between items-center">
            <h3 class="font-semibold text-gray-800 text-sm"><i class="bi bi-receipt mr-2"></i>Invoice Settings</h3>
            <button type="button" onclick="openModal('invoice-modal')" class="text-gray-400 hover:text-kitsco-accent transition-colors">
                <i class="bi bi-pencil"></i>
            </button>
        </div>
        <div class="p-5">
            <dl class="space-y-3 text-sm">
                <div class="flex"><dt class="w-32 text-gray-400 shrink-0">Next Invoice #</dt><dd><span class="bg-kitsco-accent text-white px-2 py-0.5 rounded-full text-xs font-medium">{{ company.nextInvoiceNumber }}</span></dd></div>
                <div class="flex"><dt class="w-32 text-gray-400 shrink-0">Currency</dt><dd class="text-gray-700">{{ company.defaultCurrency ?? 'Not set' }}</dd></div>
            </dl>

            <hr class="border-gray-100 my-5">
            <p class="text-xs text-gray-400 uppercase tracking-wide mb-3">Default Invoice Terms</p>
            {% if company.defaultInvoiceTerms %}
                <div class="text-sm text-gray-700 prose prose-sm max-w-none">{{ company.defaultInvoiceTerms|raw }}</div>
            {% else %}
                <p class="text-sm text-gray-400 italic">No default terms set</p>
            {% endif %}
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-5 py-3 border-b border-gray-100 flex justify-between items-center">
            <h3 class="font-semibold text-gray-800 text-sm"><i class="bi bi-image mr-2"></i>Branding</h3>
            <button type="button" onclick="openModal('branding-modal')" class="text-gray-400 hover:text-kitsco-accent transition-colors">
                <i class="bi bi-pencil"></i>
            </button>
        </div>
        <div class="p-5 space-y-4">
            <div>
                <p class="text-xs text-gray-400 uppercase tracking-wide mb-2">Company Logo</p>
                {% if company.logoPath %}
                    <img src="{{ asset('uploads/' ~ company.logoPath) }}" alt="Company Logo" class="h-16 border border-gray-200 rounded-lg p-2">
                {% else %}
                    <div class="border border-gray-200 border-dashed rounded-lg p-4 text-gray-400 flex items-center gap-2">
                        <i class="bi bi-image text-xl"></i>
                        <span class="text-sm">No logo uploaded</span>
                    </div>
                {% endif %}
            </div>
            <hr class="border-gray-100">
            <div>
                <p class="text-xs text-gray-400 uppercase tracking-wide mb-2">Company Stamp</p>
                {% if company.stampPath %}
                    <img src="{{ asset('uploads/' ~ company.stampPath) }}" alt="Company Stamp" class="h-16 border border-gray-200 rounded-lg p-2">
                {% else %}
                    <div class="border border-gray-200 border-dashed rounded-lg p-4 text-gray-400 flex items-center gap-2">
                        <i class="bi bi-stamp text-xl"></i>
                        <span class="text-sm">No stamp uploaded</span>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Branding Modal -->
<div id="branding-modal" class="fixed inset-0 z-50 hidden">
    <div class="absolute inset-0 bg-black/50" onclick="closeModal('branding-modal')"></div>
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-xl shadow-xl w-full max-w-md">
        <div class="px-5 py-4 border-b border-gray-100 flex justify-between items-center">
            <h3 class="font-semibold text-gray-800"><i class="bi bi-image mr-2"></i>Edit Branding</h3>
            <button type="button" onclick="closeModal('branding-modal')" class="text-gray-400 hover:text-gray-600">
                <i class="bi bi-x-lg"></i>
            </button>
        </div>
        <div class="p-5 space-y-5">
            <div>
                <label class="mb-2 block">Company Logo</label>
                {% if company.logoPath %}
                    <img src="{{ asset('uploads/' ~ company.logoPath) }}" alt="Current Logo" class="h-12 border border-gray-200 rounded-lg p-1 mb-3">
                {% endif %}
                <form method="post" action="{{ path('admin_settings_upload_logo') }}" enctype="multipart/form-data" class="flex items-center gap-2">
                    <input type="file" name="logo" accept="image/*" required class="flex-1 text-sm text-gray-500 file:mr-2 file:py-1.5 file:px-3 file:rounded-lg file:border file:border-gray-300 file:text-sm file:font-medium file:bg-white file:text-gray-700 hover:file:bg-gray-50">
                    <button type="submit" class="px-3 py-1.5 bg-kitsco-accent text-white rounded-lg text-sm font-medium hover:bg-kitsco-dark transition-colors shrink-0">Upload</button>
                </form>
            </div>
            <hr class="border-gray-100">
            <div>
                <label class="mb-2 block">Company Stamp</label>
                {% if company.stampPath %}
                    <img src="{{ asset('uploads/' ~ company.stampPath) }}" alt="Current Stamp" class="h-12 border border-gray-200 rounded-lg p-1 mb-3">
                {% endif %}
                <form method="post" action="{{ path('admin_settings_upload_stamp') }}" enctype="multipart/form-data" class="flex items-center gap-2">
                    <input type="file" name="stamp" accept="image/*" required class="flex-1 text-sm text-gray-500 file:mr-2 file:py-1.5 file:px-3 file:rounded-lg file:border file:border-gray-300 file:text-sm file:font-medium file:bg-white file:text-gray-700 hover:file:bg-gray-50">
                    <button type="submit" class="px-3 py-1.5 bg-kitsco-accent text-white rounded-lg text-sm font-medium hover:bg-kitsco-dark transition-colors shrink-0">Upload</button>
                </form>
            </div>
        </div>
        <div class="px-5 py-4 border-t border-gray-100 flex justify-end">
            <button type="button" onclick="closeModal('branding-modal')" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors text-sm font-medium">Done</button>
        </div>
    </div>
</div>

<!-- Company Info Modal -->
<div id="company-modal" class="fixed inset-0 z-50 hidden">
    <div class="absolute inset-0 bg-black/50" onclick="closeModal('company-modal')"></div>
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-xl shadow-xl w-full max-w-md">
        <div class="px-5 py-4 border-b border-gray-100 flex justify-between items-center">
            <h3 class="font-semibold text-gray-800"><i class="bi bi-building mr-2"></i>Edit Company Information</h3>
            <button type="button" onclick="closeModal('company-modal')" class="text-gray-400 hover:text-gray-600">
                <i class="bi bi-x-lg"></i>
            </button>
        </div>
        <form method="post" action="{{ path('admin_settings_company_info') }}">
            <div class="p-5 space-y-4">
                <div>
                    <label>Company Name</label>
                    <input type="text" name="name" value="{{ company.name }}" required>
                </div>
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label>P.O. Box</label>
                        <input type="text" name="po_box" value="{{ company.poBox }}" placeholder="e.g. 1689">
                    </div>
                    <div>
                        <label>City</label>
                        <input type="text" name="city" value="{{ company.city }}" placeholder="e.g. Arusha">
                    </div>
                </div>
                <div>
                    <label>Email</label>
                    <input type="email" name="email" value="{{ company.email }}">
                </div>
                <div>
                    <label>Phone</label>
                    <input type="text" name="phone" value="{{ company.phone }}">
                </div>
            </div>
            <div class="px-5 py-4 border-t border-gray-100 flex justify-end gap-3">
                <button type="button" onclick="closeModal('company-modal')" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors text-sm font-medium">Cancel</button>
                <button type="submit" class="px-4 py-2 bg-kitsco-accent text-white rounded-lg hover:bg-kitsco-dark transition-colors text-sm font-medium">
                    <i class="bi bi-check-lg mr-1"></i>Save Changes
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Bank Details Modal -->
<div id="bank-modal" class="fixed inset-0 z-50 hidden">
    <div class="absolute inset-0 bg-black/50" onclick="closeModal('bank-modal')"></div>
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-xl shadow-xl w-full max-w-md">
        <div class="px-5 py-4 border-b border-gray-100 flex justify-between items-center">
            <h3 class="font-semibold text-gray-800"><i class="bi bi-bank mr-2"></i>Edit Bank Details</h3>
            <button type="button" onclick="closeModal('bank-modal')" class="text-gray-400 hover:text-gray-600">
                <i class="bi bi-x-lg"></i>
            </button>
        </div>
        <form method="post" action="{{ path('admin_settings_bank_details') }}">
            <div class="p-5 space-y-4">
                <div>
                    <label>Bank Name</label>
                    <input type="text" name="bank_name" value="{{ company.bankName }}" placeholder="e.g. CRDB">
                </div>
                <div>
                    <label>Account Name</label>
                    <input type="text" name="bank_account_name" value="{{ company.bankAccountName }}">
                </div>
                <div>
                    <label>Account Number</label>
                    <input type="text" name="bank_account_number" value="{{ company.bankAccountNumber }}">
                </div>
            </div>
            <div class="px-5 py-4 border-t border-gray-100 flex justify-end gap-3">
                <button type="button" onclick="closeModal('bank-modal')" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors text-sm font-medium">Cancel</button>
                <button type="submit" class="px-4 py-2 bg-kitsco-accent text-white rounded-lg hover:bg-kitsco-dark transition-colors text-sm font-medium">
                    <i class="bi bi-check-lg mr-1"></i>Save Changes
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Invoice Settings Modal -->
<div id="invoice-modal" class="fixed inset-0 z-50 hidden">
    <div class="absolute inset-0 bg-black/50" onclick="closeModal('invoice-modal')"></div>
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-xl shadow-xl w-full max-w-lg max-h-[90vh] overflow-y-auto">
        <div class="px-5 py-4 border-b border-gray-100 flex justify-between items-center sticky top-0 bg-white">
            <h3 class="font-semibold text-gray-800"><i class="bi bi-receipt mr-2"></i>Edit Invoice Settings</h3>
            <button type="button" onclick="closeModal('invoice-modal')" class="text-gray-400 hover:text-gray-600">
                <i class="bi bi-x-lg"></i>
            </button>
        </div>
        <form method="post" action="{{ path('admin_settings_invoice_defaults') }}" id="invoice-defaults-form">
            <div class="p-5 space-y-4">
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label>Next Invoice #</label>
                        <input type="number" name="next_invoice_number" value="{{ company.nextInvoiceNumber }}" min="1" required>
                    </div>
                    <div>
                        {% set currency_options = [] %}
                        {% for currency in currencies %}
                            {% set currency_options = currency_options|merge([{value: currency.id, label: currency.code ~ ' (' ~ currency.symbol ~ ')'}]) %}
                        {% endfor %}
                        {% include 'components/_select_dropdown.html.twig' with {
                            id: 'default_currency',
                            name: 'default_currency',
                            value: company.defaultCurrency ? company.defaultCurrency.id : '',
                            label: 'Default Currency',
                            options: currency_options,
                            placeholder: '-- Select --'
                        } %}
                    </div>
                </div>
                <hr class="border-gray-100">
                <div>
                    <label>Default Invoice Terms</label>
                    <p class="text-xs text-gray-500 mb-2">Auto-populates when creating new invoices</p>
                    <div id="default-terms-editor">{{ company.defaultInvoiceTerms|raw }}</div>
                    <input type="hidden" name="default_invoice_terms" id="default_invoice_terms">
                </div>
            </div>
            <div class="px-5 py-4 border-t border-gray-100 flex justify-end gap-3 sticky bottom-0 bg-white">
                <button type="button" onclick="closeModal('invoice-modal')" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors text-sm font-medium">Cancel</button>
                <button type="submit" class="px-4 py-2 bg-kitsco-accent text-white rounded-lg hover:bg-kitsco-dark transition-colors text-sm font-medium">
                    <i class="bi bi-check-lg mr-1"></i>Save Changes
                </button>
            </div>
        </form>
    </div>
</div>
{% else %}
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-16 text-center">
    <div class="text-gray-400">
        <i class="bi bi-gear text-4xl"></i>
        <p class="mt-3 font-medium text-gray-500">Settings not configured</p>
        <p class="text-sm text-gray-400 mt-1">Company settings have not been set up yet.</p>
    </div>
</div>
{% endif %}
{% endblock %}

{% block javascripts %}
{{ parent() }}
{% if company %}
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
<script>
let termsQuill = null;

function openModal(id) {
    document.getElementById(id).classList.remove('hidden');
    document.body.style.overflow = 'hidden';

    // Initialize Quill when invoice modal opens (can't init in hidden element)
    if (id === 'invoice-modal' && !termsQuill) {
        setTimeout(function() {
            termsQuill = new Quill('#default-terms-editor', {
                theme: 'snow',
                modules: {
                    toolbar: [['bold', 'italic', 'underline'], [{ 'list': 'ordered'}, { 'list': 'bullet' }]]
                }
            });
            const termsInput = document.getElementById('default_invoice_terms');
            termsInput.value = termsQuill.root.innerHTML;
            termsQuill.on('text-change', function() {
                termsInput.value = termsQuill.root.innerHTML;
            });
        }, 50);
    }
}

function closeModal(id) {
    document.getElementById(id).classList.add('hidden');
    document.body.style.overflow = '';
}

document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        document.querySelectorAll('[id$="-modal"]:not(.hidden)').forEach(m => closeModal(m.id));
    }
});
</script>
{% endif %}
{% endblock %}