{% extends "layout/app.twig" %}
{% block page_title_block %}{{ __(page_title_key, page_title_params | default({})) }}{% endblock %}

{% block content %}
<div class="flex justify-between items-center mb-6">
    <a href="{{ BASE_URL }}{{ routeParser.urlFor('admin.clients.index') }}" class="text-blue-600 hover:text-blue-800 inline-flex items-center">
        <i class="fas fa-arrow-left mr-2"></i> {{ __('link.back_to_clients') }}
    </a>
</div>
{% include 'partials/flash_messages.twig' %}

<div class="bg-white shadow-md rounded-lg p-6 md:p-8">
    <form action="{{ form_action }}" method="POST">
        {% if is_edit %}<input type="hidden" name="_METHOD" value="PUT">{% endif %}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label for="name" class="form-label">{{ __('label.full_name_company_name') }}*</label>
                <input type="text" name="name" id="name" value="{{ submitted_data.name | default('') }}" required class="form-input {% if errors.name %}border-red-500{% endif %}">
                {% if errors.name %}<p class="form-error">{{ errors.name }}</p>{% endif %}
            </div>
            <div>
                <label for="cpf_cnpj" class="form-label">{{ __('label.cpf_cnpj') }}*</label>
                <input type="text" name="cpf_cnpj" id="cpf_cnpj" value="{{ submitted_data.cpf_cnpj | default('') }}" required class="form-input cpf-cnpj-mask {% if errors.cpf_cnpj %}border-red-500{% endif %}">
                {% if errors.cpf_cnpj %}<p class="form-error">{{ errors.cpf_cnpj }}</p>{% endif %}
            </div>
            <div>
                <label for="type" class="form-label">{{ __('label.person_type') }}*</label>
                <select name="type" id="type" required class="form-select {% if errors.type %}border-red-500{% endif %}">
                    <option value="fisica" {{ (submitted_data.type | default('fisica') == 'fisica') ? 'selected' : '' }}>{{ __('option.person_type_individual') }}</option>
                    <option value="juridica" {{ (submitted_data.type | default('') == 'juridica') ? 'selected' : '' }}>{{ __('option.person_type_legal') }}</option>
                </select>
                {% if errors.type %}<p class="form-error">{{ errors.type }}</p>{% endif %}
            </div>
            <div>
                <label for="email" class="form-label">{{ __('label.email') }}*</label>
                <input type="email" name="email" id="email" value="{{ submitted_data.email | default('') }}" required class="form-input {% if errors.email %}border-red-500{% endif %}">
                {% if errors.email %}<p class="form-error">{{ errors.email }}</p>{% endif %}
            </div>
            <div>
                <label for="phone" class="form-label">{{ __('label.phone') }}</label>
                <input type="text" name="phone" id="phone" value="{{ submitted_data.phone | default('') }}" class="form-input phone-mask">
            </div>
            <div>
                <label for="zip" class="form-label">{{ __('label.zip_code') }}</label>
                <input type="text" name="zip" id="zip" value="{{ submitted_data.zip | default('') }}" class="form-input cep-mask {% if errors.zip %}border-red-500{% endif %}">
                 {% if errors.zip %}<p class="form-error">{{ errors.zip }}</p>{% endif %}
            </div>
            <div class="md:col-span-2">
                <label for="address" class="form-label">{{ __('label.address_street') }}</label>
                <input type="text" name="address" id="address" value="{{ submitted_data.address | default('') }}" class="form-input">
            </div>
            <div>
                <label for="city" class="form-label">{{ __('label.city') }}</label>
                <input type="text" name="city" id="city" value="{{ submitted_data.city | default('') }}" class="form-input">
            </div>
            <div>
                <label for="state" class="form-label">{{ __('label.state_uf') }}</label>
                <input type="text" name="state" id="state" value="{{ submitted_data.state | default('') }}" maxlength="2" class="form-input {% if errors.state %}border-red-500{% endif %}">
                {% if errors.state %}<p class="form-error">{{ errors.state }}</p>{% endif %}
            </div>
             <div class="md:col-span-2">
                <label for="notes" class="form-label">{{ __('label.notes_observations') }}</label>
                <textarea name="notes" id="notes" rows="3" class="form-textarea">{{ submitted_data.notes | default('') }}</textarea>
            </div>
        </div>
        <div class="mt-8 pt-5 border-t border-gray-200 flex justify-end">
            <a href="{{ BASE_URL }}{{ routeParser.urlFor('admin.clients.index') }}" class="btn-secondary mr-3">{{ __('button.cancel') }}</a>
            <button type="submit" class="btn-primary">{{ is_edit ? __('button.save_changes') : __('button.create_client') }}</button>
        </div>
    </form>
</div>
<style>.form-label{display:block; font-size:0.875rem; font-weight:500; color:#374151; margin-bottom:0.25rem;} .form-input, .form-select, .form-textarea {display: block; width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #D1D5DB; border-radius: 0.375rem;} .form-input:focus, .form-select:focus, .form-textarea:focus {outline: 2px solid transparent; outline-offset: 2px; border-color: #4F46E5; box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.5);} .form-error{color: #EF4444; font-size: 0.75rem; margin-top: 0.25rem;} .btn-primary {padding: 0.5rem 1rem; background-color: #4F46E5; color: white; font-weight: 500; border-radius: 0.375rem;} .btn-primary:hover{background-color: #4338CA;} .btn-secondary{padding: 0.5rem 1rem; background-color: #E5E7EB; color: #1F2937; border-radius: 0.375rem; border:1px solid #D1D5DB;}</style>
{% endblock %}