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

{% block content %}
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden max-w-4xl">
    <div class="px-6 py-4 border-b border-gray-100">
        <h3 class="font-semibold text-gray-800 text-sm"><i class="bi bi-person mr-2"></i>Customer 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.contactPerson) }}</div>
            <div>{{ form_row(form.contactEmail) }}</div>
            <div>{{ form_row(form.phone) }}</div>
        </div>

        <hr class="my-6 border-gray-200">
        <h4 class="text-sm font-semibold text-gray-700 mb-4"><i class="bi bi-geo-alt mr-2"></i>Address</h4>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>{{ form_row(form.poBox) }}</div>
            <div>{{ form_row(form.city) }}</div>
            <div>{{ form_row(form.country) }}</div>
        </div>
        <div class="mt-4">{{ form_row(form.address) }}</div>

        <hr class="my-6 border-gray-200">
        <div>{{ form_row(form.notes) }}</div>

        <div class="flex justify-end gap-3 pt-6">
            <a href="{{ path('admin_customer_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>
        {{ form_end(form) }}
    </div>
</div>
{% endblock %}