<div id="toast" class="fixed top-5 right-5 bg-green-500 text-white py-2 px-4 rounded-lg shadow-md z-50" style="display: none; transition: opacity 0.5s ease;"></div>

<div class="container mx-auto p-4">
    <div class="flex justify-between items-center mb-4">
        <h1 class="text-2xl font-bold"><?= e($title) ?></h1>
        <a href="<?= BASE_URL ?>/customer" class="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600">Voltar para a Lista</a>
    </div>

    <div class="bg-white p-6 rounded-lg shadow-md">
        <form id="customer-form">
            <!-- Hidden fields for ID and CSRF token -->
            <input type="hidden" name="id" id="customer-id" value="<?= e($customer->id ?? '') ?>">

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700">Nome</label>
                    <input type="text" id="name" name="name" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" value="<?= e($customer->name ?? '') ?>">
                </div>
                <div>
                    <label for="cpf" class="block text-sm font-medium text-gray-700">CPF</label>
                    <input type="text" id="cpf" name="cpf" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="123.456.789-00" value="<?= e($customer->cpf ?? '') ?>" <?= isset($customer->id) ? 'disabled' : '' ?>>
                </div>
                <div>
                    <label for="phone" class="block text-sm font-medium text-gray-700">Telefone</label>
                    <input type="text" id="phone" name="phone" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" value="<?= e($customer->phone ?? '') ?>">
                </div>
                <div>
                    <label for="credit_limit" class="block text-sm font-medium text-gray-700">Limite de Crédito</label>
                    <input type="number" id="credit_limit" name="credit_limit" step="0.01" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" value="<?= e($customer->credit_limit ?? '') ?>">
                </div>
                <div class="md:col-span-2">
                    <label for="address" class="block text-sm font-medium text-gray-700">Endereço</label>
                    <textarea id="address" name="address" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"><?= e($customer->address ?? '') ?></textarea>
                </div>
            </div>

            <div class="flex justify-end mt-4">
                <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">Salvar</button>
            </div>
        </form>
    </div>
</div>

<script>
// Passa as variáveis do PHP para o arquivo JavaScript externo
window.customerFormConfig = {
    apiUrl: '<?= BASE_URL ?>/customer',
    base_url: '<?= BASE_URL ?>',
    csrfToken: '<?= e($csrf_token ?? '') ?>',
    customerId: '<?= e($customer->id ?? '') ?>'
};
</script>
<script src="<?= BASE_URL ?>/assets/js/customer/form.js"></script>