<div class="max-w-2xl mx-auto bg-white rounded-xl shadow-sm border border-gray-100 p-6">
    <h3 class="text-lg font-semibold text-gray-800 mb-6"><?= isset($server) ? 'Editar Servidor' : 'Novo Servidor' ?>
    </h3>



    <form action="<?= isset($server) ? '/admin/servers/update/' . $server['id'] : '/admin/servers/store' ?>"
        method="POST">
        <div class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Cliente</label>
                <select name="client_id"
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
                    required>
                    <option value="">Selecione um cliente...</option>
                    <?php foreach ($clients as $client): ?>
                        <option value="<?= $client['id'] ?>" <?= (isset($server) && $server['client_id'] == $client['id']) ? 'selected' : '' ?>>
                            <?= htmlspecialchars($client['name']) ?> (<?= htmlspecialchars($client['asn']) ?>)
                        </option>
                    <?php endforeach; ?>
                </select>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Nome do Servidor</label>
                <input type="text" name="name" value="<?= $server['name'] ?? '' ?>"
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
                    required>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">IP v4</label>
                    <input type="text" name="ip_v4" value="<?= $server['ip_v4'] ?? '' ?>"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
                        required placeholder="0.0.0.0">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">IP v6 (Opcional)</label>
                    <input type="text" name="ip_v6" value="<?= $server['ip_v6'] ?? '' ?>"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
                        placeholder="::1">
                </div>
            </div>

            <?php if (isset($server)): ?>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
                    <select name="status"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent">
                        <option value="active" <?= $server['status'] == 'active' ? 'selected' : '' ?>>Ativo</option>
                        <option value="inactive" <?= $server['status'] == 'inactive' ? 'selected' : '' ?>>Inativo</option>
                    </select>
                </div>

                <div class="col-span-1 md:col-span-2 border-t border-gray-100 pt-4 mt-2">
                    <h4 class="text-sm font-semibold text-gray-900 mb-4">Integração do Agente</h4>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Serial Key</label>
                            <div class="flex">
                                <input type="text" value="<?= $server['serial_key'] ?>" readonly
                                    class="w-full px-4 py-2 bg-gray-50 border border-gray-300 rounded-l-lg text-gray-500 font-mono text-sm">
                                <button type="button"
                                    onclick="navigator.clipboard.writeText('<?= $server['serial_key'] ?>'); window.notify('success', 'Sucesso', 'Key copiada!');"
                                    class="px-3 py-2 bg-gray-100 border border-l-0 border-gray-300 rounded-r-lg hover:bg-gray-200 text-gray-600">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3">
                                        </path>
                                    </svg>
                                </button>
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Machine ID Vinculado</label>
                            <?php if (!empty($server['machine_id'])): ?>
                                <div class="flex items-center space-x-2">
                                    <input type="text" value="<?= $server['machine_id'] ?>" readonly
                                        class="w-full px-4 py-2 bg-gray-50 border border-gray-300 rounded-lg text-gray-500 font-mono text-sm">
                                    <a href="/admin/servers/reset-machine/<?= $server['id'] ?>"
                                        onclick="return confirm('Tem certeza? Isso permitirá que um novo servidor utilize esta Serial Key.')"
                                        class="px-4 py-2 bg-red-100 text-red-700 rounded-lg hover:bg-red-200 text-sm whitespace-nowrap">
                                        Desvincular
                                    </a>
                                </div>
                            <?php else: ?>
                                <div class="px-4 py-2 bg-yellow-50 border border-yellow-100 rounded-lg text-yellow-700 text-sm">
                                    Nenhuma máquina vinculada. Aguardando conexão.
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            <?php endif; ?>
        </div>

        <div class="mt-6 flex justify-end space-x-3">
            <a href="/admin/servers"
                class="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors">Cancelar</a>
            <button type="submit"
                class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors">
                <?= isset($server) ? 'Salvar Alterações' : 'Criar Servidor' ?>
            </button>
        </div>
    </form>
</div>